hytc-customer/pages/see_progress/progress_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?info.createtime:''}}</view>
			</view>
			<view class="serwarp_li">
				<view class="label">{{i18n['产品']}}</view>
				<view class="proli">
					<view class="pro" v-for="(item,index) in info.product_part" :key="index">
						<img :src="item.product.img" class="proimg" alt="">
						<view class="proname">{{item.product.name}}</view>
					</view>
				</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">
			<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 class="button" @click="toComment">{{i18n['评论']}}</view>
		
		<reply-item ref="replyChild" @replySuccess="replySuccess"></reply-item>
	</view>
</template>

<script>
	import replyItem from '@/components/reply/common_reply'
	import { netOrderDetail, netCommentList } from '@/api/api.js'
	
	export default{
		components:{
			replyItem
		},
		data(){
			return{
				id:'',
				info:{},
				commList:[]
			}
		},
		computed:{
			i18n() {
				return this.$t("progress")
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n['详情']
			})
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
			//获取评论列表
			this.getComment()
		},
		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
				})
			},
			toComment() {
				this.$refs.replyChild.init(this.id)
			},
			replySuccess() {
				//获取评论列表
				this.getComment()
			}
		}
	}
</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;
						}
					}
				}
			}
			.serwarp_li{
				padding:24rpx;
				font-size:24rpx;
				color:#666;
				.label{
					flex-shrink: 0;
					margin-right:15rpx;
				}
				.proli{
					padding:24rpx 24rpx 0;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					.pro{
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right:24rpx;
						margin-bottom:24rpx;
						.proimg{
							width:100rpx;
							height:100rpx;
							margin-bottom:8rpx;
						}
						
					}
				}
			}
		}
	}
	.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;
			}
		}
	}
	.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;
		}
	}
</style>