Pārlūkot izejas kodu

Merge branch 'master' of http://git.cc-lotus.info/pointToNetwork/point-app

zs 2 gadi atpakaļ
vecāks
revīzija
881d980939
5 mainītis faili ar 223 papildinājumiem un 29 dzēšanām
  1. 3 3
      common/css/font-icon.css
  2. 6 12
      pages.json
  3. 7 3
      pages/home/index.vue
  4. 84 11
      pagesHome/market/search.vue
  5. 123 0
      pagesHome/market/sort.vue

+ 3 - 3
common/css/font-icon.css

@@ -2,9 +2,9 @@
   font-family: "iconfont"; /* Project id 3674157 */
   /* Color fonts */
   src: 
-       url('//at.alicdn.com/t/c/font_3674157_g19wel1yxjd.woff2?t=1664269541651') format('woff2'),
-       url('//at.alicdn.com/t/c/font_3674157_g19wel1yxjd.woff?t=1664269541651') format('woff'),
-       url('//at.alicdn.com/t/c/font_3674157_g19wel1yxjd.ttf?t=1664269541651') format('truetype');
+       url('https://at.alicdn.com/t/c/font_3674157_g19wel1yxjd.woff2?t=1664269541651') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_3674157_g19wel1yxjd.woff?t=1664269541651') format('woff'),
+       url('https://at.alicdn.com/t/c/font_3674157_g19wel1yxjd.ttf?t=1664269541651') format('truetype');
 }
 
 .iconfont {

+ 6 - 12
pages.json

@@ -48,20 +48,8 @@
 				"navigationBarTitleText": "我的"
 			}
 		}
-
 	],
 	"subPackages": [ //分包配置
-		{
-			"root": "pagesA",
-			"pages": [ //分包一
-				// {
-				// 	"path": "adminHome/index",
-				// 	"style": {
-				// 		"navigationBarTitleText": "管理中心"
-				// 	}
-				// }
-			]
-		},
 		{
 			"root": "pagesMy",
 			"pages": [ //我的
@@ -93,6 +81,12 @@
 					"style": {
 						"navigationBarTitleText": "商品搜索"
 					}
+				},
+				{
+					"path": "market/sort",
+					"style": {
+						"navigationBarTitleText": "商品分类"
+					}
 				}
 			]
 		}

+ 7 - 3
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="搜索商品" @tap="toCommon('pagesHome/market/search')">
+					<input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')" placeholder-class="placss">
 				</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">
@@ -13,7 +13,7 @@
 					</swiper>
 				</view>
 				<view class="zero thr">
-					<view class="list" v-for="(item,index) in btnList" :key="index">
+					<view class="list" v-for="(item,index) in btnList" :key="index" @tap="toCommon(item.route)">
 						<image class="image" :src="item.url" mode=""></image>
 						<view class="textOver name">
 							{{item.name}}
@@ -83,7 +83,7 @@
 					{
 						name: '商品分类',
 						url: require('@/static/logo.png'),
-						route: ''
+						route: 'pagesHome/market/sort'
 					},
 					{
 						name: '首农专区',
@@ -278,6 +278,10 @@
 				padding: 1.5vw 0;
 			}
 
+			.placss {
+				color: var(--fffColor);
+			}
+
 		}
 
 		.two {

+ 84 - 11
pagesHome/market/search.vue

@@ -8,17 +8,20 @@
 				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 					<view class="list-scroll-view">
 						<view class="two_1">
-							<view class="cond_1">
-								默认
-							</view>
-							<view class="cond_1">
-								默认
-							</view>
-							<view class="cond_1">
-								默认
-							</view>
-							<view class="cond_1">
-								默认
+							<view :class="['list',condActive==index?'activeList':'']" v-for="(item,index) in condList" :key="index" @tap="toCond(index,item)">
+								<view class="name">
+									{{item.name}}
+								</view>
+								<view class="icon">
+									<view class="icon_1">
+										<text :class="['iconfont',item.shangActive]" v-if="condActive==index&&shang==true"></text>
+										<text :class="['iconfont',item.shang]" v-else></text>
+									</view>
+									<view class="icon_1">
+										<text :class="['iconfont', item.xiaActive]" v-if="condActive==index&&xia==true"></text>
+										<text :class="['iconfont', item.xia]" v-else></text>
+									</view>
+								</view>
 							</view>
 						</view>
 						<view class="two_2">
@@ -72,6 +75,35 @@
 						money: '10.00',
 						is_sale: true
 					},
