project/project1/pages/detail/detail.vue

<template>
	<view class="detail">
		<!-- 轮播图 1-->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="white" :autoplay="3000"
				:interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="pictures" :src="item.pic" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<van-viewider />
		<!-- 商品信息12 -->
		<view class="message">
			<van-row>
				<van-col span="18" class="name">
					{{prodList.prodName}}
				</van-col>
				<van-col span="6">
					<view @click="addOrCancel">
						<van-icon name="like-o" v-if="!isCollection" size="20" />
						<van-icon name="like" v-if="isCollection" size="20" />
						<text class="collect">收藏</text>
					</view>
				</van-col>
			</van-row>
			<van-row>
				<van-col span="20" class="tip">
					{{prodList.brief}}
				</van-col>
				<van-col span="4">
				</van-col>
			</van-row>
			<van-row>
				<van-col span="20" class="price">
					￥<text> {{prodList.price}}</text>
				</van-col>
				<van-col span="4">
				</van-col>
			</van-row>
		</view>
		<van-viewider customStyle="font-width: 3rpx;" />
		<!-- 类别 -->
		<view class="other" @click="showMsg">
			<text class="choose">已选:<text class="name">{{defaultSku.skuName}}</text></text>
			<text class="space">...</text>
		</view>
		<van-viewider customStyle="font-width: 3rpx;" />
		<van-cell title-style="cell-title" center value="共0条" is-link>
			<template #title>
				<text>评价:</text>
				<text class="total">
					好评{{commData.positiveRating}}%
				</text>
			</template>
		</van-cell>
		<view class="word">
			<view>
				<van-tag type="warning">全部({{ commData.number }})</van-tag>
			</view>
			<view>
				<van-tag type="warning">好评({{ commData.praiseNumber }})</van-tag>
			</view>
			<view>
				<van-tag type="warning">中评({{ commData.secondaryNumber }})</van-tag>
			</view>
			<view>
				<van-tag type="warning">差评({{ commData.negativeNumber }})</van-tag>
			</view>
			<view>
				<van-tag type="warning">有图({{ commData.picNumber }})</van-tag>
			</view>
		</view>
		<!-- 内容页 -->
		<view v-html="formatHtml(prodData.content)"></view>
		<!-- 购物框提示 -->
		<van-action-sheet :show="showDesc" class="tips" @click-overlay="cancelDesc">
			<!-- 商品提示信息 -->
			<van-card :num="confirm.orderItem.prodCount" :price="defaultSku.price ? defaultSku.price : prodData.price"
				:desc="prodData.brief" :title="defaultSku.skuName ? defaultSku.skuName : prodData.prodName"
				:thumb="defaultSku.pic ? defaultSku.pic : prodData.pic">
				<template #footer>
					<van-stepper :value="confirm.orderItem.prodCount" integer />
				</template>
			</van-card>
			<!-- 型号 -->
			<view class="action-sheet-content">
				<view>
					<!-- {{tags}} -->
					<view v-for="(item, idx) in tags" :key="idx">
						<text style="text-align: left;">
							{{item.label}}
						</text>
							<view class="right" v-for="(news, index) in item.options" :key="index">
								{{news.value}}
							</view>
					</view>
				</view>
				<view style="margin-top: 2rem;"></view>
				<!-- 按钮 -->
				<view class="shopcart-button">
					<van-button class="left" :disabled="defaultSku.price ? false : true" type="danger"
						@click="shopcartAdd">加入购物车</van-button>
					<van-button class="right" :disabled="defaultSku.price ? false : true" type="danger" @click="buynow">
						立即购买</van-button>
				</view>
			</view>
		</van-action-sheet>
		</van-action-sheet>
		<!-- 型号选择 -->
		    <van-action-sheet :show="showMain" @click-overlay="cancelMain">
		        <view class="action-sheet-content">
		           <view>
		                <view v-for="(tag, idx) in tags" :key="idx">
		                    <view style="text-align: left;">
		                        {{ tag.label }}
		                    </view>
		                    <van-tag @click="selectTag(idx, t)"
		                        :class="{ 'prop-selected': selectedTag[idx] === t ? true : false }" plain
		                        v-for="(t, index) in tag.options" :key="index" type="danger">{{ t.value }}</van-tag>
		                </view>
		            </view>
		            <view style="margin-top: 2rem;"></view>
		            <van-button :disabled="defaultSku.skuName ? false : true" type="danger" block
		                @click="showMain = false">确定</van-button>
		        </view>
		    </van-action-sheet>
		<!-- 导航栏 -->
		<van-goods-action>
			<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickShop" />
			<van-goods-action-icon icon="shop-o" text="店铺" bind:click="onClickIcon" />
			<van-goods-action-button text="立即购买" @click="onClickButton" />
		</van-goods-action>

	</view>
</template>

