order-success-tips.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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. StaticUrl: this.$Static,
  40. isIphoneX:this.$store.state.isIphoneX,
  41. CustomBar:this.CustomBar,// 顶部导航栏高度
  42. }
  43. },
  44. filters:{
  45. NumFormat(value) {
  46. //处理金额
  47. if (value) {
  48. return Number(value).toFixed(2)
  49. } else {
  50. return '0.00'
  51. }
  52. }
  53. },
  54. onLoad(option) {
  55. this.initData(option)
  56. },
  57. methods:{
  58. initData(option){
  59. const data = JSON.parse(option.data)
  60. this.orderId = data.data.orderId
  61. this.payType = data.data.type
  62. this.amuntMoney = data.data.payAmount
  63. if(this.payType == 'success'){
  64. this.payStatus = true
  65. this.successText = '本次支付成功'
  66. }else{
  67. this.payStatus = false
  68. this.successText = '本次支付失败'
  69. }
  70. console.log(this.orderId)
  71. },
  72. toAgainPay(){
  73. this.$api.navigateBack(2)
  74. },
  75. details(){
  76. this.$api.redirectTo('/pages/user/order/order-details?type=share&orderId='+this.orderId)
  77. }
  78. },
  79. onShow() {
  80. }
  81. }
  82. </script>
  83. <style lang="scss">
  84. page{
  85. height: auto !important;
  86. }
  87. .container-cash{
  88. width: 100%;
  89. .container-wrapper{
  90. width:100%;
  91. height: auto;
  92. padding: 120rpx 24rpx 0 24rpx;
  93. box-sizing: border-box;
  94. .cash-icon{
  95. width: 100%;
  96. height: 260rpx;
  97. text-align: center;
  98. .icon-image{
  99. width: 260rpx;
  100. height: 260rpx;
  101. margin: 0 auto;
  102. display: block;
  103. }
  104. }
  105. .cash-text{
  106. width: 100%;
  107. height: 90rpx;
  108. box-sizing: border-box;
  109. padding: 0 50rpx;
  110. text-align: center;
  111. font-size: $font-size-26;
  112. color: $text-color;
  113. line-height: 44rpx;
  114. padding-bottom: 40rpx;
  115. .tx{
  116. color: $color-system;
  117. }
  118. }
  119. }
  120. .container-button{
  121. width: 100%;
  122. box-sizing: border-box;
  123. padding: 80rpx 75rpx;
  124. .btn{
  125. width: 100%;
  126. height: 90rpx;
  127. border-radius: 50rpx;
  128. line-height: 90rpx;
  129. box-sizing: border-box;
  130. text-align: center;
  131. font-size: $font-size-26;
  132. color: #FFFFFF;
  133. margin: 24rpx 0;
  134. &.btn-open{
  135. background:#FFFFFF;
  136. border: 1px solid $color-system;
  137. color: $color-system;
  138. }
  139. &.btn-home{
  140. background:$btn-confirm;
  141. }
  142. }
  143. }
  144. }
  145. </style>