408 lines
9.1 KiB
Vue
408 lines
9.1 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://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Send.png"
|
||
mode="aspectFill" />
|
||
导航
|
||
</view>
|
||
<view class="btn mobile" @click="headlePhoneClick(item.mobile)">
|
||
<image class="btn_icon"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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 {
|
||
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', {});
|
||
console.log('ress', res);
|
||
return;
|
||
res.list.forEach(item=>{
|
||
item.photo = picUrl + item.photo
|
||
})
|
||
let ToArr = this.formatCoordinates(res.list)
|
||
this.ShopList = res.list;
|
||
this.ToArr = ToArr;
|
||
|
||
that.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();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.item_goodsItem {
|
||
display: flex;
|
||
margin: 0 20rpx;
|
||
padding-bottom: 30rpx;
|
||
padding-top: 30rpx;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
}
|
||
|
||
.item_goodsItem:last-child {
|
||
border: none;
|
||
}
|
||
|
||
.item_goodsItem_tit {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
margin-right: 30rpx;
|
||
margin-left: 19rpx;
|
||
}
|
||
|
||
.item_goodsItem_name {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #222222;
|
||
margin-top: 20rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.item_goodsItem_msg {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #555555;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
|
||
.item_goodsList {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.list_item {
|
||
padding-bottom: 32rpx;
|
||
}
|
||
|
||
.item_goodsItem_btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
width: 110rpx;
|
||
height: 40rpx;
|
||
background: rgba(255, 81, 42, 0.1);
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
font-size: 22rpx;
|
||
color: #555555;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
justify-content: center;
|
||
}
|
||
|
||
.mobile {
|
||
background: #FFF2DA;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.item_goodsItem_btn image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.item_goodsItem_msgBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
}
|
||
|
||
.jl {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: rgba(168, 104, 43, 0.8);
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.banner {
|
||
width: 710rpx;
|
||
height: 300rpx;
|
||
border-radius: 30rpx;
|
||
margin: 0 auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.banner_pic {
|
||
width: 710rpx;
|
||
height: 300rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.tit {
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
margin-top: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
padding-bottom: 30rpx;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
}
|
||
|
||
.msg_left_1 {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.msg_left_2 {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.msg_left_1 image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.msg_left_2 image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.msg_left_1 view {
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
border: 1rpx solid #D5AC66;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #D5AC66;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 20rpx;
|
||
padding: 2rpx 10rpx;
|
||
}
|
||
|
||
.msg {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 20rpx;
|
||
margin-right: 48rpx;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.msg_right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.msg_right image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.msg_right2 {
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.tag {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FF512A;
|
||
background: #FFD8D0;
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
border: 1rpx solid #FF512A;
|
||
display: inline-block;
|
||
padding: 2rpx 10rpx;
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.imgList {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin: 30rpx 20rpx;
|
||
}
|
||
|
||
.imgList image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.subtit {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
margin-top: 30rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.subCon {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #222222;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.subCon view {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.payList {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
.payBtn {
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
width: 650rpx;
|
||
height: 80rpx;
|
||
background: #FF512A;
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.payBtn2 {
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FF512A;
|
||
width: 650rpx;
|
||
height: 80rpx;
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
border: 1rpx solid #FF512A;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style> |