1

pages.json

@@ -78,6 +78,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pagesHome",
+			"pages": [ //首页
+				{
+					"path": "market/search",
+					"style": {
+						"navigationBarTitleText": "商品搜索"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

pages/home/index.vue

@@ -3,7 +3,7 @@
 		<scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true" @scroll="handleScroll">
 			<view class="main" id="top">
 				<view class="zero one">
-					<input type="text" placeholder="搜索商品">
+					<input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')">
 				</view>
 				<view class="zero two">
 					<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
@@ -224,11 +224,19 @@
 		},
 		onShow: function() {},
 		methods: {
+			// 公共跳转
+			toCommon(e) {
+				console.log(e);
+				uni.navigateTo({
+					url: `/${e}`
+				})
+			},
 			toPath(e) {
 				if (e && e.route) uni.redirectTo({
 					url: `/${e.route}`
 				})
 			},
+
 			// 计算高度
 			handleScroll(e) {
 				const that = this;

pagesHome/market/search.vue

@@ -0,0 +1,109 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<input type="text" v-model="searchInfo.name" @input="toInput" placeholder="搜索商品">
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+					<view class="list-scroll-view">
+						<view class="two_1">
+							商品筛选
+						</view>
+						<view class="two_2">
+							<view v-for="(item,index) in list" :key="index">
+								<image :src="item.url" mode=""></image>
+								<view class="name">
+									{{item.name}}
+								</view>
+								<view class="other">
+									<view class="money">
+										<text>¥</text>
+										<text>{{item.money}}</text>
+									</view>
+									<view class="btn">
+										<text class="iconfont icon-gouwuche"></text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				searchInfo: {},
+				list: [ //商品列表
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: '10.00'
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: '10.00'
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: '10.00'
+					},
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+			// 输入框
+			toInput(e) {
+				const that = this;
+				that.$set(that.searchInfo, `name`, e.detail.value)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		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;
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+</style>

pagesMy/collection/market.vue

@@ -2,24 +2,30 @@
 	<mobile-frame>
 		<view class="main">
 			<view class="one">
-				<view class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
-					<image class="image" :src="item.file" mode=""></image>
-					<view class="name">{{item.name||'暂无'}}</view>
-					<view class="other">
-						<view class="other_1">
-							<text>￥{{item.sell_money||0}}</text>
-						</view>
-						<view class="other_1">
-							<view>{{item.person||0}}人评价</view>
-							<text @click="toDel(item)" class="iconfont icon-del"></text>
+				<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" @click="toView(item)">
+							<image class="image" :src="item.file" mode=""></image>
+							<view class="name">
+								{{item.name}}
+							</view>
+							<view class="money">
+								<text>¥</text>
+								<text>{{item.money}}</text>
+							</view>
+							<view class="other">
+								<view class="other_1">
+									{{item.num}}人评价
+								</view>
+								<view class="other_2">
+									<text @click="toDel(item)" class="iconfont icon-del"></text>
+								</view>
+							</view>
 						</view>
 					</view>
-				</view>
-			</view>
-			<view class="two" v-if="!list">
-				<text class="heng"></text>
-				<view class="title"><text>没有更多收藏了</text></view>
+				</scroll-view>
 			</view>
+
 		</view>
 	</mobile-frame>
 </template>
@@ -31,17 +37,20 @@
 				list: [{
 						file: require('@/static/test.png'),
 						name: '摩奇桃汁250ml*24盒',
-						sell_money: 59.90,
+						money: 59.90,
+						num: 0
 					},
 					{
 						file: require('@/static/test.png'),
 						name: '摩奇桃汁250ml*24盒',
-						sell_money: 59.90,
+						money: 59.90,
+						num: 0
 					},
 					{
 						file: require('@/static/test.png'),
 						name: '摩奇桃汁250ml*24盒',
-						sell_money: 59.90,
+						money: 59.90,
+						num: 0
 					}
 				]
 			};
@@ -72,75 +81,132 @@
 		height: 100vh;
 
 		.one {
-			display: flex;
-			flex-wrap: wrap;
-			width: 100vw;
-			text-align: center;
+			padding: 2vw 0 0 0;
 
 			.list {
-				width: 45vw;
-				margin: 2vw;
-				padding: 1vw 0;
-				border: 0.1vw solid var(--fcColor);
-			}
-
-			.image {
-				width: 45vw;
-				height: 45vw;
-			}
+				width: 42vw;
+				border: 1px solid var(--f1Color);
+				margin: 2vw 2vw 0 2vw;
+				padding: 2vw;
+				border-radius: 5px;
 
-			.name {
-				margin: 2vw 0 5vw 0;
-				font-size: var(--font14Size);
-			}
-
-			.other {
-				display: flex;
-				flex-direction: column;
+				.image {
+					width: 100%;
+					height: 40vw;
+				}
 
-				.other_1:first-child {
-					color: var(--ff0Color);
+				.name {
 					font-size: var(--font16Size);
+					margin: 0 0 1vw 0;
+				}
+
+				.money {
+					color: var(--fFB1Color);
+					font-size: var(--font14Size);
+					margin: 0 0 1vw 0;
 				}
 
-				.other_1 {
+				.other {
 					display: flex;
 					flex-direction: row;
 					justify-content: space-between;
-					padding: 0 4vw;
-					font-size: var(--font14Size);
-					color: var(--fcColor);
 
-					.iconfont {
-						font-size: 20px;
+					.other_1 {
+						font-size: var(--font14Size);
+						color: var(--f85Color);
 					}
 				}
 			}
+
+			.list:nth-child(2n) {
+				margin: 2vw 0 0 0;
+			}
 		}
+	}
 
-		.two {
-			padding: 3vw 0;
-			margin: 0 0 3vw 0;
-			text-align: center;
+	// 	.one {
+	// 		display: flex;
+	// 		flex-wrap: wrap;
+	// 		width: 100vw;
+	// 		text-align: center;
 
-			.heng {
-				display: inline-block;
-				width: 95vw;
-				height: 0.1vw;
-				background-color: var(--fcColor);
-			}
+	// 		.list {
+	// 			width: 45vw;
+	// 			margin: 2vw;
+	// 			padding: 1vw 0;
+	// 			border: 0.1vw solid var(--fcColor);
+	// 		}
 
-			.title {
-				margin: -5vw 0 0 0;
+	// 		.image {
+	// 			width: 45vw;
+	// 			height: 45vw;
+	// 		}
 
-				text {
-					display: inline-block;
-					padding: 0 3vw;
-					background-color: var(--mainColor);
-					color: var(--fcColor);
-					font-size: var(--font12Size);
-				}
-			}
+	// 		.name {
+	// 			margin: 2vw 0 5vw 0;
+	// 			font-size: var(--font14Size);
+	// 		}
+
+	// 		.other {
+	// 			display: flex;
+	// 			flex-direction: column;
+
+	// 			.other_1:first-child {
+	// 				color: var(--ff0Color);
+	// 				font-size: var(--font16Size);
+	// 			}
+
+	// 			.other_1 {
+	// 				display: flex;
+	// 				flex-direction: row;
+	// 				justify-content: space-between;
+	// 				padding: 0 4vw;
+	// 				font-size: var(--font14Size);
+	// 				color: var(--fcColor);
+
+	// 				.iconfont {
+	// 					font-size: 20px;
+	// 				}
+	// 			}
+	// 		}
+	// 	}
+
+	// 	.two {
+	// 		padding: 3vw 0;
+	// 		margin: 0 0 3vw 0;
+	// 		text-align: center;
+
+	// 		.heng {
+	// 			display: inline-block;
+	// 			width: 95vw;
+	// 			height: 0.1vw;
+	// 			background-color: var(--fcColor);
+	// 		}
+
+	// 		.title {
+	// 			margin: -5vw 0 0 0;
+
+	// 			text {
+	// 				display: inline-block;
+	// 				padding: 0 3vw;
+	// 				background-color: var(--mainColor);
+	// 				color: var(--fcColor);
+	// 				font-size: var(--font12Size);
+	// 			}
+	// 		}
+	// 	}
+	// }
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
 		}
 	}
 </style>