payResult.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <view class="payResult">
  3. <u-icon name="checkmark-circle-fill" color="#04BE02" style="margin-top: 50rpx;" size="180"></u-icon>
  4. <view>支付成功</view>
  5. <u-button shape="circle" :custom-style="customStyle" style="margin-top: 120rpx;" @click="goback">{{orderType == 'VOTE_ORDER' ? '返回投票' : '返回商城'}}</u-button>
  6. </view>
  7. </template>
  8. <script>
  9. // #ifdef H5
  10. let goldPlan = require('@/utils/jgoldplan-1.0.0.js');
  11. import VConsole from 'vconsole';
  12. // #endif
  13. export default {
  14. data() {
  15. return {
  16. customStyle: {
  17. color: 'white',
  18. background: "#04BE02",
  19. width: '320rpx',
  20. margin: '10rpx',
  21. height:"80rpx",
  22. fontSize:"30rpx"
  23. },
  24. redirect_url: '',
  25. bgColor: '',
  26. orderType: ''
  27. }
  28. },
  29. async onLoad(options) {
  30. // const vConsole = new VConsole();
  31. console.log("商品小票",options)
  32. let params = {
  33. orderId: options.out_trade_no
  34. }
  35. let res = await this.$api.yeepay.getOrderUrlAndColor(params)
  36. if(res.data.success){
  37. this.redirect_url = res.data.data.url;
  38. this.bgColor = res.data.data.color;
  39. this.orderType = res.data.data.type;
  40. }
  41. },
  42. onReady() {
  43. let mchData = {
  44. action: 'onIframeReady',
  45. displayStyle: 'SHOW_CUSTOM_PAGE'
  46. };
  47. let postData = JSON.stringify(mchData);
  48. parent.postMessage(postData, 'https://payapp.weixin.qq.com');
  49. },
  50. methods: {
  51. goback() {
  52. let mchData = {
  53. action: 'jumpOut',
  54. jumpOutUrl: decodeURIComponent(this.redirect_url) //跳转的页面
  55. }
  56. var postData = JSON.stringify(mchData);
  57. parent.postMessage(postData, 'https://payapp.weixin.qq.com')
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="scss">
  63. .payResult{
  64. display: flex;
  65. flex-direction: column;
  66. align-items: center;
  67. justify-content: center;
  68. background: #FFFFFF;
  69. width: 100vw;
  70. height: 100vh;
  71. }
  72. </style>