zh_order_food_xcx/pages-takeout/confirm-order.vue

<template>
	<view class="confirm-order-box iPhone-bottom flex-common-css box-border-box">
		<view class="bg-box"></view>
		<Nav title='提交订单' bgckgroundBox='transparent'></Nav>
		<view class="scroll-view-css box-border-box p-24">
			<view class="box-card box-border-box mb-20 bgc-f">
				<view class="box-input box-border-box p-b-20 mb-20" @click="selectFun(2)">
					<view class="flex-justify-space mb-12">
						<view v-if="addressData.id" class="fs-36 fw-600 text-overflow-ellipsis w570">
							{{addressData.address||''}}{{addressData.school_name||''}}{{addressData.dorm_name||''}}
						</view>
						<view v-else class="fs-36 fw-600 text-overflow-ellipsis w570">请选择地址</view>
						<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
					</view>
					<view class="" v-if="addressData.id">
						<span class="mr-24 fs-28 fc-9">{{addressData.consignee||''}}</span><span
							class="fs-28 fc-9">{{addressData.phone||''}}</span>
					</view>
				</view>
				<view class="p-b-20">
					<view class=" flex-justify-space box-border-box p-b-20">
						<view class="fs-28 fw-600">取件码</view>
						<!-- 						<view class="align-items-center" @click="selectFun(4)">
							<view class="fs-24 fw-400 fc-9">修改</view>
							<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
						</view> -->
					</view>
					<view class="code-box box-border-box flex-wrap-wrap">
						<view class="code-item fs-28 text-overflow-ellipsis-one"
							v-for="(item,i) in fromData.pickup_code" :key="i">{{item}}</view>
					</view>
				</view>
			</view>
			<view class="box-card box-border-box bgc-f mb-20">
				<view class="mb-32 b-b-F9F9F9">
					<view class="flex-justify-space mb-28" v-for="(item,i) in cardData.goods_list" :key="i">
						<image class="goods-img" :src="item.serve_image" mode="aspectFill"></image>
						<view class="w376">
							<view class="fs-28 fw-400 mb-4">
								{{item.serve_name}}
							</view>
							<view class="fs-24 fc-9 mb-4">{{item.serve_desc}}</view>
							<view class="fs-24 fc-9">x{{item.number}}</view>
						</view>
						<view class="fs-32 fw-600">￥{{Number(item.number * Number(item.price)).toFixed(2)}}</view>
					</view>
				</view>
				<view class="flex-justify-space mb-24 p-b-20 b-b-F9F9F9" @click="selectFun(1)">
					<view class="fs-28 fw-400">优惠券</view>
					<view class="align-items-center">
						<view :class="fromData.coupon_id?'fc-FB3D03 fw-600 fs-32':'fw-400 fs-28'">
							{{fromData.coupon_id?'-￥'+ quanMoney:'请选择优惠券'}}
						</view>
						<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
					</view>
				</view>
				<view class="text-align-right p-b-20">
					<span class="fc-9 fs-28">共{{cardData.total_num||0}}件，</span>
					<span class="fw-400 fc-0 fs-28">合计￥</span>
					<span
						class="fw-600 fc-0 fs-44">{{((cardData.total_price - quanMoney) < 0?'0':(cardData.total_price - quanMoney)||0).toFixed(2)}}</span>
				</view>
			</view>
			<view class="box-card box-border-box bgc-f mb-20">
				<view class="flex-justify-space b-b-F9F9F9  mb-24">
					<view class="fs-28 fw-600 w158 mr-12">备注</view>
					<input v-model="fromData.note" class="flex-1 text-align-right fs-28" type="text"
						placeholder="请填写你的备注">
				</view>
				<view class="p-b-20"></view>
			</view>
			<view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
				<view class="fs-28 fw-600 w158">支付方式</view>
				<view class="wx-box display-flex">
					<image src="@/static/img/common/wx-zf.png" mode="scaleToFill"></image>
					<view class="fs-28 fw-400 ml-10">微信支付</view>
				</view>
			</view>
		</view>
		<view class="bottom-box box-border-box p-24">
			<view class="flex-justify-space">
				<view class="align-items-flex-end box-1">
					<span class="fs-28 fc-f fw-600">￥</span>
					<span
						class="fs-44 fc-f fw-600">{{((cardData.total_price - quanMoney) < 0?'0':(cardData.total_price - quanMoney)||0).toFixed(2)}}</span>
				</view>
				<view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即支付</view>
			</view>
		</view>
		<Coupon ref="coupon" @giveCouPon='giveCouPon'></Coupon>
		<SelectAddress ref="selectAddress" @giveAddress='giveAddress'></SelectAddress>
		<Time ref="selectTime" @giveTime='giveTime'></Time>
		<EditCode ref='editCode' v-model="fromData.pickup_code"></EditCode>
	</view>
