front-end/mobile-code/src/pages/callback/index.vue

<template>
	<!-- 各种回调页面 -->
	<div class="app-content" :class="[contentClass]">
		<div class="callback-wrap">
			<div class="callback-blo">
				<!-- 使用icon -->
				<!-- 待支付 -->
				<block v-if="pagestatus == 1 || pagestatus == 2">
					<div class="icon">
						<i class="iconfont icondaizhifu"></i>
					</div>
				</block>
				<!-- 使用图片 -->
				<!-- 支付成功 -->
				<block v-else>
					<div class="status-img">
						<img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
					</div>
				</block>
				<div class="status-text app-size-36 app-bold">{{ pageTit }}</div>
				<!-- 待支付 -->
				<block v-if="pagestatus == 1 || pagestatus == 2">
					<div class="price">
						<span>￥</span>
						<span class="app-size-36 app-bold">{{ option.totalPrice }}</span>
					</div>
					<div class="surplus app-color-3" v-if="!$util.isEmpty(shopUser)">剩余￥{{ shopUser.userAsset.balance }}</div>
					<div class="order-num app-color-3">订单号: {{ option.orderSn }}</div>
				</block>
				<!-- 待支付 - 订单支付成功 -->
				<block v-else-if="pagestatus == 3 && payDiscountPrice">
					<div>
						<span class="app-color-2">使用优惠券为您</span>
						<span class="app-price">节省 {{ payDiscountPrice }}元</span>
					</div>
				</block>
				<!-- 评价成功 -->
				<block v-else-if="pagestatus == 4">
					<div class="app-color-2">谢谢您，我还会继续努力么么哒~</div>
				</block>
				<!-- 一个主按钮 -->
				<!-- 待支付 -->
				<block v-if="pagestatus == 1 || pagestatus == 2">
					<div class="call-one-btn">
						<button v-if="isYeBtnShow" class="button-com red pay-ye" @click="balancePayFn">余额支付</button>
						<button class="button-com green pay-wx" @click="_wxPay">微信支付</button>
					</div>
				</block>
				<!-- 两个主按钮 -->
				<block v-else-if="pagestatus == 3 || pagestatus == 4 || pagestatus == 5">
					<div class="call-btn-com call-two-btn">
						<button class="button-com default" @click="pageTo({
							url: '/pages/order/detail',
							query: {
								orderSn: option.orderSn
							}
						})">查看订单</button>
						<button class="button-com" @click="pageTo({
							url: '/pages/home/index',
							type: 4
						})">返回首页</button>
					</div>
				</block>
			</div>
			<!-- 优惠券 -->
			<div class="coupon-wrap" v-if="option.pagestatus == 5">
				<div class="coupon-img">
					<img :src="`${constant.imgUrl}/retail/callback/coupon.png`" alt mode="widthFix" />
				</div>
				<div class="qrcode-img">
					<img :src="`${constant.imgUrl}/retail/images/extension.png`" alt mode="widthFix" />
				</div>
			</div>
		</div>
		<!-- 支付密码弹窗 -->
		<modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="支付密码" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line">
						<!-- <div class="line-label">支付密码</div> -->
						<div class="line-input">
							<input type="password" v-model="form.payPassword" :adjust-position="false" class="inp-input" />
						</div>
					</div>
				</div>
			</template>
		</modal-module>
	</div>
</template>

<script>
/** *
	 * 页面状态
	 * @parmas pagestatus 进入页面的状态
	 * @parmas 1 待支付 - 余额支付 或者 微信支付 -- awaitPayYe
	 * @parmas 2 待支付 - 微信支付 -- awaitPayWx
	 * @parmas 3 支付成功 -- successPay
	 * @parmas 4 评价成功 -- successEval
	 * @parmas 5 支付成功 - 扫码支付 -- successPayCode
	 */
