payStatus.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <view class="container">
  3. <!-- 图标区域 -->
  4. <img class="img" :src="status === '1' ? '../../static/index/success.png' : '../../static/index/fail.png'" />
  5. <!-- 支付状态区域 -->
  6. <view class="status">{{ status === '1' ? '支付成功' : '支付失败' }}</view>
  7. <!-- 底部按钮区域 -->
  8. <view class="btn" @click="handleClickBtn">{{ status === '1' ? '返回主页' : '重新支付' }}</view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. // 支付状态
  16. status: '',
  17. // 订单进度模版id
  18. templateOrder: 'c9whRYC3d8ebNI_RdyG2X_1BBDwy2625hHmRWlW5Z9U'
  19. // templateOrder: 'ERU1ZY9IqwNkDxWyFJvo5VSE7ua-wey3SqhZgjqLDtU'
  20. }
  21. },
  22. onLoad(options) {
  23. this.status = options.status
  24. console.log(this.status)
  25. },
  26. onUnload() {
  27. this.handleClickBtn()
  28. },
  29. methods: {
  30. // 点击底部按钮回调
  31. handleClickBtn() {
  32. if (this.status === '1') {
  33. // 返回主页
  34. this.getMessage()
  35. } else if (this.status === '2') {
  36. // 重新支付
  37. uni.navigateBack(1)
  38. }
  39. },
  40. // 订阅消息
  41. getMessage() {
  42. uni.getSetting({
  43. withSubscriptions: true,
  44. success: (res) => {
  45. console.log(res)
  46. if (res.subscriptionsSetting[this.templateOrder] !== 'reject') {
  47. uni.requestSubscribeMessage({
  48. tmplIds: [this.templateOrder],
  49. success: (res) => {
  50. console.log(res)
  51. if (res[this.templateOrder] !== 'reject') {
  52. console.log('成功')
  53. } else {
  54. console.log('拒绝2')
  55. }
  56. uni.switchTab({
  57. url: '/pages/home/home'
  58. })
  59. },
  60. fail(err) {
  61. console.log(err)
  62. console.log('拒绝')
  63. }
  64. })
  65. } else {
  66. uni.showModal({
  67. content: '当前没有订阅,是否去设置打开?',
  68. confirmText: '确认',
  69. cancelText: '取消',
  70. success: (res) => {
  71. if (res.confirm) {
  72. uni.openSetting({
  73. success: (res) => {
  74. this.handleClick()
  75. }
  76. })
  77. } else {
  78. console.log('失败')
  79. setTimeout(() => {
  80. uni.switchTab({
  81. url: '/pages/home/home'
  82. })
  83. }, 1500)
  84. }
  85. }
  86. })
  87. }
  88. }
  89. })
  90. // uni.requestSubscribeMessage({
  91. // tmplIds: [this.templateOrder],
  92. // success: (res) => {
  93. // console.log(res)
  94. // if (res[this.templateOrder] !== 'reject') {
  95. // console.log('成功')
  96. // } else {
  97. // console.log('拒绝2')
  98. // }
  99. // uni.switchTab({
  100. // url: '/pages/home/home'
  101. // })
  102. // },
  103. // fail(err) {
  104. // console.log(err)
  105. // console.log('拒绝')
  106. // }
  107. // })
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. .container {
  114. display: flex;
  115. flex-direction: column;
  116. align-items: center;
  117. height: 100vh;
  118. background-color: #fff;
  119. .img {
  120. margin-top: 80rpx;
  121. width: 134rpx;
  122. height: 134rpx;
  123. text-align: center;
  124. }
  125. .status {
  126. margin-top: 40rpx;
  127. font-size: 32rpx;
  128. font-weight: bold;
  129. }
  130. .btn {
  131. position: absolute;
  132. bottom: 75rpx;
  133. display: flex;
  134. justify-content: center;
  135. align-items: center;
  136. width: 710rpx;
  137. height: 96rpx;
  138. font-size: 32rpx;
  139. color: #fff;
  140. border-radius: 64rpx;
  141. background-color: #096562;
  142. }
  143. }
  144. </style>