+				],
+				condActive: 0,
+				shang: false,
+				xia: false,
+				condList: [ // 筛选
+					{
+						name: '默认',
+					},
+					{
+						name: '销量',
+						shang: 'icon-shangjiantou',
+						shangActive: 'icon-shangjiantou-copy',
+						xia: 'icon-xiajiantou',
+						xiaActive: 'icon-xiajiantou-copy'
+					},
+					{
+						name: '价格',
+						shang: 'icon-shangjiantou',
+						shangActive: 'icon-shangjiantou-copy',
+						xia: 'icon-xiajiantou',
+						xiaActive: 'icon-xiajiantou-copy'
+					},
+					{
+						name: '浏览量',
+						shang: 'icon-shangjiantou',
+						shangActive: 'icon-shangjiantou-copy',
+						xia: 'icon-xiajiantou',
+						xiaActive: 'icon-xiajiantou-copy'
+					}
 				]
 			};
 		},
@@ -85,6 +117,18 @@
 			toInput(e) {
 				const that = this;
 				that.$set(that.searchInfo, `name`, e.detail.value)
+			},
+			// 筛选
+			toCond(index, e) {
+				const that = this;
+				that.$set(that, `condActive`, index);
+				if (that.xia == false) {
+					that.$set(that, `shang`, false);
+					that.$set(that, `xia`, true);
+				} else if (that.xia == true) {
+					that.$set(that, `shang`, true);
+					that.$set(that, `xia`, false);
+				}
 			}
 		}
 	}
@@ -118,6 +162,33 @@
 				padding: 2vw;
 				display: flex;
 				flex-direction: row;
+				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;
+							}
+						}
+					}
+				}
+
+				.activeList {
+					.name {
+						color: #ff0000;
+					}
+
+				}
 			}
 
 			.two_2 {
@@ -188,6 +259,8 @@
 				.list:nth-child(2n) {
 					margin: 0 0 2vw 0;
 				}
+
+
 			}
 		}
 	}

+ 123 - 0
pagesHome/market/sort.vue

@@ -0,0 +1,123 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<input type="text" placeholder="寻找您喜爱的商品" @tap="toCommon('pagesHome/market/search')" placeholder-class="placss">
+			</view>
+			<view class="two">
+				<view class="two_1">
+					<view class="list" v-for="(item,index) in typeList" :key="index">
+						<text>{{item.name}}</text>
+					</view>
+				</view>
+				<view class="two_2">
+					右侧商品
+				</view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				typeList: [ //商品分类
+					{
+						name: '休闲食品'
+					},
+					{
+						name: '进口食品'
+					},
+					{
+						name: '粮油调味'
+					},
+					{
+						name: '酒饮冲调'
+					},
+					{
+						name: '时令水果'
+					},
+					{
+						name: '品质生鲜'
+					},
+					{
+						name: '居家用品'
+					},
+					{
+						name: '个护清洁'
+					},
+					{
+						name: '3C产品'
+					},
+					{
+						name: '母婴玩具'
+					},
+					{
+						name: '服饰配件'
+					},
+					{
+						name: '礼卡专区'
+					},
+					{
+						name: '植物饮食'
+					}
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+
+		}
+	}
+</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;
+			display: flex;
+			flex-direction: row;
+
+			.two_1 {
+				width: 25vw;
+				height: 91vh;
+				background-color: #FAFAFA;
+
+				.list {
+					text-align: center;
+					padding: 2.5vw 0;
+					border-bottom: 1px solid #ff0000;
+
+					text {
+						font-size: 14px;
+					}
+				}
+			}
+
+			.two_2 {
+				width: 75vw;
+				border: 1px solid #0000ff;
+			}
+
+		}
+	}
+</style>