choiceContraceptives.vue

<template>
    <div class="choiceContraceptives">
        <mt-header title="选择药具">
            <div  slot="left" @click="goBack">
                <mt-button icon="back"></mt-button>
            </div>
        </mt-header>
        <div class="content-list"  v-if="!noDataShow">
             <div
                     class="list-data"
                     v-infinite-scroll="loadMore"
                     :infinite-scroll-disabled="loading"
                     infinite-scroll-distance="10"
             >
            <div class="content-item ui-flex justify-center center"
                 v-for="item in detailInfo"
                 :key="item.id"
            >
                <div class="check-btn">
                    <input type="radio" id="1" :value="JSON.stringify(item)" v-model="checkedMedical">
                </div>
                <div class="cell">
                    <img :src="item.imgUrl"/>
                </div>
                <div class="tradeInfo">
                    <div class="tradeName">{{item.medicineName}}</div>
                    <div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：{{item.stockNum}}</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：{{item.specs}}</label><div style="clear: both"></div></div>
                    <div>有效期至：{{item.expireDate}}</div>
                    <div>生产厂家：{{item.factoryName}}</div>
                </div>

                <div style="clear: both"></div>
            </div>
             </div>
        </div>
        <div class="sub-badReaction" v-if="!noDataShow">
            <mt-button type="primary" @click="receiveContraceptives">确认领取</mt-button>
        </div>
        <div v-if="noDataShow">
            <div class="success-img">
                <img src="../assets/img/noHave.png"/>
                <div class="tips">
                    当前网点缺货，请前往其他网点
                </div>
            </div>
            <div class="backHome">
                <mt-button type="primary" @click="backHome">返回首页</mt-button>
            </div>
        </div>


    </div>
</template>

<script>
    import {addMedicalRecord, getStockInfo} from "../utils/api";
    import {callMobile} from "../utils/common";
    import { Toast } from 'mint-ui';
    import {receiveWay} from "../utils/dictionaries";
    export default {
        name: "choiceContraceptives",
        data(){
            return{
                routerDetail:{},
                loading: false,
                checkedMedical:'',
                detailInfo: [],
                loadText:'加载中...',
                noDataShow: false,
                param: {
                    pageIndex: 0,
                    pageSize: 10
                }
            }
        },
        methods:{
            getStockListInfo(callBack) {
                this.routerDetail = JSON.parse(this.$route.query.info)
                let par = {
                    relationId: this.routerDetail,
                    ...this.param
                }
                getStockInfo(par).then(({data = {}}) => {
                    const {dataList = []} = data.data
                    this.detailInfo = this.detailInfo.concat(dataList)
                    if (this.detailInfo.length == 0) {
                        this.noDataShow = true
                    } else {
                        this.noDataShow = false
                    }
                    if (data.data && data.data.length < this.param.pageSize) {
                        this.loadText = '暂无更多数据'
                    } else {
                        this.loading = false
                    }
                    callBack && callBack()
                }).finally(() => {
                    this.loading = false
                })
            },
            loadMore() {
                this.loading = true
                this.param.pageIndex += 1
                this.getStockListInfo()
            },
            backHome(){
                callMobile("goIndex", {});
                },
            goBack() {
              window.history.go(-1)
            },
            receiveContraceptives(){
                if(this.checkedMedical == '') {
                    return  Toast({
                        message: '请先选择药具！',
                        duration: 2000
                    });
                }
                let pars = JSON.parse(this.checkedMedical)
                let info = JSON.parse(window.sessionStorage.getItem('mobileTokenIno'))
                const {phone = '', userId =''} = info
                const {id, ...other } = pars
                let par = {
                    residentId: userId,
                    telephone: phone,
                    networkId: this.routerDetail,
                    number: 1,
                    receiveWay: receiveWay[0].id,
                    ...other
                }
                addMedicalRecord(par).then(({data}) => {
                    if (data.code == 'SUCCESS') {
                        this.$router.push("/receiveSuccess");
                    } else {
                        Toast({
                            message: '系统异常，请联系客服！',
                            duration: 2000
                        });
                    }
                })

            }
        },
        beforeDestroy() {
            this.detailInfo = []
        }
    }
</script>

<style scoped>
    .tips{
        color: #747971;
        font-size: 14px;
        padding: 10px 30px 20px;
    }
    .success-img{
        text-align: center;
        padding-top: 100px;
    }
    .sub-badReaction {
        position: fixed;
        z-index: 2;
        left: calc(50% - 155px);
        bottom: 20px;
    }

    .sub-badReaction .mint-button {
        width: 311px;
        height: 44px;
        background: linear-gradient(242deg, #dff9b9 -27%, #1bd09f 85%);
        border-radius: 22px;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    }

    .backHome {
        position: fixed;
        z-index: 2;
        left: calc(50% - 155px);
    }

    .backHome .mint-button {
        width: 311px;
        height: 44px;
        background: linear-gradient(242deg, #dff9b9 -27%, #1bd09f 85%);
        border-radius: 22px;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .choiceContraceptives{
        width: 100%;
        height: 100%;
    }
    .content-list{
        width: 100%;
        height: calc(100% - 108px);
    }
    .content-item{
        padding-top: 10px;
        border-top: 1px solid #F5F6F8;
        border-bottom: 5px solid #F5F6F8;
        height: 150px;
    }
    .content-item img{
        width: 85px;
        max-height: 100px;
        float: left;
        display: inline-block;
        vertical-align: middle;
    }
    .tradeInfo{
        float: left;
        width:calc(100% - 130px);
        padding-left: 10px;
    }
    .tradeName{
        font-size: 14px;
    }
    .ui-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
        box-sizing: border-box
    }

    .ui-flex.justify-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .ui-flex.center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
    .check-btn{
        float: right;
        width: 40px;
        height: 100%;
    }
    .check-btn input{
        margin-top: 60px;
        margin-left: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        font-size: 14px;
        position: relative;
    }

    .check-btn input[type=radio]:after {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        content: " ";
        background-color: #fff;
        color: #fff;
        display: inline-block;
        visibility: visible;
        border: 1px solid #999F97;
        padding: 0px 3px;
        border-radius: 50%;
    }

    .check-btn input[type=radio]:checked:before {
        text-align: center;
        content: "✓";
        display: block;
        position: relative;
        background-color: #00CA9D;
        width: 20px;
        height: 20px;
        top: 0px;
        left: 0px;
        color: #fff;
        font-weight: 400;
        border-radius: 50%;
        z-index: 1;
    }
    .list-data{
        /*height: calc(100% - 40px);*/
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
</style>