163 lines
4.3 KiB
Vue
163 lines
4.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="item_goodsItem" v-for="(item, index) in shopList" :key="index">
|
||
<view class="item_goodsItem_tit">
|
||
<image :src="item.photo" mode="" />
|
||
</view>
|
||
<view class="item_goodsItem_msgBox">
|
||
<view>
|
||
<view class="item_goodsItem_name">{{ item.shop_name }}</view>
|
||
<view class="item_goodsItem_msg">自提时间：{{ item.opening_time }}-{{ item.closing_time }}</view>
|
||
<view class="item_goodsItem_btn">
|
||
<view class="btn" @click="handleOptionClick(item)">
|
||
<image class="btn_icon"
|
||
src="https://static.hshuishang.com/community/_assets/Send.png"
|
||
mode="aspectFill" />
|
||
导航
|
||
</view>
|
||
<view class="btn mobile" @click="headlePhoneClick(item.mobile)">
|
||
<image class="btn_icon"
|
||
src="https://static.hshuishang.com/community/_assets/Phone-telephone.png"
|
||
mode="" />
|
||
电话
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="jl">{{ item.distance ? item.distance + 'km' : '暂无定位' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { apiArr } from '../../api/reservation';
|
||
import { request, picUrl } from '../../utils/index';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
page_num: 1,
|
||
page_size: 10,
|
||
shopList: [],
|
||
toArr: "",
|
||
lat: "",
|
||
log: "",
|
||
}
|
||
},
|
||
methods: {
|
||
headlePhoneClick(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone,
|
||
});
|
||
},
|
||
|
||
handleOptionClick(item) {
|
||
uni.openLocation({
|
||
latitude: Number(item.lat),
|
||
longitude: Number(item.lng),
|
||
address: item.shop_name,
|
||
name: item.shop_name,
|
||
scale: 18,
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
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(';');
|
||
},
|
||
|
||
async getShopList() {
|
||
const res = await request(apiArr.getShopList,'POST', {
|
||
shop_id: 0,
|
||
page_num: this.page_num,
|
||
page_size: this.page_size,
|
||
});
|
||
|
||
let flag = false;
|
||
if (res?.rows && res?.rows?.length == this.page_size) {
|
||
flag = true
|
||
} else {
|
||
flag = false
|
||
}
|
||
res?.rows.forEach(item => {
|
||
item.photo = picUrl + item.photo
|
||
});
|
||
|
||
let getDistanceList = this.shopList.concat(res?.rows || []);
|
||
let toArr = this.formatCoordinates(getDistanceList);
|
||
this.shopList = getDistanceList;
|
||
this.toArr = toArr;
|
||
this.page_num = this.page_num + 1;
|
||
this.flag = flag;
|
||
|
||
this.caculate()
|
||
|
||
},
|
||
|
||
caculate() {
|
||
const 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: this.toArr
|
||
},
|
||
success: (res) => {
|
||
if (res.data.status == 0) {
|
||
const shopList = this.shopList.map((item, index) => {
|
||
if (res.data.result.rows[0].elements[index]?.distance) {
|
||
item.distance = Number(res.data.result.rows[0].elements[index].distance / 1000).toFixed(2);
|
||
}
|
||
return item;
|
||
});
|
||
this.shopList = shopList;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
},
|
||
|
||
onLoad(options) {
|
||
console.log('12313', options);
|
||
this.lat = options?.lat;
|
||
this.log = options?.log;
|
||
this.getShopList();
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {
|
||
if(this.flag){
|
||
this.getShopList();
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |