1

pagesMy/collection/market.vue

@@ -2,7 +2,7 @@
 	<mobile-frame>
 		<view class="main">
 			<view class="one">
-				<input type="text" v-model="searchInfo.name" @blur="toInput" placeholder="搜索商品">
+				<input type="text" v-model="searchInfo.name" @blur="toInput" placeholder="搜索商品名称">
 			</view>
 			<view class="two">
 				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
@@ -20,7 +20,7 @@
 										<text :class="['iconfont',item.shang]" v-else></text>
 									</view>
 								</view>
-								<view v-if="index!=4" class="icon">
+								<view v-else class="icon">
 									<view class="icon_1">
 										<text :class="['iconfont',item.shangActive]"
 											v-if="condActive==index&&shang=='1'"></text>
@@ -94,7 +94,7 @@
 				list: [],
 				total: 0,
 				skip: 0,
-				limit: 5,
+				limit: 6,
 				page: 0,
 				condActive: 0,
 				shang: '',
@@ -287,7 +287,7 @@
 				const that = this;
 				that.$set(that, `list`, [])
 				that.$set(that, `skip`, 0)
-				that.$set(that, `limit`, 5)
+				that.$set(that, `limit`, 6)
 				that.$set(that, `page`, 0)
 			}
 		}
@@ -376,6 +376,7 @@
 					.image {
 						width: 100%;
 						height: 40vw;
+						border-radius: 5px;
 					}
 
 					.name {
@@ -422,6 +423,7 @@
 					.image {
 						width: 25vw;
 						height: 25vw;
+						border-radius: 5px;
 						margin: 0 2vw 0 0;
 					}
 
@@ -474,11 +476,10 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-
+	
 		.list-scroll-view {
 			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
+			flex-direction: column;
 		}
 	}
 </style>

pagesMy/collection/shop.vue

@@ -2,21 +2,76 @@
 	<mobile-frame>
 		<view class="main">
 			<view class="one">
+				<input type="text" v-model="searchInfo.name" @blur="toInput" placeholder="搜索店铺名称">
+			</view>
+			<view class="two">
 				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 					<view class="list-scroll-view">
-						<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
-							<image class="image" :src="item.shop.file&&item.shop.file.length>0?item.shop.file[0].url:''" mode=""></image>
-							<view class="other">
-								<view class="name">{{item.shop.name}}</view>
-								<view class="other_1">
-									店铺地址 <text>{{item.shop.address}}</text>
+						<view class="two_1">
+							<view :class="['list',condActive==index?'activeList':'']" v-for="(item,index) in condList"
+								:key="index" @tap="toCond(index,item)">
+								<view class="name" v-if="index!=2">
+									{{item.name}}
+								</view>
+								<view v-if="index==2" class="icon4">
+									<view class="icon_1">
+										<text :class="['iconfont',item.shangActive]"
+											v-if="condActive==index&&shang=='1'"></text>
+										<text :class="['iconfont',item.shang]" v-else></text>
+									</view>
 								</view>
-								<view class="other_1">
-									关注时间 <text>{{item.time}}</text>
+								<view v-else class="icon">
+									<view class="icon_1">
+										<text :class="['iconfont',item.shangActive]"
+											v-if="condActive==index&&shang=='1'"></text>
+										<text :class="['iconfont',item.shang]" v-else></text>
+									</view>
+									<view class="icon_1">
+										<text :class="['iconfont', item.xiaActive]"
+											v-if="condActive==index&&xia=='-1'"></text>
+										<text :class="['iconfont', item.xia]" v-else></text>
+									</view>
 								</view>
 							</view>
-							<view class="btn">
-								<text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
+						</view>
+						<view class="two_2" v-if="type=='list'">
+							<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
+								<image class="image"
+									:src="item.shop.file&&item.shop.file.length>0?item.shop.file[0].url:''" mode="">
+								</image>
+								<view class="other">
+									<view class="name">{{item.shop.name}}</view>
+									<view class="other_1">
+										店铺地址 <text>{{item.shop.address}}</text>
+									</view>
+									<view class="other_1">
+										关注时间 <text>{{item.time}}</text>
+									</view>
+								</view>
+								<view class="btn">
+									<text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
+								</view>
+							</view>
+						</view>
+						<view class="two_3" v-else>
+							<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
+								<image class="image"
+									:src="item.shop.file&&item.shop.file.length>0?item.shop.file[0].url:''" mode="">
+								</image>
+								<view class="name">
+									{{item.shop.name||'暂无'}}
+								</view>
+								<view class="address">
+									<text>{{item.shop.address}}</text>
+								</view>
+								<view class="other">
+									<view class="other_1">
+										{{item.time}}
+									</view>
+									<view class="other_2">
+										<text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
+									</view>
+								</view>
 							</view>
 						</view>
 					</view>
