zyejMAll-mobile/pages/user/goods_details_store/index.vue

<template>
	<s-layout title="选择自提门店" :bgStyle="{ color: '#FFF' }">
		<view class="storeBox" ref="container">
			<view class="storeBox-box" v-for="(item, index) in state.storeList" :key="index" @tap="checked(item)">
				<view class="store-img">
					<image :src="item.logo" class="img" />
				</view>
				<view class="store-cent-left">
					<view class="store-name">{{ item.name }}</view>
					<view class="store-address line1">
						{{ item.areaName }}{{ ', ' + item.detailAddress }}
					</view>
					<view class="store-address line1">
						营业时间：{{item?.openingTime[0] + ":" + item?.openingTime[1]}}-{{item?.closingTime[0] + ":" + item?.closingTime[1]}}
					</view>
					<view class="status" v-if="item?.stat == 0">未营业</view>
					<view class="status" v-if="item?.stat == 1">营业中</view>
				</view>
				<view class="row-right ss-flex-col ss-col-center">
					<view>
						<!-- #ifdef H5 -->
						<!-- <a class="store-phone" :href="'tel:' + item.phone">
							<view class="iconfont">
								<view class="ss-rest-button">
									<text class="_icon-forward" />
								</view>
							</view>
						</a> -->
						<!-- #endif -->
						<!-- #ifdef MP -->
						<!-- <view class="store-phone" @click="call(item.phone)">
							<view class="iconfont">
								<view class="ss-rest-button">
									<text class="_icon-forward" />
								</view>
							</view>
						</view> -->
						<!-- #endif -->
					</view>
					<view class="store-distance ss-flex ss-row-center">
						<view class="addressTxt" v-if="item.distance==0 || item.distance">
							距离{{ item.distance.toFixed(2) }}km</view>
						<!-- <text class="addressTxt" v-else>查看地图</text> -->
						<!-- <view class="iconfont">
							<view class="ss-rest-button">
								<text class="_icon-forward" />
							</view>
						</view> -->

						<view class="tb">
							<image @tap.stop="showMaoLocation(item)" style="margin-right:10px;"
								src="https://zysc.fjptzykj.com:3000/shangcheng/c7362f85726ef0030b407f1c3749c710ca0caa51fee5cc8ffbb64e11226354a8.png"
								class="img"></image>
							<image @click.stop="call(item.phone)"
								src="https://zysc.fjptzykj.com:3000/shangcheng/535ee6f79e04d4b6e46fcfa59ed052f214ad6ab756c340c0c040e68357f68e9a.png"
								class="img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import DeliveryApi from '@/sheep/api/trade/delivery';
	import {
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	const LONGITUDE = 'user_longitude';
	const LATITUDE = 'user_latitude';
	const state = reactive({
		loaded: false,
		loading: false,
		storeList: [],
		system_store: {},
		locationShow: false,
		user_latitude: 0,
		user_longitude: 0,
	});

	const call = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone,
		});
	};
	const selfLocation = () => {
		// #ifdef H5
		const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
		if (!!jsWxSdk?.isWechat()) {
			jsWxSdk.getLocation((res) => {
				state.user_latitude = res.latitude;
				state.user_longitude = res.longitude;
				uni.setStorageSync(LATITUDE, res.latitude);
				uni.setStorageSync(LONGITUDE, res.longitude);
				getList();
			});
		} else {
			// #endif
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log(res.latitude, "--------经纬度-----");
					try {
						state.user_latitude = res.latitude;
						state.user_longitude = res.longitude;
						uni.setStorageSync(LATITUDE, res.latitude);
						uni.setStorageSync(LONGITUDE, res.longitude);
					} catch {}

					getList();
				},
				complete: () => {
					getList();
				},
				fail(error) {
					console.log(error, "错误")
				}
			});
			console.log("有执行")
			// #ifdef H5
		}
		// #endif
	};
	const showMaoLocation = (e) => {
		// #ifdef H5
		const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
		if (jsWxSdk.isWechat()) {
			jsWxSdk.openLocation({
				latitude: Number(e.latitude),
				longitude: Number(e.longitude),
				name: e.name,
				address: `${e.areaName}-${e.detailAddress}`
			});
		} else {
			// #endif
			uni.openLocation({
				latitude: Number(e.latitude),
				longitude: Number(e.longitude),
				name: e.name,
				address: `${e.areaName}-${e.detailAddress}`,
				success: function() {
					console.log('success');
				},
			});
			// #ifdef H5
		}
		// #endif
	};

	/**
	 * 选中门店
	 */
	const checked = (addressInfo) => {
		uni.$emit('SELECT_PICK_UP_INFO', {
			addressInfo,
		});
		sheep.$router.back();
	};

	/**
	 * 获取门店列表数据
	 */
	const getList = async () => {
		if (state.loading || state.loaded) {
			return;
		}
		state.loading = true;
		console.log(state.user_latitude, state.user_longitude, "------user_longitude-------")
		const data2 = {
			latitude: state.user_latitude,
			longitude: state.user_longitude,
		};
		const {
			data,
			code
		} = await DeliveryApi.getDeliveryPickUpStoreList(data2);
		if (code !== 0) {
			return;
		}
		state.loading = false;
		state.storeList = data;
	};

	onMounted(() => {
		if (state.user_latitude && state.user_longitude) {
			getList();
		} else {
			selfLocation();
			getList();
		}
	});
	onLoad(() => {
		try {
			state.user_latitude = uni.getStorageSync(LATITUDE);
			state.user_longitude = uni.getStorageSync(LONGITUDE);
			console.log(state.user_latitude, state.user_longitude, "user_longitude");
		} catch (e) {
			// error
		}
	});
