BJYSYBZ/YSGZYBZ_WXAPP/pages/receivedDetail/index.vue

<template>
  <view class="nocheckBox">
    <navigation-bar :isBack="true" @toBack="toBackHandle"></navigation-bar>
    <view class="container">
      <view class="warningBox">
        <text class="title">基本信息</text>
        <view class="content">
          <view class="item">
            <text class="title">地块编号</text>
            <text class="val">{{ objs.dkbh || '' }}</text>
          </view>
          <view class="item">
            <text class="title">面积(亩)</text>
            <text class="val">{{ objs.mj || ''}}</text>
          </view>
          <view class="item">
            <text class="title">地块位置</text>
            <text class="val">{{ objs.dkwz || ''}}</text>
          </view>
          <view class="item">
            <text class="title">地块现状</text>
            <text class="val">{{ objs.dkxz || ''}}</text>
          </view>
          <view class="item">
            <text class="title">管地单位</text>
            <text class="val">{{ objs.gddw || '' }}</text>
          </view>
          <view class="item">
            <text class="title">联系人</text>
            <text class="val">{{ objs.lxr || '' }}</text>
          </view>
          <view class="item">
            <text class="title">联系电话</text>
            <text class="val">{{ objs.lxdh || '' }}</text>
          </view>
          <view class="item szfw">
            <text class="title">四至范围</text>
            <text class="val">
              <text>{{ objs.szfw || '' }}</text>
            </text>
          </view>
        </view>
      </view>
      <view class="checkResultBox">
	    <view class="titleBox">
		  <text class="title">巡查记录</text>
		  <button v-if="source == 'map'" class="btn" @click="toXcDetail">新增巡查</button>
	    </view>
        <view class="content">
          <uni-collapse
            accordion
            v-model="accordionVal"
            @change="collapseChange"
          >
            <uni-collapse-item
              titleBorder="none"
              v-for="(item, index) in collapseList"
              :key="index"
            >
              <template v-slot:title>
                <view class="cooapseHeader">巡查时间：{{ item.xcsj }}</view>
              </template>
              <view class="collapse-content">
                <view class="li">
                  <view class="x1">
                    <text>巡查人员</text>
                  </view>
                  <view class="x2">
                    <text>{{ item.xcryName }}</text>
                  </view>
                </view>
                <view class="li">
                  <view class="x1">
                    <text>联系电话</text>
                  </view>
                  <view class="x2">
                    <text>{{ item.xcryMobile }}</text>
                  </view>
                </view>
                <view class="li xcms">
                  <view class="x1">
                    <text>现场描述</text>
                  </view>
                  <view class="x2">
                    <text>{{ item.xzms }}</text>
                  </view>
                </view>
                <view class="li xczp">
                  <view class="x1">
                    <text>现场照片</text>
                  </view>
                  <view class="x2">
                    <image
                      @click="previewImg(l.fileurl, index)"
                      v-for="(l, i) in item.imgList"
                      :key="i"
                      :src="l.fileurl"
                      alt=""
                    >
                    </image>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </uni-collapse>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navigationBar from '../../components/navigationBar/navigationBar.vue';
import httpAjax from '@/utils/https.js';
import CustomMixins from '@/mixins/CustomMixins.js';
import config from '@/utils/config';
const FormData = require('@/utils/formData/formData.js');

export default {
  mixins: [CustomMixins],
  components: {
    navigationBar,
  },
  data() {
    return {
      objs: {},
      collapseList: [],
      accordionVal: '',
      warningId: '',
	  source: '',
    };
  },
  onReady() {
    uni.showTabBar();
  },
  onLoad(option) {
    const objs = JSON.parse(option['obj']);
	this.source = option['source'];
    this.objs = objs;
    this.initList();
  },
  beforeDestroy() {},
  methods: {
	  toXcDetail(){
			wx.navigateTo({
			  url: `/pages/nocheckDetail/index?obj=${JSON.stringify(this.objs)}`,
			});
	  },
    previewImg(current, index) {
      const urls = this.collapseList[index].imgList.map((item) => {
        return item.fileurl;
      });
      uni.previewImage({
        current,
        urls,
      });
    },
    initList() {
      const sendData = {
        dksyh: this.objs.dksyh,
      };
      httpAjax({
        url: 'app/xc/getXcjlListByDksyh',
        method: 'GET',
        data: sendData,
      })
        .then((result) => {
          if (result.data) {
            this.initImgs(result.data);
          }
        })
        .catch((err) => {
          console.error('');
        });
    },
    initImgs(data) {
      let that = this;
      let fileList = JSON.parse(JSON.stringify(data));

      fileList.forEach((item) => {
        item.imgList.forEach((l) => {
          that.getOSSFileById(l.fileId).then((res) => {
            let s = new Uint8Array(res[1].data);
            let sd = uni.arrayBufferToBase64(s);
            l.fileurl = 'data:image/png;base64,' + sd;
          });
        });
      });
      this.collapseList = fileList;
    },

    getOSSFileById(fileId) {
      return uni.request({
        url: config.baseUrl + 'api/oss/download?id' + '=' + fileId,
        responseType: 'arraybuffer',
      });
    },
    collapseChange() {},
    toBackHandle() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
@import './index.scss';
</style>