deming/pageC/cart/ConfirmOrder.vue

<template>
	<view class="order">
		<view class="info-address" @click="changeAddress" v-if="JSON.stringify(addressInfo) != '{}'">
			<image src="../static/image/2.png" class="address-icon"></image>
			<view class="address">
				<view class="user-info">
					<view>{{ addressInfo.address_realname }}</view>
					<view>{{ addressInfo.address_mob_phone }}</view>
				</view>
				<view class="address-text u-line-2">{{ addressInfo.area_info + addressInfo.address_detail }}</view>
			</view>
			<image src="../static/image/1.png" class="right"></image>
		</view>
		<view v-else class="address-none" @click="changeAddress">请选择地址</view>
		<view class="main">
			<view v-for="(item, index) in orderInfo.store_cart_list" :key="index">
				<view class="goods-info">
					<view class="store">
						<image class="avatar" :src="orderInfo.store_list[index].store_avatar"></image>
						<view>{{ item[0].store_name }}</view>
						<image src="../static/image/1.png" class="right"></image>
					</view>
					<view class="goods">
						<view v-for="(goods, g_index) in item" :key="g_index" class="goods-item">
							<image :src="goods.goods_image_url"></image>
							<view class="info">
								<view class="name u-line-2">{{ goods.goods_name }}</view>
								<view class="cart-info">
									<view class="price">￥{{ goods.goods_price }}</view>
									<view>×{{ goods.goods_num }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-info">
					<view @click="showCoupon({type: 2, store_id: item[0].store_id})" v-if="orderType == 1 || orderType == 5">
						<view class="title">优惠券折扣</view>
						<view class="value">
							<view>-￥{{ storeCoupon[item[0].store_id] ? storeCoupon[item[0].store_id].voucher_price.toFixed(2) : '0.00' }}</view>
							<image src="../static/image/1.png"></image>
						</view>
					</view>
					<view>
						<view class="title">运费</view>
						<view class="value">
							<view v-if="freight">￥{{ freight | setFreight(index) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="common-active">
			<view @click="showCoupon({type: 1})" v-if="orderType == 1 || orderType == 5">
				<view class="title">平台优惠券</view>
				<view class="value">
					<view>-￥{{ choiceCoupon.vouchertemplate_id ? choiceCoupon.voucher_price.toFixed(2) : '0.00' }}</view>
					<image src="../static/image/1.png"></image>
				</view>
			</view>
			<view @click="showDelivery=true">
				<view class="title">配送方式</view>
				<view class="value">
					<view>{{ delivery.text }}</view>
					<image src="../static/image/1.png"></image>
				</view>
			</view>
		</view>
		<u-popup v-model="couponStatus" mode="bottom">
			<scroll-view class="coupon-choose" scroll-y style="height: 800rpx;" v-if="this.couponType.type == 1">
				<view class="title">优惠券详情</view>
				<view class="text">平台优惠券</view>
				<Coupon :couponInfo="coupon" @use="useCoupon($event)" :goodsClass="goodsClass" v-for="(coupon, index) in orderInfo.store_voucher_all_list" :key="index"></Coupon>
				<u-empty text="无可用优惠券" mode="coupon" v-if="!orderInfo.store_voucher_all_list.length"></u-empty>
			</scroll-view>
			<scroll-view class="coupon-choose" scroll-y style="height: 800rpx;" v-if="this.couponType.type == 2">
				<view class="title">优惠券详情</view>
				<view class="text">店铺优惠券</view>
				<Coupon :couponInfo="coupon" @use="useCoupon($event)" :goodsClass="goodsClass" v-for="(coupon, index) in orderInfo.store_voucher_list[this.couponType.store_id]" :key="index"></Coupon>
				<u-empty text="无可用优惠券" mode="coupon" v-if="!orderInfo.store_voucher_list[this.couponType.store_id].length"></u-empty>
			</scroll-view>
		</u-popup>
		<view class="bottom">
			<view class="left">
				<view class="title">合计：</view>
				<view class="price">￥{{ totalPrice }}</view>
			</view>
			<view class="right">
				<view class="num">共件{{ orderInfo.store_cart_list | setTotalNumber }}商品</view>
				<view class="btn" @click="intermediate">结算</view>
			</view>
		</view>
		<u-action-sheet :list="deliveryList" @click="setDelivery" border-radius="10" v-model="showDelivery"></u-action-sheet>
	</view>
</template>
<script>
import Coupon from "@/components/mine/coupon/mine";
export default {
	data() {
		return {
			showDelivery: false,
			orderInfo: {},
			totalPrice: '0.00',
			addressInfo: {},
			freight: {}, // 运费
			isTakeawayer: '', // 是否支持骑手
			deliveryList: [{
				text: '快递',
				value: 'express',
			}, {
				text: '骑手',
				value: 'takeawayer',
			}],
			delivery: {
				text: '快递',
				value: 'express',
			}, // 配送方式
			couponList: [],
			couponStatus: false,
			couponType: {}, // 选择的优惠券
			storeCoupon: {}, // 选中的店铺优惠券
			choiceCoupon: {}, // 使用的平台优惠券
			goodsClass: [],
			orderType: '', // 订单类型 1 普通订单  2 拼团订单 3 秒杀订单 4 优惠券 5 购物车订单
			debounce: true,
		}
	},
	components: {
		Coupon
	},
	filters: {
		setTotalNumber(data) {
			let num = 0;
			for (const key in data) {
				if (data.hasOwnProperty(key)) {
					const element = data[key];
					element.forEach(item => {
						num += item.goods_num;
					})
				}
			}
			return num;
		},
		setFreight(freight, index) {
			return freight[index];
		}
	},
	onLoad(option) {
		this.orderType = this.$store.state.orderType;
		this.orderInfo = this.$store.state.orderInfo;
		// console.log(this.orderType);
		// console.log(this.orderInfo);
		this.getGoodsClass();
		this.setTotalPrice();
	},
	onShow() {
		this.debounce = true;
		this.storeCoupon = {};
		this.choiceCoupon = {};
		// 判断是不是从选择地址页面返回
		if(JSON.stringify(this.$store.state.orderAddress) == '{}') {
			if(this.orderInfo.address_info) this.$store.commit('updateAddress', this.orderInfo.address_info);
		} else {
			if(this.$store.getters.getOrderAddress) this.addressInfo = this.$store.state.orderAddress;
		}
	},
	beforeDestroy() {
		this.$store.commit('updateAddress', {});
	},
	watch: {
		'$store.state.orderAddress'(value) {
			this.addressInfo = value;
			if(JSON.stringify(value) != '{}') this.getFreight();
		},
	},
	methods: {
		// 如果有pintuangroup_headid为参团不然为开团
		async withImmediate(type) {
			let params = {
				pintuan_id: this.orderInfo.pintuan_id,
			}
			// console.log(this.involvemenGroupInfo);
			if(this.orderInfo.pintuangroup_id) {
				Object.assign(params, { pintuangroup_headid: this.$store.state.pintuangroup_headid });
				Object.assign(params, { pintuangroup_id: this.orderInfo.pintuangroup_id });
			}
			// console.log(params);
			this.$u.api.withImmediate(params).then(res => {
				this.showGroupUser = false;
				this.showInvolvementUser = false;
				if(res.errCode == 0) {
					this.sendOrder(0);
				} else {
					this.debounce = true;
					this.$u.toast(res.message);
				}
			})
		},
		intermediate() {
			if(!this.debounce) return;
			this.debounce = false;
			if(this.orderType == 2) {
				// this.sendOrder(0);
				this.withImmediate();
			} else if(this.orderType == 1) {
				this.sendOrder(0);
			} else {
				this.sendOrder(1);
			}
		},
		// @params {Number} ifcart 是否是购物车商品
		sendOrder(ifcart) {
			// 拼接后端需要的数据形式
			let id = [], temp = '';
			const object = this.orderInfo.store_cart_list;
			for (const key in object) {
				if (object.hasOwnProperty(key)) {
					const element = object[key];
					element.forEach(item => {
						temp = item.cart_id + '|' + item.goods_num;
						id.push(temp);
						temp = '';
					})
				}
			}
			// 拼接优惠券
			let coupon = [];
			for (const key in this.storeCoupon) {
				if (this.storeCoupon.hasOwnProperty(key)) {
					const element = this.storeCoupon[key];
					temp = key + '|' + element.voucher_id;
					coupon.push(temp);
					temp = '';
				}
			}
			// 平台券store_id写0
			if(JSON.stringify(this.choiceCoupon) != '{}') {
				coupon.push(0 + '|' + this.choiceCoupon.voucher_id)
			}
			// 验证是否选择地址
			if(!this.addressInfo || JSON.stringify(this.addressInfo) == '{}') {
				this.$u.toast('收货地址不能为空');
				return false;
			}
			let params = {
				ifcart: ifcart,
				cart_id: id,
				address_id: this.addressInfo.address_id,
				buy_city_id: this.addressInfo.city_id,
			}
			if(coupon.length) Object.assign(params, { voucher_id: coupon });
			if(this.orderType == 2) {
				Object.assign(params, { pintuan_id: this.orderInfo.pintuan_id });
				if(this.orderInfo.pintuangroup_id) Object.assign(params, { pintuangroup_id: this.orderInfo.pintuangroup_id });
			}
			// console.log(params);
			this.$u.api.sendOrder(params).then(res => {
				if(res.errCode == 0) {
					// this.withImmediate();
					this.$u.route({
						type: 'redirect',
						url: '/pageC/cart/cashier',
						params: {
                            ifcart: params.ifcart,
							pay_sn: res.data.pay_sn,
							price: res.data.order_total_amount,
                            order_id: res.data.order_list[0].order_id,
						}
					})
				} else {
					this.debounce = true;
					this.$u.toast(res.message);
				}
			})
		},
		showCoupon({ type, store_id = -1 } = {}) {
			this.couponType = {
				type: type,
				store_id: store_id
			}
			this.couponStatus = true;
		},
		useCoupon(coupon) {
			if(this.couponType.type == 1) this.choiceCoupon = coupon;
			if(this.couponType.type == 2) {
				Object.assign(this.storeCoupon, {
					[this.couponType.store_id]: coupon
				})
			}
			// console.log(this.choiceCoupon);
			// console.log(this.storeCoupon);
			this.couponStatus = false;
			this.setTotalPrice(); // 计算总价
		},
		getFreight() {
			this.$u.api.getFreight({
				freight_hash: this.orderInfo.freight_hash,
				city_id: this.addressInfo.city_id,
				area_id: this.addressInfo.area_id,
				delivery: this.delivery.value,
			}).then(res => {
				if(res.errCode == 0) {
					this.freight = res.data.content;
					this.isTakeawayer = res.data.delivery.takeawayer;
					this.setTotalPrice(); // 计算总价
				}
			})
		},
		setTotalPrice() {
			const goods = this.orderInfo.store_goods_total;
			// console.log(this.freight);
			const freight = this.freight;
			let price = 0;
			// 商品价格加上运费
			[goods, freight].forEach(object => {
				for (const key in object) {
					if (object.hasOwnProperty(key)) {
						const element = object[key];
						price += Number(element);
					}
				}
			})
			// 减去优惠券
			// 平台
			if(JSON.stringify(this.choiceCoupon) != '{}') price -= Number(this.choiceCoupon.voucher_price);
			// 店铺
			if(JSON.stringify(this.storeCoupon) != '{}') {
				for (const key in this.storeCoupon) {
					if (this.storeCoupon.hasOwnProperty(key)) {
						const element = this.storeCoupon[key];
						price -= element.voucher_price;
					}
				}
			}
			// console.log(price);
			this.totalPrice = price.toFixed(2);
		},
		setDelivery(index) {
			if(index == 1) {
				if(!this.isTakeawayer) this.$u.toast('此地区不支持骑手配送');
				return false;
			}
			this.delivery = this.deliveryList[index];
			this.getFreight();
		},
		settlement() {
			uni.navigateTo({
				url: '/pageE/order/Details'
			});
		},
		getGoodsClass() {
			this.$u.api.getGoodsClass().then(res => {
				this.goodsClass = res.data;
			})
		},
		changeAddress() {
			uni.navigateTo({
				url: '/pageE/more/Address?type=choose'
			});
		}
	},
};
</script>
<style lang="scss" scoped>
.order {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	padding-top: 1rpx;
	.info-address {
		padding: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		background:rgba(255,255,255,1);
		.address-icon {
			width: 28rpx;
			height: 34rpx;
			margin-right: 31rpx;
			flex-shrink: 0;
		}
		.address {
			width: 570rpx;
			.user-info {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: rgba(51,51,51,1);
				margin-bottom: 20rpx;
				> view:first-child {
					margin-right: 13rpx;
				}
			}
			.address-text {
				font-size: 24rpx;
				color: rgba(102,102,102,1);
				line-height: 42rpx;
			}
		}
		.right {
			flex-shrink: 0;
			margin-left: auto;
			width: 12rpx;
			height: 22rpx;
		}
	}
	.address-none {
		height: 150rpx;
		line-height: 150rpx;
		margin-bottom: 10rpx;
		background:rgba(255,255,255,1);
		text-align: center;
		color: #333;
	}
	.main {
		margin-bottom: 50rpx;
		> view {
			margin-bottom: 20rpx;
			.goods-info {
				background-color: #ffffff;
				padding: 30rpx;
				margin-bottom: 2rpx;
				.store {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 15rpx;
						background-color: aquamarine;
					}
					> view {
						font-size: 28rpx;
						color: rgba(51,51,51,1);
						margin-right: 15rpx;
					}
					.right {
						flex-shrink: 0;
						width: 11rpx;
						height: 22rpx;
					}
				}
				.goods {
					.goods-item {
						display: flex;
						align-items: center;
						&:not(:last-child) {
							margin-bottom: 20rpx;
						}
						> image {
							margin-right: 30rpx; 
							width: 180rpx;
							height: 160rpx;
							border-radius: 10rpx;
							background-color: aqua;
							flex-shrink: 0;
						}
						.info {
							flex: 1;
							// width: 418rpx;
							height: 160rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.name {
								font-size: 30rpx;
								color: rgba(51,51,51,1);
							}
							.cart-info {
								display: flex;
								align-items: center;
								justify-content: space-between;
								.price {
									font-size: 30rpx;
									font-weight: 500;
									color: rgba(255,49,49,1);
								}
								.u-numberbox {
									border: 1rpx solid rgba(217,215,215,1);
									border-radius:4px;
									/deep/ .u-number-input {
										margin: 0;
										color: #333 !important;
										border: 1rpx #D9D7D7 solid {
											top: 0px;
											bottom: 0px;
										}
									}
								}
							}
						}
					}
				}
			}
			.order-info {
				> view {
					height: 98rpx;
					background: rgba(255,255,255,1);
					padding: 35rpx 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 2rpx;
					.title {
						font-size: 28rpx;
						color: rgba(102,102,102,1);
					}
					.value {
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color:rgba(51,51,51,1);
						> image {
							width: 12rpx;
							height: 22rpx;
							flex-shrink: 0;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
	.common-active {
		padding-bottom: 200rpx;
		> view {
			height: 98rpx;
			background: rgba(255,255,255,1);
			padding: 35rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 2rpx;
			.title {
				font-size: 28rpx;
				color: rgba(102,102,102,1);
			}
			.value {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color:rgba(51,51,51,1);
				> image {
					width: 12rpx;
					height: 22rpx;
					flex-shrink: 0;
					margin-left: 20rpx;
				}
			}
		}
	}
	.coupon-choose {
		box-sizing: border-box;
		padding: 30rpx;
		.title {
			padding-bottom: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(51,51,51,1);
			text-align: center;
		}
		.text {
			padding-bottom: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(102,102,102,1);
		}
	}
	.bottom {
		padding: 35rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		background-color: rgba(255,255,255,1);
		box-shadow: 0rpx 10rpx 14rpx 2rpx rgba(0, 0, 0, 0.34);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			.title {
				color:rgba(153,153,153,1);
				margin-right: 10rpx;
			}
			.price {
				color: #F40E0E;
			}
		}
		.right {
			display: flex;
			align-items: center;
			.num {
				font-size: 26rpx;
				color: rgba(153,153,153,1);
				margin-right: 50rpx;
			}
			.btn {
				width: 160rpx;
				height: 60rpx;
				background: rgba(255,120,15,1);
				border-radius: 30rpx;
				font-size: 30rpx;
				color: rgba(255,255,255,1);
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
}
</style>