hotel-tablecloth-uniapp-24-08-29/pages_order/product/productDetail.vue

<template>
	<view class="page">
		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="swipe">
			<uv-swiper 
			:list="detail.hotelGoodsSkuList" 
			indicator
			keyName="pic"
			height="350rpx"></uv-swiper>
		</view>
		
		<view class="info">
			<view class="title">
				{{ detail.name }}
			</view>
			<view class="info-line">
				<view class="price">
					￥<text>{{ detail.originalPrice }}</text>起
				</view>
				<view class="num">
					已售{{ detail.soldNum }}+
					<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="是否有桌布" 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="detail.detail"></uv-parse> -->
			<!-- <img 
			:src="detail.detail"
			style="width: 100%;height: 800rpx;"
			alt="" /> -->
			
			<image 
			v-for="(item,index) in detail.detail && detail.detail.split(',')"
			:src="item" 
			style="width: 100%;"
			mode="widthFix"></image>
		</view>
		
		<!-- 分享和租赁按钮 -->
		<submit 
		@submit="handleSubmit"
		@share="share"/>
		
		<!-- 选择规格 -->
		<submitUnitSelect ref="submitUnitSelect"
		v-if="detail.id"
		:detail="detail"/>
	</view>
</template>

<script>
	import submit from '../components/product/submit.vue'
	import submitUnitSelect from '../components/product/submitUnitSelect.vue'
	export default {
		components : {
			submit,
			submitUnitSelect
		},
		data() {
			return {
				detail : {},
				id : 0,
			}
		},
		onLoad(args) {
			this.id = args.id
			this.getData()
		},
		// 微信小程序分享
		onShareAppMessage(res) {
		    return {
				title: this.detail.name,
				path: '/pages_order/product/productDetail?id=' + this.id
		    }
		},
		methods: {
			// 分享商品
			share(){
				
			},
			// 选择完成规格立即租赁下单
			submit(){
				
			},
			handleSubmit(){
				this.$refs.submitUnitSelect.open()
			},
			getData(){
				this.$api('goodsOne', {
					id : this.id
				}, res => {
					if(res.code == 200){
						this.detail = res.result
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	padding-bottom: 100rpx;
	.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>