pay-result.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view class="page">
  3. <!-- 支付状态 -->
  4. <view class="status">
  5. <view class="status-success-icon"><u-icon name="checkbox-mark" :color="appThemeBgColor" size="44"></u-icon></view>
  6. <view class="status-name">支付成功</view>
  7. <view class="money">
  8. <text>¥</text>
  9. <text>{{payTotal}}</text>
  10. </view>
  11. </view>
  12. <!-- 付款信息 -->
  13. <view class="pay-info">
  14. <view class="item">
  15. <view class="label">付款方式</view>
  16. <view class="value">微信支付</view>
  17. </view>
  18. </view>
  19. <view class="oparBtn" v-if="orderId">
  20. <u-button type="primary" @click="viewOrderInfo">查看订单</u-button>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. var _self;
  26. export default {
  27. data() {
  28. return {
  29. appThemeBgColor: this.$appTheme.appThemeBgColor,
  30. payTotal:0,
  31. orderId:null,
  32. };
  33. },
  34. onLoad(opt) {
  35. _self = this;
  36. console.log(opt);
  37. _self.payTotal = opt.payTotal||0;
  38. _self.orderId = opt.orderId||null;
  39. console.log(_self.orderId);
  40. },
  41. onBackPress(options) {
  42. console.log('监听到了返回按钮点击事件');
  43. this.backpage();
  44. /* if (options && options.from === 'navigateBack') {
  45. uni.navigateBack({
  46. delta: 3
  47. });
  48. } else {
  49. console.log('直接返回主界面');
  50. uni.switchTab({
  51. url:'pages/mall/index'
  52. })
  53. // 这里可以编写处理直接返回主界面的相关逻辑
  54. } */
  55. },
  56. methods: {
  57. backpage() {
  58. uni.navigateBack({
  59. delta: 3
  60. });
  61. },
  62. viewOrderInfo(){
  63. // this.subScribeMsg();
  64. uni.navigateTo({
  65. url: '/pages-mall/pages/order/detail?order_id='+this.orderId
  66. });
  67. },
  68. // 支付回调
  69. subScribeMsg() {
  70. uni.getSetting({
  71. withSubscriptions: true,
  72. success(res) {
  73. console.log('1', res, '订阅信息', res.subscriptionsSetting);
  74. if (!res.subscriptionsSetting.mainSwitch) {
  75. uni.openSetting({ //打开设置页
  76. success(res) {
  77. console.log('打开设置页', res.authSetting);
  78. }
  79. })
  80. } else {
  81. uni.requestSubscribeMessage({
  82. tmplIds: ['Sfa68XDGAUQveX50PcP_Ep6ngNz3luvXJNwzASjzzvQ',
  83. '_VxaYVnVTj3aG_wengF8KNFDI3WRhOrFseBerx8xvXE',
  84. ],
  85. success(res) {
  86. console.log('requestSubscribeMessage 订阅信息', res);
  87. if (res['Sfa68XDGAUQveX50PcP_Ep6ngNz3luvXJNwzASjzzvQ'] == "accept") { // 用户点击确定后
  88. console.log('用户订阅点击确定按钮');
  89. // _self.getSubMsg()
  90. } else {
  91. console.log('拒绝');
  92. }
  93. },
  94. fail(errMessage) {
  95. console.log("订阅消息 失败 ", errMessage);
  96. },
  97. // 不管成功或失败都要执行
  98. complete() {
  99. // if (_self.ordercode == null) return _self.getOrder();
  100. // if (_self.ordercode != null) return _self.getPayOrder();
  101. uni.navigateTo({
  102. url: '/pages-mall/pages/order/detail?order_id='+_self.orderId
  103. });
  104. }
  105. })
  106. }
  107. },
  108. })
  109. },
  110. }
  111. };
  112. </script>
  113. <style lang="scss" scoped>
  114. .page {
  115. background-color: $app-theme-bg-color;
  116. }
  117. .status {
  118. padding: 80rpx 0 84rpx 0;
  119. .status-success-icon {
  120. width: 88rpx;
  121. height: 88rpx;
  122. margin: 0 auto;
  123. margin-bottom: 16rpx;
  124. background-color: $app-theme-color;
  125. display: flex;
  126. justify-content: center;
  127. align-items: center;
  128. border-radius: 50%;
  129. }
  130. .status-name {
  131. font-size: 34rpx;
  132. font-family: PingFangSC-Medium, PingFang SC;
  133. font-weight: 500;
  134. color: $app-theme-color;
  135. margin-bottom: 40rpx;
  136. text-align: center;
  137. }
  138. .money {
  139. text-align: center;
  140. text:nth-child(1) {
  141. font-size: 40rpx;
  142. font-family: PingFangSC-Medium, PingFang SC;
  143. font-weight: 500;
  144. color: $app-theme-text-color;
  145. }
  146. text:nth-child(2) {
  147. font-size: 60rpx;
  148. font-family: Helvetica;
  149. color: $app-theme-text-color;
  150. }
  151. }
  152. }
  153. .pay-info {
  154. margin: 0 24rpx;
  155. padding-bottom: 24rpx;
  156. border-bottom: 1px solid $app-theme-border-color;
  157. .item {
  158. display: flex;
  159. justify-content: space-between;
  160. align-items: center;
  161. margin-bottom: 24rpx;
  162. }
  163. .label {
  164. font-size: 30rpx;
  165. font-family: PingFangSC-Regular, PingFang SC;
  166. font-weight: 400;
  167. color: $app-theme-text-gray-color;
  168. }
  169. .value {
  170. font-size: 30rpx;
  171. font-family: PingFangSC-Regular, PingFang SC;
  172. font-weight: 400;
  173. color: $app-theme-text-color;
  174. }
  175. }
  176. .oparBtn{
  177. padding:100rpx 100rpx 0;
  178. }
  179. </style>