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

<template>
	<view class="myAdvice">
		<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">编辑</view> -->
		</u-navbar>
		<!-- 列表 -->
		<view class="tabs" v-if="tabs.length>0">
			<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="userimg" @click="showDetial(1,item)"><image class="img" :src="item.src?item.src:defaultImg" mode="widthFix"></image></view>
							<view class="userinfo">
								<view class="label" v-if="item.senderName"    @click="showDetial(1,item)">{{item.senderName}}</view>
								<view class="date"                            @click="showDetial(1,item)">{{formatDate(item.senderDate)}}</view>
								<view class="userques" v-if="item.content"    @click="showDetial(1,item)">
									<view class="text"  :class="{line2:true}">{{item.content}}</view>
									<!-- <view class="openmsg" @click="showMore('leavingFlag',item)">
										<view v-if="!item.leavingFlag" ><u-icon name="arrow-down" color="#aaa" size="32"></u-icon></view>
										<view v-if="item.leavingFlag"  ><u-icon name="arrow-up"  color="#aaa" size="32"></u-icon></view>
									</view> -->
								</view>
								<view class="proName" @click="showDetial(0,item)">
									<view class="text">{{item.columnCodeName}}</view>
									<view class="icon"><u-icon name="attach" :size="24"></u-icon></view>
								</view>
								<view class="ans" v-if="item.consultMessageInfo" @click="showDetial(1,item)">
									<view style="font-size:30rpx;margin-bottom:10upx">{{$t('common.PlatformReply')}}：</view>
									<view class="text" :class="{line2:true}">{{item.consultMessageInfo.content}}</view>
									<!-- <view class="openmsg" @click="showMore('replyFlag',item)">
										<view v-if="!item.replyFlag" ><u-icon name="arrow-down" color="#aaa" size="32"></u-icon></view>
										<view v-if="item.replyFlag"  ><u-icon name="arrow-up"  color="#aaa" size="32"></u-icon></view>
									</view> -->
								</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')}"/>
		</view>
		<view class="nodata" v-if="!showLoading && tabs.length==0" style="text-align: center;margin-top: 120upx;">
			<view 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 {getReplyAndSenderMessage} from '@/api/operation/consultMessageInfo'
	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:'MyAdvice',
		components:{
			UNavbar,
			uniSwipeAction
		},
		data(){
			return {
				title:'',
				keyword:'',
				lineIndex:false,
				flagName:'展开',
				showLoading:true,
				status:'loading',
				pageNo:1,
				pageSize:10,
				totalPage:0,
				tabs:[],
				token:'',
				defaultImg:'../../../static/missing-face.png',
				options:[
					{
						text:this.$t('common.Delete'),
						style: {
							fontSize:'12px',
							height:'30px',
							backgroundColor:'#f2a059',
						}
					}
				],
					
			}
		},
		onLoad(e){
			this.title= this.$i18n.locale == 'zh'? '我的咨询': 'My Consultation'	
			
		},
		created(){
			this.getToken();
			this.getReplyAndSenderMessage()
			
		},
		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{
	
	// 		}
			
		},
		mounted(){
			this.isLogin()
		},
		// 滚动监听-加载更多数据
		onReachBottom(e){
			if(this.pageNo<this.totalPage){
				this.showLoading=true;
				this.pageNo++;
				this.getReplyAndSenderMessage('loadmore')
			}else{
				if(this.showLoading!=false) this.showLoading=false;
			}
		},
		methods:{
			async getToken(){
				let res = await this.$myRequest({url:'/sys/token'})
				if(res.status==200) this.token=res.data
			},
			// 获取我的咨询数据列表
			async getReplyAndSenderMessage(loadmore){
				let data = {
					pageNo:this.pageNo,
					pageSize:this.pageSize,
					language:this.$i18n.locale.toUpperCase()
				}
				let res = await this.$myRequest({
					url:'/op/consultMessageInfos/getReplyAndSenderMessage',
					data,
				})
				this.showLoading=false;
				if(res.data.consultMessageInfos){
					this.totalPage=parseInt(res.data.page.totalPage);
					for(let i=0;i<res.data.consultMessageInfos.length;i++){
						this.$set(res.data.consultMessageInfos[i],'replyFlag',false)
						this.$set(res.data.consultMessageInfos[i],'leavingFlag',false)
					}
					if(loadmore){
						this.tabs=[...this.tabs,...res.data.consultMessageInfos]
					}else{
						this.tabs=res.data.consultMessageInfos
					}
				}	
				
			},
			//展开或者收起回复
			showMore(type,item){
				if(type=='leavingFlag') this.$set(item,'leavingFlag',!item.leavingFlag)
				else this.$set(item,'replyFlag',!item.replyFlag)
			},

			//编辑我的咨询
			editMyAdvice(){
				uni.navigateTo({url:'/pages/service/others/myadvicedit'})
			},
			//详情
			showDetial(type,item){
				let url= type==0?'/pages/country/projectPresentation/projectPresentationDetails?id='+item.columnCode:
								 '/pages/service/others/myadviceDetial?id='+item.columnCode;
				if(type!=0){
					uni.setStorageSync('myAdviceDetial',item)
				}			
				if(url) uni.navigateTo({url})
			},
			//删除
			async deleteInfo(index,item){
				let res = await this.$myRequest({
					url:'/op/consultMessageInfos/gateDelConsultMessageInfo',
					method:'get',
					data:{replyAndSenderMessageId: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
			},
			// 登录检查
			isLogin(){
				if(!this.token){
					this.$refs.uToast.show({
						title:this.$i18n.locale == 'zh'?'请登录':'Please Login',
						icon:false,
						type:'error',
						callback:()=>{
							uni.navigateTo({url:'/pages/public/login?back=1'})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myAdvice{
		.loading{
			background-color:#FAFAFA;
			width:100%;
			height:60upx;
			line-height:60upx;
			padding-top:10upx;
			&.fixbottom{
				position:fixed;
				bottom:0;
				z-index:999;
			}
		}
		.bg{
			position:fixed;
			top:0;
			left:0;
			bottom:0;
			right:0;
			background-color:#fff;
			z-index:-1;
		}
		.edit{
			margin-right:30rpx;
			color:#fff;
		}
		.tabs{
			width:100%;
			.item{
				width:100%;
				padding:3%;
				margin:20rpx 0;
				border-bottom:2rpx solid #eee;
				&:last-of-type{
					border:none;
				}
			
				.userimg{
					width:100rpx;
					height:100rpx;
					position:relative;
					border-radius:100%;
					background:#eee;
					margin-right:10rpx;
					.img{
						display:block;
						width:100rpx;
						height:100rpx;
					}
				}
				.userinfo{
					flex:1;
					font-size:24rpx;
					color:#666;
					display:flex;
					flex-direction:column;
					margin-right:20rpx;
					/deep/ .uni-swipe_button{
						height:120rpx;
					}
					.label{
						font-size:22rpx;
					}
					.userques{
						display:flex;
						align-items:center;
						.text{
							flex:1;
							margin:16rpx 0;
							color:#333;
							font-size:30rpx;
							&.line2{
								overflow:hidden;
								text-overflow:ellipsis;
								display:-webkit-box;
								-webkit-box-orient:vertical;
								-webkit-line-clamp:2;
							}
						}
						.openmsg{
							width:60rpx;
							height:60rpx;
							margin-right:20rpx;
							text-align:right;
							left:10rpx;
							color:#333;
							font-size:24rpx;
							align-self:flex-end;
						}
					}
					.proName{
						display:flex;
						align-items:center;
						color:#666;
						.text{
							font-size:22rpx;
							overflow:hidden;
							text-overflow:ellipsis;
							display:-webkit-box;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2;
							width:92%;
						}
						.icon{
							color:#fff;
							background-color:#1777FE;
							height:32upx;
							line-height:32upx;
							width:32upx;
							text-align:center;
							border-radius:50%;
							margin-left:10upx;
						}
					}
					.ans{
						background:#f0f6ff;
						padding:10rpx;
						margin-top:30rpx;
						position:relative;
						border-radius:10rpx;
						color:#333;
						font-size:24rpx;
						padding:16rpx;
						.text{
							flex:1;
							margin:16rpx 0;
							color:#333;
							font-size:30rpx;
							&.line2{
								overflow:hidden;
								text-overflow:ellipsis;
								display:-webkit-box;
								-webkit-box-orient:vertical;
								-webkit-line-clamp:2;
							}
						}
						.answer{
							margin-top:10rpx;
							overflow:hidden;
							text-overflow:ellipsis;
							display:-webkit-box;
							font-size:24rpx;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2;
							&.linemore{
								-webkit-line-clamp:10000;
							}
						}
						&:after{
							content:'';
							position:absolute;
							top:-55rpx;
							left:10%;
							width:0;
							height:0;
							border-top:30rpx solid transparent;
							border-bottom:30rpx solid #f0f6ff;
							border-left:20rpx solid transparent;
							border-right:20rpx solid transparent;
						}
						
						.openmsg{
							text-align:right;
							margin-right:10rpx;
							margin-top:10rpx;
							color:#333;
							font-size:24rpx;
						}
					}
				}
			}
		}
		.opt{
			width:100%;
			padding:0 10%;
			position:fixed;
			left:0;
			right:0;
			bottom:0;
			height:140rpx;
			margin:0 auto;
			background:#fefefe;
			display:flex;
			align-items:center;
			justify-content:space-between;
			.clearList,.removeListItem{
				margin-top:52rpx;
				width:50%;
				line-height:70rpx;
				border:1px solid #eee;
				padding:0 40rpx;
				border-radius:0 0 80rpx 80rpx;
				text-align:center;
			}
		}
	}
</style>