gaoxs
5 years ago
18 changed files with 396 additions and 116 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,210 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="storeBox" ref="container"> |
||||||
|
<view |
||||||
|
class="storeBox-box" |
||||||
|
v-for="(item, index) in storeList" |
||||||
|
:key="index" |
||||||
|
@click="checked(item)" |
||||||
|
> |
||||||
|
<view class="store-img"> |
||||||
|
<img :src="item.image" lazy-load="true" /> |
||||||
|
</view> |
||||||
|
<view class="store-cent-left"> |
||||||
|
<text class="store-name">{{ item.name }}</text> |
||||||
|
<text class="store-address line1">{{ item.address }}</text> |
||||||
|
</view> |
||||||
|
<view class="row-right"> |
||||||
|
<view> |
||||||
|
<a class="store-phone" :href="'tel:' + item.phone"> |
||||||
|
<text class="iconfont icon-dadianhua01"></text> |
||||||
|
</a> |
||||||
|
</view> |
||||||
|
<view class="store-distance" @click="showMaoLocation(item)"> |
||||||
|
<text class="addressTxt" v-if="item.distance">距离{{ item.distance }}千米</text> |
||||||
|
<text class="addressTxt" v-else>查看地图</text> |
||||||
|
<text class="iconfont icon-youjian"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<Loading :loaded="loaded" :loading="loading"></Loading> |
||||||
|
</view> |
||||||
|
<!-- <div> |
||||||
|
<iframe |
||||||
|
v-if="locationShow && !isWeixin" |
||||||
|
ref="geoPage" |
||||||
|
width="0" |
||||||
|
height="0" |
||||||
|
frameborder="0" |
||||||
|
style="display:none;" |
||||||
|
scrolling="no" |
||||||
|
:src=" |
||||||
|
'https://apis.map.qq.com/tools/geolocation?key=' + |
||||||
|
mapKey + |
||||||
|
'&referer=myapp' |
||||||
|
" |
||||||
|
></iframe> |
||||||
|
</div> |
||||||
|
<div class="geoPage" v-if="mapShow"> |
||||||
|
<iframe |
||||||
|
width="100%" |
||||||
|
height="100%" |
||||||
|
frameborder="0" |
||||||
|
scrolling="no" |
||||||
|
:src=" |
||||||
|
'https://apis.map.qq.com/uri/v1/geocoder?coord=' + |
||||||
|
system_store.latitude + |
||||||
|
',' + |
||||||
|
system_store.longitude + |
||||||
|
'&referer=' + |
||||||
|
mapKey |
||||||
|
" |
||||||
|
></iframe> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Loading from "@/components/Loading"; |
||||||
|
import { storeListApi } from "@/api/store"; |
||||||
|
import { isWeixin } from "@/utils/index"; |
||||||
|
import { wechatEvevt, wxShowLocation } from "@/libs/wechat"; |
||||||
|
import { mapGetters } from "vuex"; |
||||||
|
import cookie from "@/utils/store/cookie"; |
||||||
|
const LONGITUDE = "user_longitude"; |
||||||
|
const LATITUDE = "user_latitude"; |
||||||
|
const MAPKEY = "mapKey"; |
||||||
|
export default { |
||||||
|
name: "storeList", |
||||||
|
components: { Loading }, |
||||||
|
computed: mapGetters(["location"]), |
||||||
|
data() { |
||||||
|
return { |
||||||
|
page: 1, |
||||||
|
limit: 20, |
||||||
|
loaded: false, |
||||||
|
loading: false, |
||||||
|
storeList: [], |
||||||
|
mapShow: false, |
||||||
|
system_store: {}, |
||||||
|
mapKey: cookie.get(MAPKEY), |
||||||
|
locationShow: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
!this.loading && this.getOrderList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 选中门店 |
||||||
|
checked(e) { |
||||||
|
if (this.goName === "orders") { |
||||||
|
this.$router.go(-1); //返回上一层 |
||||||
|
this.$store.commit("GET_STORE", e); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取门店列表数据 |
||||||
|
getList: function() { |
||||||
|
if (this.loading || this.loaded) return; |
||||||
|
this.loading = true; |
||||||
|
let data = { |
||||||
|
latitude: this.location.latitude, //纬度 |
||||||
|
longitude: this.location.longitude, //经度 |
||||||
|
page: this.page, |
||||||
|
limit: this.limit |
||||||
|
}; |
||||||
|
storeListApi(data) |
||||||
|
.then(res => { |
||||||
|
this.loading = false; |
||||||
|
this.loaded = res.data.list.length < this.limit; |
||||||
|
this.storeList.push.apply(this.storeList, res.data.list); |
||||||
|
this.page = this.page + 1; |
||||||
|
this.mapKey = res.data.mapKey; |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.$dialog.error(err.msg); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
.geoPage { |
||||||
|
position: fixed; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
top: 0; |
||||||
|
z-index: 10000; |
||||||
|
} |
||||||
|
.storeBox { |
||||||
|
background-color: #fff; |
||||||
|
padding: 0 0.3*100rpx; |
||||||
|
} |
||||||
|
.storeBox-box { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0.23*100rpx 0; |
||||||
|
justify-content: space-between; |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
} |
||||||
|
.store-cent { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
.store-cent-left { |
||||||
|
width: 45%; |
||||||
|
text{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
.store-img { |
||||||
|
width: 1.2*100rpx; |
||||||
|
height: 1.2*100rpx; |
||||||
|
border-radius: 0.06*100rpx; |
||||||
|
margin-right: 0.22*100rpx; |
||||||
|
} |
||||||
|
.store-img img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.store-name { |
||||||
|
color: #282828; |
||||||
|
font-size: 0.3*100rpx; |
||||||
|
margin-bottom: 0.22*100rpx; |
||||||
|
font-weight: 800; |
||||||
|
} |
||||||
|
.store-address { |
||||||
|
color: #666666; |
||||||
|
font-size: 0.24*100rpx; |
||||||
|
} |
||||||
|
.store-phone { |
||||||
|
width: 0.5*100rpx; |
||||||
|
height: 0.5*100rpx; |
||||||
|
color: #fff; |
||||||
|
border-radius: 50%; |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
line-height: 0.5*100rpx; |
||||||
|
background-color: #e83323; |
||||||
|
margin-bottom: 0.22*100rpx; |
||||||
|
} |
||||||
|
.store-distance { |
||||||
|
font-size: 0.22*100rpx; |
||||||
|
color: #e83323; |
||||||
|
} |
||||||
|
.iconfont { |
||||||
|
font-size: 0.2*100rpx; |
||||||
|
} |
||||||
|
.row-right { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-end; |
||||||
|
width: 33.5%; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue