From 9087b5a8663da5c3fff55062cdf226e567c5e783 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Thu, 16 Sep 2021 17:54:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=93=81=E7=89=8C=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/onlineMall/onlineMall.vue |   1 +
 pages/shop/shopdetail.vue             | 372 +++++++++-----------------
 2 files changed, 121 insertions(+), 252 deletions(-)

diff --git a/pages/index/onlineMall/onlineMall.vue b/pages/index/onlineMall/onlineMall.vue
index 6d6218b..174d30e 100644
--- a/pages/index/onlineMall/onlineMall.vue
+++ b/pages/index/onlineMall/onlineMall.vue
@@ -60,6 +60,7 @@
 		<scroll-view :style="{height: autoHeight}" :scroll-y="true" @scrolltolower="scrolltolower">
 			<view class="scroll-content">
 				<lf-waterfall :list="list"></lf-waterfall>
+				<lf-nocontent src="/static/images/empty.png" v-if="list.length <= 0"></lf-nocontent>
 			</view>
 		</scroll-view>
 	</view>
diff --git a/pages/shop/shopdetail.vue b/pages/shop/shopdetail.vue
index 65ab550..de64241 100644
--- a/pages/shop/shopdetail.vue
+++ b/pages/shop/shopdetail.vue
@@ -2,18 +2,18 @@
 	<view>
 		<lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav>
 		<view class="shop-head">
-			<image class="lf-w-100 lf-h-100" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
+			<image class="lf-w-100 lf-h-100" :src="detail.logo" mode="aspectFill"></image>
 		</view>
 		<view class="shop-title">
 			<view class="shop-flex">
 				<view class="shop-img">
-					<image class="shop-img" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
+					<image class="shop-img" :src="detail.logo" mode="aspectFill"></image>
 				</view>
 				<view>
-					<view class="lf-color-black lf-font-36">AIMER MEN爱慕先生</view>
+					<view class="lf-color-black lf-font-36">{{ detail.name }}</view>
 					<view class="lf-font-24 lf-color-black">
 						<text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text>
-						<text class="lf-m-l-10">L2</text>
+						<text class="lf-m-l-10">{{ detail.floor }}</text>
 					</view>
 				</view>
 			</view>
@@ -35,36 +35,34 @@
 		<view v-if="title_tab.length">
 			<u-tabs :list="title_tab" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs>
 		</view>
-		<lf-nocontent v-else></lf-nocontent>
 		<!-- 推荐 -->
 		<view v-if="title_current==0">
 			<view class="lf-row-between lf-p-l-32 lf-p-t-40 lf-p-r-32">
 				<view class="lf-font-32 lf-color-black lf-font-bold">在售商品</view>
 				<view class="lf-font-24 lf-color-555">查看全部 <text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text></view>
 			</view>
-			<view class="lf-row-between lf-p-l-32 lf-p-r-32 lf-p-t-30 lf-p-b-30" style="flex-wrap: wrap;">
-				<view class="goods-rom" v-for="(item,index) of list" :key="index">
-					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index">
-						<view class="list-label">已售{{item.sale}}</view>
+			<view class="recommend-box" >
+				<view class="goods-rom" v-for="(item,index) of detail.goods" :key="index" v-if="detail.goods.length">
+					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.img" :index="index">
+						<view class="list-label">已售{{item.sale_count}}</view>
 					</u-lazy-load>
 					<view class="lf-p-20">
 						<view class="list-title">
-							{{item.title}}
+							{{item.name}}
 						</view>
 						<view class="list-price">
 							<!-- <text>{{item.price}}元</text> -->
-							<lf-price :price="item.price"></lf-price>
-							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+							<lf-price :price="item.min_price"></lf-price>
+							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.min_market_price}}</text>
 						</view>
 					</view>
 				</view>
+				<lf-nocontent v-else></lf-nocontent>
 			</view>
 			
 			<view class="introduct">
 				<text class="lf-font-32 lf-color-black">品牌故事</text>
-				<view class="lf-font-28 lf-color-333 lf-m-t-20">
-					在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品
-				</view>
+				<view class="lf-font-28 lf-color-333 lf-m-t-20">{{ detail.story }}</view>
 			</view>
 		</view>
 		
@@ -73,7 +71,7 @@
 		<view class="lf-p-t-30 lf-p-b-30" v-else>
 			<view class="lf-m-b-30 lf-flex lf-w-100">
 				<u-icon name="search" class="search-icon"></u-icon>
-				<input class="rom-search" type="text" placeholder="请输入商品名称" />
+				<input class="rom-search" v-model="search_val" @confirm="search" type="text" placeholder="请输入商品名称" />
 			</view>
 			<view class="special_tab">
 				<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
