Merge branch 'master' of http://git.liuniu946.com/hwq/supermyc

api/index.js

@@ -49,4 +49,13 @@ export function getStore(data) {
 		method: 'get',
 		data
 	});
+}
+
+//获取门店分类
+export function getStoreType(data) {
+	return request({
+		url: '/api/store_category',
+		method: 'get',
+		data
+	});
 }

pages/shoping/list.vue

@@ -1,6 +1,18 @@
 <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>
+			<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">重置</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)">
@@ -40,328 +52,465 @@
 	</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();
+	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: 0
+				},
+				type: 0, //3->开通会员选择门店  4->自提选择门店  5->附近门店进入不做任何操作
+				typeActionNum: 0, //当前选中的action
+				typeList: [], //列表分类
+			};
 		},
-		// 跳转店铺页面
-		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}`;
+		watch: {
+			keyword(newValue, oldValue) {
+				this.keyword = newValue;
+				console.log(newValue);
+				this.getShoping();
+			}
 		},
-		// 调用腾讯
-		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}`;
+		computed: {
+			...mapState(['latitude', 'longitude']),
+			listActionType() {
+				if (this.typeList.length > 0) {
+					return [this.typeList, this.typeList[this.typeActionNum].children]
+				} else {
+					return []
+				}
+			}
 		},
-		// 调用百度
-		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`;
+		onLoad(opt) {
+			if (opt.type) {
+				this.type = opt.type;
+			}
+			this.getShoping();
+			this.getStoreType();
 		},
-		//获取商店信息
-		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);
+		// // #ifndef MP
+		// // 点击键盘搜索事件
+		// onNavigationBarSearchInputConfirmed(e) {
+		// 	this.search();
+		// },
+		// // 搜索栏内容变化事件
+		// onNavigationBarSearchInputChanged(e) {
+		// 	this.keyword = e.text;
+		// },
+		// // #endif
+		methods: {
+			...mapMutations(['setLat', 'setLon', 'setStoreInfo']),
+			// 确认切换
+			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
 				});
-		},
-		//选择门店
-		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({});
+			},
+			// 调用高德
+			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;
-	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;
+	page,
+	.content {
+		height: 100%;
 	}
-	.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;
+
+	.varHeight {
+		height: var(--status-bar-height);
 	}
-	.go {
-		z-index: 3;
-		width: 150rpx;
-		line-height: 44rpx;
+
+	$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;
-		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;
+		position: relative;
+
+		.tag {
+			width: 60rpx;
+			line-height: 40rpx;
+			background: #ff6f0f;
+			border-radius: 5rpx;
+			font-size: 24rpx;
 			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%;
-			}
+			font-weight: 500;
+			color: #ffffff;
+			text-align: center;
+			position: absolute;
+			top: 25rpx;
+			right: 20rpx;
 		}
-		.sales-nub {
-			color: $font-color-light;
+
+		.dh {
+			z-index: 3;
+			width: 70rpx;
+			line-height: 44rpx;
+			border-radius: 10rpx;
+			background: #000;
 			font-size: 24rpx;
-			height: 2.5em;
-			overflow: hidden;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
+			text-align: center;
+			position: absolute;
+			bottom: 25rpx;
+			right: 20rpx;
 		}
-	}
-	.goodsList-content {
-		// margin-left: 20rpx;
-		flex-grow: 1;
-		// height: 180rpx;
-		position: relative;
-		padding-top: 20rpx;
-		.info-tit {
-			line-height: 1.5;
+
+		.go {
+			z-index: 3;
+			width: 150rpx;
+			line-height: 44rpx;
+			border-radius: 10rpx;
+			background: #ff5b53;
 			font-size: 24rpx;
 			font-family: PingFang SC;
-			font-weight: bold;
-			color: #333333;
-			.info-val {
-				font-weight: 500;
+			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;
 			}
 		}
-		.title {
-			font-size: $font-base;
-			color: $font-color-dark;
-			font-weight: 500;
-			width: 0;
-			min-width: 100%;
+
+		image {
+			flex-shrink: 0;
+			// border-radius: $border-radius-sm;
+			// height: 180rpx;
+			// width: 180rpx;
+			width: 65rpx;
+			height: 65rpx;
+			border-radius: 50%;
 		}
-		.goods-money {
-			position: absolute;
-			left: 0;
-			bottom: 0;
-			width: 100%;
-			.money-box {
-				.money {
-					font-size: $font-lg + 10rpx;
-					color: $color-red;
-					font-weight: bold;
+
+		.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%;
 				}
-				.otMoney-box {
-					font-size: $font-sm;
-					.otMoney {
-						color: $font-color-light;
-						padding-right: 20rpx;
+			}
+
+			.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;
 					}
-					.sales {
-						color: $font-color-light;
+
+					.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;
+
+				.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 {
+
+	.popup_row {
 		width: 100%;
-		padding: 0 24rpx;
+		height: 500rpx;
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 
-		.rows-item {
-			height: 80rpx;
-			line-height: 80rpx;
-			text-align: center;
+		.rows {
 			width: 100%;
-			font-size: 32rpx;
-			color: #303133;
-			// border-bottom: 1rpx solid #f0f0f0;
+			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: 10rpx 24rpx 20rpx;
+		align-items: center;
+		background: rgba(39, 170, 116, 0.4);
+
+		.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;
+		}
+
+		.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;
+
+			.input-content {
+				justify-content: center;
+				position: relative;
+				z-index: 11;
+				border-radius: 99rpx;
+				flex-grow: 1;
+				padding: 5rpx 30rpx;
+				background: #FFF;
+
+				.iconsearch {
+					font-size: 50rpx;
+					color: #a2e0c7;
+				}
+
+				.input {
+					margin-left: 19rpx;
+					color: #a2e0c7;
+					flex-grow: 1;
+					input {
+						font-size: 26rpx;
+						color: #a2e0c7;
+					}
+				}
+			}
+
+			.input-button {
+				padding-left: 20rpx;
+				font-size: $font-base;
+				height: 100%;
+			}
 		}
 	}
-}
 </style>