bc_wx_applet/components/cartPopup.vue

<template>
	<u-popup :show="show" mode="bottom" @close="close" @open="open" :round="10">
		<view class="my-popup padding">
			<view class="container-sel">
				<radio :checked="allSelected" color="#E51C23" @click="selectAll">全选
				</radio>
				<view class="dflex">
					<u-tag text="清空购物车" type="info" color="#000" borderColor="#fff" size="mini" icon="trash" plain
						@click="clearCart"></u-tag>
				</view>
			</view>
			<radio class="w-full padding-bottom-lg" color="#E51C23" v-for="(item, index) in carList" :key="index"
				:name="item.name" :checked="item.selected" @click="radioChange(item)">
				<my-goods :item="item" ref="my-goods">
					<view class="num-step">
						<u-number-box v-model="item.quantity" :min="1" @change="changeValue($event, item)" />
					</view>
				</my-goods>
			</radio>
		</view>
		<view class="cart-bottom padding-sm dflex-b" v-if="showShop">
			<view class="cart padding-lr">
				<uni-badge size="small" :text="buyCount" absolute="rightTop">
					<u-icon name="shopping-cart-fill" size="28" color="#FF873D"></u-icon>
				</uni-badge>
				<text class="cart-total">总计：￥{{total}}</text>
			</view>
			<view class="balance dflex-c background-gradient" @click="toBuy">去结算</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "cartPopup",
		data() {
			return {
				show: false,
				allSelected: false,
				carList: [],
				showShop: false,
				total: 0,
				totalList: []
			};
		},
		mounted() {
			this.fatchDate()
		},
		methods: {
			openShop(v) {
				this.showShop = v
			},
			open() {},
			async fatchDate() {
				const e = uni.getStorageSync('carl')
				const params = {
					storeId: e.id
				}
				const res = await this.$request('get', `/front/shoppingCart/list`, params)
				if (res) {
					this.carList = res.data
				}
			},
			setShow(v) {
				this.show = v
				this.fatchDate()
				// 检查 carList 是否存在且至少有一个元素
				if (this.carList && this.carList.length > 0) {
					// 检查 carList 的第一个元素是否有 selected 属性
					if (!this.carList[0].hasOwnProperty('selected')) {
						// 如果没有 selected 属性，使用 map 方法添加 selected 属性
						this.carList = this.carList.map(item => ({
							...item,
							selected: false
						}));
					}
				} else {
					// 如果 carList 不存在或没有元素，直接使用 map 方法添加 selected 属性
					this.carList = this.carList.map(item => ({
						...item,
						selected: false
					}))
				}

				if (this.carList.length > 0) {
					this.allSelected = this.carList.every(car => car.selected)
				}
			},
			close() {
				this.show = false;
			},
			changeValue(value, v) {
				console.log('value, v', value, v)
				const e = uni.getStorageSync('carl')
				const userId = uni.getStorageSync('appUserId')
				const params = {
					id: v.id,
					storeId: e.id,
					storeName: e.name,
					skuId: v.skuId,
					basePrice: v.basePrice,
					quantity: value.value,
					extendProps: userId
				}
				this.$request('put', `/front/shoppingCart`, params, true)

			},
			selectAll() {
				this.allSelected = !this.allSelected
				this.carList.forEach(item => {
					item.selected = this.allSelected
				})
				this.$emit('selected-changed', this.carList)
				this.totalList = this.carList
				this.totalPrice()
			},
			clearCart() {
				const ids = this.carList.map(car => car.id);
				this.$request('delete', `/front/shoppingCart/${ids}`).then(response => {
					// 请求成功
					if (response.code == 200) {
						// 弹出消息
						uni.showToast({
							title: '已清空',
							icon: 'success',
							duration: 2000
						})
						this.carList = []
						this.$emit('selected-changed', this.carList);
						this.show = false
					}
				}).catch(error => {
					// 请求失败
					console.error('请求失败:', error);
				})
			},
			radioChange(e) {
				e.selected = !e.selected
				// 检查是否所有车都被选中了
				this.allSelected = this.carList.every(car => car.selected)
				this.localList = this.carList.filter(car => car.selected === true);

				this.$emit('selected-changed', this.localList);
				this.totalList = this.localList
				this.totalPrice()
			},
			//计算selected为true的
			totalPrice() {
				let total = 0;
				for (let i = 0; i < this.totalList.length; i++) {
					// 检查商品是否有 selected 属性
					if (this.totalList[i].hasOwnProperty('selected')) {
						// 如果 selected 属性存在，只有当它为 true 时才计算
						if (this.totalList[i].selected) {
							let priceInCents = Math.round(this.totalList[i].price * 100);
							let quant = this.totalList[i].quantity;
							total += priceInCents * quant;
						}
					} else {
						// 如果 selected 属性不存在，直接计算所有商品
						let priceInCents = Math.round(this.carList[i].price * 100);
						let quant = this.carList[i].quantity;
						total += priceInCents * quant;
					}
				}

				// 将总价格转换回浮点数（以元为单位）
				this.total = (total / 100).toFixed(2);
			},
			toBuy() {
				const carlist = {
					carlist: this.totalList,
					total: this.total
				}
				console.log('carlistcarlist', carlist)
				if (carlist.carlist.length <= 0) {
					// this.$refs.uNotify.show({'请选择'})
					uni.showToast({
						title: '请选择',
						icon: 'error',
						duration: 2000
					});
				} else {
					uni.navigateTo({
						url: `/pages/order/submitOrder/submitOrder?data=${encodeURIComponent(JSON.stringify(carlist))}`
					})
					this.selectAll()
					this.show = false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-popup {
		width: 100%;
		max-height: 800rpx;
		overflow: auto;
		padding-bottom: 130rpx;

		.num-step {
			width: 200rpx;
			padding-top: 40rpx;
		}

		.container-sel {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;
		}
	}

	.cart-bottom {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 130rpx;
		box-sizing: border-box;
		background-color: #FFF;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);
		z-index: 10800;

		.cart {
			width: calc(100% - 220rpx);
			border-radius: 5px;
			background-color: #FEEEE4;
			display: flex;
			align-items: center;
			height: 100%;

			.cart-total {
				padding-left: 40rpx;
				font-size: 16px;
				font-weight: 700;
			}
		}

		.balance {
			width: 200rpx;
			height: 100%;
			background-color: #FF0000;
			font-size: $uni-font-size-lg;
			border-radius: 5px;
			color: #FFF;
		}
	}
</style>