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

<template>
	<view>
		<view v-if="orderSuccess">
			<kevy-result-page v-if="isOrderSuccess" type="success" title="支付成功" primarColor="#4fc08d" :details="[{
					label: '订单编号',
					value: orderSn
				}, {
					label: '支付金额',
					value: totalPriceFmt
				}, {
					label: '支付状态',
					value:'支付成功'
				}]" primaryBtnText="查看订单" secondaryBtnText="返回" @primaryBtnClick="primaryBtnClick"
				@secondaryBtnClick="secondaryBtnClick">
			</kevy-result-page>
			<view class="wrap" v-else>
				<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>
		</view>
	</view>
</template>

<script>
	import {
		getOrderResult,
		getPaymentInformation
	} from '@/request/api/shop.js'
	export default {
		data() {
			return {
				orderSn: '',
				totalPrice: '',
				payType: 'wxpay',
				payWayList: [{
					name: 'wxpay',
					text: '微信支付'
				}],
				isOrderSuccess: false,
				orderSuccess: false
			}
		},
		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.state) {
						this.orderSuccess = true;
						this.isOrderSuccess = res.data;
					}
				})
			},
			primaryBtnClick() {
				this.$navigateTo('/subPages/shopPage/webview/webview?url=' + encodeURIComponent('/order/detail/' + this
					.orderSn));
			},
			secondaryBtnClick() {
				uni.navigateBack();
			},
			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) => {
									this.init();
								},
								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>