paySuccess.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view class="content">
  3. <image class="success-icon" src="../../static/img/paySuccess.png" mode=""></image>
  4. <text class="tit" v-if="type == 1">订单支付成功</text>
  5. <text class="tit" v-else>订单预约成功</text>
  6. <view class="btn-group">
  7. <navigator url="/pages/order/order?state=1" open-type="redirect" class="mix-btn">查看订单</navigator>
  8. <navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. type: 2 //1为兑换支付成功2为预购成功
  17. };
  18. },
  19. onLoad(opt) {
  20. // 保存订单号
  21. if ('type' in opt) {
  22. this.type = opt.type;
  23. }
  24. if (this.type == 1) {
  25. uni.setNavigationBarTitle({
  26. title: '兑换成功'
  27. });
  28. }
  29. if (this.type == 2) {
  30. uni.setNavigationBarTitle({
  31. title: '预约成功'
  32. });
  33. }
  34. },
  35. methods: {}
  36. };
  37. </script>
  38. <style lang="scss">
  39. .content {
  40. display: flex;
  41. flex-direction: column;
  42. justify-content: center;
  43. align-items: center;
  44. }
  45. .success-icon {
  46. margin-top: 100rpx;
  47. width: 302rpx;
  48. height: 320rpx;
  49. }
  50. .tit {
  51. margin-top: 40rpx;
  52. font-size: 32rpx;
  53. font-family: PingFang SC;
  54. font-weight: bold;
  55. color: #333333;
  56. }
  57. .btn-group {
  58. padding-top: 130rpx;
  59. display: flex;
  60. justify-content: flex-start;
  61. }
  62. .mix-btn {
  63. margin-top: 30upx;
  64. display: flex;
  65. align-items: center;
  66. justify-content: center;
  67. width: 301rpx;
  68. height: 78rpx;
  69. background: linear-gradient(0deg, #2e58ff, #32c6ff);
  70. border-radius: 10rpx;
  71. font-size: $font-lg;
  72. font-size: 30rpx;
  73. font-family: PingFang SC;
  74. font-weight: 500;
  75. color: #ffffff;
  76. &.hollow {
  77. margin-left: 36rpx;
  78. background: #fff;
  79. color: #438bed;
  80. border: 1px solid #438bed;
  81. }
  82. }
  83. </style>