<template> <div class="provideUnit"> <!-- 头部 --> <van-nav-bar fixed title="选择叶酸发放单位"> <template #left> <img src="../../assets/images/back.png" alt="" @click="handleBack"/> </template> <template #right> <div @click="handleRecord">申请记录</div> </template> </van-nav-bar> <!-- 搜索框 --> <van-search @blur="handleInput" style="width: 88%;display: inline-block" @clear="handleCancel" v-model="seachInfo.unitName" placeholder="请输入搜索关键词"/> <van-icon size="33" style="float: right;margin-right: 8px;" name="scan" @click="openQrCode"/> <!-- 申请部分 --> <template v-if="unitList.length != 0"> <div class="flex_block" v-for="item in unitList" :key="item.id" @click="handleClick(item)"> <div class="flex_block_title"> <span class="top">{{ item.unitName }}</span> <span class="bottom">地址:{{ (item.areaFullName ? item.areaFullName : "") + (item.unitAddress ? item.unitAddress : "") }}</span> </div> <div class="flex_block_btn">申请</div> </div> </template> <van-empty v-else description="暂无发放单位"/> </div> </template> <script> import {getProvideUnit, getProvideUnitById} from '@/axios/api'; import {callMobile, isIOSWebKit, isEmpty} from '@/utils/common'; import {Dialog} from 'vant'; export default { components: {}, data() { return { seachInfo: { unitName: '云南省', }, unitList: [], scrollPosition: 0, } }, created() { Dialog.alert({ title: '温馨提示', message: '备孕妇女从孕前3个月,坚持每天服用0.4mg叶酸或含叶酸的复合维生素至少到怀孕满3个月,可预防胎儿神经管缺陷的发生,还能减少唇腭裂、先心病、早产等风险。特殊情况妇女如肥胖、糖尿病等要加量。', confirmButtonText: "好的,知道了" }).then(() => { }); let vm = this; window['init'] = (result) => { vm.initUserInfo(result); }; window['qrcodeContent'] = (result) => { vm.scanQRCallBack(result); }; }, mounted() { if (process.env.NODE_ENV == "dev") { let userInfo = { account: '18487125843', token: '7de354fd8be1484cacbc41e96fe88d7e', userId: '11133351501171512', }; window.sessionStorage.setItem('userInfo', JSON.stringify(userInfo)); } else { callMobile('init', {}); } this.getProvideUnitList(); }, activated() { window.scrollTo(0, this.scrollPosition); }, methods: { handleInput(val) { this.getProvideUnitList(); }, handleCancel() { this.getProvideUnitList(); }, openQrCode() { callMobile("qrcode", {}); }, getProvideUnitList() { this.$toast.open(); let unitName = this.seachInfo.unitName; if (isEmpty(unitName)) { unitName = undefined; } getProvideUnit(unitName).then(res => { if (res.code === 'SUCCESS') { if (res.data) { this.unitList = res.data; } else { this.unitList = []; } } }).finally(() => { this.$toast.close(); }); }, // 申请 handleClick(val) { let areaFullName = val.areaFullName ? val.areaFullName : ""; let address = val.unitAddress ? val.unitAddress : ""; let unitAddress = areaFullName + address; let applyUnitInfo = { unitId: val.id, unitName: val.unitName, unitAddress: unitAddress, }; window.sessionStorage.setItem('applyUnitInfo', JSON.stringify(applyUnitInfo)); this.$router.push('questionAnswer'); }, // 申请记录 handleRecord() { this.$router.push('applyRecord'); }, handleBack() { callMobile('goIndex', {}); }, scanQRCallBack(unitId) { if (!unitId) { this.$toast.success('无效的二维码'); return; } getProvideUnitById(unitId).then(res => { if (res.code === 'SUCCESS') { if (res.data) { let areaFullName = res.data.areaFullName ? res.data.areaFullName : ""; let unitAddress = res.data.unitAddress ? res.data.unitAddress : ""; let applyUnitInfo = { unitId: res.data.id, unitName: res.data.unitName, unitAddress: areaFullName + unitAddress, }; window.sessionStorage.setItem('applyUnitInfo', JSON.stringify(applyUnitInfo)); this.$router.push('questionAnswer'); } else { this.$toast.success('无效的二维码'); } } }) }, initUserInfo(val) { let ios = isIOSWebKit(); if (ios) { window.sessionStorage.setItem('userInfo', val); } else { window.sessionStorage.setItem('userInfo', JSON.stringify(val)); } }, }, beforeRouteLeave(to, from, next) { this.scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; next(); }, } </script> <style lang="less" scoped> .provideUnit { padding-top: 52px; .flex_block { display: flex; justify-content: space-between; align-items: center; margin: 24px 24px 24px 16px; .flex_block_title { display: flex; flex-direction: column; width: 90%; .top { color: #262626; font-size: 14px; } .bottom { color: #595959; font-size: 12px; margin-top: 7px; } } .flex_block_btn { width: 48px; height: 25px; border: 1px solid #F5222D; border-radius: 24px; font-size: 12px; color: #F5222D; display: flex; align-items: center; justify-content: center; margin-left: 8px; } } } </style>