list.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view>
  3. <van-sticky>
  4. <view class="top-wrap">
  5. <view @click="handleGoSearch">
  6. <van-search disabled use-left-icon-slot shape="round" placeholder="客户名称/社会信用码">
  7. <view slot="left-icon">
  8. <image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
  9. </view>
  10. </van-search>
  11. </view>
  12. <van-tabs swipeable id="tabs" :active="status" title-active-color="#3385FF" color="#3385FF" @change="typeChange">
  13. <van-tab title="待审批" name="待审批"></van-tab>
  14. <van-tab title="已审批" name="已审批"></van-tab>
  15. </van-tabs>
  16. </view>
  17. </van-sticky>
  18. <van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0"/>
  19. <view class="list-wrap" v-else>
  20. <approve-list-item v-for="item in list" :key="item.CompanyApprovalId" :data="item"></approve-list-item>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. import {apiCustomeList} from '@/api/approve/custome.js'
  26. import approveListItem from '../components/approveListItem.vue'
  27. export default {
  28. components: {
  29. approveListItem
  30. },
  31. data() {
  32. return {
  33. status: '待审批',
  34. list:[],
  35. page:1,
  36. finished:false,
  37. }
  38. },
  39. onShow() {
  40. this.getList()
  41. this.selectComponent('#tabs').resize();// 解决初始渲染 vant tab 底部条
  42. },
  43. onPullDownRefresh() {
  44. this.page=1
  45. this.finished=false
  46. this.list=[]
  47. this.getList()
  48. setTimeout(()=>{
  49. uni.stopPullDownRefresh()
  50. },1500)
  51. },
  52. onReachBottom() {
  53. if(this.finished) return
  54. this.page++
  55. this.getList()
  56. },
  57. methods: {
  58. // 去搜索
  59. handleGoSearch() {
  60. uni.navigateTo({
  61. url: '../search/index?type=custome'
  62. })
  63. },
  64. typeChange(e){
  65. this.status=e.detail.name
  66. this.page=1
  67. this.finished=false
  68. this.list=[]
  69. this.getList()
  70. },
  71. //获取列表数据
  72. async getList(){
  73. const res=await apiCustomeList({
  74. CurrentIndex:this.page,
  75. Status:this.status,
  76. KeyWord:''
  77. })
  78. if(res.code===200){
  79. if(!res.data.List||res.data.List.length===0){
  80. this.finished=true
  81. }else{
  82. let arr=res.data.List.map(item=>{
  83. //申请类型:申请类型:1:试用->正式,2:冻结—>试用,3:试用延期,4:原销售申请领取流失客户,5:正式客户申请服务更新
  84. let applyType=''
  85. switch(item.ApplyMethod){
  86. case 1:
  87. applyType='试用转正式'
  88. break;
  89. case 2:
  90. applyType='冻结转试用'
  91. break;
  92. case 3:
  93. applyType='试用延期'
  94. break;
  95. case 4:
  96. applyType='原销售申领'
  97. break;
  98. case 5:
  99. applyType='服务更新'
  100. break;
  101. }
  102. return {
  103. title:item.CompanyName,
  104. saller:item.ApplyRealName,
  105. submitTime:item.ApprovalTime,
  106. approveTime:item.ApproveTime,
  107. backTime:'',
  108. cancelTime:'',
  109. status:item.ApproveStatus,
  110. applyType:applyType,
  111. id:item.CompanyApprovalId,
  112. type:'custome'
  113. }
  114. })
  115. this.list=[...this.list,...arr]
  116. }
  117. }
  118. },
  119. },
  120. }
  121. </script>
  122. <style lang="scss">
  123. .search-icon {
  124. width: 40rpx;
  125. height: 40rpx;
  126. display: block;
  127. position: relative;
  128. top: 4rpx;
  129. margin-right: 10rpx;
  130. }
  131. .list-wrap {
  132. padding: 20rpx;
  133. }
  134. </style>