crm-xcx/pages-approve/seal/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 id="tabs" :active="status" title-active-color="#3385FF" color="#3385FF" @change="typeChange">
					<van-tab :title="item" :name="item" v-for="item in tabList" :key="item"></van-tab>
				</van-tabs>
			</view>
		</van-sticky>
		<van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0" />
		<view class="list" v-else>
			<approve-list-item v-for="item in list" :key="item" :data="item"></approve-list-item>
		</view>
		
		<image src="../static/seal-icon.png" mode="aspectFill" class="add-btn" @click="handleGoApplySeal" v-if="showAddSeal"></image>
	</view>

</template>

<script>
	import {apiSealList,apiSealApproveList} from '@/api/approve/seal.js'
	import approveListItem from '../components/approveListItem.vue'
	export default {
		components:{
			approveListItem
		},
		computed:{
			showAddSeal(){
				// 只有销售和合规能有此按钮
				let RoleTypeCode=this.$store.state.userInfo.RoleTypeCode
				if(RoleTypeCode==='ficc_seller'||RoleTypeCode==='rai_seller'||RoleTypeCode==='compliance'||RoleTypeCode==='ficc_group'||RoleTypeCode==='rai_group'){
					return true
				}else{
					return false
				}
			}
		},
		data() {
			return {
				tabList:[],
				status: '待审批',
				list:[],
				page:1,
				finished:false,
			}
		},
		onLoad() {
			this.initTabs()
		},
		onShow() {
			this.list=[]
			this.page=1
			this.getList()
			this.$nextTick(()=>{
				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: {
			//初始化tab
			initTabs(){
				// ficc销售 权益销售
				const RoleTypeCode=this.$store.state.userInfo.RoleTypeCode
				if(RoleTypeCode==='ficc_seller'||RoleTypeCode==='rai_seller'||RoleTypeCode==='ficc_group'||RoleTypeCode==='rai_group'||RoleTypeCode==='compliance'){
					this.tabList=['待审批','处理中','已审批','已作废','已撤回']
					this.status='待审批'
				}
				// ficc管理员 权益管理员  合规compliance
				if(RoleTypeCode==='ficc_admin'||RoleTypeCode==='rai_admin'||RoleTypeCode==='admin'){
					this.tabList=['待审批','处理中','已审批','已作废']
					this.status='待审批'
				}
			},
			
			//去添加用印申请、
			handleGoApplySeal(){
				uni.navigateTo({
					url:'/pages-approve/seal/addSeal'
				})
			},
			
			// 去搜索
			handleGoSearch() {
				uni.navigateTo({
					url: '../search/index?type=seal'
				})
			},
			
			typeChange(e){
				this.status=e.detail.name
				this.page=1
				this.finished=false
				this.list=[]
				this.getList()
			},
			
			//获取列表数据
			async getList(){
				let res=null
				if(this.status==='已撤回'){
					res=await apiSealList({
						CurrentIndex:this.page,
						Status:this.status,
						Keyword:''
					})
				}else{
					res=await apiSealApproveList({
						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=>{
							return {
								title:item.CompanyName,
								saller:item.UserName,
								submitTime:this.status==='处理中'?item.ModifyTime:item.CreateTime,
								approveTime:item.ApproveTime,
								backTime:item.ModifyTime,
								cancelTime:item.InvalidTime,
								status:item.Status,
								applyType:item.SealType,
								ContractApprovalId:item.ContractApprovalId,
								ContractApprovalRecordId:item.ContractApprovalRecordId,
								type:'seal'
							}
						})
						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{
		padding: 20rpx;
	}
	.add-btn{
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		bottom: 102rpx;
		right: 34rpx;
		z-index: 100;
	}
</style>