payStatus.vue 3.1 KB

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