nsgk_mobile/src/views/sunVillage_info/details.vue

<template>
     <div class="home_wrapper">
         <div class="header_main">
             {{form.openName}}
             <div class="return_btn" @click="onClickLeft"></div>
         </div>
         <div class="release_head">
            <div class="people"><i class="icon"></i>发布人:{{form.createBy}}</div>
            <div class="time"><i class="icon"></i>发布日期:{{form.createTime}}</div>
         </div>
         <div class="release_conetnt">
            <img :src="'/api'+item" v-for="(item,index) in form.openPic" :key="index" />
            <van-cell-group inset>
             <van-cell :title="item.substr(27,item.length)" v-for="(item,index) in form.openFile" :key="index" @click="goFile(item)" />
            </van-cell-group>
            <p style="margin-top: 10PX">{{form.remark}}</p>
         </div>
    </div>
</template>

<script>
  import { financePublicDetail , tempWorkerPublicDetail , majorEventPublicDetail } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        queryParams:{
          id:'',
        },
        form:{},
        type:''
      };
    },
    created() {
      this.houseGetDicts("asset_status").then((response) => {
        this.assetStatusOptions = response.data;
      });
      this.houseGetDicts("asset_type").then((response) => {
        this.assetTypeOptions = response.data;
      });
      this.houseGetDicts("use_type").then((response) => {
        this.useTypeOptions = response.data;
      });
      this.queryParams.id = this.$route.query.id;
      this.type = this.$route.query.type;
      this.queryParams.bookId = Cookies.get('bookId');
      this.queryParams.deptId = Cookies.get('deptId');
      this.getDetail()
    },
    methods: {
      getDetail(id){
        setTimeout(() => {
          if (this.type == 'finance'){
            financePublicDetail(this.queryParams).then(response => {
              if (response.code == 200){
                if (response.data.openFile){response.data.openFile = response.data.openFile.split(',');}
                if (response.data.openPic){response.data.openPic = response.data.openPic.split(',');}
                response.data.createTime = response.data.createTime.substr(0,10)
                this.form = response.data;
              }
            });
          }
          if (this.type == 'tourists'){
            tempWorkerPublicDetail(this.queryParams).then(response => {
              if (response.code == 200){
                if (response.data.openFile){response.data.openFile = response.data.openFile.split(',');}
                if (response.data.openPic){response.data.openPic = response.data.openPic.split(',');}
                response.data.createTime = response.data.createTime.substr(0,10)
                this.form = response.data;
              }
            });
          }
          if (this.type == 'issues'){
            majorEventPublicDetail(this.queryParams).then(response => {
              if (response.code == 200){
                if (response.data.openFile){response.data.openFile = response.data.openFile.split(',');}
                if (response.data.openPic){response.data.openPic = response.data.openPic.split(',');}
                response.data.createTime = response.data.createTime.substr(0,10)
                this.form = response.data;
              }
            });
          }

        }, 1000);
      },
      goFile(item){
        window.location = '/api'+item;
      }
    },
  }
</script>

<style scoped lang="scss">
.home_wrapper{
  background: #e9e9e9;
  min-height: 100vh;
  width: 100vw;
  .header_main {
      height: 116px;
      background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
      background-size: 100% 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      line-height: 116px;
      text-align: center;
      color: #fff;
      position: relative;

      .return_btn {
          width: 24px;
          height: 43.2px;
          background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
          background-size: 20px 36px;
          position: absolute;
          left: 38px;
          top: 36px;
      }
  }
  .release_head{
      height: 90px;
      padding:0 23px;
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #929292;
      .people{
          flex: 1;
          display: flex;
          align-items: center;
          .icon{
              width: 24px;
              height: 21px;
              background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
              background-size: 100% 100%;
              display: block;
              margin-right: 8px;
          }
      }
      .time{
          flex: 1;
          display: flex;
          align-items: center;
          justify-content:flex-end;
          .icon{
              width: 25px;
              height: 25px;
              background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
              background-size: 100% 100%;
              display: block;
              margin-right: 8px;
          }
      }
  }
  .release_conetnt{
      padding:0 22px;
      font-size: 32px;
      color: #252525;
      line-height: 44px;
      img{
          max-width: 100%;
          margin-bottom: 16px;
      }
      p{
          margin-bottom: 16px;
      }
  }
}
</style>