157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<template>
|
||
<view class="merchantList">
|
||
<view class="merchantItem" v-for="(item, index ) in shopList" :key="index" :data-id="item.shop_id"
|
||
@click="headerNavClick">
|
||
<view class="merchantItem_left">
|
||
<image class="left_pic" :src="item.logo" mode="" />
|
||
</view>
|
||
<view class="merchantItem_left_msg">
|
||
<view class="merchantItem_left_msg_tit">{{item.shop_name}}</view>
|
||
<view class="merchantItem_left_msg_add">{{item.addr}}</view>
|
||
<!-- <view class="merchantItem_left_msg_msg">中国领先的高科技医疗设备研...</view> -->
|
||
<view class="merchantItem_left_msg_tag">{{item.tags}}</view>
|
||
</view>
|
||
<view class="merchantItem_right">
|
||
<view class="lat">{{item.distance ? item.distance + 'km' : '暂无定位'}}</view>
|
||
<view class="tel" @click.stop="call" :data-phone="item.tel">电话询价</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
apiArr
|
||
} from '../../../api/doorToDoor';
|
||
import {
|
||
picUrl,
|
||
request
|
||
} from '../../../utils';
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [], //商家列表
|
||
page_num: 1,
|
||
page_size: 10,
|
||
flag: false,
|
||
lat: 0,
|
||
log: 0,
|
||
ToArr: [],
|
||
shopList: [],
|
||
}
|
||
},
|
||
methods: {
|
||
async init() {
|
||
const res = await request(apiArr.getGoodsList, "POST", {
|
||
page_num: this.page_num,
|
||
page_size: this.page_size,
|
||
type: 2
|
||
});
|
||
if (res.list) {
|
||
let flag = false
|
||
if (res.list.length == this.page_size) {
|
||
flag = true
|
||
} else {
|
||
flag = false
|
||
}
|
||
const newRes = res.list.map(item => {
|
||
return {
|
||
...item,
|
||
photo: picUrl + item.photo,
|
||
logo: picUrl + item.logo,
|
||
}
|
||
});
|
||
let ToArr = this.formatCoordinates(res.list)
|
||
console.log('newRes', newRes);
|
||
this.list = this.list.concat(newRes || []);
|
||
this.flag = flag;
|
||
this.page_num = this.page_num + 1;
|
||
this.ToArr = ToArr;
|
||
this.caculate();
|
||
}
|
||
},
|
||
|
||
call(e) {
|
||
wx.makePhoneCall({
|
||
phoneNumber: e.currentTarget.dataset.phone,
|
||
})
|
||
},
|
||
|
||
headerNavClick(e) {
|
||
wx.navigateTo({
|
||
url: `/packages/roundMechant/pages/mechantDesc/mechantDesc?id=${e.currentTarget.dataset.id}`,
|
||
})
|
||
},
|
||
|
||
// 对商家进行排序筛选
|
||
formatCoordinates(data) {
|
||
if (!Array.isArray(data)) return "";
|
||
|
||
const validData = data.filter(item => {
|
||
// 检查对象是否存在且包含 lat 和 lng
|
||
if (!item || typeof item !== "object") return false;
|
||
// 严格校验 lat 和 lng
|
||
const lat = item.lat;
|
||
const lng = item.lng;
|
||
|
||
return (
|
||
lat !== undefined && lat !== null && lat !== "" && !isNaN(lat) &&
|
||
lng !== undefined && lng !== null && lng !== "" && !isNaN(lng)
|
||
);
|
||
});
|
||
|
||
// 拼接有效数据
|
||
return validData
|
||
.map(item => `${Number(item.lat)},${Number(item.lng)}`)
|
||
.join(';');
|
||
},
|
||
|
||
// 对有经纬度商家获取距离位置
|
||
caculate() {
|
||
let that = this
|
||
let from = this.lat + ',' + this.log
|
||
uni.request({
|
||
url: "https://apis.map.qq.com/ws/distance/v1/matrix?mode=driving",
|
||
method: "POST",
|
||
header: "Content-Type:application/json",
|
||
data: {
|
||
"key": "55NBZ-MUQYW-EAJRL-YIWPA-ZXCR6-4NBPP",
|
||
"from": from,
|
||
"to": that.ToArr
|
||
},
|
||
success(res) {
|
||
console.log(res, 'sdad');
|
||
wx.hideLoading();
|
||
if (res.data.status == 0) {
|
||
let shopList = that.list;
|
||
shopList.forEach((item, index) => {
|
||
if (res.data.result.rows[0].elements[index] && res.data.result.rows[0].elements[index]
|
||
.distance) {
|
||
item.distance = Number(res.data.result.rows[0].elements[index].distance / 1000).toFixed(2);
|
||
}
|
||
})
|
||
shopList.sort((a, b) => a.distance - b.distance);
|
||
that.shopList = shopList
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.lat = Number(options.lat);
|
||
this.log = Number(options.log);
|
||
this.init()
|
||
},
|
||
onReachBottom() {
|
||
if (this.flag) {
|
||
this.init()
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |