hotel-tablecloth-uniapp-24-08-29/pages/index/cart.vue

<template>
	<view class="page">
		<navbar />

		<view class="user">
			<uv-checkbox-group shape="circle" v-model="checkboxValue"
			v-if="list.records.length > 0">
				<uv-swipe-action>
					<view v-for="(item, index) in list.records" :key="index">
						<view style="margin-top: 20rpx;"></view>
						<uv-swipe-action-item :options="options" @click="delCart(item, index)">
							<view class="item" @click="selectItem(item)">
								<view class="checkbox">
									<uv-checkbox 
									:name="item.id" 
									activeColor="#FA5A0A" 
									size="40rpx"
									@click.stop
									icon-size="35rpx"></uv-checkbox>
								</view>

								<image class="image"
									:src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
									mode=""></image>

								<view class="info">
									<view class="title">
										<view class="text-ellipsis"
										style="width: 220rpx;"
										>{{ item.name }}</view>
										<view style="flex-shrink: 0;">
											<uv-number-box v-model="item.num"
												@change="e => valChange(item, e)"></uv-number-box>
										</view>
									</view>
									<view class="unit" @click.stop="toggleDropdown(item)">
										规格：{{ item.title }}
										<uv-icon name="arrow-down"></uv-icon>
									</view>
									<view class="price">
										￥
										<text>{{ item.depositPrice }}</text>
										元
									</view>
								</view>
							</view>
						</uv-swipe-action-item>
					</view>
				</uv-swipe-action>
			</uv-checkbox-group>
			
			<uv-empty
			v-else
			text="空空如也"
			textSize="30rpx"
			iconSize="200rpx"
			icon="list"></uv-empty>

			<view class="action">
				<view class="icon">
					<image src="/static/image/cart/1.png" mode=""></image>
					<view class="num">{{ checkboxValue.length }}</view>
				</view>
				<view class="price">
					<view class="count">
						合计
						<view>
							￥
							<text>{{ totalPrice }}</text>
						</view>
					</view>
					<view class="text">
						共{{ checkboxValue.length }}件，已享受更低优惠
					</view>
				</view>
				<view class="btn" @click="goCleaning">去结算</view>
			</view>
		</view>

		<!-- 规格 -->
		<uv-popup ref="skuPopup" :round="30" closeable>
			<view class="submit-unit">
				<view class="title">
					规格选择
				</view>
				<view class="list">
					<view :class="{act : unitIndex == index}" v-for="(item, index) in skuList"
						@click="selectUnit(item, index)" :key="index">
						{{ item.title }}
						<text v-if="item.colour">,{{ item.colour }}</text>
					</view>
				</view>
			</view>
		</uv-popup>
		
		<cartSubmitSelect 
		@submit="ordersPay"
		:price="totalPrice"
		:depositPrice="totalPrice"
		:depositPriceList="depositPriceList"
		ref="cartSubmitSelect"/>
		
		<tabber select="3" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import cartSubmitSelect from '@/components/user/cartSubmitSelect.vue'
	export default {
		components: {
			tabber,
			cartSubmitSelect
		},

		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10,
				},
				list: {
					records : [],
				},
				skuList: [],
				editSkuForm: {
					id: '', //购物车id
					goodsId: '', //商品id
					skuId: '', //规格id
				},
				value: 0,
				checkboxValue: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FA5A0A'
					}
				}, ],
				unit: {},
				unitIndex: 0,
			}
		},
		computed: {
			totalPrice() {
				if (!this.checkboxValue.length) {
					return 0
				}
				let price = 0
				this.list.records.forEach(n => {
					if (this.checkboxValue.includes(n.id)) {
						price += n.depositPrice * n.num
					}
				})
				
				return price.toFixed(2)
			},
			depositPriceList(){
				if (!this.checkboxValue.length) {
					return []
				}
				
				let list = []
				
				this.list.records.forEach(n => {
					if (this.checkboxValue.includes(n.id)) {
						// price += n.depositPrice * n.num
						
						let len = list.length
						
						for(let i = 0;i < len;i++){
							let item = list[i]
							if(item.price == n.depositPrice){
								item.num += n.num
								return
							}
						}
						
						list.push({
							price : n.depositPrice,
							num : n.num,
						})
					}
				})
				
				return list
			},
		},
		onShow() {
			this.getData()
		},
		//滚动到屏幕底部
		onReachBottom() {
			if (this.queryParams.pageSize < this.list.total) {
				this.queryParams.pageSize += 10
				this.getData()
			}
		},
		methods: {
			// 选择物品
			selectItem(item){
				let index = this.checkboxValue.indexOf(item.id)
				if(index == -1){
					this.checkboxValue.push(item.id)
					return
				}
				this.checkboxValue.splice(index, 1)
			},

			// 修改商品规格弹框
			toggleDropdown(item) {
				this.editSkuForm.id = item.id
				this.editSkuForm.goodsId = item.goodsId
				// 根据商品id获取规格
				this.$api('goodsSku', {
					id: item.goodsId
				}, res => {
					if (res.code == 200) {
						this.skuList = res.result
						// 打开规格弹框
						this.$refs.skuPopup.open('bottom')
					}
				})
			},

			// 选择规格
			selectUnit(item, index) {
				this.unit = item
				this.unitIndex = index
				this.editSkuForm.skuId = item.id
				this.$api('editSku', this.editSkuForm, res => {
					if (res.code == 200) {
						this.$refs.skuPopup.close()
						this.getData()
					}
				})
			},

			// 去结算按钮
			goCleaning() {
				if (this.checkboxValue.length < 1) {
					uni.showToast({
						title: "请勾选商品",
						icon: 'none'
					})
					return
				}
				
				// 打开弹框
				this.$refs.cartSubmitSelect.open('bottom')
			},

			//商品下单
			ordersPay({ addressId, couponId }) {
				var self = this
				var deleteCartIds = this.checkboxValue.join(",") //待删除的购物车id

				let data = []
				let records = this.list.records
				for (var i = 0; i < records.length; i++) {
					if (this.checkboxValue.includes(records[i].id)) {
						data.push({
							id: records[i].goodsId, //商品id
							skuId: records[i].skuId, //规格id
							addressId, //地址id
							sku: records[i].title, //规格
							num: records[i].num,
						})
					}
				}

				this.$api('orderCreate', {
					req: JSON.stringify(data)
				}, res => {
					if (res.code == 200) {
						let form = {
							id: res.result.id
						}
						
						if(couponId){
							form.couponId = couponId
						}
						
						this.$api('orderPay', form, res => {
							if (res.code == 200) {
								
								uni.requestPayment({
									provider: 'wxpay', // 服务提提供商
									timeStamp: res.result.timeStamp, // 时间戳
									nonceStr: res.result.nonceStr, // 随机字符串
									package: res.result.packageValue,
									signType: res.result.signType, // 签名算法
									paySign: res.result.paySign, // 签名
									success: function(res) {
										console.log('支付成功', res);
										self.delsCart(deleteCartIds)
										uni.redirectTo({
											url: '/pages/index/order'
										})
									},
									fail: function(err) {
										self.delsCart(deleteCartIds)
										console.log('支付失败', err);
										uni.redirectTo({
											url:'/pages/index/order'
										})
										// self.$refs.confirmationPopup.close()
										uni.showToast({
											icon: 'none',
											title: "支付失败"
										})
									}
								});
							}
						})
					}
				})
			},

			valChange(item, e) {
				console.log(e.value);
				this.$api('cartNum', {
					id: item.id,
					num: e.value,
				})
			},

			// 购物车分页
			getData() {
				this.$api('cartPage', this.queryParams, res => {
					if (res.code == 200) {
						this.list = res.result
					}
				})
			},
			// 删除购物车
			delCart(item, index) {
				this.$api('cartDel', {
					id: item.id
				}, res => {
					if (res.code == 200) {
						this.getData()
						uni.showToast({
							title: '删除成功',
						});
					}
				})
			},
			//批量删除购物车
			delsCart(deleteCartIds){
				// 不管有没有支付，都要清除购物车数据
				this.$api('cartDel', {
					id: deleteCartIds
				}, res => {
					if (res.code == 200) {
						this.getData()
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 200rpx;
		/deep/ .uv-swipe-action {
			width: 100%;
		}
	}

	.user {
		.item {
			background-color: #fff;
			display: flex;
			padding: 30rpx;

			.checkbox {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
			}

			.image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				flex-shrink: 0;
			}

			.info {
				flex: 1;

				.title {
					display: flex;
					padding: 10rpx 20rpx;
					justify-content: space-between;
					.text-ellipsis{
						width: 280rpx;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
					}
				}

				.unit {
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					color: #717171;
					display: flex;
					align-items: center;
				}


				.price {
					color: $uni-color;
					font-size: 28rpx;
					padding: 10rpx 20rpx;

					text {
						font-size: 36rpx;
						font-weight: 900;
					}
				}
			}
		}

		.action {
			width: 700rpx;
			position: fixed;
			bottom: 220rpx;
			left: 25rpx;
			background-color: #fff;
			height: 100rpx;
			border-radius: 50rpx;
			box-shadow: 0 0 6rpx 6rpx #00000010;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			z-index: 99;

			.icon {
				position: relative;
				width: 80rpx;
				height: 80rpx;
				margin: 0 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.num {
					position: absolute;
					right: 10rpx;
					top: 0rpx;
					background-color: $uni-color;
					color: #fff;
					font-size: 18rpx;
					border-radius: 50%;
					height: 30rpx;
					width: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.price {
				.count {
					display: flex;
					font-size: 26rpx;
					align-items: center;

					view {
						color: $uni-color;
						margin-left: 10rpx;

						text {
							font-size: 32rpx;
							font-weight: 900;
						}
					}
				}

				.text {
					font-size: 20rpx;
					color: #717171;
				}
			}

			.btn {
				margin-left: auto;
				background-color: $uni-color;
				height: 100%;
				padding: 0 50rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.example-body {
		padding: 12px;
		background-color: #FFFFFF;
	}

	.result-box {
		text-align: center;
		padding: 20px 0px;
		font-size: 16px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
	
	
	.submit-unit {
		padding: 30rpx;
		background-color: #fff;
		height: 60vh;
		overflow: auto;
	
		.title {
			font-size: 28rpx;
			font-weight: 600;
		}
	
		.list {
			display: flex;
			flex-wrap: wrap;
			font-size: 22rpx;
	
			.act {
				color: $uni-color;
				border: 1px solid $uni-color;
				background-color: #F9E7DE;
			}
	
			view {
				border-radius: 15rpx;
				width: 320rpx;
				background-color: #F3F3F3;
				border: 1px solid #F3F3F3;
				margin: 10rpx;
				display: flex;
				justify-content: center;
				padding: 15rpx 0;
			}
		}
	}
</style>