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

<template>
	<scroll-view scroll-y="true" :scroll-into-view="scrollViewId" @scrolltoupper="onScrollTop" style="height: 100vh;">
	<view class="message-list-page">
		<view class="list">
			<view class="message-item" v-for="item in list" :key="item.Id" :id="`msg${item.Id}`">
				<view class="top-time-box white-wrap">{{item.msgTime}}</view>
				<view class="flex">
				<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)">
                  <!-- 问答 -->
                  <template v-if="type === 5">
                     <view class="title">{{item.ApprovalInfo.Title}}</view>
                     <view class="info">提问人：{{item.ApprovalInfo.ApplyName}}</view>
                     <view class="info">提问时间：{{item.ApprovalInfo.ApplyTime|formatTime}}</view>
                     <image src="@/static/icon-distribute.png" mode="aspectFill" class="new-status" v-if="item.ApprovalStatus === 1"></image>
                  </template>
                  
                  <!-- 评论 -->
				  <!-- 由于问答评论和视频社区的评论都在一个入口所以根据list返回数据的sourceType来区分 6:问答社区 7:视频社区 -->
                  <template v-else-if="type === 6">
					<template v-if="item.SourceType===6">
						<view class="title">{{item.ApprovalInfo.Title}}</view>
						<view class="info">所属提问：{{item.ApprovalInfo.Content}}</view>
						<view class="info">评论人：{{item.ApprovalInfo.ApplyName}}</view>
						<view class="info">客户信息：{{item.ApprovalInfo.CompanyName}}</view>
						<view class="info">评论时间：{{item.ApprovalInfo.ApplyTime|formatTime}}</view>
						<image src="@/static/icon-look.png" mode="aspectFill" class="new-status" v-if="item.ApprovalStatus === 1"></image>
                     </template>
					 <template v-if="[7,8].includes(item.SourceType)">
						<view class="title">{{item.ApprovalInfo.Title}}</view>
						<view class="info">视频分类：{{item.ApprovalInfo.MessageSource}}</view>
						<view class="info">视频标题：{{item.ApprovalInfo.Content}}</view>
						<view class="info">所属{{item.SourceType==7?'标签':'品种'}}：{{item.ApprovalInfo.Extra}}</view>
						<view class="info">评论人：{{item.ApprovalInfo.ApplyName}}</view>
						<view class="info">客户信息：{{item.ApprovalInfo.CompanyName}}</view>
						<view class="info">评论时间：{{item.ApprovalInfo.ApplyTime|formatTime}}</view>
						<image src="@/static/icon-look.png" mode="aspectFill" class="new-status" v-if="item.ApprovalStatus === 1"></image>
                     </template>
                  </template>

				  <!-- 出差申请 -->
                  <template v-else-if="type === 10">
					<view class="businessTrip-type">出差申请</view>
					<view class="info">目的地： {{item.BusinessTripInfo.Province}}{{item.BusinessTripInfo.City}}</view>
					<view class="info">出差事由： {{item.BusinessTripInfo.Reason}}</view>
					<template v-if="item.BusinessTripInfo">
						<view class="info" v-if="item.BusinessTripInfo.Status==='待审批'">提交时间：{{item.BusinessTripInfo.CreateTime|formatTime}}</view>
                    	<view class="info" v-else>审批时间：{{item.BusinessTripInfo.ApproveTime|formatTime}}</view>
					</template>
					<image :src="item.statusImg" mode="aspectFill" class="status-img"></image>
				  </template>


                  <template v-else> 
                     <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>
                  </template>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
	</scroll-view>
</template>

