|
@@ -1,86 +1,138 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view>
|
|
|
- <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom"
|
|
|
- @scroll="scroll">
|
|
|
- <view class="">
|
|
|
-
|
|
|
+ <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom" @scroll="scroll">
|
|
|
+ <view class="list" @click="intoDetail" v-for="item in storeList" :key="item.id">
|
|
|
+ <image class="list-img" :src="item.icon?item.icon:'../../static/img/mddef.jpg'"></image>
|
|
|
+ <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.time}} 营业</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
+ <view class="list-right">
|
|
|
+ <view :class="item.statusClass">{{getStoreStatus(item)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
+ import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
|
|
export default {
|
|
|
- components: {},
|
|
|
+ components: {
|
|
|
+ uniIcons
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- storeList: [],
|
|
|
+ storeList: [{
|
|
|
+ id: 1,
|
|
|
+ icon: '',
|
|
|
+ addrDetail: '陕西省西安市未央区北二环贞观路',
|
|
|
+ name: '贞观路站',
|
|
|
+ distance: 0.1,
|
|
|
+ time: '8:00-22:00',
|
|
|
+ status: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ icon: '',
|
|
|
+ addrDetail: '陕西省西安市未央区北二环贞观路',
|
|
|
+ name: '贞观路站',
|
|
|
+ distance: 0.1,
|
|
|
+ time: '8:00-22:00',
|
|
|
+ status: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ icon: '',
|
|
|
+ addrDetail: '陕西省西安市未央区北二环贞观路',
|
|
|
+ name: '贞观路站',
|
|
|
+ distance: 0.1,
|
|
|
+ time: '8:00-22:00',
|
|
|
+ status: 2
|
|
|
+ }
|
|
|
+ ],
|
|
|
currentPosition: {
|
|
|
- lat: '0',
|
|
|
- lng: '0'
|
|
|
+ lat: '0',
|
|
|
+ lng: '0'
|
|
|
},
|
|
|
pageNo: 1,
|
|
|
pageSize: 10
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- // 获取当前经纬度
|
|
|
- let _this = this
|
|
|
- uni.getLocation({
|
|
|
- type: 'wgs84', // 默认wgs84
|
|
|
- success: function(res) {
|
|
|
- _this.currentPosition.lat = res.latitude;
|
|
|
- _this.currentPosition.lng = res.longitude;
|
|
|
- _this.gpsCompletion = true;
|
|
|
- // 查询门店信息
|
|
|
- // _this.getStoresList()
|
|
|
- },
|
|
|
- fail: function(res) {
|
|
|
- console.log(res)
|
|
|
- // 查询门店信息
|
|
|
- // _this.getStoresList()
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
+ onLoad() {
|
|
|
+ // 获取当前经纬度
|
|
|
+ let _this = this
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'wgs84', // 默认wgs84
|
|
|
+ success: function(res) {
|
|
|
+ _this.currentPosition.lat = res.latitude;
|
|
|
+ _this.currentPosition.lng = res.longitude;
|
|
|
+ _this.gpsCompletion = true;
|
|
|
+ // 查询门店信息
|
|
|
+ // _this.getStoresList()
|
|
|
+ },
|
|
|
+ fail: function(res) {
|
|
|
+ console.log(res)
|
|
|
+ // 查询门店信息
|
|
|
+ // _this.getStoresList()
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
- methods:{
|
|
|
- getStoresList () {
|
|
|
+
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ getStoresList() {
|
|
|
uni.showLoading({
|
|
|
title: '正在加载...'
|
|
|
})
|
|
|
let lat = this.currentPosition.lat
|
|
|
let lng = this.currentPosition.lng
|
|
|
- getStoresList({pageNo:this.pageNo,pageSize:this.pageSize,lat:lat,lng:lng}).then(res => {
|
|
|
+ getStoresList({
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ lat: lat,
|
|
|
+ lng: lng
|
|
|
+ }).then(res => {
|
|
|
console.log(res)
|
|
|
- if(res.status == 200){
|
|
|
+ if (res.status == 200) {
|
|
|
let list = res.data.list
|
|
|
- if(list&&list.length){
|
|
|
+ if (list && list.length) {
|
|
|
list.map(item => {
|
|
|
- if (item.addrDetail.indexOf("省")>0 && item.addrDetail.indexOf("市")>0 && item.addrDetail.indexOf("区")>0){
|
|
|
+ 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){
|
|
|
+ if (item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") > 0) {
|
|
|
item.addrDetail = item.addrProvinceName + item.addrDetail
|
|
|
- } else if (item.addrDetail.indexOf("区")>0) {
|
|
|
+ } 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.distance ? Math.round(item.distance/1000) : ''
|
|
|
+ item.distance = item.distance ? Math.round(item.distance / 1000) : ''
|
|
|
item.star = getStarNum(item.level)
|
|
|
})
|
|
|
this.storeList = this.storeList.concat(list)
|
|
|
- }else{
|
|
|
- if(this.pageNo!=1){
|
|
|
+ } else {
|
|
|
+ if (this.pageNo != 1) {
|
|
|
uni.showToast({
|
|
|
title: '已经是最后一页'
|
|
|
})
|
|
@@ -91,15 +143,111 @@
|
|
|
uni.hideLoading()
|
|
|
})
|
|
|
},
|
|
|
+ // 获取网点营业状态
|
|
|
+ getStoreStatus(item) {
|
|
|
+ switch (item.status) {
|
|
|
+ case 0:
|
|
|
+ item.statusClass = 'store-off'
|
|
|
+ return '暂停营业'
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ item.statusClass = 'store-on'
|
|
|
+ return '正常营业'
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ item.statusClass = 'store-waite'
|
|
|
+ return '即将开业'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 进入网点详情
|
|
|
+ intoDetail (item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/store/storeDetail?id=${item.id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
// 到达底部
|
|
|
- reachBottom () {
|
|
|
-
|
|
|
+ reachBottom() {
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
+ .content {
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .scroll-Y {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ .list-img {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-info {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-right: 10rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .location {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ .left {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ color: #999;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-right {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .store-off {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-on {
|
|
|
+ color: #51cc51;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-waite {
|
|
|
+ color: #ffec19;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|