myc/pages/shoping/list.vue

<template>
	<view class="content">
		<view class="varHeight"></view>
		<view class="jg" style="height: 20rpx;"></view>
		<block :key="ind" v-for="(lss, ind) in list">
			<view class="goodsList-item" v-if="lss.show" @click="chooseStore(lss)">
				<view class="info-top flex">
					<image :src="lss.image" lazy-load mode="scaleToFill"></image>
					<view class="store-name clamp2">{{ lss.name }}</view>
				</view>
				<view class="tag">门店</view>
				<view class="dh" v-if="type == 0 || type == 5" @click.stop="markertap(lss)">导航</view>
				<view class="go" v-if="type == 7" @click.stop="navProduct(lss)">进入店铺</view>
				<view class="goodsList-content">
					<view class="info-tit">
						地区：
						<text class="info-val">{{ lss.address }}</text>
					</view>
					<view class="info-tit">
						电话：
						<text class="info-val">{{ lss.phone }}</text>
					</view>
					<view class="info-tit">
						地址：
						<text class="info-val">{{ lss.detailed_address }}</text>
					</view>
				</view>
			</view>
		</block>
		<view class="jg" style="height: 20rpx;"></view>
		<uni-popup ref="popup" type="bottom" @click="close">
			<view class="popup_row">
				<view class="rows">
					<view class="rows-item" @click="toGaodeMap">高德地图</view>
					<view class="rows-item" @click="tobaiDuMap">百度地图</view>
					<!-- <view class="rows-item" @click="totengxunMap">腾讯地图</view> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { store_list } from '@/api/index.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			// 当前选中的滑块
			list: [],
			keyword: '', //查询中的内容
			latitude1: '',
			longitude1: '',
			address: '',
			type: 0 //3->开通会员选择门店  4->自提选择门店  5->附近门店进入不做任何操作
		};
	},
	watch: {
		keyword(newValue, oldValue) {
			this.keyword = newValue;
			console.log(newValue);
			this.search();
		}
	},
	computed: {
		...mapState(['latitude', 'longitude'])
	},
	onLoad(opt) {
		if (opt.type) {
			this.type = opt.type;
		}
		this.getShoping();
	},
	// #ifndef MP
	// 点击键盘搜索事件
	onNavigationBarSearchInputConfirmed(e) {
		this.search();
	},
	// 搜索栏内容变化事件
	onNavigationBarSearchInputChanged(e) {
		this.keyword = e.text;
	},
	// #endif
	methods: {
		...mapMutations(['setLat', 'setLon', 'setStoreInfo']),
		// 查询店铺信息
		search(title) {
			let obj = this;
			obj.list.forEach(e => {
				if (e.title.indexOf(obj.keyword) >= 0) {
					e.show = true;
				} else {
					e.show = false;
				}
			});
		},
		markertap(e) {
			this.longitude1 = e.longitude;
			this.latitude1 = e.latitude;
			this.address = e.detailed_address;
			this.$refs.popup.open();
		},
		// 跳转店铺页面
		navProduct(item) {
			uni.navigateTo({
				url: './index?merid=' + item.id
			});
		},
		// 调用高德
		toGaodeMap() {
			let latitude = this.latitude1;
			let longitude = this.longitude1;
			let address = this.address;
			console.log('选择高德', latitude, longitude, address);
			window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
		},
		// 调用腾讯
		totengxunMap() {
			let latitude = this.latitude1;
			let longitude = this.longitude1;
			let address = this.address;
			console.log('选择腾讯', latitude, longitude);
			window.location.href = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
		},
		// 调用百度
		tobaiDuMap() {
			let latitude = this.latitude1;
			let longitude = this.longitude1;
			let latitude6 = this.latitude;
			let longitude6 = this.longitude;
			let address = this.address;
			console.log('选择百度', latitude, longitude);
			console.log('获取当前经纬度', latitude6, longitude6);
			window.location.href = `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${address}&content=${address}&output=html&src=webapp.baidu.openAPIdemo`;
		},
		//获取商店信息
		getShoping() {
			let obj = this;
			console.log(obj.longitude, obj.latitude);
			store_list({
				longitude: obj.longitude, //经度
				latitude: obj.latitude //纬度
			})
				.then(function({ data }) {
					console.log(data);
					obj.list = data.list.map(e => {
						e.show = true;
						return e;
					});
				})
				.catch(e => {
					console.log(e);
				});
		},
		//选择门店
		chooseStore(item) {
			if (this.type == 3) {
				this.$api.prePage().storeInfo = item;
				uni.navigateBack({});
			} else if (this.type == 4) {
				this.$api.prePage().shopAddress = item;
				uni.navigateBack({});
			} else if (this.type == 5) {
			} else if (this.type == 7) {
				this.navProduct(item);
			} else if (this.type == 6) {
				this.$api.prePage().storeInfo1 = item;
				uni.navigateBack({});
			} else {
				this.setStoreInfo(item);
				uni.navigateBack({});
			}
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
}
.varHeight {
	height: var(--status-bar-height);
}
$slider-color: #fe9398; //滑块左侧颜色
.goodsList-item {
	// background-color: #ffffff;
	// padding: 30rpx;
	// border-bottom: 1px solid $border-color-light;
	margin: 0 auto 20rpx;
	width: 710rpx;
	height: 231rpx;
	padding: 25rpx 20rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	position: relative;
	.tag {
		width: 60rpx;
		line-height: 40rpx;
		background: #ff6f0f;
		border-radius: 5rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
		position: absolute;
		top: 25rpx;
		right: 20rpx;
	}
	.dh {
		z-index: 3;
		width: 70rpx;
		line-height: 44rpx;
		border-radius: 10rpx;
		background: #000;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
		position: absolute;
		bottom: 25rpx;
		right: 20rpx;
	}
	.go {
		z-index: 3;
		width: 150rpx;
		line-height: 44rpx;
		border-radius: 10rpx;
		background: #ff5b53;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
		position: absolute;
		bottom: 25rpx;
		right: 20rpx;
	}
	.info-top {
		justify-content: flex-start;
		.store-name {
			max-width: 500rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			padding-left: 11rpx;
		}
	}
	image {
		flex-shrink: 0;
		// border-radius: $border-radius-sm;
		// height: 180rpx;
		// width: 180rpx;
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
	}
	.slider {
		margin-top: 15rpx;
		justify-content: flex-start;
		.slider-box {
			width: 196rpx;
			border-radius: 99px;
			border: 1px solid $slider-color;
			height: 16rpx;
			.slider-action {
				background-color: $slider-color;
				height: 100%;
			}
		}
		.sales-nub {
			color: $font-color-light;
			font-size: 24rpx;
			height: 2.5em;
			overflow: hidden;
		}
	}
	.goodsList-content {
		// margin-left: 20rpx;
		flex-grow: 1;
		// height: 180rpx;
		position: relative;
		padding-top: 20rpx;
		.info-tit {
			line-height: 1.5;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			.info-val {
				font-weight: 500;
			}
		}
		.title {
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: 500;
			width: 0;
			min-width: 100%;
		}
		.goods-money {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			.money-box {
				.money {
					font-size: $font-lg + 10rpx;
					color: $color-red;
					font-weight: bold;
				}
				.otMoney-box {
					font-size: $font-sm;
					.otMoney {
						color: $font-color-light;
						padding-right: 20rpx;
					}
					.sales {
						color: $font-color-light;
					}
				}
			}
			.cart {
				font-size: $font-base - 2rpx;
				border-radius: 99px;
				padding: 10rpx 20rpx;
				line-height: 1;
				color: #ffffff;
				background-color: $color-gray;
				&.seckill-action {
					border: 1px solid $color-red;
					background-color: $color-red;
				}
			}
		}
	}
}
.popup_row {
	width: 100%;
	height: 500rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	.rows {
		width: 100%;
		padding: 0 24rpx;

		.rows-item {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			width: 100%;
			font-size: 32rpx;
			color: #303133;
			// border-bottom: 1rpx solid #f0f0f0;
		}
	}
}
</style>