realty/virgo.wzfrontend/workark_wx/subPages/shopPage/payment/payment.vue

<template>
	<view class="wrap">
		<uv-cell-group :customStyle="{
			background:'#fff'
		}">
			<uv-cell icon="bag" title="订单编号" :arrow="false" :value="orderSn" size="large"></uv-cell>
			<uv-cell icon="red-packet" title="应付金额" :arrow="false" :value="totalPriceFmt" size="large"></uv-cell>
		</uv-cell-group>
		<uv-radio-group v-model="payType" :customStyle="{
			background:'#fff'
		}">
			<view class="item" v-for="(res, index) in payWayList" :key="res.name">
				<uv-row>
					<uv-col :span="11">
						<view class="top">
							<view class="name">
								<uv-icon name="weixin-fill" size="60" color="#6cac3e"></uv-icon>
							</view>
							<view class="label">
								微信支付
							</view>
						</view>
					</uv-col>
					<uv-col :span="1">
						<uv-radio :name="res.name" iconSize="32" size="36"></uv-radio>
					</uv-col>
				</uv-row>
			</view>
		</uv-radio-group>
		<view class="button">
			<uv-button type="primary" @click="submit">立即支付</uv-button>
		</view>
	</view>
</template>

<script>
	import {
		getOrderResult,
		getPaymentInformation
	} from '@/request/api/shop.js'
	export default {
		data() {
			return {
				orderSn: '',
				totalPrice: '',
				payType: 'wxpay',
				payWayList: [{
					name: 'wxpay',
					text: '微信支付'
				}]
			}
		},
		computed: {
			totalPriceFmt() {
				return '¥' + (this.totalPrice / 100).toFixed(2)
			}
		},
		onLoad(body) {
			this.orderSn = body.orderSn
			this.totalPrice = body.totalPrice;
			this.init();
		},
		methods: {
			init() {
				getOrderResult(this.orderSn).then(res => {
					//如果当前订单已经支付成功跳转到订单详情页
					if (res.data) {}
				})
			},
			submit() {
				if ('wxpay' === this.payType) {
					getPaymentInformation(this.orderSn).then(response => {
						if (response.state) {
							let res = response.data;
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.timeStamp, //时间戳
								nonceStr: res.nonceStr, //随机字符串
								package: res.packageValue, //统一下单接口返回的 prepay_id 参数值
								signType: res.signType,
								paySign: res.paySign, //签名内容
								success: (e) => {
									getOrderResult(this.orderSn).then(res => {
										//如果当前订单已经支付成功跳转到订单详情页
										if (res.data) {
											this.$u.route({
												url: '/pages/order/detail',
												params: {
													orderSn: orderSn
												}
											})
										}
									})
								},
								fail: (e) => {
									this.$toast('取消支付');
								}
							})
						}
					});
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.wrap {
		padding: 30rpx 0rpx;

		.top {
			display: flex;
			align-items: center;
		}

		.item {
			width: 100%;
			padding: 20rpx 20rpx;
		}

		.label {
			color: #6cac3e;
			margin-left: 10rpx;
		}

		.button {
			padding: 30rpx;
		}
	}
</style>