taoke/pages/product/product-details.vue

<template>
	<view style="padding-bottom: 100upx;">
		<view style="background: white;padding-bottom: 10upx;">
			<view class="section carousel-wrapper">
				<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					circular>
					<swiper-item v-for="image in product.images">
						<view class="swiper-item">
							<image class="image" :src="image|imagesFilter" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="row row-1">
				<text class="title"><text class="sxzg-icon">省心直供</text>{{product.name}}</text>
			</view>
			<view class="row row-2">
				<text class="org-price">￥{{product.org_price}}</text>
				<text class="stock">剩余库存{{product.stock}}</text>
			</view>
			<view class="row row-3">
				<text class="sxj-icon" style="padding: 0upx 6upx;">省心价</text>
				<text class="price">￥{{product.price}}</text>
			</view>
		</view>

		<view class="details">
			<view class="btn" @tap="detailsIsOpen=!detailsIsOpen">
				<view>点击查看商品详情</view>
				<view class="arrow" :class="{'rotate':detailsIsOpen}">
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
			<view class="content" :class="{'show':detailsIsOpen}">
				<rich-text :nodes="product.details"></rich-text>
			</view>
		</view>

		<view class="section" style="margin-top: 20upx;">
			<view class="col-img-title">
				<image src="../../static/images/like.png" mode="scaleToFill" style="height: 28rpx;width: 363rpx;">
				</image>
			</view>
			<view class="like">
				<scroll-view scroll-x="true" :show-scrollbar="false" :enable-flex="true" style="white-space: nowrap;">
					<template v-for="product in likeProducts">
						<product-item type="swiper" :id="product.id" :image="product.images|imagesFilter"
							:title="product.name" :org-price="product.org_price" :price="product.price"></product-item>
					</template>
				</scroll-view>
			</view>

		</view>

		<view class="footer">
			<view class="collect">
				<view>
					<uni-icons v-if="collectionStatus" @tap="delCollection()" type="heart-filled" size="24"
						color="#ff5d5b"></uni-icons>
					<uni-icons v-if="!collectionStatus" @tap="addCollection()" type="heart" size="24"></uni-icons>
				</view>
				<view v-if="collectionStatus" style="font-size: 24upx;color:#ff5d5b ;">已收藏</view>
				<view v-if="!collectionStatus" style="font-size: 24upx;">收藏</view>
			</view>

			<view class="btn-group">
				<view class="btn" @tap="option = 'addcart',popupVisible=true">
					<uni-icons type="cart" color="white" style="margin-right: 10upx;"></uni-icons>加入购物车
				</view>
				<view class="line"></view>
				<view class="btn" @tap="option = 'buy',popupVisible=true">立即下单</view>
			</view>

		</view>

		<view class="popup" v-if="popupVisible" @touchmove.stop.prevent>
			<view class="popup-wrapper">
				<view class="close" @tap="popupVisible=false">
					<uni-icons type="closeempty" size="30"></uni-icons>
				</view>
				<view class="row row-1">
					<view class="spec-image">
						<image class="image" :src="product.specs[curSpecIndex].image|imagesFilter" mode=""></image>
					</view>
					<view class="">
						<view class="title">
							已选择 {{product.specs[curSpecIndex].name}}
						</view>
						<view class="org-price">
							￥{{product.specs[curSpecIndex].org_price|priceFilter}}
						</view>
						<view>
							<text class="sxj-icon">省心价</text>
							<text class="price">￥{{product.specs[curSpecIndex].price|priceFilter}}</text>
						</view>
					</view>
				</view>
				<view class="row row-2">
					<view class="label">
						选择规格
					</view>
				</view>
				<view class="row row-3 spec-list">
					<template v-for="(spec,i) in product.specs">
						<view class="spec-item" :class="{'active':curSpecIndex===i}" @tap="curSpecIndex=i">{{spec.name}}
						</view>
					</template>
				</view>

				<view class="row row-4">
					<view class="label">
						选择数量
					</view>
					<view class="counter">
						<view class="sub" @tap="num>1?num--:0">
							<image style="width: 42upx;height: 42upx;" src="../../static/minus.png" mode="scaleToFill"></image>
						</view>
						<input class="num" type="text" v-model="num" />
						<view class="plus" @tap="num++">
							<image style="width: 42upx;height: 42upx;" src="../../static/add.png" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
				<view class="row row-5 total-price">
					合计：<text class="total-price-text">￥{{totalPrice}}</text>
				</view>
				<view class="row row-6 option">
					<button v-if="option === 'addcart'" class="btn" type="default" @tap="addCart">加入购物车</button>
					<button v-if="option === 'buy'" class="btn" type="default" @tap="buy">立即下单</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupVisible: false,
				option: "addcart",
				likeProducts: [],
				product: {
					id: 0
				},
				detailsIsOpen: false,
				curSpecIndex: 0,
				num: 1,
				collectionStatus: false
			}
		},
		computed: {
			totalPrice() {
				return (this.product.specs[this.curSpecIndex].price * this.num).toFixed(2);
			}
		},
		onLoad(option) {
			this.getLikeProductsData();
			this.product.id = option.id;
			this.getProductData();
			this.getCollectionStatus();
		},
		methods: {
			getLikeProductsData() {
				this.$http.get({
					url: "/product/rand",
					data: {
						limit: 10
					},
					success: (res) => {
						this.likeProducts = res.data.data
					}
				})
			},
			getProductData() {
				this.$http.get({
					url: "/product",
					data: {
						id: this.product.id
					},
					success: (res) => {
						this.product = res.data.data
						this.product.images = this.product.images.split(",")
						this.product.specs = JSON.parse(this.product.specs)
					}
				})
			},
			getCollectionStatus() {
				this.$http.get({
					url: "/collection/status",
					data: {
						product_id: this.product.id
					},
					success: (res) => {
						this.collectionStatus = res.data.data
					}
				})
			},
			addCollection() {
				this.$http.post({
					url: "/collection/add",
					data: {
						product_id: this.product.id
					},
					success: (res) => {
						this.collectionStatus = true;
						uni.showToast({
							title: res.data.msg,
							icon: "none",
						})

					}
				})

			},
			delCollection() {
				this.$http.post({
					url: "/collection/del",
					data: {
						product_id: this.product.id
					},
					success: (res) => {
						this.collectionStatus = false;
						uni.showToast({
							title: res.data.msg,
							icon: "none",
						})

					}
				})

			},
			addCart() {
				this.$store.dispatch("cart/add", {
					id: this.product.id,
					num: this.num,
					specIndex: this.curSpecIndex
				}).then(uni.showToast({
					title: "加入购物车成功",
					icon: "none"
				}))
			},
			buy() {
				let data = {
					id: this.product.id,
					spec_index: this.curSpecIndex,
					num: this.num
				}
				this.$http.post({
					url: '/order/create',
					data: {
						'products[]': JSON.stringify(data)
					},
					success: (res) => {
						uni.navigateTo({
							url: "/pages/order/cashier?order_no=" + res.data.data
						})
					}
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
	.carousel-wrapper {
		.carousel {
			margin: auto;
			overflow: hidden;
			transform: translateY(0);
			width: 750rpx;
			height: 750rpx;

			.image {
				width: 750rpx;
				height: 750rpx;
			}
		}
	}

	.title {
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
		display: inline-block;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;

	}

	.sxzg-icon {
		color: $primary-color;
		font-size: 20rpx;
		width: 120rpx;
		text-align: center;
		line-height: normal;
		border: 2rpx solid $primary-color;
		border-radius: 20rpx;
		display: inline-block;
		position: relative;
		top: -4rpx;
		margin-right: 10upx;
		// transform: scale(0.9);
	}

	.sxj-icon {
		background: $primary-color;
		color: white;
		font-size: 20upx;
		padding: 0 5upx;
		border-radius: 5upx;
		vertical-align: middle;
	}

	.row {
		margin: 20upx;
		display: flex;
		align-items: center;
	}

	.row-2 {
		justify-content: space-between;
	}

	.org-price,
	.stock {
		font-size: 28rpx;
		color: #999999;
	}

	.org-price {
		text-decoration: line-through;
	}

	.price {
		font-size: 28rpx;
		color: $primary-color;
		font-weight: bold;
	}

	.details {
		background: white;
		margin-top: 20upx;
		font-size: 30upx;

		.btn {
			padding: 20upx;
			display: flex;
			justify-content: space-between;
		}
	}

	.col-img-title {
		text-align: center;
		background: white;
		height: 80upx;
		line-height: 80upx;
		margin-bottom: 10upx;
	}

	.like .product-item {
		margin: 5rpx;

		&:first-child {
			margin-left: 10upx;
		}

		&:last-child {
			margin-right: 10upx;
		}
	}


	.content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s;

		&.show {
			max-height: 10000upx;
		}

	}

	.arrow {
		transform: rotate(0deg);
		transition: all 0.5s;
	}

	.arrow.rotate {
		transform: rotate(90deg);
		// animation:myRotate 10s linear infinite;

	}

	.footer {
		display: flex;
		position: fixed;
		height: 100upx;
		background: white;
		bottom: 0;
		width: 100%;
		box-shadow: 0 0 10upx #999999;
		align-items: center;
		// color: white;
		padding: 0upx 20upx;
		box-sizing: border-box;
		justify-content: space-between;

		.btn-group {
			background: $primary-color;
			display: flex;
			color: white;
			width: 580upx;
			border-radius: 50upx;
			height: 80upx;
			align-items: center;

			.btn {
				flex: 1;
				text-align: center;
				font-size: 30upx;
				font-weight: bold;
			}

			.line {
				background: white;
				width: 1upx;
				height: 60upx;
			}
		}

		.collect {
			width: 100upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			& :last-child {
				margin-top: -8upx;
			}
		}
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 750upx;
		background: rgba(0, 0, 0, 0.6);
		overflow: hidden;

		.popup-wrapper {
			.close {
				position: absolute;
				right: 5upx;
				top: 0;
				transform: scale(0.6);
			}

			background: white;
			position: absolute;
			bottom: 0;
			width: 750upx;
			min-height: 300upx;
			border-radius: 20upx 20upx 0 0;
		}

		.spec-image {
			margin-right: 20upx;

			.image {
				width: 180upx;
				height: 180upx;
				background: #EEEEEE;
			}
		}

		.row-1 {
			align-items: flex-start;

			.org-price {
				margin-top: 20upx;
			}
		}

		.label {
			font-size: 28upx;
		}

		.spec-list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-bottom: 0;

			.spec-item {
				text-align: center;
				background: #CCCCCC;
				color: white;
				padding: 5upx 30upx;
				margin: 0 20upx 20upx 20upx;
				font-size: 28upx;
				border-radius: 10upx;

				&.active {
					background: $primary-color;
				}
			}
		}

		.row-4 {
			justify-content: space-between;
		}

		.counter {
			margin-right: 40upx;
			display: flex;

			border: 2upx solid #CCCCCC;
			font-size: 28upx;
			align-items: center;
			border-radius: 10upx;

			.sub,
			.plus {
				// transform: scale(0.5);
				font-weight: 0;
				width: 42upx;
				text-align: center;
				display: flex;
				align-items: center;
				&:active {
					background: rgba(0, 0, 0, .1);
				}
			}

			.num {
				text-align: center;
				font-size: 24upx;
				border-left: 2upx solid #EEEEEE;
				border-right: 2upx solid #EEEEEE;
				width: 50upx;
			}
		}

		.total-price {
			font-size: 30upx;
			justify-content: flex-end;
			margin-right: 60upx;

			.total-price-text {
				color: $primary-color;
				font-weight: bold;
			}
		}

		.option {
			.btn {
				width: 600upx;
				line-height: 80upx;
				font-size: 30upx;
				background: $primary-color;
				color: white;
				border-radius: 40upx;
				font-weight: bold;
			}
		}
	}
</style>