bc_wx_applet/pages/home/home.vue

<template>
	<view class="w-full">
		<view>
			<u-row justify="space-between" customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="icon-container-l" @click="onOrder">
						<uni-badge size="normal" :text="txts" absolute="rightTop">
							<u-icon :name="iconCooking" label="自提" labelPos="bottom" size="32"></u-icon>
						</uni-badge>
					</view>
				</u-col>
				<view class="container">
					<u-tag plain :text="cList.openState ? '营业中' : '离线'" :type="cList.openState ? 'success' : 'error'"
						size="mini"></u-tag>
					<view>
						<!-- <text>{{cList.name}}</text> -->
						<u-icon :label="cList.name" labelPos="left" @click="btnIc" size="16" name="arrow-down"></u-icon>
					</view>
				</view>
				<u-col span="3">
					<view class="icon-container-r" @click="onMyInfo">
						<u-icon label="我的" labelPos="bottom" size="32" :name="iconPeople"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="w-full dflex-b padding-xs box-sizing-b dflex-wrap-w">
			<view class="goods-item margin-bottom-sm" v-for="(item, gindex)  in goods" :key="gindex">
				<view class="img dflex-c" @click="toDetial(item)">
					<image mode="aspectFit" :src="item.imgList[0].url"></image>
				</view>
				<view class="title">{{item.spuName}}</view>
				<view class="dflex padding-bottom-xs">
					<u-tag plain text="销量: 199" borderColor="#FF6D20" color="#FF6D20" size="mini"></u-tag>
				</view>
				<view class="w-full dflex-b">
					<view class="price">{{item.minPrice ? item.minPrice : '无'}}</view>
					<view>
						<u-button type="primary" shape="circle" size="small"
							color="linear-gradient(to right, #F54319, #FF6D20)" @click="goCart(item)">
							<u-icon name="shopping-cart-fill" size="28" color="#fff"></u-icon>
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<my-gap :height="10" />
		<specPopup class='spec-box' ref="specPopup" :cardMsg="cardMsg" @update-shopmsg="handleUpdateShopMsg"
			@onSuccess="carListMeg">
		</specPopup>
		<view class="cart-bottom padding-sm dflex-b">
			<view class="cart padding-lr">
				<uni-badge size="small" :text="buyCount" absolute="rightTop">
					<u-icon name="shopping-cart-fill" size="28" color="#FF873D" @click="showCart"></u-icon>
				</uni-badge>
				<text class="cart-total">总计：￥{{total}}</text>
			</view>
			<view class="balance dflex-c background-gradient" @click="toBuy">去结算</view>
		</view>
		<cartPopupVue ref="cartPopup" @selected-changed="handleSelectedChanged" @cartChange="cartChange" />

	</view>
</template>

