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">
				<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">
										规格：{{ selectedOption || item.title }}
										<uv-icon name="arrow-down"></uv-icon>
									</view>


									<view class="price">
										￥<text>{{ item.price }}</text>元
									</view>
								</view>
							</view>
						</uv-swipe-action-item>
					</view>
				</uv-swipe-action>
			</uv-checkbox-group>

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

		<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 {
				dropdownVisible: false,
				value: 0,
				checkboxValue: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FA5A0A'
					}
				}],

				queryParams: {
					pageNo: 1,
					pageSize: 10,
				},
				list: [],
				addressTotal: 0,
				address: {
					name: '请选择联系人',
					addressDetail: ''
				},
			}
		},
		computed: {

			totalPrice() {
				if (!this.checkboxValue.length) {
					return 0
				}
				let price = 0
				this.list.records.forEach(n => {
					if (this.checkboxValue.includes(n.id)) {
						price += n.price * 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() {
				this.dropdownVisible = !this.dropdownVisible
			},
			selectOption(option) {

			},
			// 去结算按钮
			goCleaning() {
				console.log("===");
				this.$refs.addressPopup.open('bottom')

				this.ordersPay()
			},

			// 多商品下单
			ordersPay() {
				let data = []
				console.log(this.address, "this.address");

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

				return


				this.$api('orderCreate', {
					req: JSON.stringify(data)
				}, res => {
					if (res.code == 200) {
						let form = {
							id: res.result.id
						}
						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]
					}
				})
			},

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

			},

			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;
	}
</style>