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

<template>
	<view class="myAdviceDetial">
		<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="ask">
			<view class="userimg"><image class="img" :src="defaultImg" mode="widthFix"></image></view>
			<view class="userinfo">
				<view class="label">{{detial.senderName}}</view>
				<view class="date">{{formatDate(detial.senderDate)}}</view>
				<!-- 列表 -->
				<view class="tabs">
					<view class="item" v-for="(item,index) in tabs" :key="index">
						<view class="userques">{{item.content}}</view>
						<view class="proName" @click="showDetial">
							<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">
							<view style="font-size:30rpx;margin-bottom:10upx">{{$t('common.PlatformReply')}}：</view>
							<view style="font-size:30rpx;">{{item.consultMessageInfo.content}}</view>
						</view>
					</view>
				</view>
			</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:'',
				detial:'',
				tabs:[],
				defaultImg:'../../../static/missing-face.png',	
			}
		},
		computed:{
			askUserInfo(){
				return uni.getStorageSync('askUserInfo')
			}
		},
		onLoad(e){
			this.title= this.$i18n.locale == 'zh'? '咨询详情': 'My Application'
		},
		onShow(){
			this.detial=uni.getStorageSync('myAdviceDetial')
			this.tabs[0]=this.detial;
		},
		onUnload(e){
			//离开当前页面清存储
			 uni.removeStorageSync('myAdviceDetial');
		},
		methods:{
			//路由后退一步
			back(){
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			showDetial(){
				let url= '/pages/country/projectPresentation/projectPresentationDetails?id='+this.detial.columnCode	
				if(this.detial.columnCode) uni.navigateTo({url})
			},
		
		},
		mounted(){

		}
	}
</script>

<style lang="scss" scoped>
	.myAdviceDetial{
		background:#fefefe;
		.bg{
			position:fixed;
			top:0;
			left:0;
			bottom:0;
			right:0;
			background:#fefefe;
			z-index:-1;
		}
		.edit{
			margin-right:30upx;
			color:#2af;
		}
		.ask{
			display:flex;
			align-items:flex-start;
			padding:5% 3%;
			border-bottom:1px solid #eee;
			.userimg{
				width:100upx;
				height:100upx;
				position:relative;
				border-radius:100%;
				background:#eee;
				margin-right:10upx;
				.img{
					display:block;
					width:100upx;
					height:100upx;
				}
			}
			.userinfo{
				flex:1;
				font-size:28upx;
				color:#666;
				.label{font-size:24upx;}
				.date{color:#aaa;margin:8upx 0}
				.tabs{
					width:100%;
					
					.item{
						width:100%;
						padding:1% 0;
						.userques{
							font-size:30upx;
							margin:0 0 10upx 0;
							color:#333;
						}
						.proName{
							height:50rpx;
							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;
							padding:16rpx;
							
							&: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:10upx;
								margin-top:10upx;
								color:#333;
								font-size:28upx;
							}
						}
					}
				}
				.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>