@@ -100,240 +98,39 @@
 <script>
 	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
 	export default {
+		components: {
+			lfWaterfall
+		},
 		data() {
 			return {
 				title_tab: [
 					{name:'推荐'},
 					{name:'商品'}
 				],
-				tab_list: [
-					{
-						id: 1,
-						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)"
-							}
-						],
-						isRefresher: false,
-						loadingClass: true,
-						loadingText: '正在加载中',
-						page: 1,
-						isPage: true
-					},
-					{
-						id: 2,
-						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)"
-							}
-						],
-						isRefresher: false,
-						loadingClass: true,
-						loadingText: '正在加载中',
-						page: 1,
-						isPage: true
-					},
-					{
-						id: 3,
-						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)"
-							}
-						],
-						isRefresher: false,
-						loadingClass: true,
-						loadingText: '正在加载中',
-						page: 1,
-						isPage: true
-					},
-					{
-						id: 4,
-						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)"
-							}
-						],
-						isRefresher: false,
-						loadingClass: true,
-						loadingText: '正在加载中',
-						page: 1,
-						isPage: true
-					}
-				],
+				tab_list: [],
 				current: 0,
 				title_current:0,
-				show_count: 0,
-				windowHeight: 0,
-				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)"
-					}
-				]
+				brand_id: 0,
+				detail: {},
+				search_val: ''
 			}
 		},
-		components: {
-			lfWaterfall
+		onLoad(options){
+			this.brand_id = options.id;
+			this.getShopDetail();
 		},
 		methods: {
+			getShopDetail(){
+				this.$http.get({
+					api: 'api/brand/detail',
+					data: {
+						brand_id: this.brand_id
+					}
+				}).then(res => {
+					console.log("getShopDetail", res);
+					this.detail = res.data.data;
+				})
+			},
 			tabChange(index){
 				this.current = index;
 				this.clearTabItem();
@@ -341,16 +138,84 @@
 			},
 			titletabChange(index){
 				this.title_current = index;
+				if(this.tab_list.length <= 0){
+					this.initGoodsTabs();
+					this.getData();
+				}
+			},
+			initGoodsTabs(){
+				let _public = {
+					isRefresher: false,
+					loadingClass: true,
+					loadingText: '正在加载中',
+					page: 1,
+					isPage: true
+				};
+				this.tab_list = [{
+					name: '综合',
+					list: [],
+					..._public
+				},{
+					name: '销量',
+					list: [],
+					..._public
+				},{
+					name: '上新',
+					list: [],
+					..._public
+				},{
+					name: '价格',
+					list: [],
+					..._public
+				}]
 			},
 			getData() {
-				let tab_item = this.tab_list[this.current];
-				let isPage = false;
-				tab_item.isPage = isPage;
-				if(!isPage){
-					tab_item.loadingClass = false;
-					tab_item.loadingText = '没有更多数据啦~';
+				let par = {
+					brand_id: this.brand_id
+				}
+				let orderBy = ['','sale_count','updated_at','sell_price'][this.current];
+				if(orderBy){
+					par.orderBy = orderBy;
 				}
-				tab_item.isRefresher = false;
+				if(this.search_val){
+					par.keyword = this.search_val;
+				}
+				this.$http.get({
+					api: 'api/store/list',
+					data: par
+				}).then(res => {
+					console.log("getDat", res);
+					let tab_item = this.tab_list[this.current];
+					let isPage = false; // TODO 默认没有下一页
+					tab_item.isPage = isPage;
+					if(!isPage){
+						tab_item.loadingClass = false;
+						tab_item.loadingText = '没有更多数据啦~';
+					}
+					tab_item.isRefresher = false;
+					let data_list = res.data.data || [];
+					let list = data_list.map(item => {
+						return {
+							id: item.id,
+							original_price: item.market_price,
+							picture: item.img,
+							pictures: [item.img],
+							price: item.min_price,
+							product_id: item.brand_id,
+							sale: item.sale_count,
+							title: item.name
+						}
+					})
+					if(tab_item.page == 1){
+						tab_item.list = list;
+					}else{
+						tab_item.list.push(...list);
+					}
+				})
+			},
+			search(event){
+				this.clearTabItem();
+				this.getData();
 			},
 			// 滑块下标值变化
 			swiperChange(event){
@@ -381,12 +246,9 @@
 				tab_item.loadingText = '正在加载中';
 				tab_item.list = [];
 				this.$set(this.tab_list, this.current, tab_item);
-				// this.$refs.uWaterfallFather[this.current].clear();
+				this.$refs.uWaterfallFather[this.current].clear();
 			}
-		},
-		onShow(){
-			this.windowHeight = getApp().globalData.windowHeight;
-		},
+		}
 	}
 </script>
 
@@ -414,10 +276,16 @@
 		padding-left: 74rpx;
 		font-size: 28rpx;
 	}
+	.recommend-box{
+		display: flex;
+		justify-content: space-between;
+		padding: 30rpx 32rpx;
+		flex-wrap: wrap;
+	}
 	.goods-rom {
 		border-radius: 20rpx;
 		width: 333rpx;
-		height: 497rpx;
+		height: max-content;
 		background-color: white;
 		box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
 		&:nth-child(2n) {
@@ -428,7 +296,7 @@
 		}
 	}
 	.introduct {
-		padding: 0 0 30rpx 32rpx;
+		padding: 30rpx 32rpx;
 	}
 	.com{
 		width: 100%;