mp-ui-pc/src/views/business/channel/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.contact}}
         </el-form-item>
          <el-form-item label="渠道级别" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"></span>
             {{detail.level}}级渠道
          </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.parentName}}
         </el-form-item>
          <el-form-item label="佣金比例" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"></span>
             {{detail.commRate}}%
          </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>
            {{ detail.createdTime | moment("YYYY-MM-DD HH:mm:ss") }}
          </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.siteCnt}}
         </el-form-item>
          <el-form-item label="用户数" style="width: 50%;margin-bottom:5px;" >
             <span :class="loading?'el-icon-loading':''"></span>
             {{detail.userCnt}}
          </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.orderCnt}}
         </el-form-item>
          <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>
     </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':''">{{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 { getChannelDetail} from "@/api/admin/channel";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editId: [Number, String] //  编辑用
  },

  data() {
    return {
      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
      getChannelDetail(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>