</template>

<script>
	import {
		getExpressCoupon,
		getExpressCreate,
		getExpressPay
	} from '@/api/express.js';
	import {
		getAddressDefault
	} from '@/api/member.js'
	import {
		getShopIngList
	} from '@/api/shopping.js'
	import tools from "@/service/tools";
	import Coupon from './confirm-mod/dryClean-coupon.vue';
	import SelectAddress from './confirm-mod/select-address.vue';
	import Time from './confirm-mod/time.vue';
	import EditCode from './confirm-mod/edit-code.vue';
	export default {
		components: {
			Coupon,
			SelectAddress,
			Time,
			EditCode
		},
		data() {
			return {
				type: 2, //1外卖 2代取 3干洗
				fromData: {
					school_id: '',
					site_id: '',

					address_id: '',
					coupon_id: '',
					note: '',
					// is_default:0,
					pickup_code: [],
				},
				addressData: {},

				cardData: {
					goods_list: [],
				},

				quanMoney: "",

				isAJAX: false,
			}
		},
		onLoad(e) {
			this.type = Number(e.type)
			if (this.type == 2) {
				this.fromData.pickup_code = e.pickup_code.split(',').map(String)
				this.getCard();
			}
			this.getAddressDefault();
		},
		onShow() {
			let isConfirmAddressFlag = uni.getStorageSync('isConfirmAddressFlag');
			if (isConfirmAddressFlag.flag) {
				this.selectFun(2, isConfirmAddressFlag);
			}
		},
		onUnload() {
			uni.removeStorageSync('isConfirmAddressFlag')
		},
		methods: {
			// 获取购物车
			getCard() {
				let school_id = uni.getStorageSync('school_id');
				getShopIngList({
					type: this.type,
					school_id: school_id
				}).then((res) => {
					if (res.code === 1) {
						this.cardData = res.data;
					}
				})
			},

			// 获取默认地址
			getAddressDefault() {
				getAddressDefault().then((res) => {
					if (res.code === 1) {
						this.addressData = res.data
						if (this.addressData.id) {
							this.fromData.address_id = this.addressData.id;
						}
					}
				})
			},

			selectFun(type, addressData) {
				if (type === 1) {
					// 选择优惠券
					this.$refs.coupon.getList(this.type, this.fromData.coupon_id);
				} else if (type === 2) {
					// 选择地址
					if (this.addressData.id) {
						this.$refs.selectAddress.id = this.addressData.id;
					}
					if (addressData && addressData.is_default == 1) {
						this.$refs.selectAddress.id = addressData.id;
						this.$refs.selectAddress.getList(addressData.id);
					} else {
						this.$refs.selectAddress.getList();
					}
				} else if (type === 3) {
					// 选择时间
					this.$refs.selectTime.getList();
				} else if (type === 4) {
					// 编辑code
					this.$refs.editCode.getList();
				}
			},
			giveCouPon(e) {
				if (e.id) {
					this.quanMoney = Number(e.money);
					this.fromData.coupon_id = e.id;
				} else {
					this.quanMoney = ''
					this.fromData.coupon_id = 0
				}
			},
			giveAddress(e) {
				this.addressData = e;
				this.fromData.address_id = this.addressData.id;
			},
			giveTime(e) {
				console.log(e);
			},
			toSave() {
				if (!this.fromData.address_id) {
					return tools.error('请先选择地址')
				}
				let flag = false;
				flag = this.fromData.pickup_code.every(item => item)
				if (!flag) {
					return tools.error('请先输入取件码')
				}
				let codeRule = /^[A-Za-z0-9-]+$/
				let flagRule = this.fromData.pickup_code.every((item) => {
					return codeRule.test(item)
				});
				if (!flagRule) {
					return tools.error('请输入正确的取件码')
				}
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				this.fromData.school_id = uni.getStorageSync('school_id');
				this.fromData.site_id = uni.getStorageSync('site_id');
				getExpressCreate(this.fromData).then((res) => {
					if (res.code === 1) {
						getExpressPay({
							order_id: res.data.order_id
						}).then((ret) => {
							if (ret.code === 1) {
								uni.requestPayment({
									provider: "wxpay", //支付类型-固定值
									timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
									nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
									package: ret.data.wx_pay.package, // 固定值
									signType: ret.data.wx_pay.signType, //固定值
									paySign: ret.data.wx_pay.paySign, //签名
									success: (ren) => {
										uni.removeStorageSync('isConfirmAddressFlag')
										tools.success("支付成功");
										this.isAJAX = false;
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index"
											})
											uni.setStorageSync('orderPayType', 2)
											uni.setStorageSync('saveData', false)
										}, 1000)
									},
									fail: (err) => {
										uni.removeStorageSync('isConfirmAddressFlag')
										this.isAJAX = false;
										tools.error("支付失败");
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index"
											})
											uni.setStorageSync('orderPayType', 2)
											uni.setStorageSync('saveData', false)
										}, 1000)
									},
								});
							} else {
								uni.removeStorageSync('isConfirmAddressFlag')
								this.isAJAX = false;
								tools.error("支付失败");
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/order/index"
									})
									uni.setStorageSync('orderPayType', 2)
									uni.setStorageSync('saveData', false)
								}, 1000)
							}
						})
					} else {
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.code-box {
		min-height: 100rpx;
		background-color: #F3F4F6;
		border-radius: 12rpx;
		padding: 24rpx 24rpx 0 24rpx;

		.code-item {
			width: 156rpx;
			margin-right: 52rpx;
			margin-bottom: 16rpx;
		}

		.code-item:nth-child(3n) {
			margin-right: 0 !important;
		}
	}

	.tz-an-f {
		position: relative;

		.tz-an {
			position: absolute;
			right: 16rpx;
			top: 0;
		}
	}

	.r-right {
		margin-top: 24rpx;
		width: 88rpx;
		height: 52rpx;
		border-radius: 200rpx;
		position: relative;

		.r-y {
			width: 44rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 200rpx;
			position: absolute;
			top: 4rpx;
		}
	}

	.s-r {
		background-color: #41ABF5;
		transition: all 1s;

		.r-y {
			right: 4rpx !important;
			transition: all 1s;
		}
	}

	.n-r {
		background-color: #ccc;
		transition: all 1s;

		.r-y {
			left: 4rpx !important;
			transition: all 1s;
		}
	}

	.goods-img {
		width: 108rpx;
		height: 108rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}

	.right-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.w376 {
		width: 376rpx;
	}

	.w570 {
		width: 570rpx;
	}

	.sd-box {
		padding: 3rpx 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: rgba(251, 61, 3, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.confirm-order-box {
		position: relative;

		.bg-box {
			width: 100%;
			height: 448rpx;
			filter: blur(80rpx);
			background: linear-gradient(to right, rgba(176, 252, 250, 0.6), rgba(249, 246, 224, 0.87), rgba(249, 246, 224, 0.87));
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.bottom-box {
			background-color: #fff;

			.box-1 {
				flex: 1;
				height: 100rpx;
				background: #333;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-sizing: border-box;
				padding-left: 32rpx;
				padding-bottom: 20rpx;
			}

			.box-2 {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #41ABF5;
				border-radius: 0rpx 200rpx 200rpx 0rpx;
				text-align: center;
			}
		}

		.box-card {
			width: 100%;
			min-height: 88rpx;
			border-radius: 20rpx;
			padding: 24rpx 24rpx 0 24rpx;
		}

		.wx-box {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.box-input {
			border-bottom: 2rpx solid #F9F9F9;

		}
	}
</style>