project/mobile-shop/pages/detail/detail.vue

<template>
	<view class="">
		<!-- 轮播图 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 productList.imgs" :key="index">
					<image class="pictures" :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<van-divider hairline />
		<!-- 商品信息 -->
		<view class="list">
			<van-row class="product_name">
				<van-col span="18">
					{{productList.prodName}}
				</van-col>
				<van-col span="6">
					<van-icon name="like-o" v-if="!isCollection" @click="addCollect" size="24" />
					<van-icon name="like" v-if="isCollection" @click="addCollect" size="24" />
					<text class="content_word">收藏</text>
				</van-col>
			</van-row>
			<van-row class="product_desc">
				<van-col span="20">
					{{productList.brief}}
				</van-col>
				<van-col span="4">
				</van-col>
			</van-row>
			<view class="price">
				￥<text>{{productList.price}}</text>
			</view>
		</view>

		<van-divider hairline customStyle="border:12px solid #eee;" />
		<!-- 已选 -->
		<view class="choose" @click="showPart2">
			<view class="left">已选:<text>{{defaultStr.skuName}}</text></view>
			<view class="right">...</view>
		</view>
		<van-divider hairline customStyle="border:12px solid #eee;" />
		<!-- 好评 -->
		<!-- 	<view class="good">
			<view class="left">
					评价:
					<text>好评{{common.positiveRating}}%</text>
			</view>
			<view class="right">共{{common.number}}条</view>
		</view> -->
		<van-cell-group>
			<van-cell value="共0条" is-link :border="true">
				<template #title>
					<view>评价：<text>好评:{{common.positiveRating}}%</text></view>
				</template>
			</van-cell>
		</van-cell-group>
		<!-- 评价 -->
		<view class="other">
			<view>
				<van-tag type="warning">全部{{common.number}}</van-tag>
			</view>
			<view>
				<van-tag type="warning">好评{{common.praiseNumber}}</van-tag>
			</view>
			<view>
				<van-tag type="warning">中评{{common.secondaryNumber}}</van-tag>
			</view>
			<view>
				<van-tag type="warning">差评{{common.negativeNumber}}</van-tag>
			</view>
			<view>
				<van-tag type="warning">有图{{common.picNumber}}</van-tag>
			</view>
		</view>
		<!-- 内容页 -->
		<view v-html="formatHtml(prodData.content)"></view>
		<!-- 立即购买 -->
		<van-action-sheet :show="showPart1" @click-overlay="cancelPart">
			<view class="shop_main">
				<!-- 商品信息 -->
				<van-card :num="comfirm.orderItem.prodCount" :price="defaultStr.price? defaultStr.price : productList.price" :desc="productList.brief"
					:title="defaultStr.skuName ? defaultStr.skuName : productList.prodName" :thumb="defaultStr.pic? defaultStr.pic : productList.pic">
					<template #footer>
						<view>
							<van-stepper :value="comfirm.orderItem.prodCount" @change="onChange" />
						</view>
					</template>
				</van-card>
				<!-- 商品选项 -->
				<view class="choice" v-if="tags[0].label != ''">
					<view class="main" v-for="(item,index) in tags" :key="index">
						<view class="news">
							{{item.label}}
						</view>
						<view class="select">
							<view class="word" v-for="(item1,index1) in item.options" :key="index1"
								@click="selectTag(item.label,item1.value)"
								:class="{'prop_select':selectedTag[item.label] === item1.value ? true : false}">
								{{item1.value}}
							</view>
						</view>
					</view>
				</view>
				<!-- 结单按钮 -->
				<view class="shopcart-button">
					<van-button class="left" :disabled="defaultStr.price ? false : true" type="danger"
						@click="shopcartAdd">加入购物车</van-button>
					<van-button class="right" :disabled="defaultStr.price ? false : true" type="danger" @click="buynow">
						立即购买</van-button>
				</view>
			</view>
		</van-action-sheet>
		<!-- 型号选择 -->
		<van-action-sheet :show="showMain" @click-overlay="cancelMain" description="选择产品类别">
			<view class="choice">
				<view class="main"   v-if="tags[0].label != ''" v-for="(item,index) in tags" :key="index">
					<view class="news">
						{{item.label}}
					</view>
					<view class="select">
						<view class="word" v-for="(item1,index1) in item.options" :key="index1"
							@click="selectTag(item.label,item1.value)"
							:class="{'prop_select':selectedTag[item.label] === item1.value ? true : false}">
							{{item1.value}}
						</view>
					</view>
				</view>
				<van-button class="submitBtn" :disabled="defaultStr.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="onClickIcon" />
			<van-goods-action-icon icon="shop-o" text="店铺" />
			<van-goods-action-button text="立即购买" @click="onClickBtn" />
		</van-goods-action>

	</view>
