luoyang-uniapp-app/pages/indexEntry/enroll/payment/payment.vue

<template>
	<view class="pageBg">
		<view class="pad">
			<view class="card">
				<view class="orderInfo">
					<view class="schoolName">翔力驾校</view>
					<view class="price">
						<text class="uint">￥</text>{{ info.a }}
					</view>
					<!-- <view class="num">交易单号：65465879312</view> -->
				</view>
				<view class="li border">
					<view class="lab">订单金额</view>
					<view class="val">￥ {{info.a}}</view>
				</view>
				<!-- <view class="li">
					<view class="lab">订单编号</view>
					<view class="val">{{info.a}}</view>
				</view> -->
			</view>
			<view class="card">
				<view class="pay">
					<!-- <view class="h2">选择支付方式</view> -->
					<!-- <view class="row border">
						<view class="wxIcon">
							<image src="@/static/images/carIcon/xfbIcon.png" mode=""></image>
						</view>
						<view class="text">支付宝</view>
						<view class="icon">
							<!-- <image src="@/static/images/index/noSelect.png" mode=""></image> -->
					<!-- <image src="@/static/images/carIcon/isSelect.png" mode=""></image>
						</view> -->
				</view>
				<!-- <view class="row">
					<view class="wxIcon">
						<image src="@/static/images/carIcon/wxIcon.png" mode=""></image>
					</view>
					<view class="text">微信</view>
					<view class="icon">
						<image src="@/static/images/index/noSelect.png" mode=""></image>
						<image src="@/static/images/carIcon/isSelect.png" mode=""></image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="footerBtn pad">
			<view class="btnBg" @click="getYSBLink">确认支付</view>
		</view>
		<web-view :src="link" v-if="link" @load="loadWebView"></web-view>
	</view>
	</view>
</template>

