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">
								<view class="checkbox">
									<uv-checkbox :name="item.id" activeColor="#FA5A0A" size="40rpx"
										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>{{ item.name }}</view>
										<view>
											<uv-number-box v-model="item.num"
												@change="e => valChange(item, e)"></uv-number-box>
										</view>
									</view>
									<view class="unit" @click="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="addressPopup" :round="30">
			<addressList ref="addressList" height="60vh" @select="selectAddress" />
		</uv-popup>

		<!-- 规格 -->
		<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 }}
					</view>
				</view>
			</view>
		</uv-popup>
		<tabber select="3" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import addressList from '@/components/address/addressList.vue'

	export default {
		components: {
			tabber,
			addressList,
		},

		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10,
				},
				list: {
					records : [],
				},
				addressTotal: 0,
				address: {
					name: '请选择联系人',
					addressDetail: ''
				},
				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
			},
		},
		onShow() {
			this.getData()
			this.getAddressListA()
		},
		//滚动到屏幕底部
		onReachBottom() {
			if (this.queryParams.pageSize < this.list.total) {
				this.queryParams.pageSize += 10
				this.getData()
			}
		},
		methods: {

			// 修改商品规格弹框
			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
				}
				
				if (this.addressTotal == 0) {
					return uni.navigateTo({
						url: '/pages_order/mine/address?type=back'
					})
				}
				
				// 打开地址弹框
				this.$refs.addressPopup.open('bottom')
			},

			// 选择地址
			selectAddress(e) {
				this.address = e
				this.$refs.addressPopup.close()
				this.ordersPay()
			},

			//商品下单
			ordersPay() {
				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: this.address.id, //地址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
						}
						
						// 不管有没有支付，都要清除购物车数据
						self.$api('cartDel', {
							id: deleteCartIds
						}, res => {
							if (res.code == 200) {
								self.getData()
							}
						})
						
						
						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);

										uni.redirectTo({
											url: '/pages/index/order'
										})

									},
									fail: function(err) {
										console.log('支付失败', err);
										// self.$refs.confirmationPopup.close()
										uni.showToast({
											icon: 'none',
											title: "支付失败"
										})
									}
								});
							}
						})
					}
				})
			},

			// 修改购物车里面商品的规格
			unitChange(item, e) {

				// TODO 查询商品规格
				// this.$api('goodsOne', this.queryParams, res => {
				// 	if (res.code == 200) {
				// 		this.list = res.result
				// 	}
				// })
			},

			// 获取地址列表
			getAddressListA() {
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if (this.addressTotal != 0) {
						this.address = res.records[0]
					}
				})
			},


			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: '删除成功',
						});
					}
				})
			},
		}
	}
</script>

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

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

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

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

			.info {
				flex: 1;

				.title {
					display: flex;
					padding: 10rpx 20rpx;
					justify-content: space-between;

				}

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

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