hz-zhhq-app/pages/malfunc-repair/repair-details-my.vue

<template>
	<view class="hzIndex">
		<hzHeader title="服务报修"></hzHeader>
		<view class="container hzContent">
			<view class="details">
				<view class="detail_msg">
					<view class="info-item status">
						<text class="label">{{pageTitle[item.fault_type]}}状态</text>
						<text v-if="item.reply_flag =='0'" class="infoSpan2">未回复</text><!-- statusred -->
						<text v-if="item.reply_flag =='1'" class="infoSpan" style="color: green;">已回复</text>
						<text v-if="item.reply_flag =='2'" class="infoSpan" style="color: green;">已结束</text>
					</view>
				</view>
			</view>
			<view class="details">
				<view class="detail_msg">
					<view class="dateTit" style="padding: 24upx 0;">
						<view class="leftIcon">

						</view>
						<text style="font-size:32upx;color:#333;font-weight: 600;">{{pageTitle[faultType]}}项目</text>
					</view>
					<!-- <view class="info-item">
					<text class="label">部门： </text>
					<text class="infoSpan">{{item.repair_dept_name}}</text>
				</view> -->
					<view class="info-item">
						<text class="label">{{pageTitle[item.fault_type]}}项目</text>
						<text class="infoSpan">{{ item.repair_option_name }}</text>
					</view>
					<view v-if="item.repair_option_sub" class="info-item">
						<text class="label">问题小项</text>
						<text class="infoSpan">{{ item.repair_option_sub_name }}</text>
					</view>
					<view v-if="item.fault_detail" class="info-item">
						<text class="label">问题描述</text>
						<text class="infoSpan">{{item.fault_detail}}</text>
					</view>
					<view class="info-item">
						<text class="label">{{pageTitle[item.fault_type]}}位置</text>
						<!-- <text class="infoSpan">{{item.repair_place+" "+(item.repair_floor||'')+"楼"+(item.repair_room_no?item.repair_room_no+'室':'')}}</text> -->
						<text
							class="infoSpan">{{item.repair_place+" "+(item.repair_floor||'')+(item.repair_room_no?"-"+item.repair_room_no+'':'')}}</text>
					</view>

					<view class="info-item">
						<text class="label">{{pageTitle[item.fault_type]}}时间</text>
						<text class="infoSpan">{{item.repair_time}}</text>
					</view>
					<view class="img-box">
						<image v-for="(itemImg,imgIndex) in item.pictures" :key="imgIndex" :src="formatImgUrl(itemImg)"
							mode="" @click="vbPicture(new Array(formatImgUrl(itemImg)))"></image>
					</view>
				</view>

			</view>
			<view class="details">
				<view class="detail_msg">
					<view class="dateTit" style="padding: 24upx 0;">
						<view class="leftIcon">

						</view>
						<text style="font-size:32upx;color:#333;font-weight: 600;">报修人信息</text>
					</view>
					<view class="info-item">
						<text class="label">{{pageTitle[item.fault_type]}}人</text>
						<text class="infoSpan">{{item.repair_person_name}}</text>
					</view>
					<view class="info-item">
						<text class="label">联系方式</text>
						<text class="infoSpan">{{item.repair_person_phone}}</text>
					</view>
				</view>
			</view>
			<view class="details" style="padding: 24upx;">
				<view class="dateTit" style="padding: 24upx 0;">
					<view class="leftIcon">

					</view>
					<text style="font-size:32upx;color:#333;font-weight: 600;">报修反馈</text>
				</view>
				<view class="details" style="background-color: #F2F6FA;margin: unset;margin-top: 24upx;"
					v-if="item.reply_flag!='0'" v-for="(reply,replyIndex) in item.replyList" :key="replyIndex">
					<view class="detail_msg">
						<view class="info-item">
							<text class="label">回复内容</text>
							<text class="infoSpan">{{reply.reply_content}}</text>
						</view>
						<view class="info-item">
							<text class="label">回复时间</text>
							<text class="infoSpan">{{ formatDate(reply.reply_date,'dateTime')}}</text>
						</view>
						<view class="img-box">
							<image v-for="(itemImg,imgIndex) in reply.replyPictures" :key="imgIndex"
								:src="formatImgUrl(itemImg)" mode=""
								@click="vbPicture(new Array(formatImgUrl(itemImg)))">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFaultRepairInfoById
	} from '@/common/api.js';
	import {
		callbackRequest,
		getStorage,
		alertTip,
		formatDate,
		sureAlterTip,
		vbPicture,
		formatImgUrl
	} from '@/common/util.js';
	export default {

		data() {
			return {
				vbPicture: vbPicture,
				formatImgUrl: formatImgUrl,
				userInfo: getStorage('userInfo'),
				userId: getStorage('userInfo').userId,
				formatDate: formatDate,
				item: {},
				pageTitle: ['报修', '报事'],
				id: 0,
			}
		},
		onLoad(option) {
			this.id = option.id || 0;
			this.getFaultRepairInfoById();
		},
		methods: {
			getFaultRepairInfoById() {
				let params = {
					method: getFaultRepairInfoById,
					data: {
						userId: this.userId,
						id: this.id
					}
				};
				callbackRequest(params).then(res => {
					res = res.data;
					if (res.returnCode == 1) {
						this.item = res.returnData;
					} else {
						alertTip(res.returnMsg);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';

	.container {
		.details {
			font-size: 28upx;
			color: #555555;
			// height: 550upx;
			background: white;
			margin: 15upx;
			border-radius: 15upx;

			.detail_msg {
				margin-left: 24upx;
				border-radius: 10upx;

				.info-item {
					border-bottom: 1px solid #f8f8f8;
					line-height: 96upx;

					.label {
						display: inline-block;
						width: 188upx;
						font-size: 28upx;
						color: #333;
						font-weight: 400;
					}
				}

				.status {
					.infoSpan {
						color: #00c277;
					}

					.infoSpan2 {
						color: #FB8107;
					}
				}

				.img-box {

					// background: #fff;
					image {
						width: 200upx;
						height: 200upx;
						margin: 20upx 20upx 0 0;
					}
				}
			}
		}
	}

	.dateTit {
		width: 100%;
		display: flex;
		align-items: center;
		// margin-left: 16upx;

		image {
			width: 35upx;
			height: 35upx;
			margin-right: 10upx;
		}

		.leftIcon {
			width: 8upx;
			height: 30upx;
			background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
			border-radius: 5px;
			margin-right: 10upx;
		}
	}
</style>