paySuccess.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <view :class="['qn-page-' + theme]" class="content">
  3. <text class="success-icon ibonfont ibonxuanze_xuanzhong"></text>
  4. <text class="tit">支付成功</text>
  5. <view class="btn-group">
  6. <navigator url="/pagesT/order/order?state=0" open-type="redirect" class="mix-btn primary-btn" v-if="isyy == 0 && isyhk == 0">查看订单</navigator>
  7. <navigator url="/pagesT/user/myyhk" open-type="redirect" class="mix-btn primary-btn" v-if="isyhk == 1">查看优惠卡</navigator>
  8. <navigator url="/pagesT/order/orderT?state=1" open-type="redirect" class="mix-btn primary-btn" v-if="isyy == 1">查看预约订单</navigator>
  9. <navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
  10. </view>
  11. <view class="coupon-view" v-if="get_coupon">
  12. <image class="coupon-bg" src="https://onlineimg.qianniao.vip/getcoupon-bg.png" mode="aspectFit"></image>
  13. <text class="close-icon ibonfont ibonguanbi1"></text>
  14. <view class="coupon-btn" @click="goPage('/pagesT/user/DiscountCoupon', 'redirectTo')">立即查看</view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. get_coupon: false,
  23. price: 0,
  24. isyy: 0,
  25. isyhk: 0
  26. };
  27. },
  28. onLoad(options) {
  29. this.price=options.price
  30. this.isyhk = options.isyhk
  31. this.isyy = options.isyy
  32. console.log(this.price)
  33. // this.price = 10;
  34. this.getData();
  35. },
  36. methods: {
  37. getData() {
  38. this.$u.api.couponList({
  39. grantType: '40',
  40. payAmount: this.price
  41. }).then(data=>{
  42. if (data.data && data.data.length) {
  43. this.get_coupon = true;
  44. }
  45. });
  46. }
  47. }
  48. };
  49. </script>
  50. <style lang="scss">
  51. .content {
  52. display: flex;
  53. flex-direction: column;
  54. justify-content: center;
  55. align-items: center;
  56. }
  57. .success-icon {
  58. font-size: 160upx;
  59. color: #ff4724;
  60. margin-top: 100upx;
  61. }
  62. .tit {
  63. font-size: 38upx;
  64. color: #303133;
  65. }
  66. .btn-group {
  67. padding-top: 100upx;
  68. }
  69. .mix-btn {
  70. margin-top: 30upx;
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. width: 600upx;
  75. height: 80upx;
  76. font-size: $font-lg;
  77. color: #fff;
  78. background-color: $base-color;
  79. border-radius: 10upx;
  80. &.hollow {
  81. background: #fff;
  82. color: #303133;
  83. border: 1px solid #ccc;
  84. }
  85. }
  86. .coupon-view {
  87. position: fixed;
  88. top: 40%;
  89. left: 50%;
  90. width: 400upx;
  91. height: 452upx;
  92. transform: translate(-50%, -50%);
  93. .coupon-bg {
  94. width: 400upx;
  95. height: 452upx;
  96. }
  97. .coupon-btn {
  98. position: absolute;
  99. bottom: 12upx;
  100. left: 50%;
  101. width: 240upx;
  102. transform: translateX(-50%);
  103. height: 60upx;
  104. font-size: 26upx;
  105. color: #fff;
  106. background: linear-gradient(#ff7f00, #ff6500);
  107. border-radius: 60upx;
  108. text-align: center;
  109. line-height: 60upx;
  110. }
  111. .close-icon {
  112. position: absolute;
  113. top: 0upx;
  114. right: 0;
  115. font-size: 32rpx;
  116. display: block;
  117. width: 32rpx;
  118. height: 32rpx;
  119. color: #999999;
  120. }
  121. }
  122. </style>