zhishifufei_uniapp/pages/store/shoppingCart.vue

<template>
	<BaseContainer class="shopping-cart flex">
		<NavBar title="购物车" />
		<view class="cart-container">
			<view class="cart-info flex flex-center-x">
				<view>共 {{ goodsList.length }} 件商品</view>
				<view class="edit">编辑</view>
			</view>
			<view class="list">
			  <view v-for="item in goodsList" :key="item.id" class="item">
					<i class="iconfont icongouxuan" :class="{ active: checkedGoods.includes(item.productInfo.id) }" @click="checkGoods(item.productInfo.id)"></i>
			    <view class="image">
			      <image mode="aspectFit" class="img" :src="item.productInfo.image" alt="" />
			    </view>
			    <view class="text">
			      <view class="title">{{ item.productInfo.store_name }}</view>
						<view class="label flex">
							<view v-for="(label, k) in item.productInfo.label">{{ label }}</view>
						</view>
			      <view class="group">
			        <view class="price">
			          ￥<span class="num">{{ item.productInfo.price }}</span>
			        </view>
							<view class="num">
								<text @click="reduceCartNum(item)">-</text>
								<input type="number" v-model="item.cart_num"/>
								<text @click="addCartNum(item)">+</text>
							</view>
			      </view>
			    </view>
			  </view>
			</view>
			<view v-if="!goodsList.length" class="empty">
			  <image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无商品" />
			  <view>暂无商品</view>
			</view>
		</view>
		<view class="cart-footer flex flex-center-x">
			<label class="radio" @click="changeAllSelect">
				<radio value="全部" :checked="allSelect" /><text>全选</text>
			</label>
			<view class="total">合计：<text>￥{{ total }}</text></view>
			<view class="pay-btn" @click="toPay">去结算<text v-if="checkedGoods.length > 0">({{ checkedGoods.length }})</text></view>
		</view>
		<PayDialog v-if="initDataLoading" :open.sync="payDialogOpen" :money="Number(total)" :now_money="now_money"
			:pay_type_num="pay_type_num" :special_id="Number(special_id)" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
			:template-id="templateId" :wxpay-h5="wxpayH5" @change="changeVal" />
	</BaseContainer>
</template>

<script>
	import { getCartList } from "@/api/store";
	import {
		getInitData
	} from "@/api/special";
	import PayDialog from "@/components/PayDialog/index.vue";
	export default {
		components: {
			PayDialog,
		},
		data() {
			return {
				special_id: '',
				allSelect: false,
				selectGoods: [],
				goodsList: [],
				checkedGoods: [],
				total: 0,
				payDialogOpen: false, // 是否显示支付弹窗
				pay_type_num: 20,
				is_alipay: false, //支付宝是否开启
				is_yue: false, //余额是否开启
				now_money: 0, //余额
				templateId: "",
				wxpayH5: false,
				initDataLoading: false,
			};
		},
		watch: {
			checkedGoods: {
				deep: true,
				handler() {
					console.log(this.checkedGoods);
					let total = 0;
					this.goodsList.forEach(v => {
						if (this.checkedGoods.includes(v.productInfo.id)) {
							total += Number(v.cart_num) * Number(v.productInfo.price);
						}
					});
					this.total = total;
				},
			},
			goodsList: {
				deep: true,
				handler() {
					let total = 0;
					this.goodsList.forEach(v => {
						if (this.checkedGoods.includes(v.productInfo.id)) {
							total += Number(v.cart_num) * Number(v.productInfo.price);
						}
					});
					this.total = total;
				},
			},
		},
		onLoad() {
			this.getCartList();
			this.getInitData();
		},
		methods: {
			getInitData() {
			  getInitData().then(({ data }) => {
			    const { isWechat, is_alipay, is_yue, now_money, wxpayH5 } = data;
			    Object.assign(this, {
			      isWechat,
			      url: isWechat ? "/pages/index/login" : "/pages/login/phone_check",
			      is_alipay: is_alipay == 1,
			      is_yue: is_yue == 1,
			      now_money: Number(now_money),
			      wxpayH5,
			      initDataLoading: true,
			    });
			  });
			},
			changeAllSelect() {
				this.allSelect = !this.allSelect;
				if (this.allSelect) {
					const arr = [];
					this.goodsList.forEach(v => {
						arr.push(v.productInfo.id);
					});
					this.checkedGoods = arr;
				} else {
					this.checkedGoods = [];
				}
			},
			async getCartList() {
			  try {
			    const { data } = await getCartList();
			    console.log(data);
					this.goodsList = data.valid;
			  } catch (err) {
					console.log(err);
				}
			},
			checkGoods(id) {
				if (this.checkedGoods.includes(id)) {
					this.checkedGoods = this.checkedGoods.filter(item => item !== id);
				} else {
					this.checkedGoods.push(id);
				}
				this.allSelect = this.checkedGoods.length === this.goodsList.length;
			},
			reduceCartNum(item) {
				item.cart_num = Number(item.cart_num) - 1 > 1 ? Number(item.cart_num) - 1 : 1;
			},
			addCartNum(item) {
				item.cart_num = Number(item.cart_num) + 1;
			},
			toPay() {
					console.log(111);
				if (this.total === 0) {
					console.log(111);
					this.$util.showMsg("请选择商品");
				} else {
					this.payDialogOpen = true;
					console.log(111);
				}
			},
			
			changeVal(opt) {
				if (typeof opt !== "object") {
				  opt = {};
				}
				console.log(opt);
				var action = opt.action || "";
				var value = opt.value || "";
				this[action] && this[action](value);
			},
			// 支付完成后回调事件
			pay_order: function (data) {
			  this.orderId = data.data.result.orderId || "";
			  switch (data.data.status) {
			    case "PAY_ERROR":
			    case "ORDER_EXIST":
			    case "ORDER_ERROR":
			      this.extendOrder(data.msg);
			      break;
			    case "WECHAT_PAY":
			      this.wechatPay(data.data.result.jsConfig);
			      break;
			    case "WECHAT_H5_PAY":
			      this.payDialogOpen = false;
			      this.$util.wechatH5Pay(data.data.result.jsConfig, this);
			      break;
			    case "WECHAT_ROUTINE_PAY":
			      this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
			      break;
			    case "SUCCESS":
			      this.successOrder(data.msg);
			      break;
			    case "ZHIFUBAO_PAY":
			      this.aliPay(data.data.result, "datadownload");
			      break;
			    case 'TOUTIAO_PAY':
			      this.$util.toutiaoPay(data.data.result.jsConfig, this);
			      break;
			    case 'KUAISHOU_PAY':
			      this.$util.kuaishouPay(data.data.result.jsConfig, this);
			      break
			  }
			},
			extendOrder(msg) {
			  if (typeof msg === "object" && msg.errMsg === "chooseWXPay:cancel") {
			    msg = "微信支付取消";
			  } else {
			    msg = "支付失败";
			  }
			  this.$util.showMsg(msg);
			  this.payDialogOpen = false;
			  if (this.orderId) {
			    delSpecialOrder(this.orderId);
			  }
			},
			wechatPay(config) {
			  this.$util.weixinpay(config, this);
			},
			successOrder(msg) {
			  this.$util.showMsg(msg ? msg : "支付成功");
			  this.payDialogOpen = false;
				this.submitApply();
			},
			aliPay(msn, type) {
			  this.$util.aliPay(msn, type, this);
			},
		},
	};
