asd-mobild/src/views/weibao/views/followUp/details.vue

<template>
  <div>
    <van-nav-bar title="随访记录" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="message">
      <van-row class="topBox">
        <van-col span="18">
          <van-row class="row">
            <van-col span="9">姓名：{{dataList.name}}</van-col>
            <van-col span="6">性别：{{dataList.sex}}</van-col>
            <van-col span="9">年龄：{{dataList.age}}</van-col>
          </van-row>
          <van-row class="row">
            <van-col span="24">儿童类型：{{dataList.childTypeName}}</van-col>
          </van-row>
          <van-row class="row">
            <van-col span="24">教育情况：{{dataList.name}}</van-col>
          </van-row>
          <van-row class="row">
            <van-col span="24">健康情况：{{dataList.healthStatus}}</van-col>
          </van-row>
        </van-col>
        <van-col span="6">
          <img class="tx" :src="dataList.url?dataList.url:require('../../assets/tx.png')" alt="">
        </van-col>
        <van-row class="row">
          <van-col span="10">监护人：{{dataList.guardianName}}</van-col>
          <van-col span="14">联系方式：{{dataList.guardianPhone}}</van-col>
        </van-row>
        <van-row class="row">
          <van-col span="24">居住地址：{{dataList.address}}</van-col>
        </van-row>
      </van-row>
    </div>
    <div class="main">
      <div>
        <p>随访详情：</p>
        <div class="box">
          {{dataList.remark}}
        </div>
      </div>
      <div>
        <p>照片：</p>
        <div class="boximg">
          <div v-for="(item,index) in picsArr" :key="index">
            <van-image lazy-load fit="contain" :src="item" alt="" @click="showPopup,startPosition=index" />
          </div>
        </div>
        <van-image-preview closeable :startPosition="startPosition" v-model="show" :images="pics"></van-image-preview>
      </div>
      <div>
        <p>视频：</p>
        <div class="boximg">
          <div v-for="(item,index) in videos" :key="index">
            <video @click="showvideoplay=true,videourl=item" style="object-fit:cover;" :src="item" poster='../../assets/video.png'></video>
          </div>
        </div>
      </div>
    </div>
    <van-dialog style="width:100%;border-radius:0;height:200px" v-model="showvideoplay" :show-cancel-button="false" :show-confirm-button="false" closeOnClickOverlay>
      <video controls preload="auto" style="width:100%;height:200px;object-fit: contain;" :src="videourl" v-if="videourl"></video>
    </van-dialog>
  </div>
</template>
<script>
import { followUpHistoryDetail } from '../../api/index.js'
export default {
  data() {
    return {
      show: false,
      fileList: [],
      showvideoplay: false,
      startPosition: 0,
      index: 0,
      videourl: '',
      images: [],
      dataList: '',
      appendFile: '',
      pics: [],
      picsArr: [],
      videos: [],
    }
  },
  created() {
    this.id = this.$route.query.id
    this.followUpHistoryDetail()
  },
  methods: {
    async followUpHistoryDetail() {
      const res = await followUpHistoryDetail({ id: this.id })
      this.dataList = res.data
      this.pics = res.data.pics.split(',')
      this.pics.forEach((item) => {
        console.log(item)
        if (item.indexOf('.jpg') || item.indexOf('.png')) {
          this.picsArr.push(item.replace('/cgpimage/', '/cgpimage/240x240/'))
        }
      })
      if (!res.data.videos) return
      this.videos = res.data.videos.split(',')
    },
    showPopup() {
      this.show = true
    },
    onChange(index) {
      this.index = index
    },
  },
}
</script>
<style lang="scss" scoped>
.tx {
  width: 160px;
  height: 160px;
}
.message {
  padding: 0 30px;
}
.topBox {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}
.van-row {
  font-size: 30px;
  text-align: left;
}
.row {
  .van-col {
    line-height: 60px;
  }
}
.main {
  padding: 0 30px;
  font-size: 30px;
  text-align: left;
  .box {
    min-height: 200px;
    border: 1px solid #eee;
    padding: 20px;
    font-size: 26px;
    color: #999;
  }
  .boximg {
    min-height: 100px;
    border: 1px solid #eee;
    padding: 20px 0;
    font-size: 26px;
    color: #999;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    ::v-deep .van-image {
      max-width: 200px;
      //   max-height: 200px;
      margin: 0 10px;
      //   margin-right: 16px;
      margin-bottom: 16px;
      img {
        max-width: 200px;
        max-height: 200px;
        margin: 0 10px;
        //   margin-right: 16px;
        margin-bottom: 16px;
      }
    }
    video {
      width: 180px;
      height: 180px;
      margin: 0 10px;
      //   margin-right: 16px;
      margin-bottom: 16px;
    }
  }
}
::v-deep .van-overlay {
  background-color: rgba(0, 0, 0, 0.75);
}
</style>