Signed-off-by: liuboyan <632697560@qq.com>

商铺

config/api.js

@@ -24,6 +24,12 @@ module.exports = {
 	getGoodsByType: WX_API_BASE + 'app/product/homeCategoryProductPage',
 	//  获取商铺详情
 	getShopDetail: WX_API_BASE + 'app/product/user/productDetail/storeInfo',
+	//  获取商铺下全部商品分类
+	getCategoryByShop: WX_API_BASE + 'app/product/user/productDetail/store/productCategoryList/',
+	//  获取商铺下全部商品
+	getAllGoodsByShop: WX_API_BASE + 'app/product/user/productDetail/store/productList/',
+	//  获取商铺下分类商品
+	getGoodsByShopAndSort: WX_API_BASE + 'app/product/user/productDetail/store/categoryProductList/',
 	//  获取商品详情
 	getCommonGoodDetail: WX_API_BASE + 'app/product/user/productDetail',
 	//  获取商品评价

pages/index/index.vue

@@ -139,7 +139,7 @@
 			})
 			uni.setStorage({
 				key: 'token',
-				data: "eyJ0eXAiOiJKc29uV2ViVG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiTEJZIiwidG9rZW5fdHlwZSI6InRva2VuIiwidXNlcmlkIjoiMTMxNDc2OTM4MjQ5NjI3MjM4NCIsImFjY291bnQiOiJvQm56ODRoR3g3QTh2VVBqakNLWEJnQUhLb29nIiwiZXhwIjoxNjAyNTgzNTcyLCJuYmYiOjE2MDI1NTQ3NzJ9.zXIQjHNtfT1WIpWQnOAMJZAVO_v8b00RZCZvQ5IhrvU"
+				data: "eyJ0eXAiOiJKc29uV2ViVG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiTEJZIiwidG9rZW5fdHlwZSI6InRva2VuIiwidXNlcmlkIjoiMTMxNDc2OTM4MjQ5NjI3MjM4NCIsImFjY291bnQiOiJvQm56ODRoR3g3QTh2VVBqakNLWEJnQUhLb29nIiwiZXhwIjoxNjAyNjY3NzM2LCJuYmYiOjE2MDI2Mzg5MzZ9.o7XM7earJES_zGaJ_drkDsjGH2Po-zR1FZCBpK2cMlY"
 			});
 
 			uni.setStorage({
@@ -150,7 +150,7 @@
 					userId: "1314769382496272384",
 				}
 			});
-			// this.appLoginWx()
+			this.appLoginWx()
 			setTimeout(() => {
 				this.triggered = true;
 			}, 1000)
