zh_order_food_xcx/pages-buy/save-order.vue

<template>
	<view class="save-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 align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">姓名</view>
					<input v-model="fromData.name" type="text" placeholder="请输入姓名">
				</view>
				<view class="box-input align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">手机号</view>
					<input v-model="fromData.phone" type="number" placeholder="请输入手机号">

				</view>
				<view class="box-input align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">验证码</view>
					<input v-model="fromData.code" type="number" placeholder="请输入验证码">
					<view class="fs-28 fc-41ABF5 code-box" @click="getCode()">{{codeText}}{{isCode?'s':''}}</view>
				</view>
				<view class="box-input align-items-center box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600 w158">联系地址</view>
					<input v-model="fromData.address" type="text" placeholder="请输入联系地址（选填）">
				</view>
			</view>

			<view class="box-card box-border-box mb-20 bgc-f">
				<view class="box-top box-border-box flex-justify-space">
					<view class="box-left display-flex">
						<image :src="goodsData.cover_img" mode="aspectFill"></image>
						<view class="">
							<view class="w336 fs-28 fw-400 mb-4">{{goodsData.title||''}}</view>
							<view class="fs-28 fc-9">
								x 1
							</view>
						</view>
					</view>
					<view class="box-right">
						<view class="fs-32 fw-600 text-align-right mb-12">￥{{goodsData.price || '0'}}</view>
					</view>
				</view>
				<view class="box-buttom text-align-right">
					<span class="fs-28 fc-0 fw-400">定金￥</span>
					<span class="fs-44 fc-0 fw-b">{{goodsData.deposit||'0'}}</span>
				</view>
			</view>

			<view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
				<view class="fs-28 fw-600 w158">备注</view>
				<input v-model="fromData.note" class="text-align-right" type="text" placeholder="请填写你的备注">
			</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">{{goodsData.deposit||''}}</span>
				</view>
				<view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode
	} from '@/api/common.js';
	import {
		groupPay,
		groupCreate
	} from '@/api/groupOrder.js';
	import tools from "@/service/tools";

	export default {
		data() {
			return {
				isCode: false,
				codeText: '获取验证码',

				fromData: {
					name: '',
					id: '',
					phone: '',
					school_id: '',
					code: '',
					note: '',
					address: '',
				},
				isAJAX: false,

				goodsData: {},
			}
		},
		onLoad(e) {
			if (e.goodsData) {
				let obj = JSON.parse(decodeURIComponent(e.goodsData));
				this.goodsData = obj;
				this.fromData.id = obj.id;
				console.log(this.goodsData, '*********');
			}
		},
		methods: {
			getCode() {
				if (!this.fromData.phone) {
					return tools.error('请输入手机号')
				}

				if (this.isCode) {
					return
				}
				this.isCode = true;
				getCode({
					phone: this.fromData.phone,
					send_type: 'group_order'
				}).then((res) => {
					if (res.code === 1) {
						this.codeText = 60;
						let timer = setInterval(() => {
							this.codeText -= 1;
							if (this.codeText <= 0) {
								clearInterval(timer);
								this.isCode = false;
								this.codeText = '获取验证码'
							}
						}, 1000);
					} else {
						this.isCode = false;
						tools.error('获取验证码失败，请稍后重试')
					}
				})

			},
			toSave() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				this.fromData.school_id = uni.getStorageSync('school_id');
				groupCreate(this.fromData).then((res) => {
					if (res.code === 1) {
						groupPay({
							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) => {
										this.isAJAX = false;
										tools.success("支付成功");
										uni.setStorageSync('orderPayType', 3)
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index"
											})
										}, 1000) 
									},
									fail: (err) => {
										this.isAJAX = false;
										tools.error("支付失败");
										uni.setStorageSync('orderPayType', 3)
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index"
											})
										}, 1000)
									},
								});
							} else {
								this.isAJAX = false;
								tools.error("支付失败");
								uni.setStorageSync('orderPayType', 3)
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/order/index"
									})
								}, 1000)
							}
						})
					} else {
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.save-order-box {
		position: relative;

		.right-only-right-red {
			width: 44rpx;
			height: 44rpx;
			line-height: 40rpx;
			border-radius: 12rpx;
			border: 1rpx solid #41ABF5;
			color: #41ABF5;
		}

		.right-only-right-add {
			width: 44rpx;
			height: 44rpx;
			line-height: 40rpx;
			background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
			border-radius: 12rpx;
		}

		.right-only-right-2 {
			min-width: 50rpx;
		}

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

			.box-top {
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F9F9F9;
				margin-bottom: 24rpx;

				.box-left {
					image {
						width: 108rpx;
						height: 108rpx;
						border-radius: 8rpx;
						margin-right: 16rpx;
					}

					.w336 {
						width: 336rpx;
					}
				}
			}

			.box-buttom {
				padding-bottom: 24rpx;
			}
		}

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

			.w158 {
				width: 158rpx;
			}

			input {
				font-size: 28rpx;
			}

			.code-box {
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.wx-box {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>