hytc-customer/pages/evaluate/detail.vue

<template>
	<view class="warpbox">
		<view class="itembox">
			<view class="item_title">{{i18n['客户信息']}}</view>
			<view class="serwarp">
				<view class="label">{{i18n['联系人']}}</view>
				<view class="seright">{{info.linkman?info.linkman:''}}</view>
			</view>
			<view class="serwarp">
				<view class="label">{{i18n['手机号']}}</view>
				<view class="seright">{{info.linkfun?info.linkfun:''}}</view>
			</view>
		</view>
		
		<view class="itembox">
			<view class="item_title">{{i18n['服务信息']}}</view>
			<view class="serwarp">
				<view class="label">{{i18n['情况描述']}}</view>
				<view class="seright">{{info.desc}}</view>
			</view>
			<view class="serwarp">
				<view class="label">{{i18n['预约时间']}}</view>
				<view class="seright">{{info.createtime}}</view>
			</view>
			<view class="serwarp">
				<view class="label">{{i18n['图片']}}</view>
				<view class="imglist" v-if="info.file && info.file.length != 0">
					<view class="imgbox_con" v-for="(item,index) in info.file" :key="index" @click="toPreveimg(info.file,index)">
						<image :src="item.file_path" class="selfimg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="itembox" v-if="commList.length != 0">
			<view class="item_title" style="margin-bottom:24rpx;">{{i18n['评论内容']}}</view>
			<view class="comli" v-for="(item,index) in commList" :key="index">
				<view class="comcon">{{item.content}}</view>
				<view class="comtime">{{info.createtime}}</view>
			</view>
		</view>
		
		
		<view v-if="type == 1">
			<view class="itembox">
				<view class="item_title">{{i18n['评价内容']}}</view>
				<view class="serwarp">
					<view class="label">{{i18n['是否解决问题']}}</view>
					<view class="seright">
						<view class="form_right">
							<radio-group  class="radiowarp">
								<view class="radiobox" v-for="(item, index) in typeList" :key="index">
									<radio disabled :value="item.id" color="#0287FF" :checked="item.id == info.is_resolved" />
									<view>{{item.name}}</view>
								</view>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="serwarp">
					<view class="label">{{i18n['手机号']}}</view>
					<view class="seright">{{info.linkfun}}</view>
				</view>
				<view class="serwarp">
					<view class="label key">{{i18n['评分']}}</view>
					<view class="form_right" v-if="info">
						<uni-rate :value="info.comment_score" readonly />
					</view>
				</view>
				<view class="serwarp" style="margin-top:0;">
					<view class="label">{{i18n['附件']}}:</view>
					<view class="form_right">
						<view class="righttext"></view>
						<view class="iconfont icon-arrows_right"></view>
					</view>
				</view>
				<view class="imglist" v-if="info.comment_files && info.comment_files.length != 0">
					<view class="imgbox_con" v-for="(item,index) in info.comment_files" :key="index"  @click="toEvalPreveimg(info.comment_files,index)">
						<image :src="item" class="selfimg" mode=""></image>
					</view>
				</view>
				<view class="fllow_area">
					<view class="area_head key">{{i18n['情况说明']}}</view>
					<textarea v-model="info.comment_content" disabled class="textself" :placeholder="i18n['情况说明']" placeholder-style="color:#999" />
				</view>
			</view>
		</view>
		
		<view class="button" v-if="type != 1 && !info.is_resolved" @click="toComment">{{i18n['评价服务']}}</view>
	</view>
</template>

