aluminium-trading-uniapp-240925/pages_order/product/productDetail.vue

<template>
	<view class="page">
		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="swipe">
			<uv-swiper 
			v-if="productDetail.picDetail"
			:list="productDetail.picDetail.split(',')" 
			indicator
			@click="index => previewFullImage(index, 
			productDetail.picDetail.split(','))"
			height="420rpx"></uv-swiper>
		</view>
		
		<view class="info">
			<view class="title">
				{{ productDetail.specsName }}
			</view>
			<view class="info-line">
				<view class="price">
					单价￥<text>{{ productDetail.price }}</text>
				</view>
				<view class="num">
					库存{{ productDetail.num }}
					<!-- <image src="../static/product/like.png" mode=""></image> -->
				</view>
			</view>
			<view class="info-line">
				交货日期：{{ productDetail.transactionTime }}
			</view>
			<view class="info-line">
				提货地址：{{ productDetail.address }}
			</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> -->
		
		<!-- <uv-parse :content="productDetail.content"></uv-parse> -->
		
		
		<view class="content"
		v-if="productDetail.report">
			<view class="title">
				检测报告
			</view>
			
			<view class=""
			style="padding: 0 30rpx;">
				<!-- <uv-album 
				multipleSize="690"
				singleSize="690"
				singleMode="widthFix"
				multipleMode="widthFix"
				:urls="productDetail.report.split(',')">
				</uv-album> -->
				
				<uv-swiper
				:list="productDetail.report.split(',')" 
				indicator
				:autoplay="false"
				@click="index => previewFullImage(index, 
				productDetail.report.split(','))"
				height="350rpx"></uv-swiper>
				
			</view>
		</view>
		
		<view class="content"
		v-if="productDetail.video">
			<view class="title">
				商品视频
			</view>
			
			<view class="list-video">
				<view class="video"
				:key="index"
				v-for="(item, index) in productDetail.video.split(',')">
					<video :src="item"></video>
				</view>
			</view>
		</view>
		
		<view class="content"
		v-if="productDetail.reportVideo">
			<view class="title">
				检测视频
			</view>
			
			<view class="list-video">
				<view class="video"
				:key="index"
				v-for="(item, index) in productDetail.reportVideo.split(',')">
					<video :src="item"></video>
				</view>
			</view>
		</view>
		
		<!-- 分享和租赁按钮 -->
		<submit 
		@submit="submit"
		@share="share"/>
		
		<!-- 选择规格 -->
		<!-- <submitUnitSelect ref="submitUnitSelect"/> -->
	</view>
</template>

<script>
	import submit from '../components/product/submit.vue'
	import submitUnitSelect from '../components/product/submitUnitSelect.vue'
	export default {
		components : {
			submit,
			submitUnitSelect
		},
		data() {
			return {
				productDetail : {
				}
			}
		},
		onLoad(args) {
			this.productDetail = this.$store.state.productDetail
		},
		methods: {
			// 分享商品
			share(){
				
			},
			// 选择完成规格立即租赁下单
			submit(){
				uni.navigateTo({
					url: `/pages_order/tradingPlatform/nowOrder`,
				});
			},
			previewFullImage(index, images){
				uni.previewImage({
					urls: images,
					current: index,
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	padding-bottom: 120rpx;
	.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;
		}
	}
	
	.list-video{
		display: flex;
		flex-wrap: wrap;
		video{
			width: 750rpx;
			height: 420rpx;
		}
	}
}
</style>