crm-xcx/pages-approve/custome/list.vue

<template>
	<view>
		<van-sticky>
			<view class="top-wrap">
				<view @click="handleGoSearch">
					<van-search disabled use-left-icon-slot shape="round" placeholder="客户名称/社会信用码">
						<view slot="left-icon">
							<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
						</view>
					</van-search>
				</view>
				<van-tabs swipeable id="tabs" :active="status" title-active-color="#3385FF" color="#3385FF" @change="typeChange">
					<van-tab title="待审批" name="待审批"></van-tab>
					<van-tab title="已审批" name="已审批"></van-tab>
				</van-tabs>
			</view>
		</van-sticky>
		<van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0"/>
		<view class="list-wrap" v-else>
			<approve-list-item v-for="item in list" :key="item.CompanyApprovalId" :data="item"></approve-list-item>
		</view>
	</view>
</template>

<script>
	import {apiCustomeList} from '@/api/approve/custome.js'
	import approveListItem from '../components/approveListItem.vue'
	export default {
		components: {
			approveListItem
		},
		data() {
			return {
				status: '待审批',
				list:[],
				page:1,
				finished:false,
			}
		},
		onShow() {
			this.getList()
			this.selectComponent('#tabs').resize();// 解决初始渲染 vant tab 底部条
		},
		onPullDownRefresh() {
			this.page=1
			this.finished=false
			this.list=[]
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		onReachBottom() {
			if(this.finished) return
			this.page++
			this.getList()
		},
		methods: {
			// 去搜索
			handleGoSearch() {
				uni.navigateTo({
					url: '../search/index?type=custome'
				})
			},
			
			
			typeChange(e){
				this.status=e.detail.name
				this.page=1
				this.finished=false
				this.list=[]
				this.getList()
			},
				
			
			//获取列表数据
			async getList(){
				const res=await apiCustomeList({
					CurrentIndex:this.page,
					Status:this.status,
					KeyWord:''
				})
				if(res.code===200){
					if(!res.data.List||res.data.List.length===0){
						this.finished=true
					}else{
						let arr=res.data.List.map(item=>{
							//申请类型：申请类型：1:试用->正式,2:冻结—>试用,3:试用延期,4:原销售申请领取流失客户，5:正式客户申请服务更新
							let applyType=''
							switch(item.ApplyMethod){
								case 1:
									applyType='试用转正式'
									break;
								case 2:
									applyType='冻结转试用'
									break;
								case 3:
									applyType='试用延期'
									break;
								case 4:
									applyType='原销售申领'
									break;
								case 5:
									applyType='服务更新'
									break;	
							}
							return {
								title:item.CompanyName,
								saller:item.ApplyRealName,
								submitTime:item.ApprovalTime,
								approveTime:item.ApproveTime,
								backTime:'',
								cancelTime:'',
								status:item.ApproveStatus,
								applyType:applyType,
								id:item.CompanyApprovalId,
								type:'custome'
							}
						})
						this.list=[...this.list,...arr]
					}
				}
			},
			
		},
	}
</script>

<style lang="scss">
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		display: block;
		position: relative;
		top: 4rpx;
		margin-right: 10rpx;
	}

	.list-wrap {
		padding: 20rpx;
	}
</style>