<script>
	import { netOrderDetail, netCommentList } from '@/api/api.js'
	
	export default{
		data(){
			return{
				showReply:false,
				id:'',
				info:{},
				commList:[],
				typeList:[],
				typeIndex:0,
				type:1,   //1已评价   2未评价
			}
		},
		computed:{
			i18n() {
				return this.$t("progress")
			}
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
		},
		onShow() {
			this.typeList = this.i18n['type']
			this.getDetail()
			uni.setNavigationBarTitle({
				title: this.i18n['工单详情']
			})
		},
		methods:{
			getDetail() {
				netOrderDetail({id:this.id}).then(res=>{
					this.info = res.data
				})
			},
			getComment() {
				netCommentList({id:this.id}).then(res=>{
					this.commList = res.data
				})
			},
			toPreveimg(arr,index) {
				let data = []
				arr.forEach(ele=>{
					data.push(ele.file_path)
				})
				uni.previewImage({
					current:index,
					urls:data
				})
			},
			toEvalPreveimg(arr,index) {
				uni.previewImage({
					current:index,
					urls:arr
				})
			},
			toComment() {
				uni.navigateTo({
					url:'/pages/evaluate/to_evaluate?id='+this.info.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warpbox{
		background: linear-gradient(180deg, #DFF0FF 0%, #F4F4F4 20%);
		.itembox{
			width:690rpx;
			margin:0 auto 24rpx;
			background:#fff;
			border-radius: 20rpx;
			padding:24rpx;
			.item_title{
				padding-left:35rpx;
				padding-bottom:24rpx;
				border-bottom:1rpx solid #EDEDED;
				font-size:26rpx;
				color:#666666;
				position: relative;
				&::before{
					content:'';
					width:14rpx;
					height:35rpx;
					border-radius: 8rpx;
					background:#65ABF6;
					position: absolute;
					left:0;
					top:3rpx;
				}
			}
			.comli{
				margin-bottom:35rpx;
				border-bottom:1rpx solid #EDEDED;
				padding-bottom:15rpx;
				.comcon{
					font-size:24rpx;
					color:#999999;
					line-height: 35rpx;
				}
				.comtime{
					text-align: right;
					font-size:24rpx;
					color:#999;
					margin-top:24rpx;
				}
			}
			.serwarp{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:24rpx;
				font-size:24rpx;
				color:#666;
				.label{
					flex-shrink: 0;
					margin-right:15rpx;
				}
				.seright{
					text-align: right;
				}
				.imglist{
					display: flex;
					justify-content: flex-end;
					.imgbox_con{
						width:80rpx;
						height:80rpx;
						margin-left:15rpx;
						.selfimg{
							width:80rpx;
							height:80rpx;
						}
					}
				}
			}
		}
	}
	
	
	.imglist {
		padding: 24rpx 34rpx;
		background: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	
		.imgbox_con {
			width: 160rpx;
			height: 160rpx;
			margin-right: 14rpx;
			position: relative;
			margin-bottom: 24rpx;
			border: 1rpx solid #EAEAEA;
			&:nth-child(4n){
				margin-right:0;
			}
			.selfimg {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
	.form_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #999;
		min-width:430rpx;
		text-align: right;
		.righttext{
			font-size:26rpx;
		}
	}
	.tipwarp{
		font-size:30rpx;
		color:#000;
		padding:15rpx 30rpx;
		width:750rpx;
		background:#f5f5f5;
	}
	.infowarp{
		width:750rpx;
		background:#fff;
		.info_li{
			padding:30rpx;
			margin-bottom:24rpx;
			.info_con{
				font-size:28rpx;
				color:#000;
				padding-left:45rpx;
				margin-bottom:10rpx;
				position: relative;
				&::before{
					content:'';
					width:20rpx;
					height:20rpx;
					border-radius: 50%;
					border:5rpx solid #4CD964;
					position: absolute;
					left:0;
					top:0;
				}
			}
			.info_time{
				font-size:26rpx;
				color:#666;
				padding-left:30rpx;
			}
		}
	}
	.serwarp{
		display: flex;
		justify-content: space-between;
		padding:24rpx 30rpx;
		border-bottom:1rpx solid #f5f5f5;
		.label{
			max-width: 300rpx;
			font-size:28rpx;
			color:#666;
			flex-shrink: 0;
			margin-right:24rpx;
		}
		.seright{
			font-size: 28rpx;
			color:#333;
		}
	}
	.imgbox{
		padding:24rpx 30rpx;
		.imglabel{
			font-size:28rpx;
			color:#333;
			padding-bottom:24rpx;
			border-bottom:1rpx solid #f5f5f5;
		}
		
	}
	.de_bot_warp{
		position: fixed;
		left:0;
		bottom:0;
		width:750rpx;
		height:90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top:1rpx solid #f5f5f5;
		.bot_btn{
			width:300rpx;
			height:76rpx;
			border-radius: 38rpx;
			text-align: center;
			line-height: 76rpx;
			font-size:26rpx;
			color:#fff;
			background:#0287FF;
		}
		.bot_btn_remove{
			margin-left:15rpx;
			background:#999999;
		}
	}
	.fllow_area {
		background-color: #fff;
		padding:24rpx;
		margin-bottom: 30rpx;
		.area_head {
			height: 100rpx;
			font-size:26rpx;
			line-height: 100rpx;
		}
		.textself {
			width:560rpx;
			height: 230rpx;
			background:rgba(202, 202, 202, 0.2);
			box-sizing: border-box;
			padding:24rpx;
			font-size:26rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}
	.radiowarp{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.radiobox{
			display: flex;
			justify-content: center;
			align-items: center;
			radio{
				transform: scale(0.7);
			}
		}
	}
	.fllow_form {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding:24rpx 45rpx 24rpx 50rpx;
		.label{
			font-size:26rpx;
			text{
				color:red;
			}
		}
	}
	.inp_warp {
		padding:24rpx 45rpx 24rpx 50rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		.inp_title {
			font-size: 26rpx;
			color: #000;
		}
		.add_in{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size:26rpx;
			color:#14C2C1;
			.icon-jiahaocu{
				font-size:28rpx;
				color:#14c2c1;
				margin-right:5rpx;
			}
		}
	}
</style>