circulation_ancientCoins_new/pages/home/index.vue

<template>
    <!-- <view style="height:100vh">
        <Mescroll @resultEvent="getList" ref="scroll" rqurl="/api/getlist">
            <template v-slot:list> -->
                <view class="home-wrap">
                    <view class="amountWrap flex">
                        <view class="amountLeft flex">
                            <view class="amountName">库存件数</view>
                            <view class="remain">{{ storage_count || 0 }}</view>
                        </view>
                        <view class="amountRight flex">
                            <view class="amountName">出库件数</view>
                            <view class="outbound">{{ delivery_count || 0 }}</view>
                        </view>
                    </view>
                    <view class="patientTab">
                        <view :class="'notActive ft32' + (status == '1' ? ' active PfScMedium' : '')"
                            @click="changeWaitType('1')">
                            库存列表</view>
                        <view :class="'notActive ft32' + (status == '2' ? ' active PfScMedium' : '')"
                            @click="changeWaitType('2')">
                            出库列表
                        </view>
                    </view>

                    <!-- <view class="patient-type-tab1"> -->
                        <scroll-view class="patient-type-tab1"  @scrolltolower="onScroll" scroll-y>
                            <view class="bed-wait-container">
                                <view class="bed-wait-list">
                                    <view class="bed-wait-item" v-for="(item, index) in bedWaitList" :key="index"
                                        @click="lookDetail(item)">

                                        <view class="bed-wait-info">

                                            <view class="bed-wait-name PfScMedium">{{ item.coin_name }}</view>
                                            <view class="bed-sex">{{ item.year }}年</view>

                                            <view :class="'bed-desc'">
                                                {{ item.rating_code }}
                                            </view>
                                        </view>

                                        <view class="bed-wait-time flex-between">
                                            <view class="bed-visit-time">{{ item.operate_time }}</view>
                                            <view class="bed-checkin-time">{{ item.rating_department }}</view>
                                        </view>

                                    </view>

                                </view>
                            </view>
                            <view v-if="loading" class="loading-text">加载中...</view>
                            <view v-if="noMore" class="no-more-text">没有更多数据了</view>
                            <view class="page-padding" v-show="bedWaitList && bedWaitList.length && bedWaitList.length > 0">
                            </view>
                        </scroll-view>
                        <!-- </view> -->

                    <view class="qrcode_wrap">
                        <img :src="cssUrl + 'qrcode_get.png'" alt="" @click="scanQrcode">
                    </view>
                    <!-- <button @click="scanQrcode">哈哈哈</button> -->

                    <PopUpCommon ref="coinsPopup" :showClose="true" zIndex="top">
                        <view class="popWrap">
                            <view class="pop-title PfScMedium">{{ titleType[scanCodeDetail.ancient_coin_status] }}</view>
                            <view class="content">
                                <CoinsDetail :scanCodeDetail="scanCodeDetail" />
                            </view>
                            <PageBottomBtn :text="btnText[scanCodeDetail.ancient_coin_status]" cancelTxt="取消" @click="onConfirm"
                                @cancelClick="onCancel" :show-cancel="true" />
                        </view>
                    </PopUpCommon>
                </view>
            <!-- </template>
        </Mescroll>
    </view> -->

</template>
<script>
import ListBox from '@/components/listBox.vue';
import PopUpCommon from '@/components/common/popUpCommon.vue';
import CoinsDetail from '../coinsDetail';
import PageBottomBtn from '@/components/pageBottomBtn.vue'
import Mescroll from '@/components/common/mescroll.vue'

