dev/dcp-app-gate/pages/service/others/communicationReply.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"
			>
		</u-navbar>
		<!-- 咨询信息 -->
		<view class="compnay">
			<view class="jtimg"><image class="img" :src="defaultImg" mode="widthFix"></image></view>
			<view class="jtinfo">
				<view class="label">{{$t(detial.senderName)}}</view>
				<view class="date">{{formatDate(detial.createDate)}}</view>
				<view class="jtques">{{detial.content}}</view>
				<view class="pro">
					<view class="proname">{{detial.columnName}}</view>
					<view class="icon"><u-icon name="attach" :size="24"></u-icon></view>
				</view>
				<view class="replaytag" v-if="!detial.interactiveMessageInfo && detial.senderId!=userId " @click="getFocus('textarea')">回复</view>
			</view>
			
		</view>
		
		<!-- 已回复信息 -->
		<view class="replies" v-if="detial.interactiveMessageInfo">
			<view class="jtimg"><image class="img" :src="detial.src?detial.src:defaultImg" mode="widthFix"></image></view>
			<view class="infos">
				<view class="whoans">我的回复：</view>
				<view class="date">{{formatDate(detial.interactiveMessageInfo.updateDate)}}</view>
				<view class="anscontent">{{detial.interactiveMessageInfo.content}}</view>
			</view>
		</view>
		<!-- 回复信息 -->
		<!-- && detial.senderId!=userId -->
		<view class="replyInfo" v-if="!detial.interactiveMessageInfo && detial.senderId!=userId ">
			<view class="uni-textarea">
				<textarea class="textarea" ref="textarea" :value="val" :fixed="true" placeholder-style="color:#888" :auto-height="true" @blur="showValue" 
				@focus="showFocus" :maxlength="-1" :placeholder="$t('common.ReplyContent') +':'"/>
			</view>
			<view class="btn" @click="replyAns">发布</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		name:'Communication',
		components:{
			UNavbar,
		},
		data(){
			return {
				title:'',
				count:3,
				lineIndex:-1,
				val:'',
				detial:'',
				msgFlag:false,
				userId:'',
				token:'',
				replies:[],	
				defaultImg:'../../../static/missing-face.png'
			}
		},
		onLoad(e){
			this.title= this.$i18n.locale == 'zh'? '互动交流': 'Interaction'
		},
		onShow(){
			this.userId = uni.getStorageSync('user')?JSON.parse(uni.getStorageSync('user')).id:'';
			// this.token = uni.getStorageSync('Auth-Token')?'Bearer '+uni.getStorageSync('Auth-Token'):'';
			this.detial = uni.getStorageSync('compnayInfo');
			
		},
		created(){
			this.getToken()
		},
		onUnload(){
			uni.removeStorageSync('compnayInfo');
		},
		methods:{
			async getToken(){
				let res = await this.$myRequest({url:'/sys/token'})
				if(res.status==200) this.token=res.data
			},
			//清空列表
			clearList(){
				
			},
			// 回复的表单得到焦点
			getFocus(dom){
				let query=uni.createSelectorQuery();
				this.$nextTick(()=>{
					let doms=query.select(dom)
				})
			},
			showValue(e){
				this.val=e.detail.value;
			},
			showFocus(){

			},
			async replyAns(e){
				
				if(!this.val){
					this.$refs.uToast.show({
						title:'回复内容不能为空',
						icon:false,
						type:'error',
					})
					return ;
				}else{
					let data = {
						interactiveMessageInfo:JSON.stringify({
							content:this.val
						})
					}
					let res = await this.$myRequest({
						url:'/op/consultMessageInfos',
						method:'post',
						headers:{token:'1111'},
						data,
					})
					if(res.status!=200){
						this.$refs.uToast.show({
							title:'回复成功',
							icon:false,
							type:'success',
						})
					}
				}
				this.val='';
			},
			//路由后退一步
			back(){
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			
		},
		
		mounted(){
			if(this.msgFlag==true) this.replies=[];
		}
	}
</script>

<style lang="scss" scoped>
	.communication{
		.bg{
			position:fixed;
			top:0;
			left:0;
			bottom:0;
			right:0;
			background-color:#fff;
			z-index:-1;
		}
		width:100%;
		.edit{
			margin-right:30upx;
			color:#fff;
		}
		.compnay{
			width:100%;
			padding:3%;
			margin:20upx 0;
			border-bottom:2upx solid #eee;
			display:flex;
			width:100%;
			padding:3%;
			margin:20upx 0 0;
			border-bottom:2upx solid #eee;
			display:flex;
			.label{
				font-size:20upx;
			}
			.jtques{
				font-size:30upx;
				line-height:50upx;
				color:#333;
			}
			.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:22upx;
				display:flex;
				flex-direction:column;
				.date{
					font-size:22upx;
					color:#aaa;
					line-height:50upx;
				}
				.replaytag{
					border:1px solid #1677FF;
					color: #1677FF;
					width:140upx;
					height:60upx;
					line-height:60upx;
					text-align:center;
					border-radius:60upx;
					align-self:flex-end;
					margin-top:50upx;
				}
				.pro{
						color:#1777FE;
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:1000;
						display:flex;
						align-items:center;
						.proname{
							font-size:20upx;
							line-height:50upx;
						}
						.icon{
							color:#fff;
							background-color:#1777FE;
							height:32upx;
							line-height:32upx;
							width:32upx;
							text-align:center;
							border-radius:50%;
							margin-left:10upx;
							
						}
					}
			}
		}
		.replies{
			display:flex;
			width:100%;
			padding:3%;
			margin:20upx 0;
			.jtimg{
				width:100upx;
				height:100upx;
				border-radius:50%;
				position:relative;
				background:#eee;
				margin-right:10upx;
				.img{
					display:block;
					width:80%;
					margin:10%;
				}
			}
			.infos{
				flex:1;
				.date{
					font-size:22upx;
					color:#aaa;
					line-height:50upx;
				}
			}
		}
		.replyInfo{
			background:#fefefe;
			width:100%;
			padding:10% 0;
			display:flex;
			flex-direction:column;
			.uni-textarea{
				flex:1;
				min-height:160upx;
				margin:2% 5%;
				padding:16upx;
				border:1px solid #eee;
				position:relative;
				overflow:hidden;
				border-radius:10upx;
				.textarea{
					display:block;
					width:100%;
				}
				
			}
			.btn{
				width:160upx;
				height:70upx;
				line-height:70upx;
				border-radius:70upx;
				text-align:center;
				color:#fff;
				background-color:#1777FE;
				align-self:flex-end;
				margin-right:5%;
				font-size:28upx;
			}
		}
	}
</style>