1.增加商品列表样式 增加首页广告

components/wyb-popup/iconfont.css

@@ -4,7 +4,7 @@
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 20px;
+  font-size: 30px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

pages.json

@@ -1,6 +1,16 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/goods/goods-list/goods-list",
+			"style": {
+				"navigationBarBackgroundColor": "#0083f5",
+				"backgroundColorTop": "#0083f5",
+				"navigationBarTextStyle": "white",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},{
 			"path": "pages/tabBar/home/home",
 			"style": {
 				"navigationBarTextStyle": "black",
@@ -134,18 +144,6 @@
 				}
 			}
 		},
-		{
-			"path": "pages/goods/goods-list/goods-list",
-			"style": {
-				"navigationBarBackgroundColor": "#0083f5",
-				"backgroundColorTop": "#0083f5",
-				"navigationBarTextStyle": "white",
-				"enablePullDownRefresh": true,
-				"app-plus": {
-					"bounce": "none"
-				}
-			}
-		},
 		{
 			"path": "pages/goods/HM-search/HM-search",
 			"style": {

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

@@ -1,6 +1,27 @@
 <template>
 	<view>
+		<view class="input-box">
+			<view class="icon search"></view>
+			<input placeholder="搜索卡券" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
+		</view>
 
+		<view class="swiper">
+			<view class="swiper-box">
+				<swiper circular="true" autoplay="true" @change="swiperChange">
+					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
+						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
+					</swiper-item>
+				</swiper>
+				<view class="indicator">
+					<view class="dots" v-for="(swiper, index) in swiperList"
+						:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
+				</view>
+			</view>
+		</view>
+
+		<view class="width90 height120">
+			<image class="goodsimg" src="../../../static/img/tc.png"></image>
+		</view>
 	</view>
 </template>
 
@@ -9,6 +30,19 @@
 		data() {
 			return {
 				goodsList: [],
+				// 轮播图片
+				swiperList: [{
+						id: 1,
+						src: 'url1',
+						img: '/static/img/banner2.png'
+					},
+					{
+						id: 2,
+						src: 'url2',
+						img: '/static/img/banner3.png'
+					}
+				],
+				currentSwiper: 0,
 			};
 		},
 		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
@@ -26,22 +60,107 @@
 		},
 		onPageScroll(e) {
 
-		},
-		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
-		onPullDownRefresh() {
-	
 		},
 		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
 		onReachBottom() {
 
 		},
 		methods: {
-		
+			//轮播图指示器
+			swiperChange(event) {
+				this.currentSwiper = event.detail.current;
+			},
 		}
 
 	}
 </script>
 
 <style lang="scss">
+	.input-box {
+		width: 90%;
+		margin-left: 5%;
+		margin-top: 15px;
+		height: 70rpx;
+		background-color: #f5f5f5;
+		border-radius: 10rpx;
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		.icon {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			top: 2px;
+			left: 5px;
+			width: 60upx;
+			height: 60upx;
+			font-size: 34upx;
+			color: #c0c0c0;
+		}
+
+		input {
+			padding-left: 50upx;
+			height: 28upx;
+			font-size: 28upx;
+			width: 100%;
+		}
+	}
+
+	.swiper {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		margin-top: 20px;
+
+		.swiper-box {
+			width: 92%;
+			height: 150px;
+			overflow: hidden;
+			border-radius: 15upx;
+			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
+			//兼容ios，微信小程序
+			position: relative;
+			z-index: 1;
 
+			swiper {
+				width: 100%;
+				height: 150px;
+
+				swiper-item {
+					image {
+						width: 100%;
+						height: 150px;
+					}
+				}
+			}
+
+			.indicator {
+				position: absolute;
+				bottom: 20upx;
+				left: 20upx;
+				background-color: rgba(255, 255, 255, 0.4);
+				width: 150upx;
+				height: 5upx;
+				border-radius: 3upx;
+				overflow: hidden;
+				display: flex;
+
+				.dots {
+					width: 0upx;
+					background-color: rgba(255, 255, 255, 1);
+					transition: all 0.3s ease-out;
+
+					&.on {
+						width: (100%/3);
+					}
+				}
+			}
+		}
+	}
+
+	.goodsimg {
+		width: 80px;
+		height: 80px;
+	}
 </style>