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">{{schoolName}}</view>
					<view class="price">
						<text class="uint" v-if="amount">￥</text>{{ $u.utils.priceTo(amount) }}
					</view>
					<!-- <view class="num">交易单号：65465879312</view> -->
				</view>
				<!-- <view class="li border">
					amount
					<view class="val">￥ {{info.a}}</view>
				</view> -->
				<!-- <view class="li">
					<view class="lab">订单编号</view>
					<view class="val">{{info.a}}</view>
				</view> -->
			</view>
			
		</view>
		<view class="footerBtn pad">
			<view class="btnBg" @click="$u.debounce(getStudentByPayment, 1000)">确认支付</view>
			<!-- <view class="btnBg" @click="paySubmit">确认支付</view> -->
			
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getStudentByPayment, pre_create, param_sign,course_info
	} from '@/config/api.js'
	export default {
		data() {
			return {
				trainingApplyId: '',
				info: {
					a: '待对接'
				},
				schoolName: '',
				amount: '0',
			}
		},
		onLoad(options) {
			if (options.trainingApplyId) {
				this.trainingApplyId = options.trainingApplyId
			}
			// this.getYSBLink()
			this.course_infoFn()
			this.initWx()
		},
		onPullDownRefresh() {
			this.course_infoFn()
		},
		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
			},
			// 获取订单信息
			async course_infoFn() {
				console.log('获取订单信息')
				console.log(this.trainingApplyId)
				const {data: res} = await course_info({trainingApplyId: this.trainingApplyId})
				this.amount = res.amount
				this.schoolName = res.schoolName
			},
			// 1，下订单
			async getStudentByPayment(type) {
				uni.showLoading({
					title: '正在加载...'
				})
				const {
					data: res
				} = await pre_create({
					trainingApplyId: this.trainingApplyId
				})
				uni.hideLoading()
				console.log('创建的订单信息')
				console.log(res)
				this.param_sign(res.orderNo)
			},
			// 2，加密数据
			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)
				this.getYSBLink(res.encodeData, outOrderNo)
			},
			// 3，生成h5链接 这个商户号与生产地址应该由后端传来的，会变
			async getYSBLink(encodeData, outTradeNo) {
				if(!encodeData) return this.$u.toast('没有获取到支付信息')
				const channelNo = 'QD202404083509';
				//common普通的h5平台，如果当前的运行环境为微信小程序则platform的值为pay_miniPro
				const platform = 'common'; 
				//易收宝H5的前端页面地址，不同的环境详见第四章第4节
				// 测试地址
				const preUrl = 'https://u8wbs.zyebank.cn/cem_ysb_u6/index.html'
				// const preUrl = 'https://u8wbs.zyebank.cn/cem_ysb_u8/index.html'
				// 生产地址
				// const preUrl = 'https://zmcht.zybank.com.cn/cem_ysb/index.html'; 
				const distinctId = this.userId  //惟一标识
				const payLink = `${preUrl}?encodeData=${encodeData}#/checkStandPre?platform=${platform}&channelNo=${channelNo}&checkStand_v3=true&distinctId=${distinctId}`;
				console.log('第三方收银台')
				console.log(payLink)
				this.$store.commit('updateWebVeiwUrl', payLink)
				this.$goPage('/pages/indexEntry/enroll/payment/payh5?outTradeNo='+ outTradeNo)
				
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.pageBg {
		overflow: hidden;
	}
	.card {
		width: 100%;
		margin: 50rpx 0;
		padding: 40rpx 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>