paySuccess.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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" v-if="isshow">订单支付成功: <text>¥{{ money }}</text></text>
  6. <text class="tit" v-if="!isshow">支付成功</text></text>
  7. <!-- <view class="btn-group">
  8. <navigator :url="'/pages/order/orderDetail?id='+orderId" open-type="redirect" class="mix-btn">查看订单</navigator>
  9. <navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
  10. </view> -->
  11. <view class="btn-wrapper" >
  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. isshow: true
  23. }
  24. },
  25. onLoad(opt) {
  26. // 保存订单号
  27. this.orderId = opt.orderid;
  28. // 保存金额
  29. this.money = opt.mun
  30. if(opt.isshow) {
  31. this.isshow = false
  32. }
  33. },
  34. methods: {
  35. }
  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. font-size: 160upx;
  47. color: #5dbc7c;
  48. margin-top: 100upx;
  49. }
  50. .tit{
  51. padding-top: 40rpx;
  52. padding-bottom: 130rpx;
  53. font-size: 32rpx;
  54. color: #303133;
  55. font-size: 32rpx;
  56. font-weight: bold;
  57. color: #333333;
  58. line-height: 1;
  59. text {
  60. font-size: 36rpx;
  61. font-weight: bold;
  62. color: #333333;
  63. line-height: 1;
  64. }
  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. .okimg {
  87. margin-top: 100rpx;
  88. width: 302rpx;
  89. height: 302rpx;
  90. }
  91. .btn-wrapper {
  92. display: flex;
  93. .look-btn {
  94. width: 301rpx;
  95. height: 78rpx;
  96. background: #ee2f72;
  97. text-align: center;
  98. line-height: 78rpx;
  99. border-radius: 10rpx;
  100. color: #fff;
  101. margin-right: 37rpx;
  102. }
  103. .bank {
  104. width: 301rpx;
  105. height: 78rpx;
  106. text-align: center;
  107. line-height: 78rpx;
  108. background: #FFFFFF;
  109. border: 2px solid #ee2f72;
  110. border-radius: 10rpx;
  111. color: #ee2f72;
  112. }
  113. }
  114. </style>