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="(tag, idx) in tags" :key="idx">
						<view class="tagName">
							{{ tag.label }}
						</view>
						<view class="tagMenu">
							<view class="defaultSelect"
								:class="{ 'prop-selected': selectedTag[tag.label] === t.value ? true : false }"
								v-for="(t, index) in tag.options" :key="index" type="danger"
								@click="selectTag(tag.label, t.value)">
								{{ t.value }}
							</view>
						</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" description="选择产品类别">
			<view class="mainContent">
				<view v-for="(tag, idx) in tags" :key="idx">
					<view class="tagName">
						{{ tag.label }}
					</view>
					<view class="tagMenu">
						<view class="defaultSelect"
							:class="{ 'prop-selected': selectedTag[tag.label] === t.value ? true : false }"
							v-for="(t, index) in tag.options" :key="index" type="danger"
							@click="selectTag(tag.label, t.value)">
							{{ t.value }}
						</view>
					</view>
				</view>
				<van-button class="submitBtn" :disabled="defaultSku.skuName ? false : true" type="danger" block
					@click="cancelMain">确定</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) {
			let result = await prodInfo({
				prodId: options.id
			})
			this.bannerList = result.skuList;
			this.skuList = result.skuList;
			this.prodList = result;
			this.prodData = result;
			this.init(result.skuList)
			prodComm({
				prodId: options.id
			}).then(res => {
				this.commData = res
			})
			this.isCollection = await isCollection({
				prodId: options.id
			})
		},
		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;
				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])
				}
			},
			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 = {}
			},
			showMsg() {
				this.showMain = true;
			},
			cancelMain() {
				this.showMain = false;
			},
			addOrCancel() {
				this.isCollection = !this.isCollection
			},
			shopcartAdd() {
				let that = this;
				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(res => {
					uni.showToast({
						title: '添加成功!',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})  
					that.showDesc = false
				}).catch(e => {
					console.log(e)
				})
			},
			formatHtml(t) {
				return formatHtml(t)
			},
			onClickButton() {
				this.showDesc = true;
			},
			cancelDesc() {
				this.showDesc = false;
			},
			buynow() {
					this.confirm.orderItem.prodId = this.prodData.prodId
					this.confirm.orderItem.skuId = this.defaultSku.skuId
					this.confirm.orderItem.shopId = this.prodData.shopId
					this.confirm.orderItem.distributionCardNo = ""
					uni.setStorageSync("confirm", JSON.stringify(this.confirm) )
					uni.navigateTo({
						url:'/pages/order/order'
					})
			},
			onClickShop() {
				uni.switchTab({
					url: "/pages/shop/shop"
				})
			}
		}
	}
</script>

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

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

	.mainContent {
		height: 600rpx;
	}

	.defaultSelect {
		padding: 15rpx;
		color: #f00;
		border: 1px solid #f00;
	}

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

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

	.tagName {
		font-size: 38rpx;
	}

	.submitBtn {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

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

	.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;
		.name {
			font-size: 40rpx;
			font-size: 36rpx;
			padding-left: 6px;
		}
	}

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

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