building-materials-shop-uniapp-241014/pages_order/product/productDetail.vue

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

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

		<view class="info">
			<view class="title">
				{{ productDetail.name }}
			</view>
			<view class="info-line">
				<view class="price">
					￥<text>{{ productDetail.price }}</text>起
				</view>
				<!-- <view class="num">
					已售1000+
					<image src="../static/product/like.png" mode=""></image>
				</view> -->
			</view>
			<!-- <view class="tips">
				<view class="tip">
					专业设备
				</view>
				<view class="tip">
					科学流程
				</view>
				<view class="tip">
					质量保证
				</view>
			</view> -->
		</view>

		<view class="info-unit">
			<uv-cell title="免费上门退·7天无理由退货·快递发货" isLink>
				<template #icon>
					<text class="text">服务</text>
				</template>
			</uv-cell>

			<uv-cell title="请选择规格" isLink>
				<template #icon>
					<text class="text">参数</text>
				</template>
			</uv-cell>

			<uv-cell>
				<template #icon>
					<text>品牌；适应人群</text>
				</template>
			</uv-cell>
		</view>

		<view class="content">
			<view class="title">
				商品详情
			</view>
			<uv-parse :content="productDetail.details"></uv-parse>
		</view>

		<!-- 分享和租赁按钮 -->
		<submit @submit="submit" />

		<!-- 选择规格 -->
		<!-- <submitUnitSelect ref="submitUnitSelect" /> -->

		<!-- 联系客服弹框 -->
		<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,
			customerServicePopup,
			submitUnitSelect
		},
		data() {
			return {
				productDetail: {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png,https://cdn.uviewui.com/uview/swiper/swiper2.png',
					content: '',
				}
			}
		},
		onLoad(args) {
			console.log(args);
			if(args.id) {
				this.getProductDetail(args.id)
			}
		},
		methods: {
			// 获取商品详情
			getProductDetail(id) {
				this.$api('getProductDetail', {
					productId: id
				}, res => {
					if(res.code == 200) {
						this.productDetail = res.result
					}
				})
			},
			// 联系客服
			share() {
				var that = this
				that.$refs.customerServicePopup.open();
			},
			// 选择完成规格立即租赁下单
			submit() {
				// that.$refs.submitUnitSelect.open();
				
				// 检查库存
				if(this.productDetail.num <= 0) {
					uni.showToast({
						title: '库存不足，无法下单',
						icon: 'none'
					});
					return;
				}
				
				this.$store.commit('setPayOrderProduct', [
					this.productDetail
				])
				
				this.$utils.navigateTo('/pages_order/order/createOrder')
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.swipe {}

		.info {
			padding: 30rpx;
			background-color: #fff;

			.title {
				font-size: 34rpx;
				font-weight: 900;
			}

			.info-line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.price {
					font-size: 28rpx;
					color: $uni-color;

					text {
						font-size: 34rpx;
					}
				}

				.num {
					font-size: 24rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.tips {
				display: flex;
				font-size: 20rpx;
				margin-top: 30rpx;

				.tip {
					margin-right: 40rpx;
				}
			}
		}

		.info-unit {
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #fff;

			/deep/ text {
				font-size: 26rpx;
			}

			/deep/ .text {
				color: #7C7C7C;
				margin-right: 20rpx;
				font-size: 26rpx;
			}
		}

		.content {
			background-color: #fff;
			margin-top: 20rpx;

			.title {
				padding: 30rpx;
			}
		}
	}
</style>