[完成] 商品专题页面UI

[完成] 商品专题商品列表页面UI

pages.json

@@ -830,6 +830,20 @@
 				"navigationBarTitleText": "确认订单",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/shop/goodsSpecial",
+			"style" : {
+				"navigationBarTitleText": "商品专题",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/shop/specialList",
+			"style" : {
+				"navigationBarTitleText": "商品专题列表",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/shop/goodsSpecial.vue

@@ -0,0 +1,33 @@
+<template>
+	<view class="content">
+		<lf-nav title="商品专题" :showIcon="true"></lf-nav>
+		<lf-shop-goods-card v-for="(item, index) in 5" :key="index"></lf-shop-goods-card>
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
+	export default {
+		components: {
+			lfShopGoodsCard
+		},
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		padding: 30rpx 0;
+	}
+</style>

pages/shop/specialList.vue

@@ -0,0 +1,139 @@
+<template>
+	<view>
+		<lf-nav title="活动名称活动名称" :showIcon="true"></lf-nav>
+		<view class="cover">
+			<image class="img" src="https://picsum.photos/200"></image>
+		</view>
+		<view>
+			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
+		</view>
+		<view class="goods-list">
+			<!-- TODO 此处应为渲染多个lf-waterfall组件 -->
+			<lf-waterfall :list="list" ref="uWaterfallFather"></lf-waterfall>
+		</view>
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	export default {
+		components: {
+			lfWaterfall
+		},
+		data(){
+			return {
+				current: 0,
+				tab_list: [{
+					name: '综合'
+				},{
+					name: '销量'
+				},{
+					name: '价格'
+				}],
+				list: [
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					}
+				]
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			tabChange(index){
+				this.current = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.cover{
+		width: 750rpx;
+		height: 245rpx;
+		.img{
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.goods-list{
+		padding: 30rpx 32rpx;
+	}
+	
+	// tabs样式
+	/deep/.u-scroll-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+	}
+	/deep/.u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 80rpx!important;
+		position: absolute;
+		left: 0;
+		bottom: -12rpx;
+	}
+	
+	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 56rpx!important;
+		position: absolute;
+		height: 5rpx!important;
+		left: 8rpx;
+		bottom: -4rpx;
+	}
+	
+	/deep/ .u-tab-item {
+		font-size: 28rpx!important;
+	}
+</style>