Jingde-town-wechat-uniapp/pages_order/product/productDetail.vue

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

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

		<view class="info">
			<view class="title">
				{{productDetail.waresTitle}}
			</view>
			<view class="info-line">
				<view class="price">
					￥<text>{{productDetail.waresPrice}}</text>起
				</view>
				<view class="num">
					{{productDetail.waresSales}}
					<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">免费上门退·7天无理由退货·快递发货</text>
				</template>
			</uv-cell>

			<uv-cell title="参数" isLink>
				<template #icon>
					<text class="text">品牌；适应人群</text>
				</template>
			</uv-cell>
		</view>

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

		<!-- 分享和租赁按钮 -->
		<submit 
		:detail="productDetail"
		:collectonFlag="collectonFlag"
		@collect="addCollection"
		@submit="$refs.submitUnitSelect.open()" @share="share" />

		<!-- 选择规格 -->
		<submitUnitSelect ref="submitUnitSelect" :detail="productDetail"/>
	</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: {},
				productId : 0,
				collectonFlag : false,
			}
		},
		onLoad(args) {
			this.productId = args.id
		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			this.getData()
		},
		onShareAppMessage(res) {
		    return {
		      title: this.productDetail.waresTitle,
		      path: '/pages_order/product/productDetail?id=' + this.id
		    }
		},
		methods: {
			// 分享商品
			share() {

			},
			// 选择完成规格立即租赁下单
			submit() {

			},
			getData() {
				let data = {
					waresId: this.productId
				}
				if(uni.getStorageSync('token')){
					data.token = uni.getStorageSync('token')
				}
				this.$api('queryWaresById', data,
				res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						this.productDetail = res.result.travelWares
						this.collectonFlag = res.result.collectonFlag
					}
				})
			},
			// 添加收藏
			addCollection(){
				this.$api('addCollection', {
					itemId : this.productDetail.id,
					collectionType : 6,
				}, res => {
					if(res.code == 200){
						this.getData()
						
						uni.showToast({
							title: res.message,
							icon:'none'
						})
					}
				})
			},
		}
	}
</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>