</script>
<style lang="scss" scoped>
	.status {
		background: rgba(214, 81, 42);
		width: 40px;
		text-align: center;
		color: white;
		border-radius: 3px;
		margin-top: 5px;
		font-size: 20rpx;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.geoPage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 10000;
	}

	.storeBox {
		width: 100%;
	}

	.storeBox-box {
		background-color: #fff;
		// width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		padding: 23rpx;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
		margin: 10px 10px;
		boeder-radius: 10px;
	}

	.store-cent {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.store-cent-left {
		// width: 177px;
		flex: 1;
		max-width: 156px;
		position: relative;
		padding-right: 10px;

		&::after {
			position: absolute;
			content: '';
			width: 1px;
			height: 100%;
			background: rgba(223, 223, 223);
			right: 0;
			top: 0;
		}

	}

	.store-img {
		// flex: 1;
		width: 60px;
		height: 60px;
		border-radius: 6rpx;
		margin-right: 22rpx;
	}

	.store-img .img {
		width: 60px;
		height: 60px;
		border-radius: 31px;
	}

	.store-name {
		color: #282828;
		font-size: 26rpx;
		margin-bottom: 5px;
		font-weight: 800;
	}

	.store-address {
		color: #666666;
		font-size: 24rpx;
	}

	.store-phone {
		width: 50rpx;
		height: 50rpx;
		color: #fff;
		border-radius: 50%;
		display: block;
		text-align: center;
		line-height: 48rpx;
		background-color: #e83323;
		margin-bottom: 22rpx;
		text-decoration: none;
	}

	.store-distance {
		font-size: 22rpx;
		color: #e83323;
		flex-wrap: wrap;

		.addressTxt {
			width: 100%;
			text-align: center;
			margin-bottom: 10px;
		}

		.tb {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.img {
				width: 30px;
				height: 30px;
			}
		}
	}

	.iconfont {
		font-size: 20rpx;
	}

	.row-right {
		// flex: 1;
		margin-left: 10px;
		//display: flex;
		//flex-direction: column;
		//align-items: flex-end;
		//width: 33.5%;
	}
</style>