dev/dcp-app-gate/myadvicedetial.vue

<template>
	<view class="myAdviceDetial">
		<!-- 页面头部 -->
		<u-navbar 
			:is-back="true" 
			back-icon-color="#2af" 
			:border-bottom="true"
			back-text="返回" 
			:back-text-style="{color:'#2af'}" 
			:title="title"
			>
			<view slot="right" class="edit" @click="editMyAdvice">编辑</view>
		</u-navbar>
		<!-- 列表 -->
		<scroll-view class="tabs" :scroll-y="true">
			<view class="item" v-for="(item,index) in tabs" :key="index">
				<view class="ask">
					<view class="userimg"><image class="img" :src="item.src" mode="widthFix"></image></view>
					<view class="userinfo">
						<view class="label">{{item.label}}</view>
						<view class="date">{{item.date}}</view>
					</view>
				</view>
				<view class="userques">咨询内容：{{item.ques}}</view>
				<view class="ans">
					<view style="font-size:24upx">平台回复：</view>
					<!-- <view class="answer" :style="{'-webkit-line-clamp':100}">{{item.ans}}</view> -->
					<view class="answer" :class="{linemore:item.id==lineIndex}">{{item.ans}}</view>
					<view class="openmsg" @click="showMore(item)"><text v-if="item.id==lineIndex">收起</text><text v-if="item.id!=lineIndex">展开</text></view>
				</view>
			</view>
		</scroll-view>
		<view class="opt">
			<view class="clearList" @click="clearList">一键清空</view>
			<view class="removeListItem">删除</view>
		</view>
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		name:'MyAdviceDetial',
		components:{
			UNavbar,
		},
		data(){
			return {
				title:'',
				keyword:'',
				lineIndex:-1,
				flagName:'展开',
				tabs:[
				{
					id:0,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:1,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:2,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:3,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:4,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:5,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:6,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:7,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				},{
					id:8,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20'
				}
				],
					
			}
		},
		onLoad(e){
			uni.showLoading({
				title: this.$i18n.locale == 'zh'? '加载中...': 'Loading...'
			});
				this.title= this.$i18n.locale == 'zh'? '我的咨询': 'My Application'

			setTimeout(()=>{uni.hideLoading();},100)
		},
		methods:{
			
			//展开或者收起回复
			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'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myAdviceDetial{
		background:#fefefe;
		.edit{
			margin-right:30upx;
			color:#2af;
		}
		.tabs{
			width:100%;
			height:84.3%;
			background:#fefefe;
			position:absolute;
			.item{
				width:100%;
				padding:3%;
				margin:20upx 0;
				border-bottom:4upx solid #eee;
				.ask{
					display:flex;
					align-items:center;
					.userimg{
						width:100upx;
						height:100upx;
						position:relative;
						border-radius:100%;
						background:#eee;
						margin-right:10upx;
						.img{
							width:80%;
							margin:10%;
						}
					}
					.userinfo{
						font-size:24upx;
						color:#666;
					}
				}
				.userques{
					font-size:24upx;
					margin-top:16upx;
				}
				.ans{
					background:#e8e8e8;
					padding:10upx;
					margin-top:20upx;
					position:relative;
					border-radius:10upx;
					color:#666;
					font-size:24upx;
					.answer{
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						font-size:24upx;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;
						&.linemore{
							-webkit-line-clamp:10000;
						}
					}
					&:after{
						content:'';
						position:absolute;
						top:-60upx;
						left:10%;
						width:0;
						height:0;
						border-top:30upx solid transparent;
						border-bottom:30upx solid #e8e8e8;
						border-left:30upx solid transparent;
						border-right:30upx solid transparent;
					}
					.openmsg{
						text-align:right;
						margin-right:10upx;
						margin-top:10upx;
						color:#333;
						font-size:24upx;
					}
				}
			}
		}
		.opt{
			width:100%;
			padding:0 10%;
			position:fixed;
			left:0;
			right:0;
			bottom:0;
			height:140upx;
			margin:0 auto;
			background:#fefefe;
			display:flex;
			align-items:center;
			justify-content:space-between;
			.clearList,.removeListItem{
				margin-top:52upx;
				width:50%;
				line-height:70upx;
				border:1px solid #eee;
				padding:0 40upx;
				border-radius:0 0 80upx 80upx;
				text-align:center;
			}
		}
	}
</style>