uniapp app端选择支付方式

app调取微信支付、支付宝支付。

pay.js见顶部资源附件。

<template>
	<view>

        <!-- 支付方式弹窗 -->
		<u-popup v-model="payShow" mode="center" width="600" border-radius="10" :mask-close-able="false" closeable>
			<view class="popCon">
				<view class="popTit">选择您的支付方式</view>
				<view class="popPay">
					<view class="payItem" @click="paySelect('wx')">
						<u-icon name="weixin-circle-fill" color="#04BE02" size="70"></u-icon>
						<view class="payType">微信支付</view>
						<u-icon name="checkbox-mark" color="#B21E23" size="40" v-if="payType=='wx'"></u-icon>
					</view>
					<view class="payItem" @click="paySelect('ali')">
						<u-icon name="zhifubao-circle-fill" color="#1678ff" size="70"></u-icon>
						<view class="payType">支付支付</view>
						<u-icon name="checkbox-mark" color="#B21E23" size="40" v-if="payType=='ali'"></u-icon>
					</view>
				</view>
				<view class="popPost">
					<view class="popConfirm" @click="payClick">立即支付</view>
				</view>
			</view>
		</u-popup>

	</view>
</u-popup>

	</view>
</template>

<script>
	import {
		pay
	} from '@/common/pay.js';

	export default {
		data() {
			return {
				// 支付方式弹窗
				payShow: true,
				payType: '',
			}
		},
		onLoad(option) {
			
		},
		onShow() {
		
		},
		onReady() {

		},
		methods: {
			// 选择支付方式
			paySelect(payType) {
				console.log(payType);
				var _this = this;
				_this.payType = payType;
			},

			// 立即支付
			payClick() {
				var _this = this;

				var payMoney = '';
				if (_this.rechargeNum) {
					payMoney = _this.rechargeNum;
				}
				if (_this.rechargeMoney) {
					payMoney = _this.rechargeMoney;
				}

				if (!_this.payType) {
					uni.showModal({
						content: '请选择支付方式',
						showCancel: false,
					})
					return;
				}

                _this.$u.post('/api/xx/appPay', {
					pay_type: 'payordergoods',
					order_pay_id: order_pay_id,
					order_id_string: order_id_string,
				}).then(res => {
					uni.hideLoading();
					console.log("==app端微信支付==");
					console.log(res);
					// app支付js
					pay(res, function() {
						// 成功回调
						uni.navigateTo({
							url: '/pagesRoute/order/orderList'
						})
					}, function() {
						// 失败回调
						uni.navigateTo({
							url: '/pagesRoute/order/orderList'
						})
					});
				}).catch(res => {
					console.log(res);
				})                   

			},

		}
	}
</script>

<style scoped>
    .popCon {
		padding: 30rpx 60rpx;
		overflow: hidden;
	}

	.popTit {
		font-size: 32rpx;
		font-weight: bold;
		color: #020202;
		text-align: center;
	}

	.popPay {
		padding: 40rpx 0;
		overflow: hidden;
	}

	.payItem {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.payItem .payType {
		flex: 2;
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.popPost {
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popConfirm {
		width: 220rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: #b21e23;
		border-radius: 10rpx;
		overflow: hidden;
	}
</style>