</template>
<script>
	import {
		prodInfo,
		isCollection,
		prodComm,
		confirm,
		changeItem
	} from '@/api/detail.js'
	import {
		formatHtml
	} from '../../utils/util.js';
	export default {
		data() {
			return {
				// 轮播列表
				bannerList: [],
				// 商品列表
				productList: [],
				// 是否收藏
				isCollection: false,
				defaultStr: {},
				prodCommList: [],
				prodData: [],
				common: {
					negativeNumber: 0, //差评
					number: 0, //全部
					picNumber: 0, //有图
					positiveRating: 0, //好评率
					praiseNumber: 0, //好评
					secondaryNumber: 0 //中评
				},
				skuList: [],
				selectedTag: {},
				// 购物面板
				showPart1: false,
				// 型号
				showMain: false,
				tags: [],
				defaultSku: [],
				// 购物车
				shopCar: {
					basketId: 0,
					prodId: 0,
					skuId: 0,
					shopId: 0,
					count: 0,
					distributionCardNo: "string"
				},
				// 结单
				comfirm: {
					basketIds: [
						0
					],
					orderItem: {
						prodId: 0,
						skuId: 0,
						prodCount: 1,
						shopId: 0,
						distributionCardNo: "string"
					},
					addrId: 0,
					userChangeCoupon: 0,
					couponIds: [
						0
					]
				}
			}
		},
		async onLoad(options) {
			let result = await prodInfo({
				prodId: options.id
			})
			this.bannerList = result.skuList;
			this.skuList = result.skuList;
			this.prodData = result;
			 result.imgs = result.imgs.split(",")
			this.productList = result;
			isCollection({
				prodId: options.id
			}).then(res => {
				this.isCollection = res;
			})
			this.init(result.skuList);
			this.prodCommList = prodComm({
				prodId: options.id
			});

		},
		onShow() {
			
		},
		methods: {
			addCollect() {
				this.isCollection = !this.isCollection;
			},
			init(main) {
				const properties = [];
				const propObject = {};
				let defaultArr = [];
				for (var i = 0; i < main.length; i++) {
					properties.push(main[i].properties);
				}
				for (var i = 0; i < properties.length; i++) {
					let propArr = properties[i];
					let propStr = properties[i].split(";");
					if (defaultArr.length === 0) {
						defaultArr = propStr;
					}
					this.defaultStr = main[i];
					for (var j = 0; j < propStr.length; j++) {
						const valueArr = propStr[j];
						const valueStr = valueArr.split(":");
						if (!propObject[valueStr[0]]) {
							propObject[valueStr[0]] = new Set();
						}
						propObject[valueStr[0]].add(valueStr[1]);
						this.tags = Object.entries(propObject).map(([key, values]) => {
							return {
								label: key,
								options: Array.from(values).map(item => {
									return {
										value: item
									}
								})
							}
						})
						for (let x = defaultArr.length - 1; x >= 0; x--) {
							let valueStr1 = defaultArr[x];
							let valueArr1 = valueStr1.split(":");
							this.$set(this.selectedTag, valueArr1[0], valueArr1[1]);
						}
					}
				}
			},
			formatHtml(t) {
				return formatHtml(t);
			},
			onClickIcon() {
				uni.switchTab({
					url: "/pages/shop/shop"
				})
			},
			onClickBtn() {
				this.showPart1 = true;
			},
			cancelPart() {
				this.showPart1 = false;
			},
			showPart2() {
				this.showMain = true;
			},
			cancelMain() {
				this.showMain = false;
			},
			onChange(event) {
				this.comfirm.orderItem.prodCount = event.detail;
			},
			selectTag(propTitle, propValue) {
				this.$set(this.selectedTag, propTitle, propValue);
				let str = "";
				for (let item in this.selectedTag) {
					str = item + ":" + this.selectedTag[item] + ";" + str
					let str1 = str.substring(0, str.length - 1);
					for (var i = 0; i < this.skuList.length; i++) {
						if (this.skuList[i].properties === str1) {
							this.defaultStr = this.skuList[i];
							return;
						}
					}
				}
			},
			shopcartAdd() {
				this.shopCar.basketId = 0;
				this.shopCar.prodId = this.prodData.prodId;
				this.shopCar.skuId = this.defaultStr.skuId;
				this.shopCar.shopId = this.prodData.shopId;
				this.shopCar.count = this.comfirm.orderItem.prodCount;
				changeItem(this.shopCar).then(res => {
					uni.showToast({
						title: '添加成功!',
						icon: "success",
						duration: 2000
					});
					this.showPart1 = false;
				})
			},
			buynow() {
				this.comfirm.basketIds = [];
				this.comfirm.orderItem.prodId = this.prodData.prodId;
				this.comfirm.orderItem.skuId = this.defaultStr.skuId;
				this.comfirm.orderItem.shopId = this.prodData.shopId;
				this.comfirm.orderItem.distributionCardNo = "";
				this.comfirm.couponIds = [];
				
				uni.setStorageSync("confirm",JSON.stringify(this.comfirm))
				console.log(this.comfirm,'this')
				uni.navigateTo({
					url:"/pages/order/order"
				})
			}
		}
	}
</script>
<style lang="less">
	.uni-margin-wrap {
		.swiper {
			width: 100%;
			height: 600rpx;

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

	.prop_select {
		color: #fff !important;
		background: #f00 !important;
	}

	.product_name {
		.van-col--18 {
			font-size: 39rpx;
		}
	}

	.content_word {
		font-size: 34rpx;
	}

	.product_desc {
		.van-col--20 {
			font-size: 24rpx;
			color: #333;
			margin-top: 20rpx;
		}
	}

	.price {
		color: #f00;
		font-size: 34rpx;
		margin-top: 20rpx;

		text {
			font-size: 48rpx;
		}
	}

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

		.left {
			text {
				font-size: 44rpx;
			}
		}
	}

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

		view {
			.van-tag--warning {
				padding: 14rpx 20rpx;
				width: 50rpx;
				text-align: center;
				color: red;
			}
		}
	}

	.shopcart-button {
		width: 100%;
		position: absolute;
		bottom: 0;

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

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

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

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

	.shop_main {
		height: 600rpx;
	}

	.choice {
		.news {
			font-size: 32rpx;

			.news {
				font-size: 32rpx;
				padding: 29rpx;
			}
		}

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

			.word {
				color: #f00;
				font-size: 25rpx;
				padding: 10rpx 20rpx;
				border: 1px solid #f00;
			}
		}
	}
</style>