<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"; import { Indicator } from 'mint-ui'; 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 }); } else { Indicator.open(); 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}) => { Indicator.close(); 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>