</script>

<style lang="scss" scoped>
.shopping-cart {
	background: #f6f6f6;
	flex-direction: column;
	.cart-container {
		height: 100%;
		.cart-info {
			height: 78rpx;
			color: #BBBBBB;
			font-size: 28rpx;
			padding: 0 35rpx 0 44rpx;
			justify-content: space-between;
		}
		.list {
			width: 690rpx;
			margin: 0 auto;
		}
		.list .item {
		  margin-bottom: 30rpx;
		  padding: 26rpx 24rpx;
			background: #fff;
			display: flex;
			border-radius: 10rpx;
			align-items: center;
			.iconfont {
			  display: inline-block;
			  width: 40rpx;
			  height: 40rpx;
			  border: 1px solid #e5e5e5;
			  border-radius: 50%;
			  box-sizing: border-box;
			  vertical-align: middle;
			  font-size: 0;
			  line-height: 40rpx;
			  text-align: center;
			  color: #c3c3c3;
				margin-right: 12rpx;
			  &.active {
			    border: 0;
			    background: #2c8eff;
			    font-size: 20rpx;
			    color: #ffffff;
			  }
			}
			.label {
				height: 38rpx;
				view {
					height: 38rpx;
					line-height: 38rpx;
					background: #e1feee;
					padding: 0 15rpx;
					margin-right: 10rpx;
					color: #28ce8f;
					font-size: 20rpx;
					&:nth-child(2) {
						color: #ff5c6b;
						background: #fee1e1;
					}
				}
			}
		}
		
		.list .image {
			width: 156rpx;
		  height: 184rpx;
			margin-right: 52rpx;
			flex-shrink: 0;;
		}
		
		.list .image .img {
		  width: 100%;
		  height: 100%;
		}
		
		.list .text {
			flex: 1;
		  display: flex;
		  flex-direction: column;
		  padding-top: 13rpx;
		}
		
		.list .title {
		  overflow: hidden;
		  font-size: 28rpx;
		  line-height: 35rpx;
			height: 70rpx;
		  color: #333;
		  -webkit-line-clamp: 2;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
			margin-bottom: 13rpx;
		}
		
		.list .group {
			margin-top: auto;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding: 0 6rpx;
			.num {
				display: flex;
				text {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx 0 0 30rpx;
					text-align: center;
					line-height: 60rpx;
					border: 2rpx solid #E6E6E6;
					box-sizing: border-box;
					&:last-child {
						border-radius: 0 30rpx 30rpx 0;
					}
				}
				input {
					width: 80rpx;
					height: 60rpx;
					text-align: center;
					border-top: 2rpx solid #E6E6E6;
					border-bottom: 2rpx solid #E6E6E6;
				}
			}
		}
		
		.list .price {
		  font-size: 32rpx;
		  color: #f8473e;
		  font-weight: 600;
			display: flex;
		}
		
		.list .price .num {
		  font-size: 32rpx;
		}
		
		.list .cart-image {
		  width: 52rpx;
			height: 52rpx;
		}
		.empty {
		  margin-top: 100rpx;
		  font-size: 28rpx;
		  text-align: center;
		  color: #bbb;
		}
		
		.empty image {
		  display: block;
		  width: 414rpx;
		  height: 305rpx;
		  margin: 0 auto;
		  pointer-events: none;
		}
	}
	.cart-footer {
		width: 100%;
		height: 100rpx;
		padding-left: 30rpx;
		background: #fff;
		box-shadow: 0rpx -19rpx 54rpx 0rpx rgba(34,34,34,0.05);
		flex-shrink: 0;
		position: fixed;
		bottom: 0;
		left: 0;
		label {
			color: #999999;
			font-size: 28rpx;
		}
		.total {
			margin-left: auto;
			margin-right: 20rpx;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			text {
				color: #FF2825;
			}
		}
		.pay-btn {
			width: 240rpx;
			height: 100rpx;
			background: #0F74BB;
			text-align: center;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
}
</style>