index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <view class="details-main">
  3. <view class="header-bgc">
  4. <view class="flex_c_s">
  5. <view>
  6. <view class="header-title">资质认证</view>
  7. <view class="header-text">请选择认证的分类,审核通过后即可去接单</view>
  8. </view>
  9. <view class="header-icon"></view>
  10. </view>
  11. <view class="header-card flex_c_c">
  12. <view class="header-card-icon"></view>
  13. <view class="header-card-content">
  14. <view class="header-card-title">去资质认证</view>
  15. <view class="header-card-desc">请勿选择跨度太大的服务避免审核失败</view>
  16. </view>
  17. <up-icon name="arrow-right" color="#7B7B7B" size="14"></up-icon>
  18. </view>
  19. </view>
  20. <view class="content-main">
  21. <view class="content-box">
  22. <view class="content-title">认证流程</view>
  23. <view class="content-list">
  24. <view v-for="(item,index) in list" :key="item.key" class="list-item">
  25. <view class="flex_c_l">
  26. <view class="list-icon flex_c_c">{{ item.key }}</view>
  27. <view class="list-rigth">
  28. <view class="list-name">{{ item.name }}</view>
  29. <view class="list-text">{{ item.text }}</view>
  30. </view>
  31. </view>
  32. <view class="list-line" v-if="index < 3 "></view>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. </template>
  39. <script setup>
  40. import { ref } from 'vue';
  41. const isRefreshing = ref(false)
  42. const list = [
  43. {
  44. name: '申请资质认证',
  45. text: '在线上发起您的资质认证',
  46. key: 1
  47. },
  48. {
  49. name: '选择认证类目,填选个人信息',
  50. text: '选择您擅长的认证类型',
  51. key: 2
  52. },
  53. {
  54. name: '认证审核中',
  55. text: '审核员根据您提交的信息进行资质审核',
  56. key: 3
  57. },
  58. {
  59. name: '认证完成,开始接单',
  60. text: '认证通过开启接单,高效又省心',
  61. key: 4
  62. },
  63. ]
  64. </script>
  65. <style lang="scss" scoped>
  66. @import "./index.scss";
  67. </style><template>
  68. <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
  69. class="details-main" @scrolltolower="scrolltolower" scroll-y>
  70. <view class="header-box flex_c_c_f hr-solid">
  71. <view class="price-img"></view>
  72. <view class="header-title">余额提现-到支付宝(1942)</view>
  73. <view class="header-price">1.10</view>
  74. </view>
  75. <view class="stauts-box hr-solid">
  76. <view class="font-30-333 stauts-text ">当前状态</view>
  77. <view>
  78. <up-steps current="2" direction="column" dot>
  79. <up-steps-item title="发起提现" desc="2025年6月9日 12:23">
  80. </up-steps-item>
  81. <up-steps-item title="银行处理中" desc=" ">
  82. </up-steps-item>
  83. <up-steps-item title="到账" desc="2025年6月9日 13:23"></up-steps-item>
  84. </up-steps>
  85. </view>
  86. </view>
  87. <view class="list-box">
  88. <view v-for="item in list" :key="item.key" class="list-item">
  89. <view class="font-30-333 list-name">{{ item.name }}</view>
  90. <view class="font-30-333">{{ item.key }}</view>
  91. </view>
  92. </view>
  93. </scroll-view>
  94. </template>
  95. <script setup>
  96. import { ref } from 'vue';
  97. const isRefreshing = ref(false)
  98. const list = [
  99. {
  100. name: '提现金额',
  101. key: '1'
  102. },
  103. {
  104. name: '服务费',
  105. key: '1'
  106. },
  107. {
  108. name: '申请时间',
  109. key: '1'
  110. },
  111. {
  112. name: '到账时间',
  113. key: '1'
  114. },
  115. {
  116. name: '提现银行',
  117. key: '1'
  118. },
  119. {
  120. name: '提现单号',
  121. key: '1'
  122. },
  123. ]
  124. const onCustomRefresh = () => {
  125. isRefreshing.value = true;
  126. setTimeout(() => {
  127. isRefreshing.value = false;
  128. }, 1000);
  129. };
  130. const scrolltolower = () => {
  131. };
  132. </script>
  133. <style lang="scss" scoped>
  134. @import "./index.scss";
  135. </style>