VIP32/购物商城/project/pages/detail/detail.vue

<template>
	<view class="detail">
		<view class="part1">
			<!-- 轮播图 -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<image :src="item" mode="" class="pictures"></image>
					</swiper-item>
				</swiper>
			</view>
			<van-divider />
			<!-- 商品描述信息 -->
			<view class="main">
				<view class="left">
					<view class="title">
						{{prodList.prodName}}
					</view>
					<view class="discribe">
						{{prodList.brief}}
					</view>
					<view class="price">
						￥<text>{{prodList.price}}</text>
					</view>
				</view>
				<view class="right">
					<van-icon name="like-o" v-if="isCollect" size="24" @click="addCollect" />
					<van-icon name="like" v-if="!isCollect" size="24" @click="addCollect" />
					<text>收藏</text>
				</view>
			</view>
		</view>
		<van-divider hairline customStyle="border:12px solid #eee;" />
		<!-- 已选 -->
		<view class="choose" @click="showDialog">
			<view class="left">
				已选<text>{{defaultStr.skuName}}</text>
			</view>
			<view class="right">
				...
			</view>
		</view>
		<van-divider hairline customStyle="border:12px solid #eee;" />
		<!-- 好评部分 -->
		<van-cell is-link value="共0条">
			<template #title>
				<view class="van-cell-text">评价:好评{{evaluate.positiveRating}}%</view>
			</template>
		</van-cell>
		<view class="evaluate">
			<van-tag type="warning">全部:{{evaluate.number}}</van-tag>
			<van-tag type="warning">好评:{{evaluate.praiseNumber}}</van-tag>
			<van-tag type="warning">中评:{{evaluate.secondaryNumber}}</van-tag>
			<van-tag type="warning">差评:{{evaluate.negativeNumber}}</van-tag>
			<van-tag type="warning">有图:{{evaluate.picNumber}}</van-tag>
		</view>
		<!-- 内容页 -->
		<view v-html="formatHtml(prodList.content)"></view>
		<!-- 商品导航 -->
		<van-goods-action>
			<van-goods-action-icon icon="cart-o" text="购物车" @click="goToShop" />
			<van-goods-action-icon icon="shop-o" text="店铺" />
			<van-goods-action-button text="立即购买" @click="onClickButton" />
		</van-goods-action>
		<!-- 型号选择 -->
		<van-action-sheet @click-overlay="submitBtn" @close="submitBtn" :show="show" title="选择产品类别">
			<view class="choise" v-if="tagList[0].label != ''">
				<view class="box" v-for="(item,index) in tagList" :key="index">
					<view class="tit">
						{{item.label}}
					</view>
					<view class="main">
						<text class="size" v-for="(item1,index1) in item.option" :key="index1"
							:class="{selected:selectTag[item.label] === item1 ? true : false}"
							@click="selectTag1(item.label,item1)">
							{{item1}}
						</text>
					</view>
				</view>
			</view>
			<van-button :disabled="defaultStr.skuName ? false : true" type="danger" @click="submitBtn" square class="btn">确定</van-button>
		</van-action-sheet>
		<!-- 立即购买 -->
		<van-action-sheet @click-overlay="cancelShow" :show="isshow">
			<view class="cardMain">
				<van-card :num="confirm.orderItem.prodCount" :price="defaultStr.price ? defaultStr.price : prodList.price" :desc="prodList.brief"
					:title="defaultStr.skuName ? defaultStr.skuName : prodList.prodName"
					:thumb="defaultStr.pic? defaultStr.pic : prodList.pic">
					<template slot="footer">
						<van-stepper :value="confirm.orderItem.prodCount" @change="onChange" />
					</template>
				</van-card>
			</view>
			<view class="choise news" v-if="tagList[0].label != ''">
				<view class="box" v-for="(item,index) in tagList" :key="index">
					<view class="tit">
						{{item.label}}
					</view>
					<view class="newsMain">
						<text class="size" v-for="(item1,index1) in item.option" :key="index1"
							:class="{selected:selectTag[item.label] === item1 ? true : false}"
							@click="selectTag1(item.label,item1)">
							{{item1}}
						</text>
					</view>
				</view>
			</view>
			<view class="footerBtn">
				<view class="btn1" @click="addShop">加入购物车</view>
				<view class="btn2">立即购买</view>
			</view>
		</van-action-sheet>
	</view>
