uni-app 购物车及微信支付

<template>
	<view class="cart">
		<view class="content">
			<label for="" v-for="item in list" :key='item.id'>
				<view class="list">
					<view class="left">
						<checkbox-group @change="checkboxChange($event,item.id)">
							<checkbox :value="item.id" :checked="item.isChecked" />
						</checkbox-group>
						<image :src="item.img" class="img"></image>
					</view>
					<view class="center">
						<view class="name">
							{{item.name}}
						</view>
						<view class="size">
							尺寸：{{item.size}}
						</view>
						<view class="count">
							数量：x{{item.count}}
						</view>
					</view>
					<view class="right">
						<view class="price">
							单价￥{{item.price}}元
						</view>
						<view class="update-count">
							<!-- 阻止事件冒泡 -->
							<view class="reduce" @tap.stop="editNum(item.id,-1,$event)">
								-
							</view>
							<view class="cart-count">
								{{item.count}}
							</view>
							<view class="add" @tap.stop="editNum(item.id,1,$event)">
								+
							</view>
						</view>
					</view>
				</view>
			</label>




		</view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="all">
				<checkbox-group @change="checkboxChangeAll">
					<checkbox :checked="isAllChecked" />全选
				</checkbox-group>
			</view>
			<view class="totalPrice">
				总价:￥{{totalPrice}}元
			</view>
			<view class="submitOrder" @tap="submitOrder">
				付款
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], //列表数据
				isAllChecked: false, //是否全选
				totalPrice: 0 //总价
			}
		},
		
		methods: {
			setCart() { //计算总价
				let totalPrice = 0
				this.list.forEach(v => {
					if (v.isChecked) {
						totalPrice += v.count * v.price
					}
				})
				this.totalPrice = totalPrice

			},

			editNum(id, type, e) { //编辑数量
				const index = this.list.findIndex(v => v.id == id)
				if (this.list[index].count == 1 && type == -1) {
					uni.showToast({
						title: '至少购买一件商品',
						icon: 'none'
					})
				} else {
					this.list[index].count += type
				}
				this.setCart();

			},

			// 全选
			checkboxChangeAll(e) {
				this.isAllChecked = !this.isAllChecked
				this.list.forEach(v => v.isChecked = this.isAllChecked)
				this.setCart()
			},

			// 选择每一项
			checkboxChange: function(e, id) {
				var temp = [];
				// 找到被修改的商品对象
				let index = this.list.findIndex(v => v.id === id)
				// 选中状态取反
				this.list[index].isChecked = !this.list[index].isChecked
				//every  数组中的每一个元素都满足条件才返回true。有一个不满足，就返回false并停止寻找
				temp = this.list.every(v => v.isChecked)
				if (temp) {
					this.isAllChecked = true
				} else {
					this.isAllChecked = false
				}
				this.setCart()
			},

			submitOrder() { // 提交购物车订单
				// 判断是否选择购物车商品
				var bol = this.list.every(el => el.isChecked == false)
				//如果一个没选，选择付款
				if (bol) {
					uni.showToast({
						title: "请选择一件商品进行付款",
						icon: "none",
						duration: 2000
					})
				} else {
					uni.request({
						url: "http://tmqp.tmacw.com/index.php/admin/Ajaxpayfun/index",
						data: {},
						success: (res) => {
							var statusCode = res.statusCode; //判断调用是否成功  ==200 
							var e = JSON.parse(res.data);
							this.requestPayment(e);
						}
					})
				}
			},
			requestPayment(e) {
				uni.requestPayment({
					"provider": "wxpay",
					"orderInfo": {
						"appid": e.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						"noncestr": e.noncestr, // 随机字符串
						"package": e.package, // 固定值
						"partnerid": e.partnerid, // 微信支付商户号
						"prepayid": e.prepayid, // 统一下单订单号 
						"timestamp": e.timestamp, // 时间戳（单位：秒）
						"sign": e.sign // 签名，这里用的 MD5 签名
					},
					success(res) {
						console.log("修改订单状态")
						console.log(res)
					},
					fail(e) {
						console.log(e)
					}
				})
			}
		},
		onShow() {
			var carts = uni.getStorageSync('carts').data[0];
			console.log(carts);
			// 模拟从后台拿到的数据
			var list = []
			var listStr = {
				id: String(carts.id),
				name: carts.categoryName,
				price: carts.salePrice,
				count: 1,
				size: carts.remark,
				img: 'http://47.92.83.204:8080/zhangying/img/cart/xia1.jpg'
			}
			list.push(listStr)
			// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
			list.forEach(el => el.isChecked = false);
			this.list = list;
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1e8e7;
	}

	.content {
		width: 670rpx;
		margin: 0 auto 180rpx;
	}

	// 居中显示
	@mixin textCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list {
		width: 672rpx;
		height: 208rpx;
		background: #f9f9f9;
		box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 24rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.left {
			display: flex;

			.img {
				width: 136rpx;
				height: 136rpx;
				margin-left: 10rpx;
				border-radius: 8%;
			}
		}

		.center {
			width: 170rpx;

			.name {
				font-size: 26rpx;
				color: #3E3E3E;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.size,
			.count {
				font-size: 22rpx;
				color: #8D8D8D;
			}
		}

		.right {
			.price {
				margin-top: 40rpx;
				font-size: 26rpx;
				margin-left: 40rpx;
			}

			// 加减数量
			.update-count {
				margin-top: 40rpx;
				display: flex;

				.reduce,
				.add {
					width: 40rpx;
					height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					color: #979797;
					@include textCenter;
					font-size: 50rpx;
				}

				.cart-count {
					width: 72rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					margin-left: 18rpx;
					margin-right: 18rpx;
					text-align: center;
				}
			}
		}
	}

	// 底部导航
	.tabbar {
		width: 100%;
		background-color: #f3f3f3;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 8% 8%;

		.all {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			display: flex;
		}

		.totalPrice {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			color: red;
		}

		.submitOrder {
			width: 208rpx;
			height: 80rpx;
			background: #354E44;
			border-radius: 14rpx;
			border-radius: 14rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			letter-spacing: 2.57rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>