import { mapGetters } from 'vuex'
import ModalModule from '@/components/plugin/modal'
//  api
import wexinPay from '@/utils/pay/wxPay'
import { getShopUser } from '@/utils/auth'
import { balancePay, wxPay } from '@/api/order'
export default {
	name: 'callback',
	components: {
		ModalModule
	},
	data() {
		return {
			constant: this.$constant,
			pageTit: '',
			pagestatus: 1,
			contentClass: '',
			payDiscountPrice: null,
			// 支付相关 ============
			passwordModal: false,
			form: {
				payPassword: ''
			}
		}
	},
	computed: {
		...mapGetters({ shopUser: 'getShopUser' }),
		isYeBtnShow() {
			if (this.$util.isEmpty(this.shopUser)) return false
			return this.shopUser.userAsset.balance > this.option.totalPrice
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		init() {
			this.pagestatus = this.option.pagestatus
			this.payDiscountPrice = this.option.payDiscountPrice
			this.initClass(this.pagestatus)
			getShopUser()
		},
		// 支付相关块 =======================================================
		// 余额支付
		_balancePay() {
			if (!this.form.payPassword) {
				this.$msg('请先输入支付密码!')
				return false
			}
			balancePay({
				payPassword: this.form.payPassword,
				orderSn: this.option.orderSn,
				couponId: this.option.couponId
			})
				.then(res => {
					this.modalCancel()
					this.$msg('支付成功！')
					this.paySuccess(res)
				})
				.catch(e => {
					this.$msg(e.msg)
					this.payFail(e)
				})
		},
		// 微信支付
		_wxPay() {
			wxPay({
				orderSn: this.option.orderSn,
				couponId: this.option.couponId
			}).then(res => {
				wexinPay(res.data, this.paySuccess, this.payFail)
			})
		},
		paySuccess(res) {
			alert('支付成功!')
			this.$util.pageTo({
				url: '/pages/callback/index',
				type: 2,
				query: {
					pagestatus: 3,
					orderSn: this.option.orderSn,
					payDiscountPrice: res.data.discountAmount
				}
			})
		},
		payFail() {
			alert('支付失败!')
		},
		balancePayFn() {
			this.passwordModal = true
		},
		passwordModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				this._balancePay()
			}
		},
		modalCancel() {
			this.passwordModal = false
			this.form.payPassword = ''
		},
		// 初始样式
		initClass(val) {
			switch (val) {
				case '1':
					this.pageTit = '待支付'
					this.contentClass = 'awaitPayYe'
					break
				case '2':
					this.pageTit = '待支付'
					this.contentClass = 'awaitPayWx'
					break
				case '3':
					this.pageTit = '支付成功'
					this.contentClass = 'successPay'
					break
				case '4':
					this.pageTit = '评价成功'
					this.contentClass = 'successEval'
					break
				case '5':
					this.pageTit = '支付成功'
					this.contentClass = 'successPayCode'
					break
				default:
					this.pageTit = '支付成功'
					this.contentClass = 'awaitPayYe'
					break
			}

			uni.setNavigationBarTitle({
				title: this.pageTit
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		.callback-wrap {
			padding-top: 50px;
			background-image: url('../../static/images/callback/bg.png');
			background-repeat: no-repeat;
			background-size: 100% auto;
			.callback-blo {
				width: 90%;
				margin: 0 auto;
				padding: 70px 0;
				background-color: #fff;
				box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
				border-radius: 10px;
				text-align: center;
				// 使用icon
				.icon {
					.iconfont {
						font-size: 170px;
					}
				}
				// 使用状态图片
				.status-img {
					width: 294px;
					margin: 0 auto;
				}
				.call-btn-com {
					margin-top: 56px;
					@include disFlex(center, space-evenly);
				}
				// 一个按钮
				.call-one-btn {
					.button-com {
						width: 80%;
						padding-top: 22px;
						padding-bottom: 22px;
						font-size: 32px;
						margin-top: 40px;
					}
				}
				// 两个按钮
				.call-two-btn {
					.button-com {
						width: 40%;
						padding-top: 22px;
						padding-bottom: 22px;
						font-size: 32px;
					}
					.default {
						margin-right: 20px;
					}
				}
			}
			// 优惠券
			.coupon-wrap {
				width: 96%;
				margin: 52px auto 0;
				position: relative;
				.qrcode-img {
					width: 170px;
					height: 170px;
					position: absolute;
					top: 40px;
					right: 108px;
				}
			}
		}
	}
	// 待支付 - 公共
	.awaitPayWx,
	.awaitPayYe {
		.status-text {
			margin-top: 22px;
			margin-bottom: 52px;
			color: #ffa92e;
		}
		.surplus {
			margin-top: 22px;
			margin-bottom: 38px;
		}
		.icon {
			.iconfont {
				color: #ffa92e;
			}
		}
	}
	// 待支付 - 余额
	.successPay,
	.successPayCode,
	.successEval {
		.status-text {
			color: #333;
			margin-top: 22px;
			margin-bottom: 52px;
		}
	}
</style>