zh_order_food_xcx/pages-buy/save-dry.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 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.code" 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.address" type="text" placeholder="请输入联系地址（选填）">
				</view>
			</view> -->

			<view class="box-card box-border-box mb-20 bgc-f">
				<view class="align-items-center mb-18">
					<image class="mr-8 wh48" :src="siteData_logo" mode=""></image>
					<view class="fs-32 fw-600 fc-3">
						{{siteData_name}}
					</view>
				</view>
				<view class="box-top box-border-box flex-justify-space" v-for="(item,i) in cardData.goods_list"
					:key="i">
					<view class="box-left">
						<image :src="item.goods_image" mode="aspectFill"></image>
					</view>
					<view class="box-right flex-1">
						<view class="flex-1 align-items-center flex-justify-space mb-8">
							<view class="w336 fs-28 fw-400">{{item.goods_name||''}}</view>
							<view class="fs-32 fw-600 text-align-right mb-12">￥{{item.price||''}}</view>
						</view>
						<view class="">
							x {{item.number}}
						</view>
						<!-- 						<view class="display-flex align-items-center">
							<view class="right-only-right-red fw-500 text-align-center fs-36 fc-f" @click="addred(1,item)">-</view>
							<view class="right-only-right-2 text-align-center fs-28 fw-400">{{item.number}}</view>
							<view class="right-only-right-add fw-500 text-align-center fs-36 fc-f" @click="addred(2,item)">+</view>
						</view> -->
					</view>
				</view>
				<view class="box-buttom text-align-right">
					<span class="fs-28 fc-9 fw-400">共{{cardData.total_num||'0'}}件，</span>
					<span class="fs-28 fc-0 fw-400">合计￥</span>
					<span class="fs-44 fc-0 fw-b">{{cardData.total_price||'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">{{cardData.total_price||'0'}}</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 {
		setShopIngNumber,
		getShopIngList,
		setShopIngAdd,
	} from '@/api/shopping.js';
	import {
		laundryCreate
	} from '@/api/laundry.js';
	import {
		laundryPay
	} from '@/api/laundryOrder.js';

	import tools from "@/service/tools";

	export default {
		data() {
			return {
				isCode: false,
				codeText: '获取验证码',
				fromData: {
					name: '',
					code: '',
					address: '',
					phone: '',
					note: '',
					site_id: '',
					school_id: '',
				},
				isAJAX: false,
				goodsData: {},
				cardData: {
					goods_list: [],
					total_num: 0,
					total_price: 0,
				},
				siteData_logo: '',
				siteData_name: ''
			}
		},
		onLoad(e) {
			this.fromData.site_id = e.id;
			this.siteData_logo = e.siteData_logo
			this.siteData_name = e.siteData_name
			this.getCardList();
		},
		methods: {
			getCardList() {
				getShopIngList({
					type: 3
				}).then((res) => {
					if (res.code === 1) {
						this.cardData = res.data;
					}
				})
			},

			getCode() {
				if (this.isCode) {
					return
				}
				this.isCode = true;
				getCode({
					phone: this.fromData.phone,
					send_type: 'ticket_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');
				laundryCreate(this.fromData).then((res) => {
					if (res.code === 1) {
						laundryPay({
							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) => {
										tools.success("支付成功");
										this.isAJAX = false;
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index"
											})
										}, 1500)
									},
									fail: (err) => {
										this.isAJAX = false;
										tools.error("支付失败");
									},
								});
							} else {
								this.isAJAX = false;
								tools.error("支付失败");
							}
						})
					} else {
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},

			addred(type, info) {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				if (type === 1) {
					if (info.number <= 1) {
						this.isAJAX = false;
					} else {
						// 减
						setShopIngNumber({
							type: 3,
							goods_id: info.goods_id,
							category_id: info.category_id,
							operation: 2
						}).then((res) => {
							if (res.code === 1) {
								this.isAJAX = false;
								info.number -= 1;
								this.getCardList();
							} else {
								this.isAJAX = false;
								tools.error(res.msg)
							}
						})
					}
				} else if (type === 2) {
					// 加
					setShopIngAdd({
						type: 3,
						goods_id: info.goods_id,
						category_id: info.category_id
					}).then((res) => {
						if (res.code === 1) {
							this.isAJAX = false;
							info.number += 1;
							this.getCardList();
						} else {
							this.isAJAX = false;
							tools.error(res.msg)
						}
					})

				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.wh48{
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}
	.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;

			.w336 {
				width: 336rpx;
			}

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

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