<script>
	import {
		getStudentByPayment, pre_create, param_sign
	} from '@/config/api.js'
	export default {
		data() {
			return {
				trainingApplyId: '',
				info: {
					a: '待对接'
				},
				link: ''
			}
		},
		onLoad(options) {
			if (options.trainingApplyId) {
				this.trainingApplyId = options.trainingApplyId
			}
			// this.getYSBLink()
			this.getStudentByPayment()
			this.initWx()
		},
		onPullDownRefresh() {
			this.getStudentByPayment()
		},
		methods: {
			initWx() {
				// #ifdef APP-PLUS
				plus.share.getServices((s) => {
					var shares = {};
					for (var i = 0; i < s.length; i++) {
						var t = s[i];
						console.log("...........", t);
						shares[t.id] = t;
					}
					var sweixin = shares['weixin'];
					this.sweixin = sweixin
				}, function(e) {
					console.log("获取分享服务列表失败：" + e.message);
				});
				// #endif
			},
			wxPay(data) {
				// const data = {
				//     channelNo: 'QD202401250001', //易收宝分配的渠道号
				//     encodeData: '', //{"outOrderNo":"15456","timestamp":"1632815312300"},json进行加签加密后的值，outOrderNo商户订单号
				//     miniAppName: '', //第三方小程序的名称
				//     env: '',// u8、u6为测试环境，prod为生产环境
				//     distinctId: '',//第三方小程序的用户唯一标识
				//     unionMode: 'miniProToMiniPro', // 微信跳转微信小程序时使用
				// }

				// #ifdef APP-PLUS
				// this.sweixin ? this.sweixin.launchMiniProgram({
				// 	 appId: 'wx9e7d9eea420f6541', //易收宝小程序的appid 测试环境：wx9e7d9eea420f6541 生产环境：wx05c2e4857b6806c8
				// 	path: `/pages/ysbCheckStand/ysbCheckStand?data=${JSON.stringify(data)}`, //跳转小程序页面路径 pages/index/index
				// 	envVersion: 'trial', // 打开体验版trial, 正式版release
				// }) : plus.nativeUI.alert('当前环境不支持微信操作!');
				
				this.sweixin ? this.sweixin.launchMiniProgram({
					    miniAppId: 'wx9e7d9eea420f6541', //小程序原始ID
					    path: '', //跳转小程序的页面路径，可携带参数
					    miniProgramType: '1', //小程序的版本 0正式版 1开发版 2体验版
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				// #endif
			},
			async getStudentByPayment() {
				const {
					data: res
				} = await pre_create({
					trainingApplyId: this.trainingApplyId
				})
				console.log('创建的订单信息')
				// console.log(res.orderNo)
				this.encodeData = res.encodeData
				// this.param_sign(res.orderNo)
				// await this.getYSBLink(res.encodeData)
				// this.wxPay()
				// this.$store.dispatch('getUserInfo')
				// setTimeout(()=>{
				// 	this.wxPay()
				// },1500)
				
			},
			// 加密数据
			async param_sign(outOrderNo) {
				let obj = {
					outOrderNo,
					timestamp: Date.now()
				}
				console.log(JSON.stringify(obj))
				const {data: res} = await param_sign({jsonParam:JSON.stringify(obj)})
				
				console.log('加密后的数据')
				console.log(res.encodeData)
			},
			getYSBLink() {
				if(!this.encodeData) return this.$u.toast('没有获取到支付信息')
				const channelNo = 'QD202404083509';
				//common普通的h5平台，如果当前的运行环境为微信小程序则platform的值为pay_miniPro
				const platform = 'common'; 
				//易收宝H5的前端页面地址，不同的环境详见第四章第4节
				// 测试地址
				// const preUrl = 'https://ft1wbs.zyebank.cn/cem_ysb_ft2/index.html'
				const preUrl = 'https://u8wbs.zyebank.cn/cem_ysb_u8/index.html'
				// 生产地址
				// const preUrl = 'https://zmcht.zybank.com.cn/cem_ysb/index.html'; 
				// let obj = {"outOrderNo":orderNo || "2024041211570300000308","timestamp":"1632815312300"}
				// const encodeData = encodeData
				// 用户的唯一标识(可以区分出用户的唯一性即可)，-缓存银行卡信息
				const distinctId = this.userId
				const callback = `${preUrl}?encodeData=${this.encodeData}#/checkStandPre?platform=${platform}&channelNo=${channelNo}&checkStand_v3=true&distinctId=${distinctId}`;
				this.link = callback;
				console.log('callback')
				console.log(callback)
				
			},
			loadWebView() {
				console.log('会来到vebview事件里吗？')
				this.wxPay()
			},
			paySubmit() {
				console.log('这是什么')
				console.log(this.sweixin)
				this.wxPay()
				// this.$goPage('/pages/indexEntry/enroll/paymentSuccess/paymentSuccess')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 100%;
		margin-bottom: 20rpx;
		padding: 0 20rpx;

		.orderInfo {
			text-align: center;

			.schoolName {
				font-size: 28rpx;
				color: #ccc;
				padding: 40rpx 0 20rpx 0;
			}

			.price {
				font-size: 72rpx;
				font-weight: 600;

				text.uint {
					font-size: 44rpx;
					font-weight: 600;
				}
			}

			.num {
				font-size: 24rpx;
				color: #ADADAD;
			}
		}

		.li {
			display: flex;
			height: 88rpx;
			line-height: 88rpx;

			&.border {
				border-bottom: 1px solid #F6F7FA;
			}

			.lab {
				color: #ccc;
				width: 230rpx;
			}

			.val {
				font-weight: 500;
				flex: 1;
				text-align: right;
			}
		}
	}

	.pay {
		.h2 {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 24rpx;
		}

		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;

			&.border {
				border-bottom: 1px solid #F6F7FA;
			}

			.wxIcon {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				margin-left: 20rpx;
				flex: 1;
				text-align: left;
				font-size: 28rpx;
				color: #333;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>