exam/exam-06173-uni/components/pay-dialog/index.vue

<template>

	<view class="content">
		<view>
			<view style="padding: 20px;">
				<view style="font-size: 16px; padding-bottom: 10px;">选择支付方式</view>
				<template v-for="item in payList">
					<view v-if="item.enabled" :key="item.name" style="margin-bottom: 10px;">
						<button type="default" v-if="item.name === 'alipay'" @click="tradePay(item.name)">支付宝支付</button>
						<button type="primary" v-if="item.name === 'wechat'" @click="tradePay(item.name)">微信支付</button>
					</view>
				</template>
			</view>
		</view>
	</view>

</template>

<script>
	import { payConfig } from '@/api/ability/pay/config'
	import { tradeJs } from '@/api/ability/pay/wechat'
	import { alipayTrade } from '@/api/ability/pay/alipay'
	import { checkOrder } from '@/api/order/order'

	export default {

		name: 'PayDialog',
		props: {
			orderId: String
		},
		data() {
			return {

				// 支付方式
				payList: [],
				dialogVisible: false,
				// 选择支付方式
				prepay: true,
				// 微信支付
				payMethod: '',
				// 支付宝相关
				aliForm: '',
				socket: false
			}
		},

		created() {
			
			// 查找支付方式
			payConfig().then(res => {
				this.payList = res
			})
		},

		methods: {

			tradePay(name) {
				// 当前支付方式
				this.payMethod = name

				if (name === 'wechat') {
					this.wechatPay()
				}

				if (name === 'alipay') {
					this.alipayPay()
				}
			},

			// 微信支付
			wechatPay() {

				let that = this

				// 获取当前用户信息
				uni.login({
					provider: 'weixin',
					success: (user) => {
						console.log(user)
						// 获得JSAPI支付信息
						tradeJs({
							id: that.orderId,
							code: user.code
						}).then(res => {
							console.log('trade', res)
							this.callWechatPay(res)
						}).catch(() => {
							uni.hideLoading()
						})

					},
					fail: () => {
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						});
					}
				})
			},

			callWechatPay(data) {

				let that = this

				uni.hideLoading()

				// 仅作为示例，非真实参数信息。
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: 'RSA',
					paySign: data.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						uni.showToast({
							title: "恭喜，支付成功！",
							icon: "none"
						});
						
						that.$emit('success')

					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});

			},



			// 支付宝支付
			alipayPay() {
			
				uni.showToast({
					title: '抱歉，移动端暂不支持此支付方式！',
					icon: "none"
				})
			},

			// 检查订单是否成功
			checkState() {
				checkOrder(this.orderId).then(res => {
					const data = res.data

					// 校验订单状态
					if (data.orderState === 2) {
						this.$message.success('支付成功！')
						setTimeout(() => {
							window.location.reload()
						}, 2000)
					} else {
						this.$message.warning('订单尚未支付成功，请稍后刷新..')
					}
				})
			},

			handleClose() {
				this.$emit('update:visible', false)
				this.$emit('close')
			},

			changePay() {
				this.prepay = true
				this.payMethod = ''
				this.weQr = null
				this.aliForm = ''
			},

			// 支付结果回调
			onMessage(msg) {
				if (msg === 'success' && this.socket) {
					this.socket = false
					this.$message.success('支付成功！')
					setTimeout(() => {
						window.location.reload()
					}, 2000)
				}
			}

		}
	}
</script>