qjd-user-uniapp/pagesGood/goodDetails.vue

<template>
	<view class="container">
		<swiper class="swiper" :style="{width: swiperHeight+'px', height: swiperHeight+'px'}" :indicator-dots="true" indicator-color="#9A9A9A" indicator-active-color="#52A63A" :autoplay="true"
		 :interval="3000" :duration="500">
			<swiper-item v-for="(item,index) in goodData.imgs" :key="index">
				<image :src="item.imgPath" mode="aspectFill" style="width: 100%;height: 100%;"></image>
			</swiper-item>
		</swiper>
		<view class="good-info">
			<view class="auction-date" v-if="goodData.productType == 2">
				<text class="iconfont iconshijian"></text>
				{{goodData.auctionEndTime}}结束
			</view>
			<view class="good-price">
				<view class="auction-unit" v-if="goodData.productType == 2 || goodData.productType == 4">
					<view class="unit-type">RMB</view>
					<view class="unit-text">当前价</view>
				</view>
				<text class="sale-icon">￥</text>
				<text class="sale-price">{{ goodData.productType == 2 ? currentPrice : goodData.bizPrice }}</text>
				<text class="price" v-if="goodData.productType != 2">原价:{{goodData.originalPrice}}</text>
				<text class="seller-count" v-if="goodData.productType != 2 && goodData.productType != 4">{{goodData.sellCount}}人付款</text>
				<text class="good-stock" v-if="goodData.productType == 2">仅限{{goodData.stock}}份</text>
			</view>
			<view class="good-name">{{goodData.productName}}</view>
			<view class="good-plant" v-if="goodData.productType == 4">时长：{{goodData.term}}天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;面积：{{goodData.areaSize}}平米</view>
			<view class="good-detail">{{goodData.productDescribe ? goodData.productDescribe : '暂无描述'}}</view>
		</view>
		<view class="good-data" v-if="goodData.productType != 2 && goodData.productType != 4">
			<text class="good-select">商品规格</text>
			<!-- <text class="good-unit">{{number}}&nbsp;{{goodData.unit ? goodData.unit : ''}}</text> -->
			<text class="good-unit">{{goodData.unit ? goodData.unit : ''}}</text>
			<!-- 			<text class="iconfont iconfangxiang"></text>
 -->
		</view>
		<view class="buy-num" v-if="goodData.productType != 2">
			<view class="buy-text">购买数量：</view>
			<view>
				<uni-icons type="minus-filled" size="20" color="#A67A54" @click="number>1?number--:''"></uni-icons>
				<text class="buy-select">{{number}}</text>
				<uni-icons type="plus-filled" size="20" color="#A67A54" @click="number++"></uni-icons>
			</view>
		</view>
		<view class="tab-box">
			<view class="tab-col" :class="tabIndex == 1 ? 'tab-col-active' :''" @click="tabIndex = 1">产品介绍</view>
			<view class="tab-col" :class="tabIndex == 2 ? 'tab-col-active' :''" v-if="goodData.productType != 2 && goodData.productType != 4 "
			 @click="tabIndex = 2">用户评价</view>
		</view>
		<rich-text :nodes="goodData.sellDesc" v-if="tabIndex == 1"></rich-text>
		<view class="good-assess" v-else>
			<view class="assess-row" v-for="(item,index) in assessList" :key="index">
				<image class="assess-head" :src="item.headimg"></image>
				<view class="assess-info">
					<view class="assess-name">{{item.nickname}}</view>
					<view class="assess-date">{{item.evaluateTime}}</view>
					<view class="assess-sore-box">
						<u-rate v-model="item.score" active-color="#FFAE21" disabled></u-rate>
					</view>
					<view class="assess-text">{{item.evaluateContent}}</view>
					<view class="assess-img-box">
						<image class="img-col" v-for="site in item.evaluateImgs" :key="site" :src="site.imgUrl"></image>
					</view>
				</view>
			</view>
			<view class="assess-more" @click="goToEvaluate()">显示全部</view>
		</view>
		<view class="good-recommend">
			<view class="recommend-title">为您推荐</view>
			<scroll-view class="recommend-box" scroll-x="true">
				<view class="good-col" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
					<image class="good-img" :src="item.imgPath" mode="aspectFill"></image>
					<view class="good-name">{{item.productName}}</view>
					<view class="good-price">￥{{item.bizPrice}}</view>
				</view>
			</scroll-view>
		</view>
		<uni-goods-nav :fill="true" :options="goodData.productType == 4 ? [] : options" @click="goToShop" @buttonClick="showPopup"
		 style="width: 100%; position: fixed; bottom: 0px;" :buttonGroup="goodData.productType == 2 ? buttonGroup2 : (goodData.productType == 4 ? (minePlant ? buttonGroup4 : buttonGroup3) : buttonGroup1)" />
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="popup-good-info-box">
					<image mode="aspectFill" class="popup-good-img" v-if="goodData.imgs.length" :src="goodData.imgs[0].imgPath"></image>
					<view class="popup-good-data">
						<view class="popup-good-price"><text style="font-size: 14px;">￥</text>{{goodData.bizPrice}}</view>
						<view class="popup-good-number">库存{{goodData.stock}}件</view>
						<view class="popup-good-type">单位：{{goodData.unit}}</view>
					</view>
					<view class="popup-good-close"></view>
				</view>
				<view class="popup-good-info">数量</view>
				<view class="popup-good-number-box">
					<uni-icons type="minus-filled" size="20" color="#A67A54" @click="number>1?number--:''"></uni-icons>
					<text class="good-select">{{number}}</text>
					<uni-icons type="plus-filled" size="20" color="#A67A54" @click="number++"></uni-icons>
				</view>
				<uni-goods-nav :fill="true" :options="[]" :buttonGroup="buttonGroup1" @buttonClick="submitData" style="width: 100%; position: absolute; bottom: 0px;left:0px" />
			</view>
		</uni-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				//  从我的种植进入minePlant为true
				swiperHeight: 375,
				minePlant: false,
				goodId: '',
				goodData: {
					bizPrice: '',
					auctionStartPrice: '',
					originalPrice: '',
					productType: '',
					sellCount: '',
					productName: '',
					productDescribe: '',
					unit: '',
					sellDesc: '',
					stock: '',
					auctionEndTime: '',
					term: '',
					areaSize: '',
					imgs: [],
				},
				orderId: '',
				currentPrice: '',
				assessList: [],
				goodsList: [],
				number: 1,
				tabIndex: 1,
				options: [{
					icon: 'shop',
					text: '店铺',
				}],
				buttonGroup1: [{
						text: '加入购物车',
						backgroundColor: '#75BD60',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#52A63A',
						color: '#fff'
					}
				],
				buttonGroup2: [{
					text: '立即参拍',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
				buttonGroup3: [{
					text: '立即购买',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
				buttonGroup4: [{
					text: '视察',
					backgroundColor: '#75BD60',
					color: '#fff'
				}, {
					text: '委托',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
			}
		},
		onLoad(options) {
			this.goodId = options.goodId ? options.goodId : ''
			this.minePlant = options.minePlant ? options.minePlant : false
			this.orderId = options.orderId ? options.orderId : ''
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowWidth
				}
			})
			if (this.minePlant) {
				uni.setNavigationBarTitle({
				    title:'我的种植'
				})
			} else {
				uni.setNavigationBarTitle({
				    title:'商品详情'
				})
			}
		},
		onReady() {
			this.getGoodsList()
			if (this.goodId) {
				NET.request(API.getCommonGoodDetail + '/' + this.goodId, {}, 'GET').then(res => {
					this.goodData = res.data
					if(this.goodData.sellDesc) this.goodData.sellDesc = this.goodData.sellDesc.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
					if (this.goodData.productType == 2) {
						this.getAuctionData()
					}
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取商品详情失败',
						type: 'warning',
					})
				})
				NET.request(API.getAssessList + this.goodId + '/1/3', {}, 'GET').then(res => {
					this.assessList = res.data.list
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取商品评价失败',
						type: 'warning',
					})
				})
			}
		},
		methods: {
			//  获取拍卖详情
			getAuctionData() {
				NET.request(API.getAuctionDetail + this.goodId, {}, 'GET').then(res => {
					this.currentPrice = res.data.auctionStartPrice
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  跳转商铺页
			goToShop() {
				uni.navigateTo({
					url: '/pagesGood/shopDetails?goodId=' + this.goodId
				});
			},
			//  跳转评价页
			goToEvaluate() {
				uni.navigateTo({
					url: '/pagesGood/evaluateList?goodId=' + this.goodId
				});
			},
			//  获取为你推荐
			getGoodsList() {
				NET.request(API.getPreferGoods, {}, 'GET').then(res => {
					this.goodsList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取为您推荐列表失败',
						type: 'warning',
					})
				})
			},
			// 跳转为你推荐商品详情
			goToGoodDetails(item) {
				uni.navigateTo({
					url: '/pagesGood/goodDetails?goodId=' + item.productId + '&goodType=' + item.productType
				});
			},
			//  弹出购物弹窗
			showPopup(e) {
				uni.removeStorageSync('defaultAddress');
				this.setGoodStorage()
				if (this.goodData.productType == 2) {
					uni.navigateTo({
						url: '/pagesGood/auctionDetail?goodId=' + this.goodId
					});
				} else if (this.goodData.productType == 4) {
					if (this.minePlant) {
						if (e.index == 0) {
							uni.navigateTo({
								url: '/pagesGood/plantVideo?productId=' + this.goodId
							});
						} else {
							uni.navigateTo({
								url: '/pagesMain/entrustList?productId=' + this.goodData.productId + '&tenantCode=' + this.goodData.tenantCode +
									'&productName=' + this.goodData.productName + '&areaSize=' + this.orderId + '&orderId=' + this.orderId
							});
						}
					} else {
						// if (e.index == 0) {
						// 	this.$refs.popup.open()
						// } else if (e.index == 1) {
							uni.navigateTo({
								url: '/pagesGood/orderPay?flag=2&orderType=3&paySum=' + this.goodData.bizPrice
							});
						// }
					}
				} else {
					this.$refs.popup.open()
				}
			},
			//  存入商品信息缓存
			setGoodStorage() {
				uni.setStorage({
					key: 'orderData',
					data: {
						tenantCode: this.goodData.tenantCode,
						supplierName: this.goodData.supplierName,
						areaSize: this.goodData.productType == 4 ? this.goodData.areaSize : '',
						term: this.goodData.productType == 4 ? this.goodData.term : '',
						goodsList: [{
							bizPrice: this.goodData.bizPrice,
							buyNum: this.number,
							imgUrl: this.goodData.imgs.length ? this.goodData.imgs[0].imgPath : '',
							originalPrice: this.goodData.productType == 2 ? this.goodData.auctionStartPrice : this.goodData.originalPrice,
							productId: this.goodId,
							productName: this.goodData.productName,
							productType: this.goodData.productType,
							shoppingcartId: '',
						}]
					}
				});
			},
			//  提交操作
			submitData(e) {
				if (e.index) {
					//  立即购买
					this.setGoodStorage()
					uni.navigateTo({
						url: '/pagesGood/orderPay?flag=2&orderType=1'
					});
				} else {
					//  加入购物车
					NET.request(API.addCart, {
						productId: this.goodId,
						productName: this.goodData.productName,
						imgUrl: this.goodData.imgs.length ? this.goodData.imgs[0].imgPath : '',
						bizPrice: this.goodData.bizPrice,
						originalPrice: this.goodData.originalPrice,
						productType: this.goodData.productType,
						tenantCode: this.goodData.tenantCode,
						buyNum: this.number
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '加入购物车成功',
							type: 'success',
						})
						this.$refs.popup.close()
					}).catch(error => {
						this.$refs.uTips.show({
							title: '加入购物车失败',
							type: 'warning',
						})
					})
				}
			},
		},
	}
