result.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <view class="container">
  3. <view class="success">
  4. <view class="result">
  5. <image class="icon" src="/static/pay/success.png"></image>
  6. <text class="text">支付成功!</text>
  7. </view>
  8. <view class="amount">¥{{ amount }}</view>
  9. <view class="point" v-if="point > 0 && amount > 0.1">使用{{ point }}积分</view>
  10. </view>
  11. <view v-if="false" class="attention">
  12. <view class="result"><image class="icon" src="/static/pay/success.png"></image>使用失败</view>
  13. </view>
  14. <view class="confirm" @click="doConfirm()">确定</view>
  15. </view>
  16. </template>
  17. <script>
  18. import * as MessageApi from '@/api/message'
  19. export default {
  20. data() {
  21. return {
  22. amount: 0,
  23. point: 0,
  24. }
  25. },
  26. /**
  27. * 生命周期函数--监听页面加载
  28. */
  29. onLoad(options) {
  30. // 当前页面参数
  31. this.amount = options.amount ? options.amount : 0
  32. this.point = options.point ? options.point : 0
  33. },
  34. methods: {
  35. /**
  36. * 确定
  37. * */
  38. doConfirm() {
  39. const app = this
  40. // #ifdef MP-WEIXIN
  41. MessageApi.getSubTemplate({keys: "balanceChange,pointChange"}).then(result => {
  42. const templateIds = result.data
  43. wx.requestSubscribeMessage({tmplIds: templateIds,
  44. success(res) {
  45. console.log("调用成功!")
  46. }, fail(res) {
  47. console.log("调用失败:", res)
  48. }, complete() {
  49. app.$navTo('pages/index/index')
  50. }})
  51. })
  52. // #endif
  53. // #ifndef MP-WEIXIN
  54. app.$navTo('pages/index/index')
  55. // #endif
  56. }
  57. }
  58. }
  59. </script>
  60. <style lang="scss" scoped>
  61. .success {
  62. width: 100%;
  63. text-align: center;
  64. margin-top: 200rpx;
  65. .result {
  66. font-size: 35rpx;
  67. text-align: center;
  68. padding: 10rpx 10rpx 10rpx 50rpx;
  69. height: 70rpx;
  70. .icon {
  71. width: 45rpx;
  72. height: 45rpx;
  73. display: inline-block;
  74. box-sizing: border-box;
  75. vertical-align: middle;
  76. }
  77. .text {
  78. text-align: center;
  79. height: 100%;
  80. display: inline-block;
  81. box-sizing: border-box;
  82. vertical-align: middle;
  83. color: #00B83F;
  84. font-weight: bold;
  85. }
  86. }
  87. .amount {
  88. font-weight: bold;
  89. font-size: 65rpx;
  90. margin-top: 50rpx;
  91. margin-bottom: 50rpx;
  92. color: #000000;
  93. }
  94. .point {
  95. font-size: 30rpx;
  96. }
  97. }
  98. .attention {
  99. width: 100%;
  100. text-align: center;
  101. margin-top: 14rpx;
  102. }
  103. .confirm {
  104. flex: 1;
  105. font-size: 28rpx;
  106. height: 80rpx;
  107. line-height: 80rpx;
  108. text-align: center;
  109. color: #fff;
  110. border-radius: 40rpx;
  111. width: 300rpx;
  112. margin: 50rpx auto;
  113. background: $fuint-theme;
  114. }
  115. </style>