<template> <view class="content"> <scroll-view scroll-y="true" class="scroll-Y"> <view class="list" @click="intoDetail(item)" v-for="item in storeList" :key="item.id"> <view class="list-imgs"> <u-image width="160rpx" height="160rpx" :border-radius="10" :src="item.icon?item.icon:'/static/img/mddef.jpg'"></u-image> </view> <view class="store-info"> <view class="name"> {{item.name}} </view> <view class="address"> {{item.addrDetail}} </view> <view class="location"> <view class="left"> <uni-icons class="icon" size="16" type="paperplane"></uni-icons> <text>{{item.distance}} km</text> </view> <view class="right"> <u-icon class="icon" size="32" name="clock"></u-icon> <text>{{item.beginTime}}-{{item.endTime}} 营业</text> </view> </view> </view> <view class="list-right"> <u-image width="110rpx" height="110rpx" mode="aspectFit" :src="getStoreStatus(item)"></u-image> <u-icon size="30" color="#999" name="arrow-right"></u-icon> </view> </view> <u-empty class="noData" :text="noDataText" img-width="120" v-if="storeList.length==0 && status!='loading'" mode="list"></u-empty> <view style="padding: 20upx;"> <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" /> </view> </scroll-view> </view> </template> <script> import uniIcons from "@/components/uni-icons/uni-icons.vue" import {getStoreList} from '@/api/store.js' export default { components: { uniIcons }, data() { return { noDataText: '暂无数据', status: 'loading', storeList: [], // 用户拒绝授权位置信息时默认展示青海西宁位置地图 currentPosition: { lat: '36.636193', lng: '101.760521' }, pageNo: 1, pageSize: 10, total: 0 } }, onShow() { }, onLoad() { // 获取当前经纬度 let _this = this uni.getLocation({ type: 'wgs84', // 默认wgs84 success: function(res) { _this.currentPosition.lat = res.latitude; _this.currentPosition.lng = res.longitude; // 查询门店信息 _this.getStoresList() }, fail: function(res) { console.log(res) // 查询门店信息 _this.getStoresList() }, }); }, computed: {}, methods: { getStoresList() { this.status = "loading" let lat = this.currentPosition.lat let lng = this.currentPosition.lng getStoreList({ lat: lat, lng: lng }).then(res => { console.log(res) uni.hideLoading() this.status = "loadmore" if (res.status == 200) { let list = res.data list.map(item => { if (item.addrDetail.indexOf("省") > 0 && item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") > 0) { item.addrDetail = item.addrDetail } else { if (item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") > 0) { item.addrDetail = item.addrProvinceName + item.addrDetail } else if (item.addrDetail.indexOf("区") > 0) { item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDetail } else { item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail } } item.distance = item.distanct && item.distanct.distance ? Math.round(item.distanct.distance / 1000) : '' }) this.storeList = this.storeList.concat(list) } else { this.storeList = [] this.noDataText = res.message } }) }, // 获取网点营业状态 营业状态 OPEN :营业 CLOSED:暂停营业 TO_BE_OPENED:即将开业 getStoreStatus(item) { let today = new Date().toLocaleDateString() // 获取今天日期 let beginTime = today + ' ' + item.beginTime let endTime = today + ' ' + item.endTime let beginTimeStamp = new Date(beginTime).getTime() // 获取开始时间戳 let endTimeStamp = new Date(endTime).getTime() // 获取结束时间戳 let nowTimeStamp = new Date().getTime() // 获取当前时间戳 // 结束时间小于开始时间时 为跨天 结束时间应加1天 endTimeStamp = endTimeStamp <=beginTimeStamp ? (endTimeStamp+24*60*60*1000) : endTimeStamp switch (item.businessStatus) { case 'CLOSED': return '/static/img/ztyy.jpg' break; case 'OPEN': // 根据当前时间判断目前是否在营业时间范围内 if (nowTimeStamp>=beginTimeStamp && nowTimeStamp<=endTimeStamp) { return '/static/img/yyz.jpg' } else { return '/static/img/ztyy.jpg' } break; case 'TO_BE_OPENED': return '/static/img/dky.jpg' break; default: break; } }, // 进入网点详情 intoDetail (item) { uni.navigateTo({ url: `/pages/store/storeDetail?id=${item.id}` }) }, } } </script> <style lang="scss" scoped> page{ height: 100%; } .content { padding: 0 20rpx; width: 100%; height: 100%; .scroll-Y { width: 100%; height: 100%; padding: 20rpx 0; .list { display: flex; border-bottom: 1px solid #eee; .store-info { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 20rpx; .name { font-size: 32rpx; color: #000; } .address{ font-size: 26rpx; padding: 10rpx 0; } .location { display: flex; align-items: center; font-size: 24rpx; .left { margin-right: 20rpx; } .icon { color: #999; margin-right: 5rpx; } } } .list-imgs{ padding: 20rpx 0; } .list-right { display: flex; justify-content: center; align-items: center; } } .u-empty.data-v-6938e513{ height: 90%; } } } </style>