<script>
	import cartPopupVue from '../../components/cartPopup.vue'
	import specPopup from '@/components/specPopup.vue'
	import iconCooking from '../../static/cooking.png'
	import iconPeople from '../../static/people.png'
	import shoppingCart from '../../static/shoppingCart.png'
	export default {
		components: {
			cartPopupVue,
			specPopup
		},
		data() {
			return {
				onIndex: 0,
				show: false,
				iconCooking: iconCooking,
				iconPeople: iconPeople,
				shoppingCart: shoppingCart,
				tags: 1,
				txts: 1,
				carList: {},
				goods: [],
				total: 0,
				cList: {},
				cardMsg: {},
				selectedList: [],
				buyCount: 0
			}
		},
		onLoad() {
			
			// this.carListMeg()
		},
		onShow(){
			const e = uni.getStorageSync('carl')
			this.cList = e
			this.fatchDate()
			this.carListMeg()
		},
		methods: {
			// 加购
			goCart(e) {
				this.cardMsg = e
				// this.$nextTick(() => {
				// 	this.$refs.specPopup.open();
				// });
				
				this.$refs.specPopup.open();
				this.$refs.specPopup.setData(e.spuId);
				this.$refs.specPopup.setType(0)
			},
			handleSelectedChanged(selectedItems) {
				console.log('选中的数据:', selectedItems)
				this.carList = selectedItems
				this.carListMeg()
				this.totalPrice()
			},

			//计算selected为true的
			totalPrice() {
				let total = 0;
				for (let i = 0; i < this.carList.length; i++) {
					// 检查商品是否有 selected 属性
					// if (this.carList[i].hasOwnProperty('selected')) {
					// 	// 如果 selected 属性存在，只有当它为 true 时才计算
					// 	if (this.carList[i].selected) {
					// 		let priceInCents = Math.round(this.carList[i].price * 100);
					// 		let quant = this.carList[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);

				console.log('total', this.total);
			},
			showCart() {
				this.$nextTick(() => {
					this.$refs.cartPopup.setShow(true)
				})
			},
			btnIc() {
				uni.navigateTo({
					url: `/pages/diningList/diningList`
				})
			},
			toDetial(e) {
				console.log('eeeeee====================', e)
				const data = {
					spuId: e.spuId,
					tobyC: this.buyCount
				}
				uni.navigateTo({
				  url: `/pages/goodDetail/goodDetail?data=${encodeURIComponent(JSON.stringify(data))}`
				})
			},
			toBuy() {
				console.log('e========carList', this.carList)
				// uni.navigateTo({
				// 	url: `/pages/order/submitOrder/submitOrder`
				// })
			},
			onOrder() {
				uni.navigateTo({
					url: `/pages/order/myOrder/myOrder`
				})
			},
			onMyInfo() {
				const info = {
					customerPhone: this.cList.customerPhone
				}
				console.log('======================', info)
				uni.setStorageSync("info", info)
				uni.navigateTo({
					url: `/pages/user/user`
				})
			},
			// 获取餐车列表
			async fatchDate() {
				const result = await this.$request('post', '/sale/diningCarProduct/queryDiningCarProduct?diningCarId='+this.cList.id)
				if (result && result.rows && result.rows.length > 0) {
					const queIds = new Set(result.rows.map(item => item.spuId));
					const spuIds = Array.from(queIds).join(',');
					const res = await this.$request('get', `/item/spu/queryByIds?spuIds=${spuIds}`)
					const data = res.data
					this.goods = data.filter(item => item.status !== 1)
				}else{
					this.goods = []
				}
			},
			cartChange(data){
				this.buyCount = data.length;
				this.carList = data;
				this.totalPrice()
			},
			async carListMeg() {
				// const res = await this.$request('get', `/front/shoppingCart/list`, {
				// 	storeId: this.cList.id
				// })
				// if (res) {
				// 	const carList = res.data
				// 	this.buyCount = carList.length
				// }
				let cartInfo = uni.getStorageSync('cartInfo');
				if(cartInfo){
					try{
						this.carList = JSON.parse(cartInfo)
						this.buyCount = this.carList.length;
						this.totalPrice()
					}catch(e){}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-category {
		width: calc(100% - 100rpx);
		border-radius: 14rpx;
		overflow: hidden;

		.category-box {
			height: 70rpx;
			width: 100%;
			display: flex;
			align-items: center;

			.category-item {
				font-size: 14px;
				flex-shrink: 0;
				height: 100%;
				line-height: 70rpx;
			}

			.on-category {
				color: #FFF;
				background-color: #000;
			}
		}

		.classify-icon {
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.goods-item {
		width: 48%;
		overflow: hidden;
		box-sizing: border-box;
		border: solid 4px #FFF;
		border-radius: 5px;
		box-shadow: 0px 3px 10px 0px rgba(213, 221, 232, 0.5);

		.img {
			width: 100%;
			height: 180rpx;
			overflow: hidden;
			background: #EEE;
		}

		.title {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 10rpx;
		}
	}

	.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;
		}
	}

	.spec-box {
		position: relative;
		z-index: 99999;
	}

	.classify-popup {
		width: 400rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		align-items: center;
		/* 垂直居中子元素 */
		justify-content: center;
		/* 水平居中子元素 */
	}

	.icon-container-l {
		margin-top: 10px;
		margin-left: 15px;
	}

	.icon-container-r {
		margin-left: 20px;
	}
</style>