pet-front-order/pages/details/augmentedProduct.vue

<template>
	<view class="augmented">
		<view class="product-container">
			<view>
				<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/details/pic_augmented.png" alt=""
					style="width:100%;margin-bottom: 10px;" mode="widthFix">
			</view>
			<uni-collapse v-for="(item,i) in products" class="product" :key="i">
				<uni-collapse-item :title="item.itemName" :open="item.isOpen">
					<view v-for="(subItem,j) in item.subItem" class="product-content" :key="subItem.id">
						<radio :checked="subItem.isSelected" @click="changeSelect(i,j)"
							style="transform:scale(0.7);margin-right: 5px;" color="#FFB13F" />
						<img class="product-img" style="min-width: 98px; max-width: 98px; height:98px;"
							:src="subItem.pic" alt="">
						<view class="product-text">
							<view class="product-name">
								{{subItem.name}}
							</view>
							<view class="product-desc">
								{{subItem.shortDescription}}
							</view>
							<view class="product-price-number">
								<view class="product-price">
									<text style="font-size: 18px;">￥{{subItem.price}}元</text>/次
								</view>
								<uni-number-box v-if="!(subItem.name.indexOf('提前熟悉')>-1)" class="product-number"
									background="#fff" @change="e=>changeNumber(e,i,j)" :value="subItem.quantity"
									:min="0" :max="999">
								</uni-number-box>

							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="payment">
			<view class="total-price">
				<text class="total-price-text">应付价格：</text>
				<text class="total-price-value">￥{{totalPrice}}元</text>
			</view>
			<button class="payment-btn" @click="goNext">下一步</button>
		</view>
		<Kefu></Kefu>

	</view>
</template>

<script>
	import Kefu from '../common/kefu.vue'
	import {
		getProductList
	} from "@/api/system/user"
	export default {
		data() {
			return {
				totalPrice: 0,
				basePrice: 0,
				products: [],
				selectProducts: [],
				categoryIds: [78, 82, 79, 80, 81],
			}
		},
		components:{
			Kefu
		},
		mounted() {
			this.basePrice = this.$globalData.submitData.totalPrice;
			this.getTotalPrice()
			this.getProductList()
		},
		methods: {
			getProductList() {
				getProductList({
					"publishStatus": 1,
					"categoryIds": this.categoryIds,
					"needSku": true
				}).then(response => {
					if (response && response.content && response.content.length > 0) {
						const produtNumberSelect = response.content.map(item => {
							Object.assign(item, {
								isSelected: false,
								quantity: 0
							})
						})
						// const groupByCategory = response.content.groupBy(product => {
						// 	return product.categoryId;
						// });
						const groupedAndSortedRes = response.content.reduce((result, obj) => {
								const categoryId = obj.categoryId;

								// 检查结果中是否已存在该 categoryId 的分组
								const existingGroup = result.find(group => group.key === categoryId);

								if (existingGroup) {
									// 如果已存在分组，则将当前对象添加到该分组的数组中
									existingGroup.values.push(obj);
								} else {
									// 如果不存在分组，则创建一个新的分组并添加到结果中
									result.push({
										key: categoryId,
										values: [obj]
									});
								}

								return result;
							}, [])
							.sort((a, b) => {
								const indexA = this.categoryIds.indexOf(a.key);
								const indexB = this.categoryIds.indexOf(b.key);

								return indexA - indexB;
							});
						this.products = []
						for (let category in groupedAndSortedRes) {
							let productCategoryName = groupedAndSortedRes[category].values[0].productCategoryName
							let productObj = {
								id: category,
								isOpen: true,
								itemName: productCategoryName,
								subItem: groupedAndSortedRes[category].values
							}
							this.products.push(productObj)
						}
						console.log(this.products);
					}
				})
			},
			changeSelect(i, j) {
				const outerObj = this.products[i];
				const innerObj = outerObj.subItem[j];
				innerObj.isSelected = !innerObj.isSelected;
				if(innerObj.isSelected){
					innerObj.quantity = 1;
				}else{
					innerObj.quantity = 0;
				}
				
				this.getTotalPrice();
				console.log(this.products);
			},
			changeNumber(e, i, j) {
				const outerObj = this.products[i];
				const innerObj = outerObj.subItem[j];
				if(e>0){
					innerObj.isSelected=true
				} else {
					innerObj.isSelected=false
				}
				innerObj.quantity = e;
				this.getTotalPrice();
				console.log(this.products);
			},
			getTotalPrice() {
				let currentPrice = 0
				let tempSelectProducts = []
				for (let i = 0; i < this.products.length; i++) {
					for (let j = 0; j < this.products[i].subItem.length; j++) {
						if (this.products[i].subItem[j].isSelected) {
							tempSelectProducts.push(this.products[i].subItem[j])
							currentPrice += this.products[i].subItem[j].quantity * this.products[i].subItem[j].price;
						}
					}
				}
				this.selectProducts = tempSelectProducts;
				this.totalPrice = currentPrice + this.basePrice;
			},
			goNext() {
				this.$globalData.submitData.totalPrice = this.totalPrice;
				this.setItemPrices()
				uni.navigateTo({
					url: '/pages/details/confirm'
				});
			},
			setItemPrices() {
				let itemPrices = [];
				let productSkus = [];
				for (let i = 0; i < this.selectProducts.length; i++) {
					if (this.selectProducts[i].quantity > 0) {
						let itemPrice = {
							itemType: this.selectProducts[i].productCategoryName + '-' + this.selectProducts[i].name,
							price: this.selectProducts[i].price,
							quantity: this.selectProducts[i].quantity,
							unit: this.selectProducts[i].unit
						}
						itemPrices.push(itemPrice)
						let productSku = {
							"skuId": this.selectProducts[i].skus[0].id,
							"quantity": this.selectProducts[i].quantity
						}
						productSkus.push(productSku)
					}
				}

				this.$globalData.itemPrices = itemPrices;
				this.$globalData.augmentedSku = [...productSkus];
			},
		}
	}