</template>

<script>
	import {
		prodInfo,
		prodCommData,
		confirmWay,
		changeItem
	} from '@/api/detail.js'
	import {
		formatHtml
	} from "@/utils/util.js";
	export default {
		data() {
			return {
				ids: "",
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				prodList: [], //商品信息数组
				bannerList: [], //轮播数组
				isCollect: true, //控制收藏显示
				defalutList: [], //默认展示内容的数组
				evaluate: [], //好评部分
				show: false, //控制型号选择显示隐藏
				typeList: [], //存储型号列表
				tagList: [], //渲染型号列表
				selectTag: {}, //选中的值
				defaultStr: {}, //存放已选字段
				isshow: false, //购买弹框
				// 商品结单字段
				confirm: {
					basketIds: [
						0
					],
					orderItem: {
						prodId: 0,
						skuId: 0,
						prodCount: 1,
						shopId: 0,
						distributionCardNo: ""
					},
					addrId: 0,
					userChangeCoupon: 0,
					couponIds: [
						0
					]
				},
				// 购物车字段
				shopList:{
					basketId: 0,
					prodId: 0,
					skuId: 0,
					shopId: 0,
					count: 0,
					distributionCardNo: ""
				}	

			}
		},
		onLoad(options) {
			this.ids = options.id;
			// 获得详情页的商品信息
			this.init();
		},
		methods: {
			init() {
				// 商品信息
				prodInfo({
					prodId: this.ids
				}).then(res => {
					this.prodList = res.data;
					this.bannerList = this.prodList.imgs.split(',');
					this.defalutList = res.data.skuList;
					var popObject = {};
					var defaultArr = [];
					for (var i = 0; i < this.defalutList.length; i++) {
						this.defaultStr = this.defalutList[0];
						this.typeList.push(this.defalutList[i].properties)
					}
					for (var i = 0; i < this.typeList.length; i++) {
						var popStr = this.typeList[i].split(";");
						if (defaultArr.length == 0) {
							defaultArr = popStr;
						}
						for (var j = 0; j < popStr.length; j++) {
							var valueArr = popStr[j];
							var valueStr = valueArr.split(":");
							if (!popObject[valueStr[0]]) {
								popObject[valueStr[0]] = new Set()
							}
							popObject[valueStr[0]].add(valueStr[1])
							this.tagList = Object.entries(popObject).map(([key, value]) => {
								return {
									label: key,
									option: Array.from(value).map(item => {
										return item
									})
								}
							});
							console.log(this.tagList,'标签')
							for (let x = defaultArr.length - 1; x >= 0; x--) {
								let newStr = defaultArr[x];
								let newArr = newStr.split(":");
								this.$set(this.selectTag, newArr[0], newArr[1])
							}

						}
					}
				}).catch(err => {
					console.log(err, '失败')
				})
				// 好评信息
				prodCommData({
					prodId: this.ids
				}).then(res => {
					this.evaluate = res.data;
				}).catch(err => {
					console.log(err, '失败')
				})
			},
			// 控制收藏显示
			addCollect() {
				this.isCollect = !this.isCollect;
			},
			formatHtml(t) {
				return formatHtml(t)
			},
			// 展示型号弹框
			showDialog() {
				this.show = true;
			},
			// 选中事件
			selectTag1(popTitle, popValue) {
				this.$set(this.selectTag, popTitle, popValue)
				let str = "";
				for (let item in this.selectTag) {
					str = item + ":" + this.selectTag[item] + ";" + str;
				}
				let str1 = str.substring(0, str.length - 1)
				for (var i = 0; i < this.defalutList.length; i++) {
					if (this.defalutList[i].properties === str1) {
						this.defaultStr = this.defalutList[i];
						return;
					}
				}

			},
			//确定
			submitBtn() {
				console.log("执行")
				this.show = false;
			},
			// 取消立即购买弹框
			cancelShow() {
				this.isshow = false;
			},
			// 立即购买
			onClickButton() {
				console.log(this.defalutList,'defalutList')
				console.log(this.defaultStr,'defaultStr')
				console.log(this.typeList,'typeList')
				console.log(this.tagList,'tagList')
				console.log(this.prodList,'prodList')
				this.isshow = true;
			},
			// 修改商品中弹框数量
			onChange(event) {
				this.confirm.orderItem.prodCount = event.detail;
			},
			// 去购物车
			goToShop() {
				uni.switchTab({
					url:"/pages/shop/shop"
				})
			},
			// 加入购物车
			addShop() {
				this.shopList.basketId = 0;
				this.shopList.prodId = this.prodList.prodId;
				this.shopList.skuId = this.defaultStr.skuId;
				this.shopList.shopId = this.prodList.shopId;
				this.shopList.count = this.confirm.orderItem.prodCount;
				console.log(this.shopList,'传参')
				changeItem(this.shopList).then(res => {
					console.log(res,'成功')
					uni.showToast({
						title:"添加成功",
						icon:"success",
						duration:2000
					})
					this.isshow = false;
				}).catch(err => {
					console.log(err,'失败')
				})
			}

		}

	}
