dev/dcp-app-gate/pages/service/others/communication.vue

<template>
	<view class="communication">
		<view class="bg"></view>
		<!-- 页面头部 -->
		<u-navbar 
			back-icon-color="#fff"
			:back-text="$t('common.Back')" 
			:is-back="true" 
			:background="{background:'#1777FE'}"
			:back-text-style="{color:'#fff'}" 
			:border-bottom="true"
			title-color="#fff"
			:title="title"
			:custom-back="back"
			>
			<!-- <view slot="right" class="edit" @click="editMyAdvice">{{$t('common.edit')}}</view> -->
		</u-navbar>
		<!-- 列表 -->
		<view class="tabs">
			<view class="item" v-for="(item,index) in tabs" :key="index">
				<uni-swipe-action style="width:100%">
					<uni-swipe-action-item :right-options="options" @click="deleteInfo(index,item)">
						<view class="jtimg" @click="replyInfo(item)"><image class="img" :src="item.src?item.src:defaultImg" mode="widthFix"></image></view>
						<view class="jtinfo">
							<view class="label"   @click="replyInfo(item)">
								<!-- <text class="msgflag" v-if="!item.interactiveMessageInfo">●</text> -->
								<text class="text">{{$t(item.senderName)}}</text>
							</view>
							<view class="date"    @click="replyInfo(item)">{{formatDate(item.createDate)}}</view>
							<view class="jtques"  @click="replyInfo(item)" >{{item.content}}</view>
							<view class="compnay" @click="showCompnay(item)">
								<view class="compnay">{{item.columnName}}</view>
								<view class="icon"><u-icon name="attach" :size="24"></u-icon></view>
							</view>
							<view class="readStatus" @click="replyInfo(item)">
								<!-- <text class="tag readed">已读</text> -->
								<text class="tag replyed" v-if="item.interactiveMessageInfo">{{$t('common.Replied')}}</text>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>	
			</view>
			
		</view>
		<!-- 页面优化提示 -->
		<view class="loading" v-if="showLoading" :class="{fixbottom:pageNo<totalPage}">
			<u-loadmore :status="status" iconType="flower" :load-text="{loading: $t('common.Loading')}" margin-top="200" />
		</view>
		<view class="nodata" v-if="!showLoading && tabs.length==0" style="text-align: center;margin-top: 120upx;">
			<view class="imgBox" style="height:600upx;margin-bottom:60upx">
				<image src="../../../static/img/public/7.png" style="width: 80%;margin:0 10%" mode="widthFix"></image>
			</view>
			<text style="font-size: 30upx;color:#ccc">{{$t('common.Nodata')}}</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {getMessageInfosList} from '@/api/cooperation/baseCooperationUnit'
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	export default {
		name:'Communication',
		components:{
			UNavbar,
			uniSwipeAction
		},
		data(){
			return {
				title:'',
				keyword:'',
				lineIndex:-1,
				pageNo:1,
				pageSize:5,
				totalPage:0,
				flagName:'',
				tabs:[],
				showLoading:true,
				status:'loading',
				defaultImg:'../../../static/missing-face.png',
				token:'',
				userId:'',
				options:[
					{
						text:this.$t('common.Delete'),
						style: {
							fontSize:'12px',
							height:'30px',
							backgroundColor:'#f2a059',
						}
					}
				],
			}
		},
		onLoad(e){
			this.title= this.$i18n.locale == 'zh'? '互动交流': 'Interaction'
		},
		created(){
			this.getMessageInfosList()
		},
		
		onShow(){
			this.token=uni.getStorageSync('Auth-Token')?'Bearer '+uni.getStorageSync('Auth-Token'):'';
			this.userId  = uni.getStorageSync('user')? JSON.parse(uni.getStorageSync('user')).id:'';
			// if(!this.token){
			// 	uni.navigateTo({url:'/pages/public/login?back=1'})
			// }else{
				
			// }
		},
		// 滚动监听-加载更多数据
		onReachBottom(e){
			if(this.pageNo<this.totalPage){
				this.showLoading=true;
				this.getMessageInfosList('loadmore')
			}else{
				if(this.showLoading!=false) this.showLoading=false;
			}
		},
		methods:{
			// 获取交流互动信息列表
			async getMessageInfosList(loadmore){
				if(loadmore) this.pageNo++;
				let params = {
					pageNo:this.pageNo,
					pageSize:this.pageSize,
					bizObjectType:'0'
				}
				let res = await this.$myRequest({
					url:'/op/interactiveMessage/userContentgetInteractiveMessageInfosList',
					headers:{token:this.token},
					data:params
				})
				this.showLoading=false;
				if(res.data.interactiveMessageInfos){
					this.totalPage=parseInt(res.data.page.totalPage)
					if(!loadmore){
						this.tabs=res.data.interactiveMessageInfos;
					}else{
						
						this.tabs=[...this.tabs,...res.data.interactiveMessageInfos];
					}
				}
			},
			
			//展开或者收起回复
			showMore(item){
				if(this.lineIndex!=item.id) {
					this.lineIndex=item.id;
				}else{
					this.lineIndex=-1;
				}
			},
			//清空列表
			clearList(){
				this.tabs=[];
			},
			//编辑互动交流
			editMyAdvice(){
				// uni.navigateTo({
				// 	url:'/pages/service/others/myadvicedit'
				// })
			},
			//项目名称
			showCompnay(item){
				uni.navigateTo({
					url:'/pages/country/projectPresentation/projectPresentationDetails?id='+item.columnCode
				})
			},
			//回复信息
			replyInfo(item){
				uni.setStorageSync("compnayInfo",item)
				uni.navigateTo({
					url:'/pages/service/others/communicationReply'
				})
			},
			async deleteInfo(index,item){
				let res = await this.$myRequest({
					url:'/op/interactiveMessage/gateDelInteractiveMessage',
					data:{interactiveMessageInfoId:item.id}
				})
				if(res.status==200){
					this.tabs.splice(index,1)
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh'? '删除成功': 'delete success',	
						icon:false,
						type:'success',
					})
					
				}else{
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh'? '删除失败': 'delete fail',	
						icon:false,
						type:'error',
					})
				}
			},
			//路由后退一步
			back(){
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.communication{
		
		.bg{
			position:fixed;
			top:0;
			left:0;
			bottom:0;
			right:0;
			background-color:#fff;
			z-index:-1;
		}
		.loadmore{
			display:fixed;
			bottom:0;
			z-index:999;
		}
		.edit{
			margin-right:30upx;
			color:#fff;
		}
		.fixbottom{
			display:fixed;
			bottom:0;
		}
		.tabs{
			width:100%;
			background-color:#fff;
			.item{
				width:100%;
				padding:3%;
				margin:20upx 0;
				border-bottom:2upx solid #eee;
				&:last-of-type{border:none}
				display:flex;
				.label{
					position:relative;
					overflow:hidden;
					display:flex;
					align-items:center;
					font-size:24upx;
					.msgflag{
						color:#f20;
						font-size:20upx;
						
					}
				}
				.jtimg{
					width:100upx;
					height:100upx;
					border-radius:50%;
					position:relative;
					background:#eee;
					margin-right:10upx;
					.img{
						display:block;
						width:80%;
						margin:10%;
					}
				}
				.jtinfo{
					flex:1;
					font-size:28upx;
					color:#333;
					.date{
						color:#aaa;
						font-size:20upx;
						line-height:50upx;
					}
					.compnay{
						color:#1777FE;
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:1;
						font-size:20upx;
						display:flex;
						align-items:center;
						.icon{
							color:#fff;
							background-color:#1777FE;
							height:32upx;
							line-height:32upx;
							width:32upx;
							text-align:center;
							border-radius:50%;
							margin-left:10upx;
							
						}
					}
					.jtques{
						font-size:28upx;
						margin:16upx 0;
					}
					.readStatus{
						margin:10upx 0;
						.tag{
							font-size:20upx;
							background:#C7C8C9;
							padding:8upx 20upx;
							border-radius:20upx;
							color:#fff;
							margin-right:20upx;
							&.replyed{
								background:#6DD400;
							}
						}
					}
				}
			}
		}
	}
</style>