pet-front-order/pages/details/confirm.vue

<template>
	<view class="confrim-container">
		<view class="content">
			<view class="confrim-tips">
				<img src="/static/images/details/tips.svg" alt="" style="width: 12px;height: 12px;margin-right: 5px;">
				<text>如需取消，请查看详情页的退改政策或咨询服务人员</text>
			</view>
			<view class="confirm-form">
				<uni-forms ref="baseForm" :modelValue="confirmData" label-position="top">
					<uni-forms-item>
						<label slot="label" class="form-label">手机号<span
								style="color: #FF3D3D;margin-left: 4px;">*</span></label>
						<uni-easyinput v-model="confirmData.phone" placeholder="请输入您的手机号以便我们联系您" />
					</uni-forms-item>
					<!-- <uni-forms-item>
						<label slot="label" class="form-label">微信号</label>
						<uni-easyinput v-model="confirmData.wechatId" placeholder="请输入您的微信号以便我们联系您" />
					</uni-forms-item> -->
					<uni-forms-item>
						<label slot="label" class="form-label">备注</label>
						<uni-easyinput v-model="confirmData.note" placeholder="请输入您的备注信息" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="content-container">
				<view class="normal-bolb-text">
					价格明细
				</view>
				<view class="price-details">
					<view v-for="(item,index) in itemPrices" class="price-details-for" :key="index">
						<view class="normal-text">
							{{item.itemType}}
						</view>
						<view class="price-calculate">
							￥{{item.price}} x {{item.quantity}} {{item.unit}}
							<text style="color: #FF530A; margin-left:4px"> = ￥{{item.price*item.quantity}}</text>
						</view>
						<view class="line" style="background-color: #FFE8C6;"></view>
					</view>
					<view class="price-details-for">
						<view class="normal-text">
							{{currentMember.itemType}}
						</view>
						<view class="price-calculate" style="color: #FF530A;">
							-￥{{submitData.totalPrice * currentMember.discount}}
						</view>
					</view>
					
					
				</view>
			</view>

		</view>
		<view class="payment">
			<view class="details-radio" style="width: 100%;padding-bottom: 10px;">
				<label class="details-radio" @click="changeAgree">
					<radio style="transform:scale(0.5);" color="#FFB13F" activeBorderColor="#FFB13F"
						activeBackgroundColor="#FFB13F" :checked="isAgree" />
					我同意
				</label>
				<text class="details-agreement" @click="checkAgreement">《猫妈狗爸用户服务协议和隐私协议》</text>
			</view>
			<view class="total-price">
				<text class="total-price-text">应付价格：</text>
				<text class="total-price-value">￥{{submitData.totalPrice * (1-(currentMember.discount?currentMember.discount:0))}}元</text>
			</view>
			<button class="payment-btn" :loading="loading" @click="payment"> {{loading?'下单中':'支付'}}</button>
		</view>
		<Kefu></Kefu>

	</view>
</template>

