universal-wechat-uniapp-241007/pages_order/product/productDetail.vue

<template>
	<view class="page">
		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="swipe">
			<uv-swiper 
			:list="detail.image && detail.image.split(',')" 
			indicator
			height="350rpx"></uv-swiper>
		</view>
		
		<view class="info">
			<view class="title">
				{{ detail.name }}
			</view>
			<view class="nameSub">
				{{ detail.nameSub }}
			</view>
			<view class="info-line">
				<view class="price">
					现价￥<text>
						{{ 
							detail.price
						}}
					</text>
				</view>
				<!-- <view class="num">
					已售{{ detail.soldNum || 0 }}+
					<image src="../static/product/like.png" mode=""></image>
				</view> -->
			</view>
			<view class="favorable" v-if="detail.points">
				<view class="t">
					积分兑换
				</view>
				<view class="p">
					{{ detail.points }}
				</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>
				<template #icon>
					<text>上门取件·送货上门</text>
				</template>
			</uv-cell>
		</view>
		
		<view class="content">
			<view class="title">
				商品详情
			</view>
			
			
			<image 
			v-for="(item,index) in detail.imageDetails && detail.imageDetails.split(',')"
			:src="item" 
			:key="index"
			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
		    }
		},
		onPullDownRefresh() {
			this.getData()
		},
		methods: {
			// 分享商品
			share(){
				
			},
			// 选择完成规格立即租赁下单
			submit(){
				
			},
			handleSubmit(){
				this.$refs.submitUnitSelect.open()
				// uni.showModal({
				// 	title: '您有自己的桌布吗？',
				// 	cancelText: '我没有',
				// 	confirmText: '我有',
				// 	success(r) {
				// 		if(r.confirm){
							
				// 		}else{
				// 		}
				// 	}
				// })
			},
			getData(){
				this.$api('getShopPingDetail', {
					id : this.id
				}, res => {
					uni.stopPullDownRefresh()
					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;
		}
		.nameSub{
			font-size: 30rpx;
			margin-top: 10rpx;
		}
		.info-line{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.price{
				font-size: 28rpx;
				color: $uni-price-color;
				text{
					font-size: 34rpx;
				}
			}
			.num{
				font-size: 24rpx;
				image{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.favorable{
			display: flex;
			// background-image: url(/static/image/product/favorable.png);
			background-size: 100% 100%;
			width: fit-content;
			font-size: 22rpx;
			margin-top: 6rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #ff000011;
			.t{
				padding: 5rpx 10rpx;
			}
			.p{
				padding: 5rpx 10rpx;
				color: #fff;
				background-color: #F03F25;
				height: 100%;
			}
		}
		.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>