From 8cfe981a3271a7edb2d77c5e899eafd5d3abba65 Mon Sep 17 00:00:00 2001
From: BigBoss <2280520255@qq.com>
Date: Thu, 30 Apr 2020 22:13:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue | 109 +++++++++++++++++++++++++---------------------
 1 file changed, 60 insertions(+), 49 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 548cf12..87c7092 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -22,11 +22,11 @@
 				</view>
 			</view>
 		</view>
-		<uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> 
+		<Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> 
 			<view class="close">
 				<view  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
 			</view>
-		</uni-drawer>
+		</Uni-drawer>
 		
 		
 		
@@ -34,16 +34,17 @@
 		<view class="content-wrap">
 			<view>
 				<HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
-				<!-- 占位 -->
-				<view class="place"></view>
 				<!-- 商品列表 -->
 				<view class="goods-list">
 					<view class="product-list">
-						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods)">
-							<image mode="widthFix" :src="goods.img"></image>
+						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
+							<image mode="widthFix" :src="goods.img" ></image>
 							<view class="name">{{goods.name}}</view>
 							<view class="info">
+								<view class="priceBox">
 								<view class="price">{{goods.price}}</view>
+								<view class="originCost">{{goods.originCost}}</view>
+								</view>
 								<view class="slogan">{{goods.slogan}}</view>
 							</view>
 						</view>
@@ -57,12 +58,12 @@
 </template>
 
 <script>
-	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
+	import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
 	import HMfilterDropdown  from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
 	import data from '@/common/data.js';//筛选菜单数据
 	export default {
 		components: {
-			uniDrawer,
+			'UniDrawer':UniDrawer,
             'HMfilterDropdown':HMfilterDropdown
 			},
 		data() {
@@ -80,16 +81,16 @@
 				valueArr:'',
 				//商品数据
 				goodsList:[
-					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
-					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }
+					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
 				],
 				loadingText:"正在加载...",
 				filterDropdownValue:[],
@@ -103,20 +104,20 @@
 		},
 		onLoad: function () {
 			//定时器模拟ajax异步请求数据
-			setTimeout(()=>{
-				//传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
-				this.filterDropdownValue = [
-					[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
-					[null,null],			//第1个菜单选中 都不选中
-					[1],					//第2个菜单选中 一级菜单的第1项
-					[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
-					[[0],[1],[1]],			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
-				];
+			// setTimeout(()=>{
+			// 	//传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
+			// 	this.filterDropdownValue = [
+			// 		[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
+			// 		[null,null],			//第1个菜单选中 都不选中
+			// 		[1],					//第2个菜单选中 一级菜单的第1项
+			// 		[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
+			// 		[[0],[1],[1]],			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
+			// 	];
 				this.filterData = data; 
-			},100);
-			//模拟ajax请求子菜单数据。
+			// },100);
+			// 模拟ajax请求子菜单数据。
 			// setTimeout(()=>{
-				//this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
+			// 	this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
 			// },5000)
 		},
 		methods: {
@@ -149,6 +150,9 @@
 							
 						]
 					}
+			},
+			toGoods(id){
+				console.log(id)
 			}
 		},
 		onNavigationBarButtonTap(e) {
@@ -167,7 +171,7 @@
 			let end_goods_id = this.goodsList[len-1].goods_id;
 			for(let i=1;i<=10;i++){
 				let goods_id = end_goods_id+i;
-				let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' };
+				let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' };
 				this.goodsList.push(p);
 			}
 		},
@@ -193,12 +197,11 @@
 		z-index: 999;
 		position: fixed;
 		top: 0;
+		left: 0;
 	}
 	.searchBar {
 		width: 670rpx;
 		display: flex;
-		position: fixed;
-		top: 0;
 		justify-content: center;
 		align-items: center;
 		box-sizing: border-box;
@@ -216,8 +219,6 @@
 		box-sizing: border-box;
 	}
 	.screenBar{
-		position: fixed;
-		top: 68rpx;
 		width: 670rpx;
 		height: 110rpx;
 		display: flex;
@@ -241,15 +242,11 @@
 	}
 	
 	.HMfilterDropdown{
-		position: fixed;
 		top: 178rpx !important;
 	}
-	.place{
-		background-color: #ffffff;
-		height: 266rpx;
-	}
+	
 	.goods-list{
-		padding-top: 10px;
+		padding-top: 286rpx;
 		.loading-text{
 			width: 100%;
 			display: flex;
@@ -274,6 +271,7 @@
 				image{
 					width: 100%;
 					border-radius: 10px 10px 0 0;
+					height: 184rpx;
 				}
 				.name{
 					width: 92%;
@@ -283,22 +281,35 @@
 					-webkit-line-clamp: 2;
 					text-align: justify;
 					overflow: hidden;
-					font-size: 15px;
+					font-size: 24rpx;
+					color: #333333;
 				}
 				.info{
 					display: flex;
 					justify-content: space-between;
-					align-items: flex-end;
+					align-items: center;
 					width: 92%;
 					padding: 5px 4% 5px 4%;
-					.price{
-						color: #e65339;
-						font-size: 15px;
-						font-weight: 600;
+					.priceBox{
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.price{
+							color: #EB5D3B;
+							font-size: 28rpx;
+							font-weight: 600;
+							margin-right: 10rpx;
+						}
+						.originCost{
+							text-decoration:line-through;
+							color: #999999;
+							font-size: 20rpx;
+						}
+						
 					}
 					.slogan{
-						color: #807c87;
-						font-size: 12px;
+						color: #999999;
+						font-size: 20rpx;
 					}
 				}
 			}
-- 
2.0.0