xps-web-csat-v5/src/views/hos/profile/index.vue

<template>
  <div class="content-container">
    <vuescroll :ops="ops" style="height:100%">
      <el-card class="box-card m-bottom-15" shadow="never">
        <div slot="header" class="header">
          <span class="name">{{ viewData.hosName }}</span>
          <span>（{{ viewData.hosCatId|hosCatFilter }}）</span>
          <span>【{{ viewData.hosGrade|hosGradeFilter }}】</span>
          <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-edit" @click="handleEdit()">编辑</el-button>
        </div>

        <el-form label-position="right" label-width="170px">
          <el-form-item label="统一社会信用代码：">{{ viewData.hosTyshxydm }}</el-form-item>
        </el-form>

        <el-form label-position="right" label-width="170px">
          <el-form-item label="注册地址：">{{ viewData.hosZcdz }}</el-form-item>
        </el-form>

        <el-form label-position="right" label-width="170px">
          <el-form-item label="地址：">
            <el-amap v-if="mapCenter" vid="hosProFileMap" style="width:40%;height:240px" zoom="12" :center="mapCenter" :amap-manager="amapManager">
              <el-amap-marker
                :center="mapCenter"
                :position="mapCenter"
                :title="mapCenter"
              />
            </el-amap>
          </el-form-item>
        </el-form>

        <el-form label-position="right" label-width="170px">
          <el-form-item label="生产经营地址：">{{ viewData.hosScjydz }}</el-form-item>
        </el-form>

        <el-form label-position="right" label-width="170px">
          <el-form-item label="介绍：">{{ viewData.hosIntro }}</el-form-item>
        </el-form>

        <el-form label-position="right" label-width="170px">
          <el-form-item label="官网地址："><el-link :href="viewData.hosWebsite" target="_blank">{{ viewData.hosWebsite }}</el-link></el-form-item>
        </el-form>
      </el-card>
      <hos ref="EditHosInfo" @formSuccess="getData" />
    </vuescroll>
  </div>
</template>

<script>
import Vuescroll from 'vuescroll'
import { getHosProfile } from '@/api/hos/hosProfileApi'
import Hos from './components/Hos.vue'
import { AMapManager } from 'vue-amap'
const amapManager = new AMapManager()
import comMixins from '@/mixin/commonMethodMixin'
export default {
  name: 'ToDoDetails',
  components: { Vuescroll, Hos },
  mixins: [comMixins],
  data() {
    return {
      mapCenter: false,
      amapManager,
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      viewData: {
        hosName: '', // 企业名称
        hosCatId: 1,
        hosTyshxydm: '', // 统一社会信用代码
        hosWzjd: '', // 位置经度
        hosWzwd: '', // 位置经度
        hosZcdz: '', // 注册地址
        hosScjydz: '', // 生产/经营地址
        hosGrade: 2, // 规模情况
        hosWebsite: '',
        hosIntro: ''
      }
    }
  },
  mounted() {
    this.getData()
  },

  methods: {
    // 编辑窗口
    getData() {
      getHosProfile().then((resp) => {
        const { data } = resp
        this.viewData = data
        this.mapCenter = [data.hosWzjd, data.hosWzwd]
      }).catch((error) => {
        console.log(error)
      })
    },

    handleEdit() {
      this.$refs['EditHosInfo'].showModel()
    }
  }
}
</script>

<style lang="scss" scoped>
.content-container{
  height: calc(98vh - var(--navHeight));
  .header{
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    .name{
      font-size: 20px;
    }
  }
  .hd-details {
    color: #FFFFFF;
  }
  p {
    color: #FFFFFF;
    font-size: 12px;
    margin: 0;
    padding: 0;
    line-height: 1.8;
    &.desc{
      font-size: 14px;
    }
    &.row{
      span{
        width: 33.3%;
        display: inline-block;
        text-align: left;
      }
    }
  }
}

</style>