mycajt/pages/shoping/list.vue

<template>
	<view class="content">
		<view class="varHeight"></view>
		<view class="search flex">
			<view class="input-box flex">
				<view class=" input-content flex">
					<view class="iconfont iconsearch" ></view>
					<view class="input"><input type="text" placeholder="输入关键字搜索" @input='search' /></view>
				</view>
			</view>
			<view class="sousuo">
				搜索
			</view>
			<!-- <picker mode="multiSelector" :range="listActionType" range-key='cate_name' @change="changeType"
				@columnchange='listChange'>
				<view class="shop-name clamp">分类</view>
			</picker>
			<view class="shop-name clamp" @click="initSearch">重置</view> -->
		</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" style="width: 154rpx;height: 124rpx;"></image>
					<view class="store-name clamp2">{{ lss.name }}</view>
					<!-- <view class="ditu">
						<image src="" mode=""></image>
					</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">
						<image src="../../static/icon/md1.png" mode="" style="width: 28rpx;height: 25rpx; margin-right: 12rpx; margin-top: 20rpx;"></image>
						<text class="info-val">{{ lss.address }}</text>
					</view>
					<view class="info-tit">
						<image src="../../static/icon/md2.png" mode="" style="width: 28rpx;height: 28rpx; margin-right: 12rpx; "></image>
						<text class="info-val">{{ lss.phone }}</text>
					</view>
					<!-- <view class="info-tit">
						地址：
						<text class="info-val">{{ lss.detailed_address }}</text>
					</view> -->
					<view class="tit">
						<text class="time">营业时间：08：30-18:30</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,
		getStoreType
	} from '@/api/index.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				// 当前选中的滑块
				list: [],
				keyword: '', //查询中的内容
				latitude1: '',
				longitude1: '',
				address: '',
				// 当前动态分类
				typeAction: {
					name: '分类',
					cid: ''
				},
				type: 0, //3->开通会员选择门店  4->自提选择门店  5->附近门店进入不做任何操作
				typeActionNum: 0, //当前选中的action
				typeList: [], //列表分类
			};
		},
		watch: {
			keyword(newValue, oldValue) {
				this.keyword = newValue;
				console.log(newValue);
				this.getShoping();
			}
		},
		computed: {
			...mapState(['latitude', 'longitude']),
			listActionType() {
				if (this.typeList.length > 0) {
					return [this.typeList, this.typeList[this.typeActionNum].children]
				} else {
					return []
				}
			}
		},
		onLoad(opt) {
			if (opt.type) {
				this.type = opt.type;
			}
			this.getShoping();
			this.getStoreType();
		},
		// // #ifndef MP
		// // 点击键盘搜索事件
		// onNavigationBarSearchInputConfirmed(e) {
		// 	this.search();
		// },
		// // 搜索栏内容变化事件
		// onNavigationBarSearchInputChanged(e) {
		// 	this.keyword = e.text;
		// },
		// // #endif
		methods: {
			...mapMutations(['setLat', 'setLon', 'setStoreInfo']),
			initSearch() {
				this.keyword = '';
				this.typeAction.cid = '';
				this.getShoping();
			},
			// 确认切换
			changeType(res) {
				console.log(res);
				const item = res.detail.value;
				const ar = this.typeList[item[0]].children[item[1]];
				this.typeAction.name = ar.cate_name
				this.typeAction.cid = ar.id
				this.getShoping();
			},
			// 列表切换
			listChange(res) {
				if (res.detail.column == 0) {
					this.typeActionNum = res.detail.value;
				}
			},
			// 查询店铺信息
			search(res) {
				this.keyword = res.detail.value;
			},
			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`;
			},
			getStoreType() {
				let obj = this;
				getStoreType()
					.then(function({
						data
					}) {
						obj.typeList = data;
					})
					.catch(e => {
						console.log(e);
					});
			},
			//获取商店信息
			getShoping() {
				let obj = this;
				console.log(obj.longitude, obj.latitude);
				store_list({
						longitude: obj.longitude, //经度
						latitude: obj.latitude, //纬度
						keyword: obj.keyword,
						cid: obj.typeAction.cid
					})
					.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;
		display: flex;
		align-items: center;
		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;
			display: flex;
			justify-content: center;
			background-color: #E8E8E8;
			width: 180rpx;
			height: 180rpx;
			// background: #E8E8E8;
			border-radius: 10rpx;
        }
			.store-name {
				// width: 238rpx;
				// height: 40rpx;
				display: inline-block;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding-left: 22rpx;
				text-align: center;
				position: absolute;
				top: 25rpx;
				left: 225rpx;
			}
		

		image {
			flex-shrink: 0;
			// border-radius: $border-radius-sm;
			// height: 180rpx;
			// width: 180rpx;
			width: 154rpx;
			height: 124rpx;
			// margin-left: 10rpx;
			// 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;
			margin-top: 14rpx;
			flex-grow: 1;
			// height: 180rpx;
			position: relative;
			padding-top: 20rpx;
			padding-left: 50rpx;

			.info-tit {
				// margin-top: 20rpx;
				line-height: 1.5;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;

				.info-val {
					margin-bottom: 25rpx;
					font-weight: 500;
					// color:#666666
				}
			}
			.tit {
				// width: 239rpx;
				// height: 32rpx;
				// background: #FFece5 ;
				// opacity: 0.12;
				// border-radius: 16rpx 16rpx 16rpx 0rpx;
				margin-top: 25rpx;
				.time {
						// margin-top: 35rpx;
						line-height: 1.5;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6309;
							}
			}
			 
			
			
			

			.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;
			}
		}
	}

	.search {
		justify-content: center;
		padding: 25rpx 24rpx 20rpx;
		align-items: center;
		background: #FFFFFF;

		.address {
			width: 32rpx;
			height: 38rpx;
		}

		// .shop-name {
		// 	height: 38rpx;
		// 	position: relative;
		// 	z-index: 100;
		// 	font-size: 30rpx;
		// 	font-family: PingFang SC;
		// 	font-weight: 500;
		// 	color: #ffffff;
		// 	padding-left: 10rpx;
		// 	flex-shrink: 0;
		// }
		
		.sousuo{
			height: 38rpx;
			position: relative;
			z-index: 100;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			padding-left: 10rpx;
			flex-shrink: 0;
		}

		.input-box {
			position: relative;
			z-index: 99;
			// width: 700rpx;
			// height: 60rpx;
			// background: #FFF;
			box-shadow: 0px 9rpx 21rpx 0px rgba(4, 114, 69, 0.22);
			// border-radius: 30px;
			margin: 0 auto;
			width: 610rpx;
			height: 64rpx;
			background: #F6F6F6;
			border-radius: 10rpx;

			.input-content {
				justify-content: center;
				position: relative;
				z-index: 11;
				border-radius: 99rpx;
				flex-grow: 1;
				padding: 5rpx 30rpx;
				background: #F6F6F6;

				.iconsearch {
					font-size: 50rpx;
					color: #666666;
					margin-left: 120rpx;
				}

				.input {
					margin-left: 19rpx;
					color: #666666;
					flex-grow: 1;

					input {
						font-size: 26rpx;
						color: #666666;
					}
				}
			}

			.input-button {
				padding-left: 20rpx;
				font-size: $font-base;
				height: 100%;
			}
		}
	}
</style>