payStatus.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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="btns">
  9. <view class="btn_1" @click="handleClickBtn">{{ status === '1' ? '返回主页' : '重新支付' }}</view>
  10. <view class="btn_2" v-if="status === '1'" @click="handleGoDetail">查看详情</view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. id: '',
  19. // 支付状态
  20. status: '',
  21. // 订单进度模版id
  22. templateOrder: 'c9whRYC3d8ebNI_RdyG2X_1BBDwy2625hHmRWlW5Z9U'
  23. }
  24. },
  25. onLoad(options) {
  26. this.id = options.id
  27. this.status = options.status
  28. },
  29. onUnload() {
  30. this.handleClickBtn()
  31. },
  32. methods: {
  33. // 点击底部按钮回调
  34. handleClickBtn() {
  35. if (this.status === '1') {
  36. // 返回主页
  37. this.getMessage(1)
  38. } else if (this.status === '2') {
  39. // 重新支付
  40. uni.navigateBack(1)
  41. }
  42. },
  43. // 查看详情按钮回调
  44. handleGoDetail() {
  45. this.getMessage(2)
  46. },
  47. // 订阅消息 1 代表主页 2代表详情页
  48. getMessage(type) {
  49. uni.showLoading({
  50. title: '加载中',
  51. mask: true
  52. })
  53. uni.getSetting({
  54. withSubscriptions: true,
  55. success: (res) => {
  56. uni.hideLoading()
  57. // console.log(res)
  58. if (res.subscriptionsSetting[this.templateOrder] !== 'reject') {
  59. uni.requestSubscribeMessage({
  60. tmplIds: [this.templateOrder],
  61. success: (res) => {
  62. // console.log(res)
  63. if (res[this.templateOrder] !== 'reject') {
  64. // console.log('成功')
  65. } else {
  66. // console.log('拒绝2')
  67. }
  68. if (type == 1) {
  69. uni.switchTab({
  70. url: '/pages/home3/home3'
  71. })
  72. } else if (type == 2) {
  73. uni.reLaunch({
  74. url: `/pages/orderDetail/orderDetail?id=${this.id}&goHome=${true}`
  75. })
  76. }
  77. },
  78. fail(err) {
  79. // console.log(err)
  80. }
  81. })
  82. } else {
  83. uni.showModal({
  84. content: '当前没有订阅,是否去设置打开?',
  85. confirmText: '确认',
  86. cancelText: '取消',
  87. success: (res) => {
  88. if (res.confirm) {
  89. uni.openSetting({
  90. success: (res) => {
  91. this.handleClickBtn()
  92. }
  93. })
  94. } else {
  95. // console.log('失败')
  96. setTimeout(() => {
  97. if (type == 1) {
  98. uni.switchTab({
  99. url: '/pages/home3/home3'
  100. })
  101. } else if (type == 2) {
  102. uni.navigateTo({
  103. url: `/pages/orderDetail/orderDetail?id=${this.id}`
  104. })
  105. }
  106. }, 1500)
  107. }
  108. }
  109. })
  110. }
  111. }
  112. })
  113. }
  114. }
  115. }
  116. </script>
  117. <style lang="scss" scoped>
  118. .container {
  119. display: flex;
  120. flex-direction: column;
  121. align-items: center;
  122. height: 100vh;
  123. background-color: #fff;
  124. .img {
  125. margin-top: 80rpx;
  126. width: 134rpx;
  127. height: 134rpx;
  128. text-align: center;
  129. }
  130. .status {
  131. margin-top: 40rpx;
  132. font-size: 32rpx;
  133. font-weight: bold;
  134. }
  135. .btns {
  136. position: absolute;
  137. bottom: 75rpx;
  138. display: flex;
  139. justify-content: space-evenly;
  140. width: 100%;
  141. height: 96rpx;
  142. font-size: 32rpx;
  143. .btn_1 {
  144. display: flex;
  145. justify-content: center;
  146. align-items: center;
  147. width: 300rpx;
  148. color: #fff;
  149. border-radius: 64rpx;
  150. background-color: #096562;
  151. }
  152. .btn_2 {
  153. display: flex;
  154. justify-content: center;
  155. align-items: center;
  156. width: 300rpx;
  157. color: #096562;
  158. border: 1rpx solid #096562;
  159. border-radius: 64rpx;
  160. background-color: #fff;
  161. }
  162. }
  163. }
  164. </style>