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

<template>
    <view>
        <van-sticky>
			<view class="top-wrap">
				<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>
			<view class="item white-wrap" v-for="item in list" :key="item.id">
				<view class="title flex">
					<image src="../../static/man.png" mode="aspectFill" class="icon"></image>
					<view>{{item.title}}</view>
				</view>
				<view class="content">
					<view class="info">申请类型：{{item.applyType}}</view>
					<view class="info">申请销售：{{item.saller}}</view>
					<view class="info">提交时间：{{item.submitTime|formatTime}}</view>
				</view>
				<view class="status approve-list-status-wait" v-if="item.status==='待审批'">待审批</view>
			</view>
		</view>
    </view>
</template>

<script>
export default {
    data () {
        return {
			status: '待审批',
			list:[],
			page:1,
			finished:false,
		}
    },
	onLoad(options) {
		this.getList()
	},
    onShow() {
	    this.selectComponent('#tabs').resize();// 解决初始渲染 vant tab 底部条
	},
    methods: {
        typeChange(e){
			this.status=e.detail.name
			this.page=1
			this.finished=false
			this.list=[]
			this.getList()
		},

        async getList(){
			let arr=[
				{
					title:"标题",
					saller:'销售一',
					submitTime:'',
					approveTime:'',
					backTime:'',
					cancelTime:'',
					status:'待审批',
					applyType:'线上路演',
					id:1,
					type:'activity'
				}
			]
			this.list=arr
        }
    }
}
</script>

<style lang="scss" scoped>
.list-wrap {
	padding: 20rpx;
	.item {
		padding: 30rpx;
		box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
		border-radius: 8px;
		margin-bottom: 20rpx;

		.title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 30rpx;

			.icon {
				width: 31rpx;
				height: 34rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
				position: relative;
				top: 4rpx;
			}
		}

		.content {
			font-size: 14px;
			color: #666;
			.info {
				margin-bottom: 16rpx;
			}

			.info:last-child {
				margin-bottom: 0;
			}
		}

		.status {
			text-align: right;
		}
	}
}
</style>