reward.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <view class="answerPopup-box bg">
  3. <!-- 正确 -->
  4. <image class="tipimg" src="/static/images/course_answer_img.png"
  5. mode="aspectFill"></image>
  6. <view class="answerPopup-title">恭喜你,回答正确</view>
  7. <view class="answerPopup-desc">您有一份奖励待领取哦</view>
  8. <view class="answerPopup-btn" @click="handleReceive">领取</view>
  9. <view class="footer-tips">重庆云联融智提供技术支持</view>
  10. </view>
  11. </template>
  12. <script>
  13. // import wx from 'jweixin-module';
  14. import { initJssdk } from "@/utils/common.js"
  15. export default {
  16. data() {
  17. return {
  18. mchId:'',
  19. packageInfo: ''
  20. }
  21. },
  22. methods: {
  23. handleReceive() {
  24. this.packageInfo = uni.getStorageSync('receive_package') || ''
  25. this.mchId = uni.getStorageSync('mchId') || ''
  26. // this.initWXConfig(this.packageInfo)
  27. this.$nextTick(()=>{
  28. this.handleTest()
  29. })
  30. },
  31. handleTest() {
  32. const that = this
  33. // console.log(that.mchId)
  34. // console.log('wx3de90a39feb8107a',wx.getAccountInfoSync().miniProgram.appId)
  35. // console.log(that.packageInfo)
  36. if (wx.canIUse('requestMerchantTransfer')) {
  37. wx.requestMerchantTransfer({
  38. mchId:that.mchId,
  39. appId:wx.getAccountInfoSync().miniProgram.appId,
  40. package:that.packageInfo,
  41. success: (res) => {
  42. },
  43. fail: (res) => {
  44. },
  45. });
  46. } else {
  47. wx.showModal({
  48. content: '你的微信版本过低,请更新至最新版本。',
  49. showCancel: false,
  50. });
  51. }
  52. // wx.ready(() => {
  53. // // config信息验证后会执行ready方法,所有接口调用都必须在config之后
  54. // wx.checkJsApi({
  55. // jsApiList: ['requestMerchantTransfer'],
  56. // success: function(res) {
  57. // if (res.checkResult['requestMerchantTransfer']) {
  58. // WeixinJSBridge.invoke('requestMerchantTransfer', {
  59. // mchId: that.mchId,
  60. // appId: appId,
  61. // package: packageVal,
  62. // },
  63. // function(res) {
  64. // if (res.err_msg === 'requestMerchantTransfer:ok') {
  65. // // res.err_msg将在页面展示成功后返回应用时返回success,并不代表付款成功
  66. // }
  67. // }
  68. // );
  69. // } else {
  70. // alert('你的微信版本过低,请更新至最新版本。');
  71. // }
  72. // }
  73. // });
  74. // });
  75. // wx.error(function(res){
  76. // // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
  77. // });
  78. },
  79. initWXConfig(packageVal) {
  80. const isWechat = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
  81. if(isWechat) {
  82. let url = window.location.href.split('#')[0]
  83. initJssdk((data)=>{
  84. this.handleTest(packageVal,data.appId,data.mchId)
  85. },url)
  86. } else {
  87. uni.showToast({
  88. title: '请在微信浏览器中打开'
  89. })
  90. }
  91. }
  92. }
  93. }
  94. </script>
  95. <style scoped lang="scss">
  96. @mixin u-flex($flexD, $alignI, $justifyC) {
  97. display: flex;
  98. flex-direction: $flexD;
  99. align-items: $alignI;
  100. justify-content: $justifyC;
  101. }
  102. .footer-tips {
  103. width: 100%;
  104. position: absolute;
  105. left: 0;
  106. bottom: 14rpx;
  107. text-align: center;
  108. font-family: PingFang SC,PingFang SC;
  109. font-weight: 500;
  110. font-size: 12px;
  111. color: #bbb;
  112. }
  113. .answerPopup {
  114. &-box {
  115. width: 100%;
  116. height: 100vh;
  117. background: linear-gradient(180deg, #FFFAF6 50%, #FEECD8 100%);
  118. background-color: #fff;
  119. font-weight: 400;
  120. box-sizing: border-box;
  121. position: relative;
  122. @include u-flex(column, center, center);
  123. font-family: PingFang SC, PingFang SC;
  124. font-weight: 400;
  125. .tipimg {
  126. width: 206rpx;
  127. height: 206rpx;
  128. margin-bottom: 16rpx;
  129. }
  130. }
  131. &-title {
  132. font-weight: 600;
  133. font-size: 36rpx;
  134. color: #222222;
  135. }
  136. &-desc {
  137. margin-top: 30rpx;
  138. font-size: 28rpx;
  139. color: #757575;
  140. }
  141. &-btn {
  142. width: 464rpx;
  143. height: 84rpx;
  144. margin-top: 10vh;
  145. margin-bottom: 16vh;
  146. background: #FF5C03;
  147. border-radius: 42rpx;
  148. font-weight: 500;
  149. font-size: 32rpx;
  150. color: #FFFFFF;
  151. text-align: center;
  152. line-height: 84rpx;
  153. }
  154. }
  155. </style>