jewelry-front/pages_order/product/productDetail.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />

		<view class="swipe">
			<uv-swiper :list="productDetail.image
			&& productDetail.image.split(',')" indicator height="520rpx"></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>

		<!-- 服务 -->
		<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" 
		:detail="productDetail" />

		<!-- 联系客服 -->
		<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() {

			},
			// 立即下单
			submit() {
				this.$store.commit('setPayOrderProduct', [
					this.productDetail
				])

				this.$utils.navigateTo('/pages_order/order/createOrder')
			},
			toSend(){
				this.$utils.navigateTo('/pages_order/order/instantGift')
			},
			// 获取商品
			getRiceProductDetail() {
				this.$api('getRiceProductDetail', {
					id: this.id
				}, res => {
					if (res.code == 200) {
						res.result.num = 1
						this.productDetail = res.result
					}
				})
			},
			// 联系客服
			service() {
				this.$refs.customerServicePopup.open()
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.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;
				}
			}
		}
		.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>