export default {
    options: { styleIsolation: "shared" },
    components: {
        PopUpCommon,
        PageBottomBtn,
        Mescroll,
        ListBox,
        CoinsDetail
    },
    data() {
        return {
            cssUrl: this.cssUrl,
            status: '1',
            bedWaitList: [],
            titleType: {
                0: '扫码入库',
                '1': '扫码出库',
                '2': '出库信息',
            },
            btnText: {
                0: '入库',
                '1': '出库',
                '2': '再次入库',
            },
            detailItem: {
                name: '北京公博二部',
                num: '1310684212',
                count: 'AU 58',
                size: '24.0*1.1mm，3.5g',
                operate: '泅渡'
            },
            code: '',
            state: '',
            storage_count: '',
            delivery_count: '',
            scanCodeDetail: {
                ancient_coin_status: 0,
                ancient_coin_status_desc: "未入库",
                coin_name: "机制光绪通宝",
                format: "库平一钱满汉广",
                grade: "AU 58",
                rating_agency_id: "1",
                rating_code: "1310684212",
                rating_department: "北京公博二部",
                size: "24.0*1.1mm,3.5g",
                year: "1889"
            },
            loading:false,
            noMore:false,
            page:1,
            pagesize:7
            
        }
    },
    onLoad(option) {
        // var token = uni.getStorageSync("u_token");
        // 初始化情求
        this.getCoinsList()

        // this.$refs.coinsPopup.openPop();
    },
    onPullDownRefresh() {
        this.bedWaitList = [];
        this.page = 1;
        this.getCoinsList()
    },
    onReachBottom() {
        // debugger
        if (!this.noMore && !this.loading) {
            this.page++;
            this.getCoinsList();
        }
    },
    methods: {
        onScroll(){
            console.log(this.noMore,'000',this.loading,'this.loading==');
            if (!this.noMore && !this.loading) {
                this.page++;
                this.getCoinsList();
            }
        },
        getList(e){
            console.log(e,'=====eeee');
        },
        getCoinsList() {
            this.loading = true;
            // 获取列表信息
            this.$http.req('/api/getlist', { status: this.status, page: this.page, pagesize: this.pagesize}, 'POST').then(data => {
                uni.stopPullDownRefresh();
                this.loading = false;
                if ( data.list.length === 0 || data.length == 0 ) {
                    this.noMore = true;
                    uni.showToast({ title: '没有更多数据了', icon: 'none' });
                    return;
                }
                // 如果是第一页直接替换，否则追加
                if (this.page === 1) {
                    this.bedWaitList = data.list;
                } else {
                    this.bedWaitList = [...this.bedWaitList, ...data.list];
                }
                this.storage_count = data.storage_count;
                this.delivery_count = data.delivery_count;
            }).catch(res=>{
                this.loading = false;
            });
        },
        lookDetail(item) {
            uni.setStorageSync('detail',JSON.stringify(item))
            // let url = `/pages/coinsDetail/index`
            let url = `/pages/coinsDetail/index?id=${item.rating_code}`
            this.$nav.navToPath(url)
        },
        changeWaitType(type) {
            this.status = type;
            // 调用列表查询接口
            this.getCoinsList()
        },
        changeWaitType(type) {
            this.status = type;
            this.page = 1;
            this.bedWaitList = [];
            // 调用列表查询接口
            this.getCoinsList()
        },
        async scanQrcode() {
            // #ifdef MP-WEIXIN

            uni.scanCode({
                success: (res) => {
                    this.getScanQrcode(res.result)
                },
                complete(res) {
                    if (res.errMsg === 'scanCode:ok') {
                        console.log('扫码成功11:', res.result,this);
                    } else if (res.errMsg === 'scanCode:fail cancel') {
                        console.log('用户取消扫码');
                    } else {
                        uni.showToast({
                            title: '扫码失败' + JSON.stringify(res.errMsg),
                            icon: 'none'
                        })
                    }
                }
            })
            // #endif
        },
        getScanQrcode(result){
            this.$http.req('/api/get_scan_code_detail', {
                url:result
            }, 'POST').then(data => {
                console.log(data,'data===data');
                    this.scanCodeDetail = data;
                    this.$set(this,'scanCodeDetail',data)
                    setTimeout(()=>{
                        console.log(this.scanCodeDetail,'222');
                        this.$refs.coinsPopup.openPop();
                    },500)
            }).catch(res=>{
            });
        },
        async onConfirm() {
            // 确认入库
            let url = '/api/operate'//入库
            let operate = ''
            // 根据当前钱币状态，切换url 或者 参数信息
            let status = this.scanCodeDetail.ancient_coin_status;
            if(status ==0 || status == 2){
                operate = '1'
            }else{
                operate = '2'
            }
            // 确认出库
            this.$http.req(url, {  
                scan_code_detail:JSON.stringify(this.scanCodeDetail),
                operate: operate
            }, 'POST').then(data => {
                    // 根据当前列表状态-切换状态
                    // 未入库、已出库
                    if (status == 0 || status == '2') {
                        if (this.status != '1') this.status = '1'
                    } else {
                        if (this.status != '2') this.status = '2'
                    }
                    this.bedWaitList = [];
                    this.page = 1;
                    // 更新数据
                    this.getCoinsList()
                    this.$refs.coinsPopup.closePop()
            }).catch(res=>{
                this.loading = false;
            });

           

        },
        onCancel() {
            this.$refs.coinsPopup.closePop()
        },
    }
}
</script>
<style lang="scss" scoped>
.home-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .amountWrap {
        gap: 16rpx;
        padding: 36rpx 24rpx;
        box-sizing: border-box;
        background: #fff;

        .amountName {
            display: flex;
            align-items: center;
            gap: 12rpx;
            color: #666;
            font-size: 26rpx;
        }

        img {
            width: 20rpx;
            height: 32rpx;
        }

        .amountLeft,
        .amountRight {
            flex: 1;
            padding: 18px;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 12px;
            background: #F8FFF7;

            .add,
            .use {
                font-size: 40rpx;
            }
        }

        .amountLeft {
            background: #F0F7FD;
        }

    }

    .patientTab {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 120rpx;
        align-items: center;
        margin-top: 20rpx;
        padding: 0 62rpx;
        box-sizing: border-box;
        justify-content: space-between;
        background: white;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        box-shadow: 0px 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);

        .notActive {
            width: 269rpx;
            height: 100%;
            text-align: center;
            font-weight: 400;
            color: #666666;
            font-size: 32rpx;
            line-height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .wait-bed-num {
                padding: 0px 14rpx;
                box-sizing: border-box;
                width: auto;
                height: 38rpx;
                min-width: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 60rpx;
                background: #FFEBEB;
                font-size: 28rpx;
                color: #FF1818;
                margin-left: 10rpx;
            }
        }

        .active {
            font-weight: 500;
            color: #4DC56D;
            box-sizing: border-box;
            border-bottom: 4rpx solid #4DC56D;
        }
    }

    .remain,
    .outbound {
        font-weight: 500;
        color: #00A2E2;
        line-height: 56rpx;
        font-size: 40rpx;
    }

    .outbound {
        color: #FF7D17;
    }

    .patient-type-tab1 {
        height: 0;
        width: 100%;
        background: white;
        // overflow-y: auto;
        flex: 1;

        .bed-wait-container {
            padding: 0rpx 42rpx;
            background: white;
            box-sizing: border-box;
        }

        .bed-wait-item {
            padding: 36rpx 0rpx;
            border-bottom: 2rpx solid #F1F1F1;
            position: relative;
        }

        .bed-wait-info {
            display: flex;

            .bed-wait-name {
                font-size: 32rpx;
                color: #000000;
                margin-right: 24rpx;
            }

            .bed-visit-type-desc {
                padding: 0 18rpx;
                height: 40rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26rpx;
                line-height: normal;
                border-radius: 6rpx;
                margin-left: 24rpx;
                background: #F7FCFF;
                color: #007FD0;
                border: 1rpx solid #5FA1CB;

                &.ml-auto {
                    margin-left: auto;
                }
            }

            .bed-desc {
                color: #999999;
                font-size: 28rpx;
                margin-left: auto;

                &.active {
                    color: #4DC56D;
                }
            }

            .bed-sex,
            .bed-age {
                font-size: 28rpx;
                font-weight: normal;
                line-height: 44rpx;
                color: #242833;
            }

            .bed-age {
                margin-left: 24rpx;
            }
        }

        .bed-wait-time {
            display: flex;
            column-gap: 24rpx;
            margin-top: 16rpx;

            view {
                font-size: 24rpx;
                color: #999999;
            }
        }
    }

    .list-wrap {
        padding: 20rpx 18rpx;
    }

    .qrcode_wrap {
        // position: relative;
        // background: #fff;
        // height: 166rpx;
        // box-shadow: 0px -2rpx 116rpx 0px rgba(181, 181, 181, 0.26);

        background: #fff;
        height: 166rpx;
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        box-shadow: 0px -2rpx 116rpx 0px rgba(181, 181, 181, 0.26);
        
        img {
            width: 122rpx;
            height: 142rpx;
            position: absolute;
            top: -42rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .content {
        margin-bottom: 145rpx;
    }

    .pop-title {
        height: 40rpx;
        text-align: center;
        margin: 42rpx 0 22rpx 0;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        text-align: center;
        letter-spacing: 2rpx;
        color: #000000;
        // background: #F6F6F8;
    }

    .cancle-button {
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 92rpx;
        text-align: center;
        width: 100%;
        height: 92rpx;
        background: #F1F2F3;
        border-radius: 12rpx;
    }

    .page-padding{
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        width: 100%;
        height: 206rpx;
    }
    .loading-text, .no-more-text {
        text-align: center;
        padding: 20rpx;
        color: #999;
    }
}
</style>