@@ -175,6 +175,7 @@
 												rawData: info.rawData,
 												signature: info.signature,
 											}, 'POST').then(res3 => {
+													console.log(res3)
 												if (res3.code == 0) {
 													uni.setStorage({
 														key: 'token',
@@ -190,6 +191,7 @@
 													});
 												}
 											}).catch(res3 => {
+													console.log(res3)
 												uni.showToast({
 													title: "微信登录授权失败",
 													icon: "none"

pagesGood/shopDetails.vue

@@ -1,19 +1,67 @@
 <template>
-	<view class="container">
-		
-			<view class="shop-bg"></view>
-			<view class="shop-info">
-				
-				<view class="shop-icon">
-				<cover-image :src="shopData.logo"></cover-image>
+	<scroll-view id="shopBox" class="container" scroll-y="true" @scrolltolower="handleLoadMore">
+		<view class="shop-bg"></view>
+		<view class="shop-info">
+			<view class="shop-icon">
+				<cover-image class="shop-logo" :src="shopData.logo"></cover-image>
+			</view>
+			<view class="shop-name">{{shopData.name}}</view>
+			<view class="shop-sell">已售商品{{shopData.soldCount}}</view>
+		</view>
+		<view class="shop-image">
+			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
+				<swiper-item v-for="(item,index) in shopData.storeImgUrl" :key="index">
+					<cover-image :src="item.imgPath"></cover-image>
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="shop-tab">
+			<u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="changeTabs" font-size="30" active-color="#52A63A"
+			 inactive-color="#666666" :bold="false" height="90" bar-width="80"></u-tabs>
+		</view>
+		<view class="shop-sort" v-show="!tabIndex">
+			<u-dropdown active-color="#52A63A">
+				<u-dropdown-item v-model="goodSort" title="新品" :options="options1"></u-dropdown-item>
+				<u-dropdown-item v-model="goodSort" title="价格" :options="options2"></u-dropdown-item>
+				<u-dropdown-item v-model="goodSort" title="销量" :options="options3"></u-dropdown-item>
+			</u-dropdown>
+		</view>
+		<view class="shop-all-goods" v-show="!tabIndex">
+			<view class="goods-row" v-for="(item,index) in allGoodsList" :key="index" @click="goToGoodDetails(item)">
+				<cover-image class="goods-img" :src="item.imgPath"></cover-image>
+				<view class="goods-info">
+					<view class="goods-name">{{item.productName}}</view>
+					<view class="goods-number">{{item.sellCount}}人付款</view>
+					<text class="goods-price">
+						<text class="sale-icon">￥</text>
+						<text class="sale-price">{{item.bizPrice}}</text>
+						<text class="price">原价:{{item.originalPrice}}</text>
+						<text class="iconfont icongengduo"></text>
+					</text>
 				</view>
-				<view class="shop-name">{{shopData.name}}</view>
-				<view class="shop-name">已售商品{{shopData.soldCount}}</view>
 			</view>
-			<view class="shop-image">
-				<cover-image :src="shopData.storeImgUrl"></cover-image>
+		</view>
+		<view class="shop-category" v-show="tabIndex">
+			<view class="category-col" v-for="(item,index) in categoryList" :key="index" :style="{width: item.width + '%'}">
+				<view class="category-button" :class="selectSort == item.productCategoryId ? 'category-button-active' : ''" :id="'categoryCol'+index" @click="selectSort = item.productCategoryId">{{item.categoryName}}</view>
+			</view>
+		</view>
+		<view class="shop-all-goods" v-show="tabIndex">
+			<view class="goods-row" v-for="(item,index) in sortGoodsList" :key="index" @click="goToGoodDetails(item)">
+				<cover-image class="goods-img" :src="item.imgPath"></cover-image>
+				<view class="goods-info">
+					<view class="goods-name">{{item.productName}}</view>
+					<view class="goods-number">{{item.sellCount}}人付款</view>
+					<text class="goods-price">
+						<text class="sale-icon">￥</text>
+						<text class="sale-price">{{item.bizPrice}}</text>
+						<text class="price">原价:{{item.originalPrice}}</text>
+						<text class="iconfont icongengduo"></text>
+					</text>
+				</view>
 			</view>
-	</view>
+		</view>
+	</scroll-view>
 </template>
 
 <script>
@@ -23,31 +71,385 @@
 		data() {
 			return {
 				shopData: {
-					name:'',
-					logo:'',
-					soldCount:'',
-					storeImgUrl:'',
+					name: '',
+					logo: '',
+					soldCount: '',
+					storeImgUrl: '',
 				},
+				tabIndex: 0,
+				tabList: [{
+						name: '全部商品'
+					},
+					{
+						name: '分类查看'
+					}
+				],
+				goodSort: 1,
+				options1: [{
+					label: '新品',
+					value: 1
+				}],
+				options2: [{
+						label: '价格升序',
+						value: 2
+					},
+					{
+						label: '价格降序',
+						value: 3
+					}
+				],
+				options3: [{
+						label: '销量升序',
+						value: 4
+					},
+					{
+						label: '销量降序',
+						value: 5
+					}
+				],
+				pageIndex1: 1,
+				isOver1: false,
+				allGoodsList: [],
+				selectSort: '',
+				categoryList: [],
+				pageIndex2: 1,
+				isOver2: false,
+				sortGoodsList: [],
+				queryNode: null,
+				isSet: false,
 			}
 		},
 		onLoad(options) {
 			this.goodId = options.goodId
-				NET.request(API.getShopDetail + '/' + this.goodId, {}, 'GET').then(res => {
+			NET.request(API.getShopDetail + '/' + this.goodId, {}, 'GET').then(res => {
+				if (res.code == 0) {
+					res.data.storeImgUrl = res.data.storeImgUrl.length ? res.data.storeImgUrl : []
+					this.shopData = res.data
+				} else {
+					uni.showToast({
+						title: "获取商铺详情失败",
+						icon: "none"
+					})
+				}
+			}).catch(res => {})
+			NET.request(API.getCategoryByShop + this.goodId, {}, 'GET').then(res => {
+				if (res.code == 0) {
+					this.categoryList = res.data
+					this.selectSort = res.data.length ? res.data[0].productCategoryId : ''
+				} else {
+					uni.showToast({
+						title: "获取分类失败",
+						icon: "none"
+					})
+				}
+			}).catch(res => {})
+			this.getAllGoodsList()
+		},
+		onReady() {
+			this.queryNode = uni.createSelectorQuery().in(this);
+			this.queryNode.select('#shopBox').boundingClientRect(data => {
+				this.winWidth = data.width
+			}).exec();
+		},
+		methods: {
+			//  切换tab
+			changeTabs(index) {
+				this.tabIndex = index;
+				if (index && !this.isSet) {
+					this.$nextTick(() => {
+						this.isSet = true
+						this.setWidth()
+					});
+				}
+			},
+			//  重新查询全部商品
+			changeSort() {
+				this.pageIndex1 = 1
+				this.allGoodsList = []
+				this.getAllGoodsList()
+			},
+			//  懒加载
+			handleLoadMore() {
+				if (this.tabIndex == 0) {
+					if (!this.isOver1) {
+						this.pageIndex1++
+						this.getAllGoodsList()
+					}
+				} else {
+					if (!this.isOver2) {
+						this.pageIndex2++
+						this.getSortGoodsList()
+					}
+				}
+			},
+			//  获取全部商品
+			getAllGoodsList() {
+				NET.request(API.getAllGoodsByShop + this.goodId + '/' + this.pageIndex1 + '/10', {
+					sort: this.goodSort,
+				}, 'GET').then(res => {
 					if (res.code == 0) {
-						// this.shopData = res.data
+						this.isOver1 = res.data.list.length != 10
+						this.allGoodsList = this.allGoodsList.concat(res.data.list)
 					} else {
 						uni.showToast({
-							title: "获取商铺详情失败",
+							title: "获取商品列表失败",
 							icon: "none"
 						})
 					}
 				}).catch(res => {})
-		},
-		methods: {
-			
+			},
+			//  获取分类商品
+			getSortGoodsList() {
+				NET.request(API.getGoodsByShopAndSort + this.selectSort + '/' + this.pageIndex2 + '/10', {
+					tenantCode: this.shopData.code,
+				}, 'GET').then(res => {
+					if (res.code == 0) {
+						this.isOver2 = res.data.list.length != 10
+						this.sortGoodsList = this.sortGoodsList.concat(res.data.list)
+					} else {
+						uni.showToast({
+							title: "获取商品列表失败",
+							icon: "none"
+						})
+					}
+				}).catch(res => {})
+			},
+			//  跳转商品详情
+			goToGoodDetails(item) {
+				uni.navigateTo({
+					url: '/pagesGood/goodDetails?goodId=' + item.id
+				});
+			},
+			//  动态渲染宽度
+			setWidth() {
+				this.categoryList.forEach((site, index) => {
+					this.queryNode.select('#categoryCol' + index).boundingClientRect(data => {
+						if (data.width > this.winWidth * 0.66) {
+							site.width = 100
+						} else if (data.width > this.winWidth * 0.33) {
+							site.width = 66
+						} else {
+							site.width = 33
+						}
+					}).exec();
+				})
+			}
 		},
 	}
 </script>
 
-<style>
+<style lang="less" scoped>
+	page {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container {
+		width: 100%;
+		height: 100%;
+		float: left;
+
+		.shop-bg {
+			width: 100%;
+			height: 120px;
+			float: left;
+			background-color: #52A63A;
+		}
+
+		.shop-info {
+			width: 100%;
+			height: 90px;
+			float: left;
+			background: #FFFFFF;
+			border-radius: 10px 10px 0px 0px;
+			margin-top: -25px;
+
+			.shop-icon {
+				width: 100%;
+				height: 60px;
+				float: left;
+				margin-top: -30px;
+
+				.shop-logo {
+					width: 60px;
+					height: 60px;
+					border-radius: 50%;
+					overflow: hidden;
+					position: relative;
+					left: 50%;
+					transform: translateX(-50%);
+				}
+			}
+
+			.shop-name {
+				width: 100%;
+				height: 34px;
+				line-height: 34px;
+				float: left;
+				font-size: 15px;
+				font-family: SimHei;
+				color: #333333;
+				text-align: center;
+			}
+
+			.shop-sell {
+				width: 100%;
+				height: 16px;
+				line-height: 16px;
+				float: left;
+				font-size: 12px;
+				font-family: SimHei;
+				color: #666666;
+				text-align: center;
+			}
+		}
+
+		.shop-image {
+			width: 100%;
+			height: 170px;
+			float: left;
+			box-sizing: border-box;
+			padding: 10px 15px 20px 15px;
+			background-color: #f7f7f7;
+
+			.swiper {
+				height: 140px;
+			}
+		}
+
+		.shop-tab {
+			width: 100%;
+			height: 45px;
+			float: left;
+			background-color: #FFFFFF;
+		}
+
+		.shop-sort {
+			width: 100%;
+			height: 40px;
+			float: left;
+			background-color: #FFFFFF;
+		}
+
+		.shop-category {
+			width: 100%;
+			float: left;
+			background-color: #FFFFFF;
+
+			.category-col {
+				min-width: 33%;
+				height: 26px;
+				float: left;
+				margin: 6px 0;
+				box-sizing: content-box;
+
+				.category-button {
+					height: 24px;
+					float: left;
+					border-radius: 13px;
+					box-sizing: content-box;
+					border: 1px solid #51A539;
+					padding: 0 16px;
+					position: relative;
+					left: 50%;
+					transform: translateX(-50%);
+					line-height: 24px;
+					font-size: 12px;
+					font-family: PingFang SC;
+					color: #52A539;
+				}
+				.category-button-active{
+					background-color: #52A539;
+					color: #FFFFFF;
+				}
+			}
+		}
+
+		.shop-all-goods {
+			width: 100%;
+			float: left;
+			padding: 6px 0 0px 0;
+			box-sizing: border-box;
+			overflow-y: auto;
+			background-color: #f7f7f7;
+
+			.goods-row {
+				width: calc(100% - 24px);
+				height: 104px;
+				float: left;
+				margin: 6px 0 12px 12px;
+				background: #FFFFFF;
+				box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.09);
+				border-radius: 5px;
+				overflow: hidden;
+				display: flex;
+
+				.goods-img {
+					width: 104px;
+					height: 104px;
+					object-fit: cover;
+				}
+
+				.goods-info {
+					width: calc(100% - 104px);
+					padding: 10px 10px 10px 12px;
+					box-sizing: border-box;
+
+					.goods-name {
+						height: 36px;
+						font-size: 15px;
+						font-family: PingFang SC;
+						color: #333333;
+						line-height: 18px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						-webkit-box-orient: vertical;
+						word-wrap: break-word;
+					}
+
+					.goods-number {
+						height: 16px;
+						font-size: 12px;
+						font-family: PingFang SC;
+						color: #666666;
+						line-height: 16px;
+						margin: 6px 0 4px 0;
+					}
+
+					.goods-price {
+						height: 24px;
+						line-height: 24px;
+						font-family: PingFang SC;
+
+						.sale-icon {
+							font-size: 12px;
+							color: #6CA63A;
+							margin-left: -2px;
+						}
+
+						.sale-price {
+							font-size: 22px;
+							color: #6CA63A;
+							margin-right: 6px;
+						}
+
+						.price {
+							font-size: 12px;
+							text-decoration: line-through;
+							color: #A67954;
+						}
+
+						.iconfont {
+							float: right;
+							color: #999999;
+							font-size: 32px;
+							line-height: 28px;
+						}
+					}
+				}
+			}
+		}
+	}
 </style>