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

<template>
	<view class="myAdvice">
		<!-- 页面头部 -->
		<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>
		<!-- 列表 -->
		<scroll-view class="tabs" :scroll-y="true">
			<view class="item" v-for="(item,index) in tabs" :key="index">
				<view class="ans">
					<u-checkbox v-if="item.ans" v-model="item.checked" shape="circle" @change="showCheccked(item)"></u-checkbox>
					<view class="answer" v-if="item.ans" :class="{linemore:item.id==lineIndex}">平台回复{{index+1}}：{{item.ans}}</view>
				</view>
				<view class="userques" :class="{bg:item.ans}"><u-checkbox v-if="!item.ans" shape="circle" @change="showCheccked(item)" v-model="item.checked"></u-checkbox>咨询：{{item.ques}}</view>
				<view class="ask">
					<view class="userinfo">
						<view class="date">{{item.date}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="opt">
			<view class="clearList" @click="clearList">一键清空</view>
			<view class="removeListItem" @click="deleteChecked">删除</view>
		</view>
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		name:'MyAdvice',
		components:{
			UNavbar,
		},
		data(){
			return {
				title:'',
				keyword:'',
				lineIndex:-1,
				checkList:[],
				tabs:[
				{
					id:0,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:1,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:``,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:2,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:3,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:4,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:5,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:6,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:7,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				},{
					id:8,
					src:'../../../static/E2.png',
					ques:'您好！对贵公司的某**个项目感兴趣，想进一步沟通合作',
					label:'长江三峡集团',
					ans:`您好！谢谢你的咨询，已安排人员和贵公司联系您好！谢谢你的咨询，您好！谢谢你的咨询，已安排人员和贵公司联系！谢谢你的咨询，
					     您好！谢谢你的咨询，已安排人员和贵公司联系`,
					date:'2019-12-30 14：20',
					checked:false
				}
				],
					
			}
		},
		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=[];
			},
			//删除选中的项目
			deleteChecked(){
				for(let i=0;i<this.tabs.length;i++){
					for(let j=0;j<this.checkList.length;j++){
						if(this.checkList[j]===this.tabs[i]['id']) this.tabs.splice(i,1)
					}
				}
			},
			// 选择中的表单
			showCheccked(item){
				if(this.checkList.indexOf(item.id)==-1){
					this.checkList.push(item.id)
				}else {
					for(let i =0;i<this.checkList.length;i++){
						if(this.checkList[i]==item.id) this.checkList.splice(i,1);
					}
				}
			},
			//路由后退一步
			back(){
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.myAdvice{
		/deep/ .u-checkbox{
			width:36upx;
			margin-right:10upx;
		}
		background:#fefefe;
		.edit{
			margin-right:30upx;
			color:#fff;
		}
		.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:flex-start;
					.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;
					border-radius:10upx;
					display:flex;
					align-items:flex-start;
					&.bg{
						background:#e8e8e8;
						padding:10upx;
					}
					
				}
				.ans{
					padding:10upx 0;
					position:relative;
					color:#666;
					font-size:24upx;
					display:flex;
					align-items:top;
					.answer{
						width:97%;
						padding-left:0;
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						font-size:24upx;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:1;
						&.linemore{
							-webkit-line-clamp:10000;
						}
					}
					
					
				}
			}
		}
		.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>