mp-ui-pc/src/views/business/salesite/components/Detail.vue

<template>
 <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="750px"
    :append-to-body="true"
    :before-close="close"
    :destroy-on-close="true"
    :close-on-click-modal="false">
   <el-form ref="form" label-width="120px" label-position="top" >
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
        <el-form-item label="经销商名称" style="width: 50%; margin-bottom:5px;" >
          <span :class="loading?'el-icon-loading':''"></span>
          {{detail.name}}
        </el-form-item>
         <el-form-item label="手机号码" style="width: 50%; margin-bottom:5px;" >
            <span :class="loading?'el-icon-loading':''"></span>
            {{detail.mobile}}
         </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
         <el-form-item label="上级渠道" style="width: 50%;margin-bottom:5px;" >
           <span :class="loading?'el-icon-loading':''"></span>
           {{detail.parentsName}}
         </el-form-item>
         <el-form-item label="联系人" style="width: 50%;margin-bottom:5px;" >
           <span :class="loading?'el-icon-loading':''"></span>
           {{detail.contact}}
         </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
          <el-form-item label="佣金比例" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"></span>
             {{detail.commRate}}%
          </el-form-item>
          <el-form-item label="门店类型" style="width: 50%;margin-bottom:5px;" >
            <span :class="loading?'el-icon-loading':''"></span>
            <span v-if="detail.siteType">{{detail.siteType && JSON.parse(detail.siteType).desc}}</span>
            <span v-else>--</span>
          </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
          <el-form-item label="门店名称" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"></span>
             <span v-if="detail.siteName">{{detail.siteName}}</span>
             <span v-else>--</span>
          </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
         <el-form-item label="所在地区" style="width: 50%;margin-bottom:5px;" >
           <span :class="loading?'el-icon-loading':''"></span>
           {{detail.province}} {{detail.city}} {{detail.area}}
         </el-form-item>
          <el-form-item label="详细地址" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"> </span>
             <span v-if="detail.address">{{ detail.address }}</span>
             <span v-else>--</span>
          </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
         <el-form-item label="认证状态" style="width: 100%;margin-bottom:5px;" >
           <span :class="loading?'el-icon-loading':''"></span>
           {{detail.certifyStatus && JSON.parse(detail.certifyStatus).desc}}
         </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
         <el-form-item label="营业执照" style="width: 50%;margin-bottom:5px;" >
           <span :class="loading?'el-icon-loading':''"></span>
            <a target="_black" v-if="detail.bizLicensePic" :href="`${IMG_URL + detail.bizLicensePic}`"><img :src="`${IMG_URL + detail.bizLicensePic}`" style="max-height: 37px;max-width: 54px"></a>
            <span v-else>无</span>
         </el-form-item>
          <el-form-item label="门头照片" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"> </span>
            <a target="_black" v-if="detail.doorPic" :href="`${IMG_URL + detail.doorPic}`"><img :src="`${IMG_URL + detail.doorPic}`" style="max-height: 37px;max-width: 54px"></a>
            <span v-else>无</span>
          </el-form-item>
     </flexbox>
      <el-divider></el-divider>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
          <el-form-item label="用户数" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"></span>
             {{detail.userCnt}}
          </el-form-item>
          <el-form-item label="订单数" style="width: 50%;margin-bottom:5px;" >
            <span :class="loading?'el-icon-loading':''"> </span>
            {{detail.operData && detail.operData.orderCnt}}
          </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
          <el-form-item label="营业额" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"></span>{{detail.operData &&detail.operData.saleAmt/100}}
          </el-form-item>
          <el-form-item label="佣金" style="width: 50%;margin-bottom:5px;" >
            <span :class="loading?'el-icon-loading':''">{{detail.operData && detail.operData.commAmt/100}} </span>
          </el-form-item>
     </flexbox>
   </el-form>
   <div slot="footer" class="dialog-footer">
     <el-button @click="close">关 闭</el-button>
   </div>
 </el-dialog>
</template>
<script>

import { mapGetters } from 'vuex'
import { publicFileGetUrl } from "@/api/common"
import { getSaleSiteDetail} from "@/api/admin/salesite";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editId: [Number, String] //  编辑用
  },

  data() {
    return {
      IMG_URL: publicFileGetUrl,
      loading: false,
      // 详情数据
      detail: {}
    }
  },

  computed: {
    ...mapGetters(['userInfo']),
    title() {
      return '经销商详情'
    }
  },

  created() {
    // 是编辑
    if (this.editId) {
      this.getDetail()
    }
  },

  mounted() {
    document.body.appendChild(this.$el)
  },

  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },

  methods: {

    /**
     * 获取项目详情
     */
    getDetail() {
      this.loading = true
      getSaleSiteDetail(this.editId).then(res => {
          this.loading = false
          const data = res.data || {}
          // console.log("getDetail :" + JSON.stringify(data))
          this.detail = data
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 关闭窗口
     */
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.tag{
  margin-right: 15px;
  width: 90px;
  text-align: center;
  cursor: pointer;

}

.tag-select{
  background-color: #409eff!important;
  border-color: #409eff!important;
  color: #fff!important;
}

.cover-content-item{
  width: 220px;
  float: left;
  position: relative;
  .cover-img {
    width: 200px;
    height: 100px;
  }
  .cover-mark {
    position: absolute;
    top: 0px;
    right: 28px;
    z-index: 1;
    color: red;
    cursor: pointer;
    visibility: hidden;
  }
  .select {
      visibility: visible!important;
  }
}

.dialog-footer{
  text-align: center;
}

</style>

<style lang="scss">

.el-dialog__body {
    padding: 15px 20px;
}

.ygp-form-items {
   .el-form-item{
     padding: 0 5px;
   }

  .el-form-item__label {
    line-height: 1.2;
    padding-bottom: 0px;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
  }

  .el-form-item__error {
    position: relative;
    top: auto;
    left: auto;
  }

  .el-form-item.is-desc_text {
    .el-form-item__label {
      display: none;
    }
  }
}
</style>