</script>

<style lang="scss">
	.product-container {
		padding: 10px;
		background-color: #F5F5F7;

		.product {
			border-radius: 8px;
			background-color: #ffffff;

			.product-content {
				padding: 14px 10px;
				display: flex;
				align-items: center;

				.product-img {
					width: 98px;
					height: 98px;
					border-radius: 4px;
				}

				.product-text {
					padding: 0 5px;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.product-name {
						font-size: 16px;
						color: #333;
						line-height: 16px;
						margin-left: 5px;
					}

					.product-desc {
						color: #A94F20;
						font-size: 11px;
						line-height: 14px;
						display: flex;
						align-items: center;
						background-color: #FFFCF2;
						padding: 5px;
						margin: 5px 0;
						width: 100%;
						min-height: 48px;
					}

					.product-price-number {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						.product-price {
							color: #FF530A;
							font-size: 14px;
							line-height: 16px;
						}

						.product-number {
							border: 1px solid #FFE8C6;
							border-radius: 4px;
						}
					}
				}
			}
		}

	}

	.augmented {
		position: relative;
		height: 100%;
		padding-bottom: 58px;

		.payment {
			height: 58px;
			position: fixed;
			bottom: 0;
			width: 100%;
			margin-top: 10px;
			padding: 10px 20px;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 100;

			.total-price-text {
				color: #333;
				font-size: 16px;
				font-weight: blob;
				line-height: 16px;
			}

			.total-price-value {
				color: #FF530A;
				font-size: 22px;
				font-weight: blob;
				line-height: 16px;
			}

			.payment-btn {
				width: 140px;
				height: 38px;
				border-radius: 6px;
				background: #FFB13F;
				color: #fff;
				font-size: 16px;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>