<script>
	import {apiMessageList} from '@/api/message.js'
	export default {
		filters:{
			formatTime(e){
				if(e==='0001-01-01T00:00:00Z'){
					return ''
				}else{
					return e.replace(/T/g,' ').replace(/\+08:00/g,' ').replace(/-/g,'.')
				}
			}
		},
		data() {
			return {
				scrollViewId:'',

				type: null, //类型对应的数字: 1客户(custome)、2合同(contract)、3用印(seal) 5问答 6问答评论 10 出差申请
				typeName:null,//类型对应的英文 客户(custome)、合同(contract)、用印(seal) question questionComment
				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: {
			onScrollTop(){
				if(this.finished) return
				this.page++
				this.getList()
			},

			handleGoDetail(e){
				const urlMap = {
				'custome': '/pages-approve/custome/detail?id='+e.CompanyApprovalId,
				'contract': `/pages-approve/contract/detail?ContractApprovalId=0&ContractId=0&ContractApprovalRecordId=${e.CompanyApprovalId}`,
				'seal': `/pages-approve/seal/detail?ContractApprovalId=0&ContractApprovalRecordId=${e.CompanyApprovalId}`,
				'question':`/pages-question/detail/index?type=question&id=${e.CompanyApprovalId}`,
				'questionComment':`/pages-question/detail/index?type=comment&id=${e.CompanyApprovalId}`,
				'businessTrip':'/pages-approve/businessTrip/detail?id='+e.CompanyApprovalId,
				}

				// 如果是questionComment 则如果是视频则跳转到视频
				if(this.typeName=='questionComment'&&[7,8].includes(e.SourceType)){
					uni.navigateTo({url:`/pages-video/comment/list?id=${e.CompanyApprovalId}&source=${e.SourceType===7?2:3}`})
					return
				}
				
				uni.navigateTo({url:urlMap[this.typeName]})
			},
			
			//获取列表数据
			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='';
							if(item.SourceType==10&&item.BusinessTripInfo){
								switch(item.BusinessTripInfo.Status){
									case '待审批':
										statusImg=require('../static/icon-2.png')
										statusName='待审批'
										break;
									case '已审批':
										statusImg=require('../static/icon-3.png')
										statusName='已审批'
										break;
									case '已驳回':
										statusImg=require('../static/icon-4.png')
										statusName='已驳回'
										break
								}
							}else{
								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
								}
							}
							

                     

							// 处理消息时间
							let msgTime=this.handleMsgTime(item.CreateTime)
							return {
								statusImg,
								statusName,
								...item,
								msgTime:msgTime
							}
						})
						this.$nextTick(()=>{
							this.scrollViewId=`msg${res.data.List[0].Id}`
						})
						
						let reArr=arr.reverse()
						this.list = [...reArr,...this.list]
					}
					
				}
			},

			handleMsgTime(e){
				let timeStr=''
				// 获取今日
				const todayTime=new Date()


				const time=new Date(e)
				const year=time.getFullYear()
				const month = time.getMonth() + 1 > 9 ? time.getMonth()+1 : '0'+(time.getMonth()+1);
				const day = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
				const hours=time.getHours() > 9 ? time.getHours():'0'+time.getHours()
				const minutes=time.getMinutes()>9 ?time.getMinutes():'0'+time.getMinutes()
				const seconds=time.getSeconds()>9?time.getSeconds():'0'+time.getSeconds()

				if(year!=todayTime.getFullYear()||(time.getMonth()!=todayTime.getMonth())){
					timeStr=`${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
				}else if(time.getDate()+1==todayTime.getDate()){
					//昨天
					timeStr=`昨天 ${hours}:${minutes}:${seconds}`
				}else if(time.getDate()==todayTime.getDate()){
					timeStr=`今天 ${hours}:${minutes}:${seconds}`
				}else{
					timeStr=`${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
				}
				

				return timeStr
			},

			// 初始化界面
			initPage(type) {
				
				let navBarTitle = ''
				const _this = this
				switch (type) {
					case '1':
						navBarTitle = '客户待审批'
						_this.type = 1
						_this.typeName='custome'
						_this.avatar=require('../../static/icon-1.png')
						break;
					case '2':
						navBarTitle = '合同待审批'
						_this.type = 2
						_this.typeName='contract'
						_this.avatar=require('../../static/icon-2.png')
						break;
					case '3':
						navBarTitle = '用印待审批'
						_this.type = 3
						_this.typeName='seal'
						_this.avatar=require('../../static/icon-3.png')
						break;
					case '5':
						navBarTitle = '待查看问答'
						_this.type = 5
						_this.typeName='question'
						_this.avatar=require('../../static/icon-question.png')
						break;
					case '6':
						navBarTitle = '待查看评论'
						_this.type = 6
						_this.typeName='questionComment'
						_this.avatar=require('../../static/icon-comment.png')
						break;
					case '10':
						navBarTitle = '出差审批'
						_this.type = 10
						_this.typeName='businessTrip'
						_this.avatar=require('../../static/icon-2.png')
						break;
				}
				uni.setNavigationBarTitle({
					title: navBarTitle
				})
			}
		}
	}
</script>

<style lang="scss">
	.message-list-page {
		padding: 20rpx;
	}
	
	
	.list{
		padding: 0 36rpx 0 19rpx;
		.message-item{
			margin-top: 50rpx;
		}
		.top-time-box{
			display: inline-block;
			padding: 0 20rpx;
			min-width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 12px;
			text-align: center;
			border-radius: 25rpx;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			margin-bottom: 40rpx;
		}
		
		.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;
				}
			}
			.businessTrip-type{
				color: #3385FF;
				font-size: 32rpx;
				&::before{
					content: '';
					display: inline-block;
					width: 32rpx;
					height: 22rpx;
					background-image: url(../static/icon-7.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,.new-status{
				position: absolute;
				right: 0;
				width: 145rpx;
				height: 145rpx;
            &.status-img {
               top: 0;
            }
            &.new-status {
               bottom: 0;
            }
			}
		}
	}
	
</style>