1.增加商品列表页面

pages.json

@@ -137,7 +137,6 @@
 		{
 			"path": "pages/goods/goods-list/goods-list",
 			"style": {
-				"navigationBarTitleText": "",
 				"navigationBarBackgroundColor": "#0083f5",
 				"backgroundColorTop": "#0083f5",
 				"navigationBarTextStyle": "white",

pages/goods/goods-list/goods-list.vue

@@ -1,28 +1,6 @@
 <template>
 	<view>
-		<!-- 商品数据 -->
+
-		<!-- <view class="header" :style="{position:headerPosition,top:headerTop}">
-			<view class="target" v-for="(target,index) in orderbyList" @tap="select(index)" :key="index" :class="[target.selected?'on':'']">
-				{{target.text}}
-				<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view>
-			</view>
-		</view> -->
-		<!-- 占位 -->
-		<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="name">{{goods.name}}</view>
-					<view class="info">
-						<view class="price">{{goods.price}}</view>
-						<view class="slogan">{{goods.slogan}}</view>
-					</view>
-				</view>
-			</view>
-			<view class="loading-text">{{loadingText}}</view>
-		</view>
 	</view>
 </template>
 
@@ -30,128 +8,158 @@
 	export default {
 		data() {
 			return {
-				goodsList:[
+				goodsList: [],
-					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+				loadingText: "正在加载...",
-					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+				headerTop: "0px",
-					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+				headerPosition: "fixed",
-					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+				orderbyList: [{
-					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+						text: "销量",
-					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+						selected: true,
-					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+						orderbyicon: false,
-					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
+						orderby: 0
-					{ 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人付款' }
+					{
-				],
+						text: "价格",
-				loadingText:"正在加载...",
+						selected: false,
-				headerTop:"0px",
+						orderbyicon: ['sheng', 'jiang'],
-				headerPosition:"fixed",
+						orderby: 0
-				orderbyList:[
+					},
-					{text:"销量",selected:true,orderbyicon:false,orderby:0},
+					{
-					{text:"价格",selected:false,orderbyicon:['sheng','jiang'],orderby:0},
+						text: "好评",
-					{text:"好评",selected:false,orderbyicon:false,orderby:0}
+						selected: false,
+						orderbyicon: false,
+						orderby: 0
+					}
 				],
-				orderby:"sheng"
+				orderby: "sheng"
 			};
 		},
-		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
+		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
 			console.log(option.cid); //打印出上个页面传递的参数。
-			uni.setNavigationBarTitle({
+			if (option.id == 1) {
-				title: option.name
+				uni.setNavigationBarTitle({
-			});
+					title: '商品列表'
-			
+				});
+			}
+			if (option.id == 2) {
+				uni.setNavigationBarTitle({
+					title: '金币列表'
+				});
+			}
 			//兼容H5下排序栏位置
 			// #ifdef H5
-				//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
+			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
-				let Timer = setInterval(()=>{
+			let Timer = setInterval(() => {
-					let uniHead = document.getElementsByTagName('uni-page-head');
+				let uniHead = document.getElementsByTagName('uni-page-head');
-					if(uniHead.length>0){
+				if (uniHead.length > 0) {
-						this.headerTop = uniHead[0].offsetHeight+'px';
+					this.headerTop = uniHead[0].offsetHeight + 'px';
-						clearInterval(Timer);//清除定时器
+					clearInterval(Timer); //清除定时器
-					}
+				}
-				},1);
+			}, 1);
 			// #endif
 		},
-		onPageScroll(e){
+		onPageScroll(e) {
 			//兼容iOS端下拉时顶部漂移
-			if(e.scrollTop>=0){
+			if (e.scrollTop >= 0) {
 				this.headerPosition = "fixed";
-			}else{
+			} else {
 				this.headerPosition = "absolute";
 			}
 		},
 		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
 		onPullDownRefresh() {
-		    setTimeout(()=>{
+			setTimeout(() => {
 				this.reload();
-		        uni.stopPullDownRefresh();
+				uni.stopPullDownRefresh();
-		    }, 1000);
+			}, 1000);
 		},
 		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
-		onReachBottom(){
+		onReachBottom() {
-			uni.showToast({title: '触发上拉加载'});
+			uni.showToast({
+				title: '触发上拉加载'
+			});
 			let len = this.goodsList.length;
-			if(len>=40){
+			if (len >= 40) {
-				this.loadingText="到底了";
+				this.loadingText = "到底了";
 				return false;
-			}else{
+			} else {
-				this.loadingText="正在加载...";
+				this.loadingText = "正在加载...";
 			}
-			let end_goods_id = this.goodsList[len-1].goods_id;
+			let end_goods_id = this.goodsList[len - 1].goods_id;
-			for(let i=1;i<=10;i++){
+			for (let i = 1; i <= 10; i++) {
-				let goods_id = end_goods_id+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: '商品名称商品名称商品名称商品名称商品名称',
+					price: '￥168',
+					slogan: '1235人付款'
+				};
 				this.goodsList.push(p);
 			}
 		},
-		methods:{
+		methods: {
-			reload(){
+			reload() {
 				console.log("reload");
 				let tmpArr = []
 				this.goodsList = [];
 				let end_goods_id = 0;
-				for(let i=1;i<=10;i++){
+				for (let i = 1; i <= 10; i++) {
-					let goods_id = end_goods_id+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: '商品名称商品名称商品名称商品名称商品名称',
+						price: '￥168',
+						slogan: '1235人付款'
+					};
 					this.goodsList.push(p);
 				}
 			},
 			//商品跳转
-			toGoods(e){
+			toGoods(e) {
-				uni.showToast({title: '商品'+e.goods_id,icon:"none"});
+				uni.showToast({
+					title: '商品' + e.goods_id,
+					icon: "none"
+				});
 				uni.navigateTo({
-					url: '../goods' 
+					url: '../goods'
 				});
 			},
 			//排序类型
-			select(index){
+			select(index) {
-				let tmpTis = this.orderbyList[index].text+"排序 "
+				let tmpTis = this.orderbyList[index].text + "排序 "
-				if(this.orderbyList[index].orderbyicon){
+				if (this.orderbyList[index].orderbyicon) {
-					let type = this.orderbyList[index].orderby==0?'升序':'降序';
+					let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
-					if(this.orderbyList[index].selected){
+					if (this.orderbyList[index].selected) {
-						type = this.orderbyList[index].orderby==0?'降序':'升序';
+						type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
-						this.orderbyList[index].orderby = this.orderbyList[index].orderby==0?1:0;
+						this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
 					}
-					tmpTis+=type
+					tmpTis += type
 				}
 				this.orderbyList[index].selected = true;
 				let len = this.orderbyList.length;
-				for(let i=0;i<len;i++){
+				for (let i = 0; i < len; i++) {
-					if(i!=index){
+					if (i != index) {
 						this.orderbyList[i].selected = false;
 					}
 				}
-				uni.showToast({title:tmpTis,icon:"none"});
+				uni.showToast({
+					title: tmpTis,
+					icon: "none"
+				});
 			}
 		}
-		
+
 	}
 </script>
 
 <style lang="scss">
 	.icon {
-		font-size:26upx;
+		font-size: 26upx;
 	}
-	.header{
+
+	.header {
 		width: 92%;
 		padding: 0 4%;
 		height: 79upx;
@@ -163,7 +171,8 @@
 		z-index: 10;
 		background-color: #fff;
 		border-bottom: solid 1upx #eee;
-		.target{
+
+		.target {
 			width: 20%;
 			height: 60upx;
 			display: flex;
@@ -172,24 +181,27 @@
 			font-size: 28upx;
 			margin-bottom: -2upx;
 			color: #aaa;
-			&.on{
+
+			&.on {
 				color: #555;
 				border-bottom: 4upx solid #0083f5;
 				font-weight: 600;
 				font-size: 30upx;
 			}
-			
+
-			
+
 		}
 	}
-.place{
+
-		
+	.place {
+
 		background-color: #ffffff;
 		height: 100upx;
 
 	}
-.goods-list{
+
-		.loading-text{
+	.goods-list {
+		.loading-text {
 			width: 100%;
 			display: flex;
 			justify-content: center;
@@ -198,23 +210,27 @@
 			color: #979797;
 			font-size: 24upx;
 		}
-		.product-list{
+
+		.product-list {
 			width: 92%;
-			padding: 0 4% 3vw 4%; 
+			padding: 0 4% 3vw 4%;
 			display: flex;
 			justify-content: space-between;
 			flex-wrap: wrap;
-			.product{
+
+			.product {
 				width: 48%;
 				border-radius: 20upx;
 				background-color: #fff;
 				margin: 0 0 15upx 0;
-				box-shadow: 0upx 5upx 25upx rgba(0,0,0,0.1);
+				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
-				image{
+
+				image {
 					width: 100%;
 					border-radius: 20upx 20upx 0 0;
 				}
-				.name{
+
+				.name {
 					width: 92%;
 					padding: 8upx 4%;
 					display: -webkit-box;
@@ -224,25 +240,27 @@
 					overflow: hidden;
 					font-size: 30upx;
 				}
-				.info{
+
+				.info {
 					display: flex;
 					justify-content: space-between;
 					align-items: flex-end;
 					width: 92%;
 					padding: 10upx 4% 10upx 4%;
-					
+
-					.price{
+					.price {
 						color: #e65339;
 						font-size: 30upx;
 						font-weight: 600;
 					}
-					.slogan{
+
+					.slogan {
 						color: #807c87;
 						font-size: 24upx;
 					}
 				}
 			}
-			
+
 		}
 	}
 </style>

pages/tabBar/home/home.vue

@@ -55,7 +55,7 @@
 			</view>
 		</view>
 		<!-- 赠券 -->
-		<view style="width: 91%;margin-left: 5%;">
+		<view style="width: 91%;margin-left: 5%;" @click="goGoodsList(1)">
 			<image class="mart30 width100" mode="widthFix" src="../../../static/img/headzq.png"></image>
 		</view>
 		<swiper class="orange-content" style="border: 2px solid #ff5836;" :display-multiple-items="productListleg">
@@ -70,7 +70,7 @@
 		</swiper>
 
 		<!-- 金币 -->
-		<view style="width: 90%;margin-left: 5%;">
+		<view style="width: 90%;margin-left: 5%;" @click="goGoodsList(2)">
 			<image class="mart30 width100" mode="widthFix" src="../../../static/img/jbhed.png"></image>
 		</view>
 		<!-- v-if="goldproductList&&goldproductList.length>0" -->
@@ -420,6 +420,12 @@
 						console.log(err);
 					});
 			},
+			//调整商品列表
+			goGoodsList(item){
+				uni.navigateTo({
+					url:'../../goods/goods-list/goods-list?id='+item
+				})
+			},
 			//搜索跳转
 			toSearch() {
 				uni.navigateTo({