crm-xcx/pages-todomessages/list/list.vue

<template>
	<view class="message-list-page">
		<!-- <view class="top-time-box white-wrap">昨天 21:00</view> -->
		<view class="list">
			<view class="message-item flex" v-for="item in list" :key="item.Id">
				<image :src="avatar" mode="aspectFill" style="width: 88rpx;height: 88rpx;"></image>
				<view class="message-content">
					<view style="color:#666;font-size: 12px;">审批小助手</view>
					<view class="message-card white-wrap" @click="handleGoDetail(item)">
						<view class="type">{{item.ApprovalInfo.Type}}</view>
						<view class="title">{{item.CompanyName}}</view>
						<view v-if="item.MessageType===3">
							<view class="info">{{item.Content}}</view>
							<view class="info">修改时间：{{item.CreateTime|formatTime}}</view>
						</view>
						<view v-else>
						<view class="info">申请销售：{{item.ApprovalInfo.ApplyName}}</view>
						<view class="info" v-if="item.statusName==='待审批'">提交时间：{{item.ApprovalInfo.ApplyTime|formatTime}}</view>
						<view class="info" v-else>审批时间：{{item.ApprovalInfo.ApprovalTime|formatTime}}</view>
						</view>
						<image :src="item.statusImg" mode="aspectFill" class="status-img"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {apiMessageList} from '@/api/message.js'
	export default {
		filters:{
			formatTime(e){
				return e.replace(/-/g,'.')
			}
		},
		data() {
			return {
				type: null, //类型对应的数字: 1客户(custome)、2合同(contract)、3用印(seal)
				typeName:null,//类型对应的英文 客户(custome)、合同(contract)、用印(seal)
				page: 1, //页码
				list: [],
				finished: false, //是否列表为最后一页
				
				avatar:'',// 头像
			}
		},
		onLoad(options) {
			this.initPage(options.type)
			this.getList()
		},
		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: {
			handleGoDetail(e){
				if(this.typeName==='custome'){
					uni.navigateTo({
						url:'/pages-approve/custome/detail?id='+e.CompanyApprovalId
					})
				}
				
				if(this.typeName==='contract'){
					uni.navigateTo({
						url:`/pages-approve/contract/detail?ContractApprovalId=0&ContractId=0&ContractApprovalRecordId=${e.CompanyApprovalId}`
					})
				}
				
				if(this.typeName==='seal'){
					uni.navigateTo({
						url:`/pages-approve/seal/detail?ContractApprovalId=0&ContractApprovalRecordId=${e.CompanyApprovalId}`
					})
				}
			},
			
			//获取列表数据
			async getList() {
				const res = await apiMessageList({
					SourceType: this.type,
					CurrentIndex: this.page
				})
				if (res.code === 200) {
					if(!res.data.List){
						this.finished=true
					}else{
						let arr=res.data.List.map(item=>{
							let statusImg='',statusName='';
							switch(item.ApprovalStatus){
								case 1:
									statusImg=require('../static/icon-2.png')
									statusName='待审批'
									break;
								case 2:
									statusImg=require('../static/icon-3.png')
									statusName='已审批'
									break;
								case 3:
									statusImg=require('../static/icon-4.png')
									statusName='已驳回'
									break
							}
							return {
								statusImg:statusImg,
								statusName:statusName,
								...item
							}
						})
						this.list = [...this.list, ...arr]
					}
					
				}
			},

			// 初始化界面
			initPage(type) {
				this.typeName=type
				let navBarTitle = ''
				const _this = this
				switch (type) {
					case '1':
						navBarTitle = '客户待审批'
						_this.type = 1
						_this.avatar=require('../../static/icon-1.png')
						break;
					case '2':
						navBarTitle = '合同待审批'
						_this.type = 2
						_this.avatar=require('../../static/icon-2.png')
						break;
					case '3':
						navBarTitle = '用印待审批'
						_this.type = 3
						_this.avatar=require('../../static/icon-3.png')
						break;
				}
				uni.setNavigationBarTitle({
					title: navBarTitle
				})
			}
		}
	}
</script>

<style lang="scss">
	.message-list-page {
		padding: 20rpx;
	}
	
	.top-time-box{
		margin-left: auto;
		margin-right: auto;
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 12px;
		text-align: center;
		border-radius: 25rpx;
	}
	.list{
		padding: 0 36rpx 0 19rpx;
		.message-item{
			margin-top: 60rpx;
		}
		.message-content{
			margin-left: 20rpx;
			flex: 1;
		}
		.message-card{
			margin-top: 20rpx;
			padding: 20rpx;
			border: 1px solid #EFEFEF;
			box-shadow: 0px 3rpx 12rpx rgba(175, 175, 175, 0.08);
			border-radius: 6px;
			position: relative;
			.type{
				color: #FFB005;
				font-weight: bold;
				&::before{
					content: '';
					display: inline-block;
					width: 28rpx;
					height: 28rpx;
					background-image: url(../static/icon-1.png);
					background-size: cover;
					margin-right: 20rpx;
					position: relative;
					top: 4rpx;
				}
			}
			.title{
				font-size: 16px;
				font-weight: bold;
				margin-top: 20rpx;
			}
			.info{
				margin-top: 20rpx;
			}
			.status-img{
				position: absolute;
				top: 0;
				right: 0;
				width: 145rpx;
				height: 145rpx;
			}
		}
	}
	
</style>