</script>
<style lang="less">
	.swiper {
		/deep/.uni-swiper-dot-active {
			width: 16px !important;
			border-radius: 8px;
		}
	}
</style>
<style lang="less" scoped>
	.container {
		background-color: #f7f7f7;
		padding-bottom: 50px;

		.swiper {
			// height: 375px;

			/deep/.uni-swiper-dot-active {
				width: 16px !important;
				border-radius: 8px;
			}
		}

		.good-info {
			box-sizing: border-box;
			padding: 0px 16px 22px 16px;
			background-color: #FFFFFF;

			.auction-date {
				width: calc(100% + 32px);
				height: 32px;
				box-sizing: border-box;
				padding: 0 16px;
				margin-left: -16px;
				background: #999999;
				line-height: 32px;
				font-size: 12px;
				font-family: PingFang SC;
				color: #FFFFFF;

				.iconshijian {
					font-size: 16px;
					margin-right: 8px;
				}
			}

			.good-price {
				height: 26px;
				padding-top: 22px;
				box-sizing: content-box;
				line-height: 26px;
				font-family: PingFang SC;
				white-space: nowrap;

				.auction-unit {
					width: 40px;
					height: 26px;
					float: left;

					.unit-type {
						height: 12px;
						font-size: 9px;
						font-family: PingFang SC;
						color: #666666;
						line-height: 9px;
					}

					.unit-text {
						height: 12px;
						font-size: 9px;
						font-family: PingFang SC;
						color: #52A63A;
						line-height: 12px;
					}
				}

				.sale-icon {
					font-size: 16px;
					color: #52A63A;
					margin-left: -2px;
				}

				.sale-price {
					font-size: 24px;
					color: #52A63A;
				}

				.price {
					font-size: 12px;
					text-decoration: line-through;
					color: #A67A54;
					margin-left: 6px;
				}

				.seller-count {
					float: right;
					font-size: 12px;
					color: #666666;
				}

				.good-stock {
					float: right;
					font-size: 12px;
					color: #A67954;
				}
			}

			.good-name {
				line-height: 20px;
				font-size: 16px;
				color: #343434;
				font-family: PingFang SC;
				margin: 12px 0 8px 0;
			}

			.good-plant {
				line-height: 14px;
				font-size: 12px;
				color: #000000;
				font-family: PingFang SC;
				margin-bottom: 4px;
			}

			.good-detail {
				line-height: 16px;
				font-size: 12px;
				color: #666666;
				font-family: PingFang SC;
			}
		}

		.good-data {
			height: 46px;
			margin-top: 10px;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding: 14px 16px;
			font-family: PingFang SC;
			font-size: 12px;
			line-height: 14px;

			.good-select {
				color: #666666;
				margin-right: 12px;
			}

			.good-unit {
				color: #343434;
			}

			.iconfont {
				float: right;
				font-size: 16px;
				color: #999999;
			}
		}
		
		.buy-num {
			display: flex;
			justify-content: flex-end;
			height: 46px;
			margin-top: 10px;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding: 14px 16px;
			font-family: PingFang SC;
			// font-size: 12px;
			// line-height: 14px;
			.buy-text {
				margin-right: 10px;
			}			
			.buy-select {
				font-size: 16px;
				font-family: PingFang SC;
				color: #343434;
				margin: 0 12px;
				line-height: 20px;
				margin-right: 10px;
			}
		}

		.tab-box {
			height: 50px;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 0 16px;
			display: flex;
			justify-content: space-around;
			margin-top: 10px;

			.tab-col {
				height: 49px;
				font-size: 13px;
				font-family: PingFang SC;
				color: #666666;
				line-height: 50px;
			}

			.tab-col-active {
				font-size: 15px;
				color: #343434;
				border-bottom: 2px solid #52A63A;
			}
		}

		.good-assess {
			width: 100%;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding: 12px 16px 18px 16px;

			.assess-row {
				border-top: 1px solid #F6F6F6;
				padding: 12px 0;
				display: flex;

				.assess-head {
					width: 50px;
					height: 50px;
					object-fit: cover;
					border-radius: 50%;
				}

				.assess-info {
					width: calc(100% - 62px);
					margin-left: 12px;

					.assess-name {
						height: 18px;
						float: left;
						line-height: 18px;
						font-size: 15px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #343434;
					}

					.assess-date {
						height: 18px;
						float: right;
						line-height: 18px;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
					}

					.assess-sore-box {
						width: 100%;
						height: 16px;
						float: left;
						margin: 6px 0;
					}

					.assess-text {
						width: 100%;
						float: left;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
						line-height: 16px;
						margin: 8px 0 10px 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
					}

					.assess-img-box {
						width: 100%;
						float: left;
						display: flex;

						.img-col {
							height: 60px;
							width: 60px;
							object-fit: cover;
							margin: 0 10px 10px 0;
						}
					}
				}
			}

			.assess-row:first-child {
				border-top: none;
				padding-top: 0;
			}

			.assess-more {
				width: 220px;
				height: 32px;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				border: 1px solid #52A63A;
				border-radius: 16px;
				text-align: center;
				font-size: 12px;
				font-family: PingFang SC;
				color: #53A63A;
				line-height: 32px;
			}
		}

		.good-recommend {
			height: 192px;
			background-color: #FFFFFF;
			margin: 10px 0;

			.recommend-title {
				height: 24px;
				padding-left: 16px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #343434;
				line-height: 32px;
			}

			.recommend-box {
				width: 100%;
				height: 168px;
				white-space: nowrap;

				.good-col {
					width: 108px;
					height: 158px;
					margin: 10px 12px 10px 0px;
					border-radius: 5px;
					overflow: hidden;
					background: #FFFFFF;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
					display: inline-block;

					.good-img {
						width: 108px;
						height: 108px;
						object-fit: cover;
					}

					.good-name {
						width: 100%;
						height: 14px;
						float: left;
						box-sizing: border-box;
						padding: 0 5px;
						font-size: 10px;
						font-family: PingFang SC;
						color: #343434;
						line-height: 14px;
						margin: 4px 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.good-price {
						width: 100%;
						height: 16px;
						float: left;
						box-sizing: border-box;
						padding: 0 3px;
						font-size: 14px;
						font-family: PingFang SC;
						color: #56a83a;
						line-height: 16px;
						margin-bottom: 10px
					}
				}

				.good-col:first-child {
					margin-left: 16px;
				}

				.good-col:last-child {
					margin-right: 16px;
				}
			}
		}

		.popup-box {
			width: 100vw;
			height: 362px;
			background-color: #FFFFFF;
			border-radius: 15px 15px 0px 0px;
			box-sizing: border-box;
			padding: 16px 16px 0 16px;

			.popup-good-info-box {
				height: 90px;
				margin-bottom: 4px;
				display: flex;

				.popup-good-img {
					width: 90px;
					height: 90px;
					object-fit: cover;
					border-radius: 5px;
					overflow: hidden;
				}

				.popup-good-data {
					width: calc(100% - 136px);
					height: 90px;
					margin-left: 22px;

					.popup-good-price {
						margin-top: 10px;
						height: 20px;
						line-height: 20px;
						font-size: 20px;
						font-family: PingFang SC;
						color: #52A63A;
					}

					.popup-good-number {
						height: 16px;
						font-size: 13px;
						font-family: PingFang SC;
						color: #9A9A9A;
						line-height: 16px;
						margin: 12px 0 10px 0;
					}

					.popup-good-type {
						height: 16px;
						font-size: 13px;
						font-family: PingFang SC;
						color: #343434;
						line-height: 16px;
					}
				}

				.popup-good-close {
					width: 24px;
					height: 24px;
				}
			}

			.popup-good-info {
				height: 33px;
				box-sizing: border-box;
				padding-top: 16px;
				margin-top: 16px;
				border-top: 1px solid #ECECEC;
				font-size: 14px;
				font-family: PingFang SC;
				color: #9A9A9A;
				line-height: 16px;
			}

			.popup-good-unit {
				height: 28px;
				display: inline-block;
				padding: 0 22px;
				margin-top: 14px;
				background: #52A63A;
				border-radius: 14px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 28px;
			}

			.popup-good-number-box {
				height: 20px;
				float: right;
				margin-top: -20px;

				.good-select {
					font-size: 16px;
					font-family: PingFang SC;
					color: #343434;
					margin: 0 12px;
					line-height: 20px;
				}
			}
		}
	}
</style>