qjd-user-uniapp/pagesGood/shopDetails.vue

<template>
	<scroll-view id="shopBox" class="container" scroll-y="true" @scrolltolower="handleLoadMore">
		<view class="shop-bg"></view>
		<view class="shop-info">
			<view class="shop-icon">
				<image class="shop-logo" :src="shopData.logo"></image>
			</view>
			<view class="shop-name">{{shopData.name}}</view>
			<view class="shop-sell">已售商品{{shopData.soldCount}}</view>
		</view>
		<view class="shop-image">
			<swiper class="swiper" :style="{height: (swiperHeight/2)+'px'}" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in shopData.storeImgUrl" :key="index">
					<image :src="item" mode="aspectFill" style="width: 100%;height: 100%;"></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" :class="dropShow ? 'visibility-drop' : 'hidden-drop'" v-show="!tabIndex">
			<u-dropdown active-color="#52A63A" @close="dropShow = false" @open="dropShow = true">
				<u-dropdown-item v-model="goodSort" title="新品" :options="options1" @change="changeSort()"></u-dropdown-item>
				<u-dropdown-item v-model="goodSort" title="价格" :options="options2" @change="changeSort()"></u-dropdown-item>
				<u-dropdown-item v-model="goodSort" title="销量" :options="options3" @change="changeSort()"></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)">
				<image class="goods-img" :src="item.imgPath" mode="aspectFill"></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 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="changeCategory(item)">{{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)">
				<image class="goods-img" :src="item.imgPath"></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>
		<u-top-tips ref="uTips"></u-top-tips>
	</scroll-view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				swiperHeight: 140,
				shopData: {
					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
					}
				],
				dropShow: false,
				pageIndex1: 1,
				isOver1: false,
				allGoodsList: [],
				selectSort: '',
				categoryList: [],
				pageIndex2: 1,
				isOver2: false,
				sortGoodsList: [],
				isSet: false,
			}
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowWidth
				}
			})
			this.goodId = options.goodId
			NET.request(API.getShopDetail + '/' + this.goodId, {}, 'GET').then(res => {
				res.data.storeImgUrl = res.data.storeImgUrl && res.data.storeImgUrl.length ? res.data.storeImgUrl.split(',') : []
				this.shopData = res.data
			}).catch(res => {
				this.$refs.uTips.show({
					title: '获取商铺详情失败',
					type: 'warning',
				})
			})
			this.getAllGoodsList()
		},
		onReady() {
			let queryNode = uni.createSelectorQuery().in(this);
			queryNode.select('#shopBox').boundingClientRect(data => {
				this.winWidth = data.width
			}).exec();
			NET.request(API.getCategoryByShop + this.goodId, {}, 'GET').then(res => {
				this.categoryList = res.data
				this.selectSort = res.data.length ? res.data[0].productCategoryId : ''
				this.getSortGoodsList()
			}).catch(res => {
				this.$refs.uTips.show({
					title: '获取分类失败',
					type: 'warning',
				})
			})
		},
		methods: {
			//  切换tab
			changeTabs(index) {
				this.tabIndex = index;
				if (index && !this.isSet) {
					this.$nextTick(() => {
						this.isSet = true
						this.setWidth()
					});
				}
			},
			//  重新查询全部商品
			changeSort() {
				this.isOver1 = false
				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 => {
					this.isOver1 = res.data.list.length != 10
					this.allGoodsList = this.allGoodsList.concat(res.data.list)
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取商品列表失败',
						type: 'warning',
					})
				})
			},
			//  获取分类商品
			getSortGoodsList() {
				NET.request(API.getGoodsByShopAndSort + this.selectSort + '/' + this.pageIndex2 + '/10', {
					tenantCode: this.selectSort
				}, 'GET').then(res => {
					this.isOver2 = res.data.list.length != 10
					this.sortGoodsList = this.sortGoodsList.concat(res.data.list)
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取商品列表失败',
						type: 'warning',
					})
				})
			},
			//  跳转商品详情
			goToGoodDetails(item) {
				uni.navigateTo({
					url: '/pagesGood/goodDetails?goodId=' + item.productId + '&goodType=' + item.productType
				});
			},
			//  重新查询分类商品
			changeCategory(item) {
				this.selectSort = item.productCategoryId
				this.isOver2 = false
				this.pageIndex2 = 1
				this.sortGoodsList = []
				this.getSortGoodsList()
			},
			//  动态渲染宽度
			setWidth() {
				let queryNode = uni.createSelectorQuery().in(this);
				this.categoryList.forEach((site, index) => {
					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 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;

			/deep/.u-dropdown__content__mask {
				visibility: hidden;
			}
		}

		.visibility-drop {
			/deep/.u-dropdown__content {
				z-index: 100 !important;
				min-height: 106px;
			}
		}

		.hidden-drop {
			/deep/.u-dropdown__content {
				display: none;
			}
		}

		.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: #56a83a;
							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>