qjd-user-uniapp/pagesGood/goodDetails.vue

<template>
	<view class="container">
		<swiper class="swiper" :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">
				<cover-image :src="item.imgPath"></cover-image>
			</swiper-item>
		</swiper>
		<view class="good-info">
			<text class="good-price">
				<text class="sale-icon">￥</text>
				<text class="sale-price">{{goodData.bizPrice}}</text>
				<text class="price">原价:{{goodData.originalPrice}}</text>
				<text class="seller-count">{{goodData.sellCount}}人付款</text>
			</text>
			<view class="good-name">{{goodData.productName}}</view>
			<view class="good-detail">{{goodData.productDescribe}}</view>
		</view>
		<view class="good-data">
			<text class="good-select">选择</text>
			<text class="good-unit">{{number}}&nbsp;{{goodData.unit}}</text>
			<text class="iconfont iconfangxiang"></text>
		</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' :''" @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">
				<cover-image class="assess-head" :src="item.headimg"></cover-image>
				<view class="assess-info">
					<view class="assess-name">{{item.nickname}}</view>
					<view class="assess-date">{{item.replyTime}}</view>
					<view class="assess-sore-box">
						<view class="sore-col" v-for="site in item.score" :key="site"></view>
					</view>
					<view class="assess-text">{{item.replyContent}}</view>
					<view class="assess-img-box">
						<cover-image class="img-col" v-for="site in item.evaluateImgs" :key="site" :src="site.imgUrl"></cover-image>
					</view>
				</view>
			</view>
			<view class="assess-more" @click="">显示全部</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">
					<cover-image class="good-img" :src="item.imgPath"></cover-image>
					<view class="good-name">{{item.name}}</view>
					<view class="good-price">￥{{item.price}}</view>
				</view>
			</scroll-view>
		</view>
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="goToShop" @buttonClick="showPopup"
		 style="width: 100%; position: fixed; bottom: 0px;" />
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="popup-good-info-box">
					<cover-image class="popup-good-img" v-if="goodData.imgs.length" :src="goodData.imgs[0].imgPath"></cover-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">已选</view>
					</view>
					<view class="popup-good-close"></view>
				</view>
				<view class="popup-good-info">单位</view>
				<view class="popup-good-unit">{{goodData.unit}}</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="buttonGroup" @buttonClick="submitData" style="width: 100%; position: absolute; bottom: 0px;left:0px" />
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				goodId: '',
				goodData: {
					bizPrice: '',
					originalPrice: '',
					sellCount: '',
					productName: '',
					productDescribe: '',
					unit: '',
					sellDesc: '',
					stock: '',
					imgs: [],
				},
				assessList: [],
				goodsList: [],
				number: 1,
				tabIndex: 1,
				options: [{
					icon: 'shop',
					text: '店铺',
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#75BD60',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#52A63A',
						color: '#fff'
					}
				]
			}
		},
		onLoad(options) {
			this.goodId = options.goodId ? options.goodId : ''
			this.getGoodsList()
		},
		onReady() {
			if (this.goodId) {
				NET.request(API.getCommonGoodDetail + '/' + this.goodId, {}, 'GET').then(res => {
					if (res.code == 0) {
						this.goodData = res.data
					} else {
						uni.showToast({
							title: "获取商品详情失败",
							icon: "none"
						})
					}
				}).catch(res => {})
				NET.request(API.getAssessList + '/' + this.goodId + '/1/3', {}, 'GET').then(res => {
					if (res.code == 0) {
						this.assessList = res.data.list
					} else {
						uni.showToast({
							title: "获取商品评价失败",
							icon: "none"
						})
					}
				}).catch(res => {})
			}
		},
		methods: {
			//  跳转商铺页
			goToShop() {
				uni.navigateTo({
					url: '/pagesGood/shopDetails?shopId=' + goodData.tenantCode
				});
			},
			//  弹出购物弹窗
			showPopup() {
				this.$refs.popup.open()
			},
			//  获取为你推荐
			getGoodsList() {

			},
			//  提交操作
			submitData(e) {
				if (e.index) {
					//  立即购买
					uni.setStorage({
						key: 'orderData',
						data: {
							tenantCode: this.goodData.tenantCode,
							supplierName: this.goodData.supplierName,
							goodsList: [{
								bizPrice: this.goodData.bizPrice,
								buyNum: this.number,
								imgUrl: this.goodData.imgs.length ? this.goodData.imgs[0].imgPath : '',
								originalPrice: this.goodData.originalPrice,
								productId: this.goodId,
								productName: this.goodData.productName,
								productType: this.goodData.productType,
								tenantCode: this.goodData.tenantCode,
							}]
						}
					});
					uni.navigateTo({
						url: '/pagesGood/goodDetails?orderType=1'
					});
				} else {
					//  加入购物车
					NET.request(API.addCart, {
						productId: this.goodId,
						buyNum: this.number
					}, 'POST').then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: "加入购物车成功",
								icon: "success"
							})
						} else {
							uni.showToast({
								title: "加入购物车失败",
								icon: "none"
							})
						}
					}).catch(res => {})
				}
			},
		},
	}
</script>

<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: 22px 16px;
			background-color: #FFFFFF;

			.good-price {
				height: 26px;
				line-height: 26px;
				font-family: PingFang SC;

				.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-name {
				line-height: 20px;
				font-size: 16px;
				color: #343434;
				font-family: PingFang SC;
				margin: 12px 0 8px 0;
			}

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

		.good-data {
			height: 46px;
			margin: 10px 0;
			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;
			}
		}

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

			.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: 1px solid #10C06E;
			}
		}

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

			.assess-row {
				border-bottom: 1px solid #F6F6F6;
				padding-bottom: 18px;
				display: flex;

				.assess-head {
					width: 50px;
					height: 50px;
				}

				.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 {
						height: 16px;
						margin-top: 6px;

						.sore-col {
							margin-right: 4px;
						}
					}

					.assess-text {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
						line-height: 16px;
						margin: 8px 0 10px 0;
					}

					.assess-img-box {
						display: flex;

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

			.assess-row:last-child {
				border-bottom: none;
			}

			.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: 184px;
			background-color: #FFFFFF;
			margin: 10px 0;

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

			.recommend-box {
				width: calc(100% - 32px);

				.good-col {
					width: 108px;
					height: 140px;
					margin-right: 12px;

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

					.good-name {
						font-size: 10px;
						font-family: PingFang SC;
						color: #343434;
						line-height: 14px;
						margin: 4px 0;
					}

					.good-price {
						font-size: 14px;
						font-family: PingFang SC;
						color: #6CA63A;
						line-height: 16px;
					}
				}
			}
		}

		.popup-box {
			width: 100vw;
			height: 400px;
			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>