paySuccess.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="content">
  3. <!-- <text class="success-icon iconfont iconroundcheck"></text> -->
  4. <image src="../../static/img/payok.png" mode="" class="okimg"></image>
  5. <text class="tit">订单支付成功: <text>¥{{ money }}</text></text>
  6. <!-- <view class="btn-group">
  7. <navigator :url="'/pages/order/orderDetail?id='+orderId" 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 class="btn-wrapper">
  11. <navigator :url="'/pages/order/orderDetail?id='+orderId" open-type="redirect" class="look-btn">查看订单</navigator>
  12. <navigator url="/pages/index/index" open-type="switchTab" class="bank">返回首页</navigator>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. orderId:'',
  21. money: ''
  22. }
  23. },
  24. onLoad(opt) {
  25. // 保存订单号
  26. this.orderId = opt.orderid;
  27. // 保存金额
  28. this.money = opt.mun
  29. },
  30. methods: {
  31. }
  32. }
  33. </script>
  34. <style lang='scss'>
  35. .content{
  36. display: flex;
  37. flex-direction: column;
  38. justify-content: center;
  39. align-items: center;
  40. }
  41. .success-icon{
  42. font-size: 160upx;
  43. color: #5dbc7c;
  44. margin-top: 100upx;
  45. }
  46. .tit{
  47. padding-top: 40rpx;
  48. padding-bottom: 130rpx;
  49. font-size: 32rpx;
  50. color: #303133;
  51. font-size: 32rpx;
  52. font-weight: bold;
  53. color: #333333;
  54. line-height: 1;
  55. text {
  56. font-size: 36rpx;
  57. font-weight: bold;
  58. color: #333333;
  59. line-height: 1;
  60. }
  61. }
  62. .btn-group{
  63. padding-top: 100upx;
  64. }
  65. .mix-btn {
  66. margin-top: 30upx;
  67. display: flex;
  68. align-items: center;
  69. justify-content: center;
  70. width: 600upx;
  71. height: 80upx;
  72. font-size: $font-lg;
  73. color: #fff;
  74. background-color: $base-color;
  75. border-radius: 10upx;
  76. &.hollow{
  77. background: #fff;
  78. color: #303133;
  79. border: 1px solid #ccc;
  80. }
  81. }
  82. .okimg {
  83. margin-top: 100rpx;
  84. width: 302rpx;
  85. height: 302rpx;
  86. }
  87. .btn-wrapper {
  88. display: flex;
  89. .look-btn {
  90. width: 301rpx;
  91. height: 78rpx;
  92. background: #901b21;
  93. text-align: center;
  94. line-height: 78rpx;
  95. border-radius: 10rpx;
  96. color: #fff;
  97. margin-right: 37rpx;
  98. }
  99. .bank {
  100. width: 301rpx;
  101. height: 78rpx;
  102. text-align: center;
  103. line-height: 78rpx;
  104. background: #FFFFFF;
  105. border: 2px solid #901B21;
  106. border-radius: 10rpx;
  107. color: #901b21;
  108. }
  109. }
  110. </style>