@@ -30,12 +85,33 @@
 	export default {
 		data() {
 			return {
+				searchInfo: {},
 				user: {},
 				list: [],
 				total: 0,
 				skip: 0,
 				limit: 5,
-				page: 0
+				page: 0,
+				condActive: 0,
+				shang: '',
+				xia: '',
+				condList: [ // 筛选
+					{
+						name: '默认',
+					},
+					{
+						name: '关注时间',
+						shang: 'icon-shangjiantou',
+						shangActive: 'icon-shangjiantou-copy',
+						xia: 'icon-xiajiantou',
+						xiaActive: 'icon-xiajiantou-copy'
+					},
+					{
+						shang: 'icon-liebiaoxingshi',
+						shangActive: 'icon-liebiaoxingshi',
+					}
+				],
+				type: 'list',
 			};
 		},
 		onShow: function() {
@@ -43,6 +119,52 @@
 			that.watchLogin()
 		},
 		methods: {
+			// 输入框
+			toInput(e) {
+				const that = this;
+				if (e.detail.value) that.$set(that.searchInfo, `name`, e.detail.value);
+				that.clearPage();
+				that.search();
+			},
+			// 筛选
+			toCond(index, e) {
+				const that = this;
+				let condActive = that.condActive;
+				that.$set(that, `condActive`, index);
+				if (condActive != index && that.xia == '') {
+					that.$set(that, `shang`, '0');
+					that.$set(that, `xia`, '-1');
+				} else if (condActive == index && that.xia == '-1') {
+					that.$set(that, `shang`, '1');
+					that.$set(that, `xia`, '0');
+				} else if (condActive == index && that.shang == '1') {
+					that.$set(that, `shang`, '0');
+					that.$set(that, `xia`, '-1');
+				} else if (condActive = index && that.shang == '1') {
+					that.$set(that, `shang`, '0');
+					that.$set(that, `xia`, '-1');
+				}
+				let value;
+				if (index != 0) {
+					value = that.shang == '0' ? that.xia : that.shang;
+				} else {
+					that.$set(that, `searchInfo`, {})
+				}
+				if (index == 1) {
+					that.$set(that, `searchInfo`, {})
+					that.$set(that.searchInfo, `time`, value);
+				} else if (index == 2) {
+					if (e.shang == 'icon-shitugonggeListBox') {
+						that.$set(e, `shang`, 'icon-liebiaoxingshi');
+						that.$set(that, `type`, 'list');
+					} else {
+						that.$set(e, `shang`, 'icon-shitugonggeListBox');
+						that.$set(that, `type`, 'gongge');
+					}
+				}
+				that.clearPage();
+				that.search();
+			},
 			// 监听用户是否登录
 			watchLogin() {
 				const that = this;
@@ -70,7 +192,8 @@
 					customer: user._id
 				}
 				const res = await that.$api(`/storeShop`, 'GET', {
-					...info
+					...info,
+					...that.searchInfo
 				})
 				if (res.errcode == '0') {
 					let list = [...that.list, ...res.data];
@@ -150,46 +273,155 @@
 		height: 100vh;
 
 		.one {
+			border-bottom: 1px solid var(--f85Color);
+			padding: 2vw;
+
+			input {
+				padding: 2vw;
+				background-color: var(--f1Color);
+				font-size: var(--font14Size);
+				border-radius: 5px;
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
 			padding: 2vw 0 0 0;
 
-			.list {
+			.two_1 {
+				background-color: var(--fffColor);
+				padding: 2vw;
 				display: flex;
+				width: 100vw;
 				flex-direction: row;
-				justify-content: space-between;
-				width: 95vw;
-				border: 1px solid var(--f1Color);
-				margin: 2vw 2vw 0 2vw;
-				padding: 2vw;
-				border-radius: 5px;
+				justify-content: space-around;
+
+				.list {
+					display: flex;
+					flex-direction: row;
+
+					.icon {
+						position: relative;
+						top: -5px;
+						left: 2px;
+
+						.icon_1 {
+							height: 10px;
+
+							.iconfont {
+								font-size: 12px;
+							}
+						}
+					}
+
+					.icon4 {
+						.icon_1 {
+							.iconfont {
+								font-size: 17px;
+							}
+						}
+					}
+				}
+
+				.activeList {
+					.name {
+						color: #ff0000;
+					}
 
-				.image {
-					width: 25vw;
-					height: 25vw;
-					margin: 0 2vw 0 0;
 				}
+			}
+
+			.two_2 {
+				width: 100vw;
 
-				.other {
+				.list {
 					display: flex;
-					flex-direction: column;
-					flex-grow: 1;
+					flex-direction: row;
+					justify-content: space-between;
+					width: 91vw;
+					border: 1px solid var(--f1Color);
+					margin: 2vw 2vw 0 2vw;
+					padding: 2vw;
+					border-radius: 5px;
+
+					.image {
+						width: 25vw;
+						height: 25vw;
+						border-radius: 5px;
+						margin: 0 2vw 0 0;
+					}
+
+					.other {
+						display: flex;
+						flex-direction: column;
+						flex-grow: 1;
+
+						.name {
+							font-size: var(--font16Size);
+							margin: 0 0 1vw 0;
+						}
+
+						.other_1 {
+							font-size: var(--font14Size);
+							color: var(--f85Color);
+
+							text {
+								padding: 0 2vw;
+								color: var(--ff0Color);
+							}
+						}
+					}
+				}
+			}
+
+			.two_3 {
+				width: 100vw;
+				display: flex;
+				flex-wrap: wrap;
+
+				.list {
+					width: 42vw;
+					border: 1px solid var(--f1Color);
+					margin: 2vw 2vw 0 2vw;
+					padding: 2vw;
+					border-radius: 5px;
+
+					.image {
+						width: 100%;
+						height: 40vw;
+						border-radius: 5px;
+					}
 
 					.name {
 						font-size: var(--font16Size);
-						font-weight: bold;
+						margin: 0 0 1vw 0;
 					}
 
-					.other_1 {
+					.address {
 						font-size: var(--font14Size);
-						color: var(--f85Color);
+						color: var(--fFB1Color);
+						margin: 0 0 1vw 0;
+					}
 
-						text {
-							font-weight: bold;
-							padding: 0 2vw;
-							color: var(--ff0Color);
+					.other {
+						display: flex;
+						flex-direction: row;
+						justify-content: space-between;
+						align-items: center;
+
+						.other_1 {
+							font-size: var(--font14Size);
+							color: var(--f85Color);
 						}
 					}
 				}
+
+				.list:nth-child(2n) {
+					margin: 2vw 0 0 0;
+				}
 			}
+
 		}
 	}