jewelry-front/pages_order/product/productDetail.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<!-- <navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" /> -->
		
		<view class="leftClick"
		@click="$utils.navigateBack">
			<uv-icon
			size="30rpx"
			color="#fff"
			name="arrow-left"></uv-icon>
		</view>

		<view class="swipe">
			<uv-swiper :list="productDetail.image
			&& productDetail.image.split(',')" indicator height="750rpx"></uv-swiper>
		</view>

		<!-- 商品标题 -->
		<view class="info">
			<view class="title">
				{{ productDetail.title }}
			</view>
		
			<view class="price">
				<view class="money">
					￥<text>{{ productDetail.price }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="oldPrice">
					￥<text>{{ productDetail.oldPrice }}</text>
					<text class="unit">/元</text>
				</view>
			</view>
			
			<view class="price">
				<view class="money">
					￥<text>{{ productDetail.goldPrice }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="price-imgs">
					<image :src="configList.vip_money_one" mode="aspectFill"
						class="price-img"></image>
				</view>
			</view>
			
			<view class="price">
				<view class="money">
					￥<text>{{ productDetail.silverPrice }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="price-imgs">
					<image :src="configList.vip_money_two" mode="aspectFill" class="price-img">
					</image>
				</view>
			</view>
			
			<view class="price">
				<view class="money">
					￥<text>{{ productDetail.diamondPrice }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="price-imgs">
					<image :src="configList.vip_money_three" mode="aspectFill" class="price-img">
					</image>
				</view>
			</view>
			
			<!-- 库存信息 -->
			<view class="stock-info">
				<text>库存: {{ productDetail.num }}件</text>
				<text v-if="productDetail.num <= 0" class="stock-warning">库存不足</text>
			</view>
		</view>

		<!-- 服务 -->
		<view class="server">
			<view class="setver-main">
				<view class="title">服务</view>
				<view class="descript">
					免费上门退·7天无理由退货·快递发货
				</view>
			</view>

			<view class="server-arraw">
				<uv-icon name="arrow-right"></uv-icon>
			</view>
		</view>

		<!-- 参数 -->
		<view v-if="productDetail.sku" class="params">
			<view class="params-main">
				<view class="title">参数</view>
				<view class="descript">
					{{ productDetail.sku }}
				</view>
			</view>

			<view class="server-arraw">
				<uv-icon name="arrow-right"></uv-icon>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="item-line">
			<view class="before"></view>
			<view class="label">商品详情</view>
		</view>

		<uv-parse :content="productDetail.details"></uv-parse>

		<!-- 分享和购买按钮 -->
		<submit 
		@service="service" 
		@toSend="toSend"
		@submit="submit" 
		@addCart="addCart"
		:detail="productDetail"
		:disabled="productDetail.num <= 0" />

		<!-- 联系客服 -->
		<customerServicePopup ref="customerServicePopup" />
	</view>
</template>

<script>
	import submit from '../components/product/submit.vue'
	import submitUnitSelect from '../components/product/submitUnitSelect.vue'
	import customerServicePopup from '@/components/config/customerServicePopup.vue'

	export default {
		components: {
			submit,
			submitUnitSelect,
			customerServicePopup
		},
		data() {
			return {
				productDetail: {
					image: '',
					details: '',
				},
				id: 0,
			}
		},
		onLoad(args) {
			this.id = args.id
		},
		onShow() {
			this.getRiceProductDetail()
		},
		methods: {
			// 分享商品
			share() {

			},
			// 加入购物车
			addCart(){
				// 检查库存
				if(this.productDetail.num <= 0) {
					uni.showToast({
						title: '库存不足，无法加入购物车',
						icon: 'none'
					});
					return;
				}
				
				this.$api('addCart', {
					shopId : this.id,
					num : 1,
				}, res => {
					if(res.code == 200){
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none'
						})
					}
				})
			},
			// 立即下单
			submit() {
				// 检查库存
				if(this.productDetail.num <= 0) {
					uni.showToast({
						title: '库存不足，无法下单',
						icon: 'none'
					});
					return;
				}
				
				this.$store.commit('setPayOrderProduct', [
					this.productDetail
				])

				this.$utils.navigateTo('/pages_order/order/createOrder')
			},
			toSend(){
				// 检查库存
				if(this.productDetail.num <= 0) {
					uni.showToast({
						title: '库存不足，无法赠送',
						icon: 'none'
					});
					return;
				}
				
				this.$store.commit('setPayOrderProduct', [
					this.productDetail
				])
				
				// this.$utils.navigateTo('/pages_order/order/receiveGift?id=1894006757315850241')
				
				this.$utils.navigateTo('/pages_order/order/createOrder?type=give')
			},
			// 获取商品
			getRiceProductDetail() {
				this.$api('getRiceProductDetail', {
					id: this.id
				}, res => {
					if (res.code == 200) {
						// 保留API返回的真实库存值，不再强制设置为1
						// 如果API没有返回库存，则默认为0
						if(res.result.num === undefined) {
							res.result.num = 0;
						}
						this.productDetail = res.result
					}
				})
			},
			// 联系客服
			service() {
				this.$refs.customerServicePopup.open()
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 120rpx;
		
		.leftClick{
			position: absolute;
			top: calc(var(--status-bar-height) + 20rpx);
			left: 20rpx;
			background-color: #00000073;
			padding: 20rpx;
			border-radius: 50%;
			z-index: 99;
		}
		
		.swipe {}

		// 商品标题
		.info {
			padding: 20rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			gap: 14rpx;
			.title {
				font-size: 36rpx;
				font-weight: 900;
			}
		}

		// 服务 & 参数
		.server,
		.params {
			background: white;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.setver-main,
			.params-main {
				display: flex;
				flex-wrap: wrap;
				width: 90%;
				font-size: 32rpx;

				.title {
					color: #7C7C7C;
					margin-right: 20rpx;
				}
			}

			.server-arraw {
				display: flex;
				justify-content: flex-end;
				text-align: right;
			}
		}
		
		// 价格
		.price {
			display: flex;
			align-items: center;
			color: #f40;
			font-size: 30rpx;
			align-items: flex-end;
			
			.money {
				font-size: 30rpx;
				.unit {
					font-size: 24rpx;
				}
			}
			.price-imgs {
				display: flex;
				flex-wrap: wrap;
		
				.price-img {
					width: 80rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
		
		.stock-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;
			font-size: 28rpx;
			color: #666;
			
			.stock-warning {
				color: #ff0000;
				font-weight: bold;
			}
		}
		.oldPrice{
			color: #999;
			font-size: 24rpx;
			text-decoration: line-through;
		}

		// 商品详情
		.item-line {
			display: flex;
			background: white;
			box-sizing: border-box;
			font-size: 34rpx;
			padding: 20rpx;
		}

		.item-line .before {
			content: "";
			width: 8rpx;
			height: 30rpx;
			background: $uni-color;
			border-radius: 4rpx;
			margin-right: 10rpx;
			margin-top: 15rpx;
		}

		.item-line .label {
			display: flex;
			align-items: center;
			width: 152rpx;
			height: 60rpx;
		}
	}
</style>