[锶源昆仑-寺庙捐赠活动]

pages/index/pay.vue

@@ -0,0 +1,190 @@
+<template>
+	<view class="content">
+		<view class="paymentTop">
+			<view class="paymentTop-name">
+				需支付金额（元）
+			</view>
+			<view class="paymentTop-price">
+				<text>￥</text>{{this.$Route.query.total}}
+			</view>
+		</view>
+		<view class="paymentList">
+			<view class="paymentList-label">
+				<view class="paymentList-left">
+					<image class="paymentList-icon" src="@/static/img/payWechat.png" mode="widthFix"></image>微信支付
+				</view>
+				<view class="paymentList-right">
+					<image class="paymentList-img" src="@/static/img/payCheck_active.png" mode="widthFix"></image>
+				</view>
+			</view>
+		</view>
+		<view class="paymentBtn">
+			<button type="default" :disabled="disabled" class="paymentBtn-go" @click="payGo">去支付</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	const jweixin = require('jweixin-module');
+	import { donationPay } from '@/apis/interfaces/mall'
+	export default {
+		data() {
+			return {
+				total: '', //支付金额
+				disabled: false
+			}
+		},
+		onLoad() {
+		},
+		
+		onShow() {
+		},
+		methods: {
+			payGo (){
+				// 微信支付
+				donationPay(this.$Route.query.orderNo, {
+					type  : 'mp',
+				    openid: this.$store.getters.getOpenId
+				}).then(res => {
+				    let wxConfig = JSON.parse(res.wechat)
+				    jweixin.config({
+				        appId: wxConfig.appId,
+				        debug: false,
+				        jsApiList: ['chooseWXPay'],
+				        signature: wxConfig.signature,
+				        nonceStr: wxConfig.nonceStr,
+				        timestamp: wxConfig.timestamp,
+				    })
+				    jweixin.ready(() => {
+				        jweixin.chooseWXPay({
+				            timestamp: wxConfig.timeStamp,
+				            nonceStr: wxConfig.nonceStr, 
+				            package: wxConfig.package,
+				            signType: wxConfig.signType,
+				            paySign: wxConfig.paySign,
+				            success: payRes => {
+								uni.showToast({
+								    title: '支付成功',
+								    icon: 'none'
+								})
+								this.disabled = true
+								setTimeout(()=>{
+									this.$Router.replace({ name: 'OrderIndex', params: { listType: 'paid' }});
+								},1000)
+				            },
+				            fail: payfail => {
+				                uni.showToast({
+				                    title: '取消支付',
+				                    icon: 'none'
+				                })
+								this.disabled = true
+								setTimeout(()=>{
+									this.$Router.replace({ name: 'OrderIndex', params: { listType: 'unpay' }});
+								},1000)
+				            }
+				        });
+				    });
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content{
+	    background: #f4f4f4;
+		height: 100vh;
+		overflow-y: scroll;
+	}
+	
+	.paymentTop {
+		padding: $padding * 4 $padding $padding * 3;
+		box-sizing: border-box;
+		text-align: center;
+		color: #666666;
+		.paymentTop-name {
+			padding-left: $padding;
+			box-sizing: border-box;
+		}
+		.paymentTop-price {
+			color: $mian-color;
+			font-size: $title-size + 40;
+			font-weight: 600;
+			margin: $margin - 10 0;
+			text {
+				font-size: $title-size + 10;
+			}
+		}
+	}
+	
+	.paymentList {
+		padding: 0 $padding;
+		box-sizing: border-box;
+		.paymentList-label {
+			background-color: #ffffff;
+			border-radius: $radius;
+			padding: $padding + 10 $padding;
+			box-sizing: border-box;
+			margin-bottom: $margin + 10;
+			display: flex;
+			.paymentList-left {
+				flex: 1;
+				display: flex;
+				line-height: 40rpx;
+				.paymentList-icon {
+					width: 40rpx;
+					height: 40rpx;
+					margin-right: $margin - 10;
+				}
+			}
+			.paymentList-right {
+				display: flex;
+				.paymentList-tips {
+					background-image: linear-gradient(to left, #FF4646, #FF7676);
+					height: 44rpx;
+					line-height: 44rpx;
+					font-size: $title-size-sm;
+					color: #ffffff;
+					opacity: .9;
+					border-radius: $radius * 2;
+					padding: 0 10rpx;
+				}
+				.paymentList-arrow {
+					width: 14rpx;
+					margin: 10rpx 0 0 20rpx;
+				}
+				.paymentList-img {
+					width: 32rpx;
+					height: 32rpx;
+					margin-top: 4rpx;
+				}
+			}
+		}
+	}
+	
+	.paymentBtn {
+		position: fixed;
+		bottom: $margin * 2;
+		left: 0;
+		text-align: center;
+		padding: 0 $padding;
+		box-sizing: border-box;
+		width: 100%;
+		.paymentBtn-go {
+			background-color: $mian-color;
+			color: #ffffff;
+			border-radius: $radius-m;
+			line-height: 100rpx;
+			font-size: $title-size + 2;
+			&[disabled] {
+				background-color: #666666;
+			}
+		}
+	}
+	
+</style>