</script>

<style scoped lang='scss'>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 700rpx;
	}

	.swiper-item {
		display: block;
		height: 700rpx;
		line-height: 700rpx;
		text-align: center;
	}

	.pictures {
		width: 100%;
		height: 700rpx;
	}

	.main {
		width: 96%;
		height: 200rpx;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;

		.left {
			.title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.discribe {
				font-size: 27rpx;
				margin-top: 10rpx;
			}

			.price {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: red;

				text {
					font-size: 38rpx;
					font-weight: bold;
				}
			}
		}

		.right {
			display: flex;
			align-items: center;
			width: 120rpx;
			justify-content: space-around;

			text {
				font-size: 38rpx;
			}
		}
	}

	.choose {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			margin-left: 15rpx;

			text {
				font-size: 38rpx;
				font-weight: bold;
			}
		}

		.right {
			margin-right: 15rpx;
		}
	}

	.evaluate {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	::v-deep .van-tag {
		color: red;
		height: 60rpx;
	}

	.choise {
		height: 550rpx;

		.box {
			width: 92%;
			margin: 0 auto;

			.tit {
				font-size: 40rpx;
			}

			.main {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 172rpx;

				.size {
					padding: 19rpx;
					color: #f00;
					border: 1px solid #f00;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
				}
			}
		}
	}

	.btn {
		::v-deep .van-button--normal {
			width: 100%;
			height: 100rpx;
		}
	}

	.selected {
		color: #fff !important;
		background: #f00 !important;
	}
	.news {
		height: 320rpx;
	}
	.footerBtn {
		width: 90%;
		height: 80rpx;
		display: flex;
		margin: 30rpx auto;
		text-align: center;
		line-height: 80rpx;
		.btn1 {
			flex: 1;
			height: 100%;
			color: #fff;
			background: #595959;
		}
		.btn2 {
			flex: 1;
			height: 100%;
			color: #fff;
			background: #ff0000;
		}
	}
	
	.newsMain {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
	
		.size {
			padding: 19rpx;
			color: #f00;
			border: 1px solid #f00;
			height: 30rpx;
			text-align: center;
			line-height: 30rpx;
		}
	}
</style>