success-tips.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <view class="container cashier">
  3. <cu-custom :navbar-data='nvabarData'></cu-custom>
  4. <view class="container-cash clearfix" :style="{marginTop:CustomBar+'px'}">
  5. <view class="container-wrapper">
  6. <view class="cash-icon">
  7. <image class="icon-image" :src="staticUrl + '/icon/icon-paywring@2x.png'" mode=""></image>
  8. </view>
  9. <view class="cash-text">
  10. 大额银联转账耗时较久,大致需要 <text class="tx">5-15分钟</text> 才能
  11. 到账成功。后续您可在订单详情页面查看订单的
  12. 已支付金额和订单状态。
  13. </view>
  14. </view>
  15. <view class="container-button">
  16. <view class="btn btn-home" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">回到首页</view>
  17. <view class="btn btn-open" @click="details">查看订单</view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default{
  24. data(){
  25. return{
  26. orderId:0,
  27. nvabarData: { //顶部自定义导航
  28. haveBack:false,
  29. haveHome:true,
  30. showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
  31. showSearch: 0,
  32. title: '支付结果', // 导航栏 中间的标题
  33. textLeft:this.$store.state.isIphone
  34. },
  35. payType:'',
  36. payStatus:false,
  37. amuntMoney:0,
  38. successText:'本次支付失败',
  39. isIphoneX:this.$store.state.isIphoneX,
  40. CustomBar:this.CustomBar,// 顶部导航栏高度
  41. }
  42. },
  43. filters:{
  44. NumFormat(value) {
  45. //处理金额
  46. if (value) {
  47. return Number(value).toFixed(2)
  48. } else {
  49. return '0.00'
  50. }
  51. }
  52. },
  53. onLoad(option) {
  54. this.initData(option)
  55. },
  56. methods:{
  57. initData(option){
  58. const data = JSON.parse(option.data)
  59. this.orderId = data.data.orderId
  60. this.payType = data.data.type
  61. this.amuntMoney = data.data.payAmount
  62. if(this.payType == 'success'){
  63. this.payStatus = true
  64. this.successText = '本次支付成功'
  65. }else{
  66. this.payStatus = false
  67. this.successText = '本次支付失败'
  68. }
  69. console.log(this.orderId)
  70. },
  71. toAgainPay(){
  72. this.$api.navigateBack(2)
  73. },
  74. details(){
  75. this.$api.redirectTo('/pages/user/order/order-details?type=share&orderId='+this.orderId)
  76. }
  77. },
  78. onShow() {
  79. }
  80. }
  81. </script>
  82. <style lang="scss">
  83. page{
  84. height: auto !important;
  85. }
  86. .container-cash{
  87. width: 100%;
  88. .container-wrapper{
  89. width:100%;
  90. height: auto;
  91. padding: 120rpx 24rpx 0 24rpx;
  92. box-sizing: border-box;
  93. .cash-icon{
  94. width: 100%;
  95. height: 260rpx;
  96. text-align: center;
  97. .icon-image{
  98. width: 260rpx;
  99. height: 260rpx;
  100. margin: 0 auto;
  101. display: block;
  102. }
  103. }
  104. .cash-text{
  105. width: 100%;
  106. height: 90rpx;
  107. box-sizing: border-box;
  108. padding: 0 50rpx;
  109. text-align: center;
  110. font-size: $font-size-26;
  111. color: $text-color;
  112. line-height: 44rpx;
  113. padding-bottom: 40rpx;
  114. .tx{
  115. color: $color-system;
  116. }
  117. }
  118. }
  119. .container-button{
  120. width: 100%;
  121. box-sizing: border-box;
  122. padding: 80rpx 75rpx;
  123. .btn{
  124. width: 100%;
  125. height: 90rpx;
  126. border-radius: 50rpx;
  127. line-height: 90rpx;
  128. box-sizing: border-box;
  129. text-align: center;
  130. font-size: $font-size-26;
  131. color: #FFFFFF;
  132. margin: 24rpx 0;
  133. &.btn-open{
  134. background:#FFFFFF;
  135. border: 1px solid $color-system;
  136. color: $color-system;
  137. }
  138. &.btn-home{
  139. background:$btn-confirm;
  140. }
  141. }
  142. }
  143. }
  144. </style>