circulation_ancientCoins_new/pages/home/index.vue

<template>
    <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="search-wrapper flex" >
            <div class="search-main" @tap="getSearch">
                <view class="flex search-main-left">
                    <image class="icon" :src="cssUrl + 'prescriptSearch.svg'" mode="widthFix"></image>
                    <view>搜索钱币名称</view>
                </view>
                <view class="search-text">搜索</view>
            </div>
        </view>
        <view class="patientTab">
            <view :class="'notActive ft32' + (status == '1' ? ' active PfScMedium' : '')" @tap="changeWaitType('1')">
                库存列表</view>
            <view :class="'notActive ft32' + (status == '2' ? ' active PfScMedium' : '')" @tap="changeWaitType('2')">
                出库列表
            </view>
        </view>

        <scroll-view class="patient-type-tab1" @scrolltolower="onScroll" scroll-y>
            <view class="bed-wait-container">
                <ListWrap :bedWaitList="bedWaitList" :type="status"/>
            </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 class="qrcode_wrap">
            <img :src="cssUrl + 'qrcode_get.png'" alt="" @tap="scanQrcode">
        </view>

        <PopUpCommon ref="coinsPopup" :showClose="true" zIndex="top">
            <view class="popWrap" ref="popWrap">
                <view class="pop-title PfScMedium">{{ titleType[scanCodeDetail.ancient_coin_status] }}</view>
                <view class="content">
                    <CoinsDetail v-if="isShowCoinModal" :scanCodeDetail="scanCodeDetail" ref="coinsDetail"/>
                </view>
                <view class="qrcode_wrap page-bottom-btn-container flex-between">
                    <view class="bottom-btn cancel" @click="onCancel">取消</view>
                    <view class="bottom-btn PfScMedium primary" @click="onConfirm">{{
                        btnText[scanCodeDetail.ancient_coin_status] }}</view>
                </view>
            </view>
        </PopUpCommon>
    </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 ListWrap from '@/components/listWrap.vue'

export default {
    options: { styleIsolation: "shared" },
    components: {
        PopUpCommon,
        PageBottomBtn,
        ListBox,
        ListWrap,
        CoinsDetail
    },
    data() {
        return {
            cssUrl: this.cssUrl1,
            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: {
               "coin_name": "机制光绪通宝", 
                "rating_code": "1310684212", 
                "rating_department": "北京公博二部", 
                "grade": "AU 58", 
                "size": "24.0*1.1mm,3.5g", 
                "year": "1889", 
                "format": "库平一钱满汉广", 
                "rating_agency_id": "1", 
                "ancient_coin_status": "1", 
                "ancient_coin_status_desc": "已入库", 
                "buying_price": "188.00", 
                "price": "0.00" 
            },
            loading: false,
            noMore: false,
            page: 1,
            pagesize: 10,
            name:'',
            isShowCoinModal:false

        }
    },
    onLoad(option) {
        // var token = uni.getStorageSync("u_token");
        // 初始化情求
        this.getCoinsList()
        // this.isShowCoinModal = true;
        // this.$refs.coinsPopup.openPop();
    },
    onPullDownRefresh() {
        this.bedWaitList = [];
        this.page = 1;
        this.getCoinsList()
    },
    onReachBottom() {
        if (!this.noMore && !this.loading) {
            this.page++;
            this.getCoinsList();
        }
    },
  
    methods: {
        open(){
            this.isShowCoinModal = true;
            this.$refs.coinsPopup.openPop();
        },

        getSearch() {
            let url = `/pages/searchCoinName/index`
            this.$nav.navToPath(url)
        },
        onScroll() {
            if (!this.noMore && !this.loading) {
                this.page++;
                this.getCoinsList();
            }
        },
        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?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({
                scanType: ['barCode', 'qrCode'],
                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 => {
                if (data == -1) return
                this.scanCodeDetail = data;
                this.$set(this, 'scanCodeDetail', data)
                setTimeout(() => {
                    this.isShowCoinModal = true
                    this.$refs.coinsPopup.openPop();
                    setTimeout(()=>{
                        this.$refs.coinsDetail.isFocus = true
                    },700)
                }, 500)
            }).catch(res => {
            });
        },
        async onConfirm() {
            // console.log(this.$refs.coinsDetail.price2,'coinsDetail====-');
            let price2 = this.$refs.coinsDetail.price2
            // 确认入库
            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,
                price:price2
            }, 'POST').then(data => {
                // 根据当前列表状态-切换状态
                this.$refs.coinsDetail.price2 = ''
                this.$refs.coinsDetail.isFocus = false
                // 未入库、已出库
                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()
                this.isShowCoinModal = false
                uni.pageScrollTo({
                scrollTop: 0,
                duration: 300  // 滚动动画时长，单位ms
                })
            }).catch(res => {
                this.loading = false;
            });



        },
        onCancel() {
            // this.scrollToTop()
            this.$refs.coinsPopup.closePop()
            this.isShowCoinModal = false
        },
        scrollToTop() {
            this.$nextTick(() => {
                const node = this.$refs.popWrap;
                if (node && node.$el) {
                node.$el.scrollTop = 0;
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.flex-between {
    display: flex;
    justify-content: space-between;
}

.popWrap {
    display: flex;
    flex-direction: column;
    max-height: 70%;

    .content {
        flex: 1;
    }
}

.search-wrapper {
    // margin-top: 20rpx;
    // border-bottom: 2rpx solid #e6e6e6;
    padding:0 24rpx 36rpx 24rpx;
    background: #fff;

    .search-main {
        width: 100%;
        border-radius: 6px;
        background: #F7F7F7;
        box-sizing: border-box;
        display: flex;
        height: 70rpx;
        align-items: center;
        padding: 0rpx 20rpx;
        justify-content: space-between;
    }
    .search-main-left{
        align-items: center;
        gap: 12rpx;
        color: #999999;
    }

    .input-box {
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        color: #000000;
        text-align: left;
        flex: 1;
        padding-left: 12rpx;
    }

    .icon {
        width: 34rpx;
        display: block;
    }
}

.bottom-btn {
    height: 92rpx;
    width: 100%;
    margin: 16rpx 0;
    line-height: 92rpx;
    text-align: center;

    font-size: 32rpx;
    border-radius: 16rpx;
    border: none;
    padding: 0;

    &.primary {
        background-color: #39D067;
        color: #FFFFFF;
    }

    &.cancel {
        background-color: #F1F2F3;
        color: #616266;
    }

    &::after {
        border: none;
    }

    &.disabled {
        background-color: #CCCCCC;
        opacity: 0.7;
    }
}

.page-bottom-btn-container {
    box-sizing: border-box;
    background-color: #FFFFFF;
    padding: 0rpx 54rpx;
    box-shadow: 0px -2rpx 6rpx 0rpx rgba(181, 181, 181, 0.1319);
    z-index: 9;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    column-gap: 50rpx;
}

.home-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .amountWrap {
        gap: 16rpx;
        padding: 36rpx 24rpx 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: 18rpx;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 12rpx;
            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;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
        // 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;
        margin-top: 6rpx;
        font-size: 40rpx;
    }

    .outbound {
        color: #4DC56D;
    }

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

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

    }

    .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 {
        max-height: 850rpx;
        margin-bottom: 145rpx;
        overflow-y: auto;
    }

    .pop-title {
        height: 40rpx;
        text-align: center;
        padding: 42rpx 0 22rpx 0;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        text-align: center;
        letter-spacing: 2rpx;
        color: #000000;
        background: #fff;
        // 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>