ylrz_scrm_course_miniapp/pages_course/reward.vue

<template>
	<view class="answerPopup-box bg">
		<view class="header-nav" :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
			<view class="arrow-left" :style="{top: statusBarHeight + 'px'}" @click="goBack">
				<image src="/static/images/icon_back_b.png" mode="aspectFill"></image>返回
			</view>
		</view>
		<!-- 正确 -->
		<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: '',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				menuButtonH: 45,
			}
		},
		onLoad() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.menuButtonH = menuButtonInfo.height
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			handleReceive() {
				this.packageInfo = uni.getStorageSync('receive_package') || ''
				this.mchId = uni.getStorageSync('mchId') || ''
				this.handleTest()
			},
			handleTest() {
				const that = this
				if (wx.canIUse('requestMerchantTransfer')) {
				  wx.requestMerchantTransfer({
					mchId:that.mchId,
					appId:wx.getAccountInfoSync().miniProgram.appId,
					package:that.packageInfo,
					success: (res) => {
					},
					fail: (res) => {
					},
				  });
				} else {
				  wx.showModal({
					content: '你的微信版本过低，请更新至最新版本。',
					showCancel: false,
				  });
				}
				// 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: '请在微信浏览器中打开'
					})
				}
			}
		},
		onUnload() {
			uni.removeStorageSync('receive_package')
			uni.removeStorageSync('mchId')
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.header-nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.arrow-left {
		position: absolute;
		left: 24rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		overflow: hidden;
		image {
			height: 28px;
			width: 28px;
		}
	}
	.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>