BD-LDBD-UNI/pages/shop/cashierDesk/cashierDesk.vue

<template>
	<view>
		<view class="goback" v-if="this.show == true">
			<view class="gb-bg">
				<view class="check">
					确认要离开收银台吗?
				</view>
				<view class="toast">
					订单已提交成功，超时未支付将会取消订单，请尽快完成支付。
				</view>
				<view class="but">
					<view class="no" @click="no()">
						取消支付
					</view>
					<view class="yes" @click="yes()">
						继续支付
					</view>
				</view>
			</view>
		</view>
		<view class="payBlock">
			<view class="payMoney">
				<text style="font-size: 32rpx;">￥</text>{{payData.payMoney.toFixed(2)}}
			</view>
			<view class="payToast">需支付</view>
		</view>
		<view class="payCheck">
			<view class="typeBlock border-b" @click="type = 2">
				<view class="payCheckTitle">
					<image src="../../../static/alipay.png" class="payTypeImage"></image>
					<view class="payTitle">支付宝支付</view>
				</view>
				<image src="../../../static/sel@2x.png" v-if="type === 2" class="checkIcon"></image>
				<image src="../../../static/unsel.png" v-else class="checkIcon"></image>
			</view>
			<view class="typeBlock border-b" @click="type = 1">
				<view class="payCheckTitle">
					<image src="../../../static/wechat.png" class="payTypeImage"></image>
					<view class="payTitle">微信支付</view>
				</view>
				<image src="../../../static/sel@2x.png" v-if="type === 1" class="checkIcon"></image>
				<image src="../../../static/unsel.png" v-else class="checkIcon"></image>
			</view>
			<view class="typeBlock" @click="type = 3">
				<view class="payCheckTitle">
					<image src="../../../static/yu‘e@2x.png" class="payTypeImage"></image>
					<view class="payTitle">余额支付</view>
					<view class="balance">(可用￥{{balance}})</view>
				</view>
				<image src="../../../static/sel@2x.png" v-if="type === 3" class="checkIcon"></image>
				<image src="../../../static/unsel.png" v-else class="checkIcon"></image>
			</view>
		</view>
		<view class="payBtn" @click="toPay()">
			{{type==1?'微信':type==2?'支付宝':'余额'}}支付￥{{payData.payMoney.toFixed(2)}}
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "../../../api/myApi.js"
	import {
		carwashOrder
	} from "@/api/carWash.js"
	import {
		payOrder
	} from '../../../api/maintain.js'
	export default {
		data() {
			return {
				show: false,
				payData: {},
				type: 1,
				balance: 0,
				orderInfo: '',
				page: ''
			};
		},
		onLoad(options) {
			this.payData = JSON.parse(options.params)
			this.page = options.page
			this.getUser()
			console.log(this.payData);
		},
		onBackPress(e) {
			if (e.from == 'backbutton') {
				this.show = true
				return true;
			} else if (e.from == 'navigateBack') {
				return false;
			}
		},
		methods: {
			no() {
				uni.showToast({
					icon: "none",
					title: "顾客取消支付"
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				}, 1000)

			},
			yes() {
				this.show = false
			},
			toPay() {
				this.payData.payType = this.type
				if (this.payData.payType === 3) {
					if (this.payData.payMoney > this.balance) {
						return uni.showToast({
							icon: "none",
							title: "余额不足"
						})
					}
				}
				if (this.page === 'carwash') {
					this.carWash()
				} else if (this.page === 'maintenance') {
					this.maintenance()
				}
			},
			getUser() {
				getUserInfo().then(res => {
					this.balance = res.data.balance
				})
			},
			carWash() {
				carwashOrder(this.payData).then(res => {
					if (this.payData.payType === 1 || this.payData.payType === 2) {
						if (this.payData.payType === 1) {
							this.orderInfo = res.data.wechatOrder
						} else if (this.payData.payType === 2) {
							this.orderInfo = res.data.zfbOrder
						}
						this.payment()
					}
				})
			},
			maintenance() {
				payOrder(this.payData).then(res => {
					if (this.payData.payType === 1 || this.payData.payType === 2) {
						if (this.payData.payType === 1) {
							this.orderInfo = res.data.wechatOrder
						} else if (this.payData.payType === 2) {
							this.orderInfo = res.data.zfbOrder
						}
						this.payment()
					}
				})
			},
			payment() {

				let payType = this.payData.payType === 1 ? 'wxpay' : 'alipay'
				console.log('订单西悉尼', this.orderInfo);
				uni.requestPayment({
					provider: payType,
					orderInfo: this.orderInfo,
					success: (res) => {
						console.log('下单支付===============>', res);

						if (this.page === 'carwash') {
							uni.redirectTo({
								url: '/pages/preCarWash/washOrder/index?token=' + uni.getStorageSync(
									'token')
							})
						} else if (this.page === 'maintenance') {
							uni.redirectTo({
								url: '/pages/maintenance/maintainOrder/index?token=' + uni
									.getStorageSync('token')
							})
						}
					},
					fail: (res) => {
						console.log(res, '支付失败fail');
						uni.showToast({
							icon: 'none',
							title: '支付失败：' + res.errMsg + '，code：' + res.code + '，errCode：' + res
								.errCode
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.goback {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 999999999999999999;
		top: 0;

		.gb-bg {
			width: 600rpx;
			height: 378rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 50rpx 70rpx;
			margin: 0 auto;
			margin-top: 50%;

			.check {
				height: 29rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
			}

			.toast {
				width: 467rpx;
				height: 63rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
				margin: 56rpx 0;
			}

			.but {
				display: flex;
				justify-content: space-between;

				.no {
					width: 210rpx;
					height: 70rpx;
					background: #FFFFFF;
					border: 1px solid #0060FF;
					border-radius: 35rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #0062FF;
					line-height: 70rpx;
					text-align: center;
				}

				.yes {
					width: 210rpx;
					height: 70rpx;
					background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
					border-radius: 35rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 70rpx;
					text-align: center;
				}
			}

		}
	}

	.payBlock {
		width: 100%;
		height: 225rpx;
		background-color: $uni-text-color-inverse;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 0 0 16rpx 16rpx;
		margin-bottom: 30rpx;

		.payMoney {
			font: {
				size: 50rpx;
				weight: bold;
			}

			;
			color: $uni-text-color;
		}

		.payToast {
			font: {
				size: 24rpx;
				weight: 500;
			}

			;
			color: $uni-text-color-grey;
		}
	}

	.payCheck {
		width: calc(100% - 80rpx);
		padding: 0 40rpx;
		background-color: $uni-text-color-inverse;
		border-radius: 16px;

		.typeBlock {
			width: calc(100% - 10rpx);
			height: 125rpx;
			padding-left: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.payCheckTitle {
				height: 100%;
				display: flex;
				align-items: center;

				.payTypeImage {
					width: 44rpx;
					height: 44rpx;
				}

				.payTitle {
					font: {
						size: 30rpx;
						weight: 500;
					}

					;
					color: $uni-text-color;
					margin-left: 24rpx;
				}

				.balance {
					font: {
						size: 30rpx;
						weight: 500;
					}

					;
					color: $uni-text-color-grey;
					margin-left: 17rpx;
				}
			}

			.checkIcon {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.border-b {
			border-bottom: 1px solid #EEEEEE;
		}
	}

	.payBtn {
		width: 600rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background: linear-gradient(0deg, #0078FF 0%, #005AFF 100%);

		font: {
			size: 32rpx;
			weight: 500;
		}

		;
		color: $uni-text-color-inverse;
		border-radius: 45rpx;
		margin: 174rpx auto;
	}
</style>