<script>
	import Kefu from '../common/kefu.vue'
	import {
		getOpenId,
		createOrder
	} from '@/api/system/user.js'
	import { getToken,getOpenIdKey,setOpenIdKey } from '@/utils/auth'
	import {getPersonalInfo} from "@/api/system/personal.js"
	export default {
		data() {
			return {
				loading:false,
				totalPrice: 0,
				confirmData: {
					phone: "",
					wechatId: "",
					note: "",
				},
				submitData: {},
				itemPrices: [],
				isAgree: false,
				isPaying: false,
				openIdString: '',
				currentMember:{},
				memberDiscountList:[
					{
						itemType:"新晋家长9.5折优惠",
						discount:0.05
					},
					{
						itemType:"普卡会员9折优惠",
						discount:0.1
					},
					{
						itemType:"银卡会员8.8折优惠",
						discount:0.12
					},
					{
						itemType:"银卡会员8.5折优惠",
						discount:0.15
					}
				]

			}
		},
		components:{
			Kefu
		},
		onLoad() {
			if (getToken() && getOpenIdKey()) {
				this.getPersonalInfo()
			}
			this.submitData = this.$globalData.submitData;
			this.itemPrices = [...this.$globalData.servicePrices, ...this.$globalData.itemPrices];
			this.confirmData = this.$globalData.confirmData;
		},
		methods: {
			payment() {
				if (!this.confirmData.phone) {
					this.$modal.showToast('请输入手机号');
					return;
				}
				const phoneNumberRegex = /^1[3456789]\d{9}$/
				if (!phoneNumberRegex.test(this.confirmData.phone)) {
					this.$modal.showToast('请输入正确的手机号');
					return;
				}
				if (!this.isAgree) {
					this.$modal.showToast('请阅读并同意《猫妈狗爸用户服务协议和隐私协议》');
					return;
				}
				if (this.openIdString) {
					this.setSubmitData(this.openIdString)
				} else {
					this.loading=true
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							this.getOpenId(loginRes.code)
						},
						fail: function(error) {
							this.loading=false
							// 授权失败处理
							uni.showToast('授权失败，请授权后再试')
						}
					});
				}

			},
			getOpenId(code) {
				getOpenId(code).then(res => {
					if (res.code == 200 && res.data) {
						this.openIdString = JSON.parse(res.data).openId;
						this.$globalData.openIdStr = this.openIdString;
						setOpenIdKey(this.openIdString)
						this.throttle(this.setSubmitData(this.openIdString),1000)
					}else{
						this.loading=false
					}
				})
			},
			setSubmitData(openId) {
				this.submitData.phone = this.confirmData.phone;
				this.submitData.wechatId = this.confirmData.wechatId;
				this.submitData.note = this.confirmData.note;
				this.submitData.openId = openId;
				this.submitData.skuList = [...this.$globalData.mainSku, ...this.$globalData.augmentedSku]
				console.log(this.submitData);
				createOrder(this.submitData).then(res => {
					if (res.code == 200) {
						this.pay(res.data)
					} else {
						this.$modal.showToast('创建订单失败，请重试');
						this.loading=false
					}
				})
				// uni.navigateTo({
				// 	url:'/pages/details/successful'
				// });
			},
			pay(params) {
				if (this.isPaying) {
					return;
				}
				this.isPaying = true
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: params.timeStamp,
					nonceStr: params.nonceStr,
					package: params.package_,
					signType: params.signType,
					paySign: params.paySign,
					success: (res) => {
						this.$modal.showToast('支付成功')
						uni.navigateTo({
							url: '/pages/details/successful'
						});
					},
					fail: (err) => {
						this.loading=false
						console.log('支付失败', err)
						this.$modal.showToast('支付失败')
					},
					complete: () => {
						this.loading=false
						this.isPaying = false
					}
				})


			},
			changeAgree() {
				console.log(this.isAgree);
				if (this.isAgree) {
					this.isAgree = false
				} else {
					this.isAgree = true
				}
			},
			checkAgreement() {
				uni.navigateTo({
					url: '/pages/details/agreement'
				});
			},
			getPersonalInfo(){
				getPersonalInfo().then(res=>{
					if(res&&(res.id || res.id === 0)){
						let userLevel=res.level
						this.currentMember = this.memberDiscountList.find(item=>{
							if(item.itemType.includes(userLevel)){
								return item
							}
						})
					}
				})
			},
			// 节流
			throttle(func, delay) {
			  let lastCall = 0;
			  return function(...args) {
			    const now = new Date().getTime();
			    if (now - lastCall < delay) {
			      return;
			    }
			    lastCall = now;
			    func(...args);
			  }
			}
		}
	}
</script>
<style lang="scss">
	.confrim-container {
		background-color: #F5F5F7;
		position: relative;
		height: 100%;
		padding-bottom: 90px;

		.confrim-tips {
			height: 36px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #A94F20;
			font-size: 10px;
			background-color: #FFF8DF;
		}

		.confirm-form {
			padding: 18px 20px;
			background-color: #ffffff;

			.form-label {
				color: #333;
				font-size: 16px;
				line-height: 16px;
				margin-bottom: 10px;
				font-weight: bold;
				display: flex;
				align-items: center;
			}
		}

		.content-container {
			margin-top: 10px;
			background-color: #ffffff;
			padding: 14px 20px;
		}

		.normal-bolb-text {
			font-size: 16px;
			font-weight: bold;
			line-height: 16px;
			color: #333;
			margin-bottom: 14px;
		}

		.normal-text {
			font-size: 14px;
			color: #A94F20;
		}

		.price-details {
			padding: 10px 20px;
			background-color: #FFFCF2;
			border: 1px solid #FFE8C6;
			border-radius: 4px;

			.price-details-for {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;

			}

			.price-calculate {
				font-size: 14px;
				color: #999;
			}

			.line {
				height: 1px;
				width: 100%;
				margin: 10px 0;
			}

		}

		.payment {
			height: 90px;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 10px 20px;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.total-price-text {
				color: #333;
				font-size: 16px;
				font-weight: blob;
				line-height: 16px;
			}

			.total-price-value {
				color: #FF530A;
				font-size: 22px;
				font-weight: blob;
				line-height: 16px;
			}

			.payment-btn {
				width: 140px;
				height: 38px;
				border-radius: 6px;
				background: #FFB13F;
				color: #fff;
				font-size: 16px;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.details-radio {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #858585;
			font-size: 14px;
			line-height: 16px;

			/* 133.333% */
			.details-agreement {
				color: #A94F20;

			}
		}
	}
</style>