You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

197 lines
4.4 KiB

<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" @click="telPhone(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>
</view>
</template>
<script>
import Loading from "@/components/Loading";
import { storeListApi } from "@/api/store";
import { isWeixin,tel } 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", "goName"]),
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: {
showMaoLocation(data) {
this.$yrouter.push({
path: "/pages/map/index",
query: data
});
},
// 选中门店
checked(e) {
if (this.goName === "orders") {
this.$store.commit("get_store", e);
this.$yrouter.back();
}
},
//拨打电话
telPhone(phoneNumber) {
uni.makePhoneCall({
phoneNumber: phoneNumber,
fail() {
console.log("取消拨打");
}
});
},
// 获取门店列表数据
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 => {
uni.showToast({
title: err.msg,
icon: "none",
duration: 2000,
});
});
}
}
};
</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>