ylrz_scrm_course_h5/pages/course/reward.vue

<template>
	<view class="answerPopup-box bg">
		<!-- 正确 -->
		<image class="tipimg" src="/static/images/course_answer_img.png"
			mode="aspectFill"></image>
		<view class="answerPopup-title">恭喜你，回答正确</view>
		<view class="answerPopup-desc">您有一份奖励待领取哦</view>
		<view class="answerPopup-btn" @click="handleReceive">领取</view>
		<view class="footer-tips">重庆云联融智提供技术支持</view>
	</view>
</template>

<script>
	import wx from 'jweixin-module';
	import { initJssdk } from "@/utils/common.js"
	export default {
		data() {
			return {
				mchId:'',
				packageInfo: ''
			}
		},
		methods: {
			handleReceive() {
				this.packageInfo = uni.getStorageSync('receive_package') || ''
				this.mchId = uni.getStorageSync('mchId') || ''
				this.initWXConfig(this.packageInfo)
			},
			handleTest(packageVal,appId,mchId) {
				const that = this
				wx.ready(() => {
					// config信息验证后会执行ready方法，所有接口调用都必须在config之后
					wx.checkJsApi({
						jsApiList: ['requestMerchantTransfer'],
						success: function(res) {
							if (res.checkResult['requestMerchantTransfer']) {
								WeixinJSBridge.invoke('requestMerchantTransfer', {
										mchId: mchId || that.mchId,
										appId: appId,
										package: packageVal,
									},
									function(res) {
										if (res.err_msg === 'requestMerchantTransfer:ok') {
											// res.err_msg将在页面展示成功后返回应用时返回success，并不代表付款成功
										}
									}
								);
							} else {
								alert('你的微信版本过低，请更新至最新版本。');
							}
						}
					});
				});
				wx.error(function(res){
				  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				});
			},
			initWXConfig(packageVal) {
				const isWechat = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
				if(isWechat) {
					let url = window.location.href.split('#')[0]
					initJssdk((data)=>{
						this.handleTest(packageVal,data.appId,data.mchId)
					},url)
				} else {
					uni.showToast({
						title: '请在微信浏览器中打开'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.footer-tips {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 14rpx;
		text-align: center;
		font-family: PingFang SC,PingFang SC;
		font-weight: 500;
		font-size: 12px;
		color: #bbb;
	}
	.answerPopup {
		&-box {
			width: 100%;
			height: 100vh;
			background: linear-gradient(180deg, #FFFAF6 50%, #FEECD8 100%);
			background-color: #fff;
			font-weight: 400;
			box-sizing: border-box;
			position: relative;
			@include u-flex(column, center, center);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
	
			.tipimg {
				width: 206rpx;
				height: 206rpx;
				margin-bottom: 16rpx;
			}
		}
	
		&-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}
	
		&-desc {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #757575;
		}
	
		&-btn {
			width: 464rpx;
			height: 84rpx;
			margin-top: 10vh;
			margin-bottom: 16vh;
			background: #FF5C03;
			border-radius: 42rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>