123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <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>
|