uniapp-ZHSQ/packages/community/repairDetail/index.vue

<template>
  <div class="container">
    <div
      class="searchBox"
      :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
    >
      <div class="searchBox_add">
        <div class="searchBox_left">
          <u-icon
            bold
            color="#000"
            size="40"
            name="arrow-left"
            @click="back"
          ></u-icon>
        </div>
        <div class="searchBox_mid">报修信息</div>
        <div class="searchBox_right"></div>
      </div>
    </div>

    <div class="repairMsg">
      <div :class="['orderItemTit', statusType[info.status].style]">
        <div class="orderItemTit_left">工单编号：{{ info.order_code }}</div>
        <div class="orderItemTit_right">{{ statusType[info.status].desc }}</div>
      </div>

      <div class="row">
        <div class="row_label">小区房源名称</div>
        <div class="row_con">{{ info.room.name }}</div>
      </div>

      <div class="row">
        <div class="row_label">报修类型</div>
        <div class="row_con">{{ info.ac.category_name }}</div>
      </div>

      <div class="row">
        <div class="row_label">问题描述</div>
        <div class="row_con">{{ info.problem_description }}</div>
      </div>

      <div class="row">
        <div class="row_label">联系人</div>
        <div class="row_con">{{ info.contact_name }}</div>
      </div>

      <div class="row">
        <div class="row_label">联系电话</div>
        <div class="row_con">{{ info.contact_phone }}</div>
      </div>

      <div class="row">
        <div class="row_label">上门时间</div>
        <div class="row_con">{{ info.service_time }}</div>
      </div>
    </div>

    <div class="repairMsg">
      <div class="row">
        <div class="row_label df">图片</div>
        <div class="row_con">
					<view v-if="info.imagesList && info.imagesList.length == 0">暂无图片</view>
          <image
						v-else
            v-for="(item, index) in info.imagesList"
            :key="index"
            :src="item"
            mode=""
						@click="handlerPreviewImageClick(item)"
          >
          </image>
        </div>
      </div>

      <div class="row">
        <div class="row_label df">视频</div>
        <div class="row_con">
					<view v-if="info.videosList && info.videosList.length == 0">暂无视频</view>
					<div v-else v-for="(item, index) in info.videosList" :key="index" class="videoBOX">
						<video id="myVideo" :src="item" playsinline webkit-playsinline></video>
					</div>
        </div>
      </div>

      <div class="row" v-if="info.assign_time">
        <div class="row_label">指派时间</div>
        <div class="row_con noneBor">{{ info.assign_time }}</div>
      </div>
    </div>

    <div class="repairMsg" v-if="info.status !== 1">
      <div class="row">
        <div class="row_label">维修师傅</div>
        <div class="row_con">{{ info.repairman_worker.name }}</div>
      </div>

      <div class="row">
        <div class="row_label">师傅手机号</div>
        <div class="row_con">{{info.repairman_worker.mobile}}</div>
      </div>

      <div class="row">
        <div class="row_label">师傅工号</div>
        <div class="row_con noneBor">{{info.repairman_worker.emp_no}}</div>
      </div>
    </div>

    <div class="repairMsg" v-if="info.status !== 1 && info.status !== 2">
      <div class="row">
        <div class="row_label df">维修图片</div>
        <div class="row_con">
          <view v-if="info.repairImagesList && info.repairImagesList.length == 0">暂无图片</view>
          <image
            v-for="(item, index) in info.repairImagesList"
            :key="index"
            :src="item"
            mode=""
            @click="headerRepairImagesClick(item)"
          />
        </div>
      </div>

      <div class="row">
        <div class="row_label df">维修视频</div>
        <div class="row_con">
          <view v-if="info.repairVideosList && info.repairVideosList.length == 0">暂无视频</view>
          <div v-else v-for="(item, index) in info.repairVideosList" :key="index" class="videoBOX">
						<video id="myVideo" :src="item" playsinline webkit-playsinline></video>
					</div>
        </div>
      </div>

      <div class="row">
        <div class="row_label">维修描述</div>
        <div class="row_con noneBor">{{ info.repair_description || '暂无描述' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  request,
  picUrl,
  menuButtonInfo,
} from "../../../utils";
import { apiArr } from "../../../api/v2Community";
export default {
  data() {
    return {
      active: "1",
      top: "",
      localHeight: "",
      info: {},
      // 状态枚举类型
      statusType: {
        1: {
          desc: "待指派",
          style: "orderItemTit_state1",
        },
        2: {
          desc: "进行中",
          style: "orderItemTit_state2",
        },
        3: {
          desc: "已完成",
          style: "orderItemTit_state3",
        },
        4: {
          desc: "已作废",
          style: "orderItemTit_state4",
        },
      },
      
    };
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    changeAct(e) {
      this.active = e;
    },
		handlerPreviewImageClick(item) {
			uni.previewImage({
				urls: this.info.imagesList,
				current: item,
			});
		},
    headerRepairImagesClick(item) {
			uni.previewImage({
				urls: this.info.repairImagesList,
				current: item,
			});
    },
    async init(id) {
      const res = await request(apiArr.workOrderCrudInfo, "POST", {
        id: Number(id),
      });
			const newRes = {
				...res,
				imagesList: res.images !== '' ? res.images.split(',').map(url => `${picUrl}${url}`) : [],
				videosList: res.videos !== '' ? res.videos.split(',').map(url => `${picUrl}${url}`) : [],
        repairImagesList: res.repair_images !== "" ? res.repair_images.split(",").map((url) => `${picUrl}${url}`) : [], // 上报图片
        repairVideosList: res.repair_videos !== "" ? res.repair_videos.split(",").map((url) => `${picUrl}${url}`) : [], // 上报图片
			}
      this.info = newRes;
    },
  },

  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.init(options.id);
  },

  onShow() {},
};
</script>

<style>
@import url("./index.css");
</style>