<template> <div class="siteDetails"> <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh" :disabled="isRefreshDisable" > <mt-header title="网点详情" v-if="showNav()"> <div @click="goBack" slot="left"> <mt-button icon="back"></mt-button> </div> </mt-header> <div class="siteDetailInfo"> <div class="siteName">{{siteDetail.netName}}</div> <div> <label style="font-size: 15px">距离:{{siteDetail.distance}}km</label> <label style="margin-left: 20px;font-size: 15px">类型:{{siteDetail.netTypeName}}</label> </div> <div class="ui-flex justify-center center" style="line-height: 29px;margin-top: 5px"> <!-- @click="clickAddress"--> 地址:<label class="btns">{{siteDetail.netAddress}}</label> <!-- <div class="cell"> <img src="../assets/img/mark.png" style="width: 24px;height: 24px"/> </div>--> </div> <div class="ui-flex justify-center center" style="margin-top: 5px"> 联系电话:<label @click="clickPhone" class="btns"> <a :href="`tel:${siteDetail.netPhone}`">{{siteDetail.netPhone}}</a></label> <div class="cell"><img src="../assets/img/phone.png" style="width: 16px;height: 20px"/></div> </div> </div> <div style="padding:0 20px;font-size: 15px">该网点当前可领取的药具</div> <div class="content-list"> <div :infinite-scroll-disabled="loading" class="list-data" infinite-scroll-distance="10" v-infinite-scroll="loadMore" ref="sited" > <div :key="item.id" class="content-item ui-flex justify-center center" v-for="item in stockInfo" > <div class="cell"> <img :src="item.imgUrl" alt="" onerror="this.src='../assets/img/no_picture.jpg';this.onerror=null"/> </div> <div class="tradeInfo"> <div class="tradeName">{{item.medicineName}}</div> <div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量:{{item.unit}}</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格:{{item.specs}}</label> <div style="clear: both"></div> </div> <div style="margin-top: 5px">有效期至:{{item.expireDate}}</div> <div style="margin-top: 5px">生产厂家:{{item.factoryName}}</div> </div> <div style="clear: both"></div> </div> </div> </div> <div v-if="noDataShow"> <NoData></NoData> </div> </van-pull-refresh> </div> </template> <script> import {getStockInfo} from "../utils/api"; import NoData from "./component/noData"; import {Indicator} from 'mint-ui'; import {MessageBox} from 'mint-ui'; import no_picture from "../assets/img/no_picture.jpg" export default { name: "siteDetails", components: {NoData}, inject:['showNav'], data() { return { siteDetail: {}, loading: false, relationId: '', stockInfo: [], loadText: '加载中...', noDataShow: false, param: { pageIndex: 0, pageSize: 10 }, no_picture, isLoading: false, isRefreshDisable: false, scrollTop: 0 } }, watch: { scrollTop(newval) { if (newval> 0) { this.isRefreshDisable = true } else { this.isRefreshDisable = false } } }, mounted() { this.$nextTick(() => { const list = this.$refs.sited list.addEventListener('scroll', () => { this.scrollTop = list.scrollTop }) }) }, created() { if (!this.showNav()) { document.title = '网点详情' } /*发请求通过this.$route.query.id*/ this.siteDetail = JSON.parse(this.$route.query.info) this.relationId = this.siteDetail.id // this.getMedicalInfoList() }, methods: { //刷新 onRefresh() { this.isLoading = true this.loading = true this.param.pageIndex = 1 this.getMedicalInfoList() }, loadMore() { this.loading = true this.param.pageIndex += 1 this.getMedicalInfoList() }, getMedicalInfoList(callBack) { Indicator.open(); let par = { relationId: this.relationId, ...this.param } getStockInfo(par).then(({data}) => { const {dataList = []} = data.data if (this.isLoading) { //刷新时先赋空 this.stockInfo = [] } this.stockInfo = this.stockInfo.concat(dataList) if (this.stockInfo.length == 0) { this.noDataShow = true } else { this.noDataShow = false } if (data.data && data.data.length < this.param.pageSize) { this.loadText = '暂无更多数据' } else { this.loading = false } Indicator.close(); this.isLoading = false callBack && callBack() }).finally(() => { this.loading = false this.isLoading = false }) }, clickAddress() { let info = this.siteDetail // const {nowLocal = []} = info /* if (nowLocal.length > 0) { window.location.href = `https://uri.amap.com/navigation?from=${nowLocal[0]},${nowLocal[1]},我的位置&to=${info.netLongitude},${info.netLatitude},${info.netAddress}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0` } else {*/ window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0` /*}*/ // window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&callnative=1&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0` // window.location.href=`https://uri.amap.com/marker?position=${info.netLongitude}, ${info.netLatitude}&name=${info.netAddress}` // window.location.href = `http://api.map.baidu.com/marker?location=${info.netLatitude}, ${info.netLongitude}&title=终点'&content=${info.netAddress}&output=html&src=webapp.baidu.openAPIdemo` /* var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isAndroid) { // window.location.href=`https://uri.amap.com/marker?position=${info.netLongitude}, ${info.netLatitude}&name=${info.netAddress}`; window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&callnative=1&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1` //这个是安卓操作系统 // window.location.href="androidamap://viewMap?sourceApplication=amap&poiname="+info.netName+"&lat="+info.netLatitude+"&lon="+info.netLongitude+"&dev=0"; //判断是否切出浏览器 setTimeout(function(){ let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden if(typeof hidden =="undefined" || hidden ==false){ //应用宝下载地址 MessageBox('提示', '请下载高德地图进行导航') } }, 2500); } if (isIOS) { // window.location.href=`https://uri.amap.com/marker?position=${info.netLongitude}, ${info.netLatitude}&name=${info.netAddress}`; window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&callnative=1&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1` //这个是ios操作系统 // window.location.href="iosamap://viewMap?sourceApplication=amap&poiname="+info.netName+"&lat="+info.netLatitude+"&lon="+info.netLongitude+"&dev=0" //判断是否切出浏览器 setTimeout(function(){ let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden if(typeof hidden =="undefined" || hidden ==false){ //应用宝下载地址 MessageBox('提示', '请下载高德地图进行导航') } }, 2500); }*/ /* this.$router.push({path: '/navigation', query: {Lng: Lng, Lat: Lat}})*/ }, clickPhone() { console.log(456); }, goBack() { window.history.go(-1) }, getDistance(latFrom, lngFrom, latTo, lngTo) { var rad = function (d) {//计算角度 return d * Math.PI / 180.0; } var EARTH_RADIUS = 6378136.49; var radLatFrom = rad(latFrom); var radLatTo = rad(latTo); var a = radLatFrom - radLatTo; var b = rad(lngFrom) - rad(lngTo); var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2))); distance = distance * EARTH_RADIUS; distance = Math.round(distance * 10000) / 10000; return parseFloat(distance.toFixed(0)); }, }, beforeDestroy() { this.relationId = '' this.stockInfo = [] } } </script> <style scoped> .siteDetailInfo { font-size: 15px; padding: 10px 20px; border-top: 1px solid #F5F6F8; border-bottom: 5px solid #F5F6F8; } .siteName { font-weight: bold; font-size: 18px; margin-bottom: 10px; } .btns { color: #00CA9D; /*background-color: #FFFFFF;*/ border: 0px none; margin-top: 2px; margin-right: 5px; padding: 0; font-family: "宋体"; font-size: 15px; } .btns:focus { outline: none; } .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; -ms-flex-pack: center; } .ui-flex.center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .content-list { width: 100%; height: calc(100% - 185px); } .content-item { padding: 10px 10px 0 20px; border-bottom: 5px solid #F5F6F8; height: 150px; } .content-item:first-child { padding-top: 0; } .content-item img { width: 85px; max-height: 100px; float: left; display: inline-block; vertical-align: middle; } .tradeName { font-size: 14px; } .tradeInfo { float: left; width: calc(100% - 90px); padding-left: 10px; } .list-data { /*height: calc(100% - 40px);*/ max-height: calc(100vh - 200px); overflow-y: auto; } </style> <style lang="less"> .van-pull-refresh__track { height: 100vh!important; } </style>