teambuy-front/pages_order/product/productDetail.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="详情页" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />

		<!-- <view class="leftClick"
		@click="$utils.navigateBack">
			<uv-icon
			size="30rpx"
			color="#fff"
			name="arrow-left"></uv-icon>
		</view> -->

		<view class="swipe">
			<uv-swiper :list="productDetail.image
			&& productDetail.image.split(',')" @change="e => current1 = e.current" indicator height="650rpx">
				<!-- 指示器 -->
				<template v-slot:indicator>
					<view class="indicator">
						<view class="indicator__dot" v-for="(item, index) in productDetail.image
							&& productDetail.image.split(',')" :key="index" :class="[index === current1 && 'indicator__dot--active']">
						</view>
					</view>
				</template>
			</uv-swiper>
		</view>

		<!-- 商品标题 -->
		<view class="info">
			<view class="new-price">
				<text>￥</text><text :style="{fontSize:'50rpx'}">{{ productDetail.price }}</text>
			</view>
			<view class="title">
				{{ productDetail.title }}
			</view>

			<!-- <view class="price">
				<view class="money">
					￥<text>{{ productDetail.price }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="oldPrice">
					￥<text>{{ productDetail.oldPrice }}</text>
					<text class="unit">/元</text>
				</view>
			</view> -->

			<!-- <view class="price">
				<view class="money">
					￥<text>{{ productDetail.goldPrice }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="price-imgs">
					<image :src="configList.vip_money_one" mode="aspectFill" class="price-img"></image>
				</view>
			</view> -->

			<!-- <view class="price">
				<view class="money">
					￥<text>{{ productDetail.silverPrice }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="price-imgs">
					<image :src="configList.vip_money_two" mode="aspectFill" class="price-img">
					</image>
				</view>
			</view> -->

			<!-- <view class="price">
				<view class="money">
					￥<text>{{ productDetail.diamondPrice }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="price-imgs">
					<image :src="configList.vip_money_three" mode="aspectFill" class="price-img">
					</image>
				</view>
			</view> -->
		</view>

		<!-- 服务 -->
		<!-- <view class="server">
			<view class="setver-main">
				<view class="title">服务</view>
				<view class="descript">
					免费上门退·7天无理由退货·快递发货
				</view>
			</view>

			<view class="server-arraw">
				<uv-icon name="arrow-right"></uv-icon>
			</view>
		</view> -->

		<!-- 参数 -->
		<view v-if="productDetail.sku" class="params">
			<view class="params-main">
				<view class="title">参数</view>
				<view class="descript">
					{{ productDetail.sku }}
				</view>
			</view>

			<view class="server-arraw">
				<uv-icon name="arrow-right"></uv-icon>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="item-line">
			<!-- <view class="before"></view> -->
			<view class="label">商品详情</view>
		</view>

		<uv-parse :content="productDetail.details" />

		<!-- 分享和购买按钮 -->
		<submit @service="service" @toSend="toSend" @submit="submit" @addCart="addCart" :detail="productDetail" />

		<!-- 联系客服 -->
		<customerServicePopup ref="customerServicePopup" />
		<placeOrder ref="placeOrder" :item="productDetail" @addCart="addCart" />
		<uv-safe-bottom />
	</view>
</template>

<script>
	import submit from '../components/product/submit.vue'
	import submitUnitSelect from '../components/product/submitUnitSelect.vue'
	import customerServicePopup from '@/components/config/customerServicePopup.vue'
	import placeOrder from '../components/order/placeOrder.vue'
	import { mapMutations } from 'vuex'
	export default {
		components: {
			submit,
			submitUnitSelect,
			customerServicePopup,
			placeOrder
		},
		data() {
			return {
				productDetail: {
					image: '',
					details: '',
				},
				id: 0,
				current1: 0
			}
		},
		onLoad(args) {
			this.id = args.id
			this.getGoodsDetail()
			if (args.open === 'true') this.submit()
		},
		onShow() {
		},
		methods: {
			...mapMutations( 'cartNum' , ['incrementProduct'] ),
			// 分享商品
			share() {

			},
			// 加入购物车
			addCart(){
				this.incrementProduct({ productId: this.id })
				uni.showLoading({
					title: '加载中...'
				})
				this.$api('addShopcar', {
					goodsId: this.id,
					num: 1,
				}, res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '加入购物车成功',
							icon: 'success',
							duration: 1000
						})
					}
				})

			},
			// 立即下单
			submit() {
				// 如果还没有登录，则先登录
				if (!uni.getStorageSync('token')) {
					this.$utils.navigateTo('/pages_order/auth/wxLogin')
					return
				}
				this.$refs.placeOrder.open()
				// this.$store.commit('setPayOrderProduct', [
				// 	this.productDetail
				// ])
				// this.$utils.navigateTo('/pages_order/order/createOrder')
			},
			toSend(){
				this.$store.commit('setPayOrderProduct', [
					this.productDetail
				])
				
				// this.$utils.navigateTo('/pages_order/order/receiveGift?id=1894006757315850241')
				
				this.$utils.navigateTo('/pages_order/order/createOrder?type=give')
			},
			// 获取商品
			getGoodsDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api('queryGoodsById', {
					id: this.id
				}, res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.productDetail = res.result
					}
				})
			},
			// 联系客服
			service() {
				this.$refs.customerServicePopup.open()
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 120rpx;
		
		.leftClick{
			position: absolute;
			top: calc(var(--status-bar-height) + 20rpx);
			left: 20rpx;
			background-color: #00000073;
			padding: 20rpx;
			border-radius: 50%;
			z-index: 99;
		}
		
		.swipe {
			// 这是轮播图的指示器自定义样式
			@mixin flex($direction: row) {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: $direction;
			}
		
			.indicator {
				@include flex(row);
				justify-content: center;
		
				&__dot {
					height: 8px;
					width: 8px;
					border-radius: 100%;
					background-color: #fff;
					margin: 0 5px;
					transition: background-color 0.3s;
		
					&--active {
						background-color: $uni-color;
					}
				}
			}
		}

		// 商品标题
		.info {
			padding: 20rpx;
			padding-left: 30rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			gap: 14rpx;
			border-bottom: 30rpx #F7F7F7 solid;
			.new-price{
				color: $uni-color-second;
			}
			.title {
				font-size: 30rpx;
				font-weight: 600;
			}
		}
		// 服务 & 参数
		.server,
		.params {
			background: white;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.setver-main,
			.params-main {
				display: flex;
				flex-wrap: wrap;
				width: 90%;
				font-size: 32rpx;

				.title {
					color: #7C7C7C;
					margin-right: 20rpx;
				}
			}

			.server-arraw {
				display: flex;
				justify-content: flex-end;
				text-align: right;
			}
		}
		
		// 价格
		.price {
			display: flex;
			align-items: center;
			color: #f40;
			font-size: 30rpx;
			align-items: flex-end;
			.money {
				font-size: 30rpx;
		
				.unit {
					font-size: 24rpx;
				}
			}
		
			.price-imgs {
				display: flex;
				flex-wrap: wrap;
		
				.price-img {
					width: 80rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
		.oldPrice{
			color: #999;
			font-size: 24rpx;
			text-decoration: line-through;
		}

		// 商品详情
		.item-line {
			display: flex;
			background: white;
			box-sizing: border-box;
			font-size: 34rpx;
			padding: 20rpx;
		}

		.item-line .before {
			content: "";
			width: 8rpx;
			height: 30rpx;
			background: $uni-color;
			border-radius: 4rpx;
			margin-right: 10rpx;
			margin-top: 15rpx;
		}

		.item-line .label {
			display: flex;
			align-items: center;
			width: 152rpx;
			height: 60rpx;
		}
	}
</style>