<script>
	import {
		prodInfo,
		prodComm,
		isCollection,
		addOrCancel,
		changeItem
	} from '../../api/detail.js';
	import {
		formatHtml
	} from '../../utils/util.js'
	export default {
		data() {
			return {
				prodList: [],
				bannerList: [],
				prodData: [],
				defaultSku: {},
				selectedTag: {},
				showDesc: false,
				isCollection: false,
				showMain:false,
				tags: {},
				commData: {
					positiveRating: 0,
					number: 0,
					praiseNumber: 0,
					secondaryNumber: 0,
					negativeNumber: 0,
					picNumber: 0
				},
				confirm: {
					basketIds: [],
					orderItem: {
						prodId: 0,
						skuId: 0,
						prodCount: 1,
						shopId: 0,
						distributionCardNo: ""
					},
					addrId: 0,
					userChangeCoupon: 0,
					couponIds: [],
            skuList: [],
					shopcart: {
						basketId: 0,
						prodId: 0,
						skuId: 0,
						shopId: 0,
						count: 0,
						distributionCardNo: ""
					}
				},
			}
		},
		async onLoad(options) {
			console.log(options)
			let result = await prodInfo({
				prodId: 71
			})
			console.log(result,'99')
			this.bannerList = result.skuList;
			this.skuList = result.skuList;
			this.prodList = result;
			this.prodData = result;
			this.init(result.skuList)
			prodComm({
				prodId: 71
			}).then(res => {
				this.commData = res
			})
			this.isCollection = await isCollection({prodId:71})
		},
		methods: {
			init(sku) {
				const properties = []
								const propObject = {}
								let defaultArr = []
								for (let i = 0; i < sku.length; i++) {
									properties.push(sku[i].properties)
								}
								for (let i = 0; i < properties.length; i++) {
									const propStr = properties[i]
									const propArr = propStr.split(";")
									if (defaultArr.length === 0) {
										defaultArr = propArr
										this.defaultSku = sku[i]
										if (sku.length === 1) return;
									}
									for (let n = 0; n < propArr.length; n++) {
										const valueStr = propArr[n];
										const valueArr = valueStr.split(":")
										if (!propObject[valueArr[0]]) {
											propObject[valueArr[0]] = new Set()
										}
										propObject[valueArr[0]].add(valueArr[1])
									}
								}
								const processedData = Object.entries(propObject).map(([key, values]) => {
									return {
										label: key,
										options: Array.from(values).map(value => {
											return {
												label: value,
												value: value
											};
										})
									};
								});

								this.tags = processedData;
								console.log(this.tags, 'this.tags')
				for (let i = defaultArr.length - 1; i >= 0; i--) {
					const valueStr = defaultArr[i];
					const valueArr = valueStr.split(":")
					this.$set(this.selectedTag, valueArr[0], valueArr[1])
				}
			},
			showMsg() {
				this.showMain = true;
			},
			cancelMain() {
				this.showMain = false;
			},
			addOrCancel() {
        this.isCollection = !this.isCollection
			},
			shopcartAdd() {
				this.shopcart.basketId = 0
				this.shopcart.prodId = this.prodData.prodId
				this.shopcart.skuId = this.defaultSku.skuId
				this.shopcart.shopId = this.prodData.shopId
				this.shopcart.count = this.confirm.orderItem.prodCount
				changeItem(this.shopcart).then(r => {
					Toast("添加成功!")
					this.showDesc = false
				}).catch(e => {
					console.log(e)
				})
			},
			selectTag(propTitle, Propvalue) {
				//当用户选择一个属性的时候, 我们存储他的选择
				this.$set(this.selectedTag, propTitle, Propvalue)
				//然后我们判断 用户选择的属性时候能找到对应的prop
				let str = ""
				for (let item in this.selectedTag) {
					str = item + ":" + this.selectedTag[item] + ";" + str
				}
				str = str.substring(0, str.length - 1)
				for (let i = 0; i < this.skuList.length; i++) {
					if (this.skuList[i].properties === str) {
						this.defaultSku = this.skuList[i]
						return;
					}
				}
				this.defaultSku = {}
			},
			formatHtml(t) {
				return formatHtml(t)
			},
			onClickButton() {
				this.showDesc = true;
			},
			cancelDesc() {
				this.showDesc = false;
			},
			onClickShop() {
				uni.switchTab({
					url: "/pages/shop/shop"
				})
			}
		}
	}
</script>

<style lang="less">
	.uni-margin-wrap {
		.swiper {
			width: 100%;
			height: 600rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.shopcart-button {
		.left .van-button--normal {
			width: 50%;
			background-color: #595959;
			border: 1px solid #595959;
		}

		.right .van-button--normal {
			width: 50%;
		}
	}

	.message {
		.name {
			font-size: 38rpx;
		}

		.collect {
			margin-left: 10rpx;
			font-size: 38rpx;
		}

		.tip .van-col--20 {
			font-size: 20rpx;
			margin-top: 22rpx;
		}

		.price .van-col--20 {
			margin-top: 18rpx;
			font-size: 28rpx;
			color: red;

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

	.prop-selected {
		color: #FFF !important;
		background-color: red !important;
	}

	.prod-info /deep/ .van-tag {
		color: #ee0a24;
		margin-left: 1rem;
		padding: 0.3rem;
	}

	.other {
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 15rpx;

		.choose {
			// flex: 5;
		}

		.name {
			font-size: 40rpx;
			font-size: 36rpx;
			padding-left: 6px;
		}

		.space {
			// flex: 1;
		}
	}

	.word {
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 15rpx 0;

		view {
			padding: 20rpx;
			text-align: center;
		}
	}
</style>