LongjoeUI/src/pages/report/reportdetail.vue

<template>
  <div>
    <div :class="colortop"></div>
    <div style="display:flex;">
      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==1">客户销售记录</div>
      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==2">产品销售记录</div>
      <div class="reportdetail_mx_subtitle">2019年1月~2019年6月
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xuanze1"></use>
        </svg></div>
    </div>

    <!-- 客户信息 来源于1-客户销售排名统计表 -->
    <div class="reportmx_main" v-if="reporttype == 1">
      <div style="font-size:24px;font-weight:bold">沙特石油王子有限公司</div>
      <div style="font-size:15px;">业务员：张小姗</div>
      <div style="font-size:14px;color:#666;margin-top:5px">共下单 8 次，10 款产品共 4000 件</div>
      <div style="font-size:14px;color:#f20">合计金额 4,000,000元</div>
    </div>

    <!-- 产品信息 来源于2-产品销售排名统计表 -->
    <div class="reportmx_main" v-if="reporttype == 2">
      <div style="font-size:24px;font-weight:bold">电竞椅 S-150</div>
      <div style="font-size:14px;">规格 55.5*66*129CM</div>
      <div style="font-size:14px;"><span>背垫尺寸 85*48CM</span><span style="margin-left:10px">坐垫尺寸 52*53CM</span></div>
      <div style="font-size:14px;">
        <span>座深 41CM</span>
        <span style="margin-left:10px">座高 48CM</span>
        <span style="margin-left:10px">净重 17.5KG</span>
        <span style="margin-left:10px">毛重 19KG</span>
      </div>
      <div style="font-size:14px;color:#666;margin-top:5px">共下单 8 次，10 个客户共 4000 件</div>
      <div style="font-size:14px;color:#f20">合计金额 4,000,000元</div>
    </div>

    <div class="img_wap" v-if="reporttype == 2">
      <div style="flex:0 0 90%;margin: 0 auto;">
        <img src="../../assets/zhutu_01.jpg" class="img-bingtu"></img>
      </div>
    </div>

    <div class="liubai"></div>

<!-- 业务员明细、区域明细 -->
    <div v-if="reporttype==2">
      <div class="reportmx_mx" style="padding: 0px;">
        <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
          <div style="margin:0 auto" v-if="reporttype==2">区域明细</div>
        </div>

        <div class="reportdetail_mx_for " v-for="(areaitem,index) in arealist" :key="index">
          <div class="reportdetail_mx_index">{{index+1}}</div>

          <div style="padding:0 0 0 5px; ">
            <div style="display:flex;align-items: center">
              <div style="font-size: 15px;font-weight: bold;margin-right:20px">{{areaitem.areaname}}</div>
              <div class="reportdetail_mx_amt">{{areaitem.amt}}元</div>
              <div class="reportdetail_mx_qty">{{areaitem.qty}}张</div>
              <div class="reportdetail_mx_qty">{{areaitem.percent}}%</div>
            </div>
          </div>

        </div>

      </div>
      <div class="liubai"></div>
      <div class="reportmx_mx" style="padding: 0px;">
        <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
          <div style="margin:0 auto" v-if="reporttype==2">业务员明细</div>
        </div>

        <div class="reportdetail_mx_for " v-for="(saleritem,index) in saleramtlist" :key="index">
          <div class="reportdetail_mx_index">{{index+1}}</div>

          <div style="padding:0 0 0 5px; ">
            <div style="display:flex;align-items: center">
              <div style="font-size: 15px;font-weight: bold;margin-right:20px">{{saleritem.salername}}</div>
              <div class="reportdetail_mx_amt">{{saleritem.amt}}元</div>
              <div class="reportdetail_mx_qty">{{saleritem.qty}}张</div>
              <div class="reportdetail_mx_qty">{{saleritem.percent}}%</div>
            </div>
          </div>

        </div>

      </div>
      <div class="liubai"></div>
    </div>

    <div class="reportmx_mx">
      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
        <div style="margin:0 auto" v-if="reporttype==1">产品明细</div>
        <div style="margin:0 auto" v-if="reporttype==2">客户明细</div>
      </div>

      <div class="reportdetail_mx_for mx_border" v-for="(saleritem,index) in saleramtlist" :key="index">
        <div class="reportdetail_mx_index">{{index+1}}</div>

        <div style="padding:0 0 0 5px; ">
          <div class="reportdetail_mx_name">
            <div v-if="reporttype==0">{{saleritem.salername}}</div>
            <div v-if="reporttype==1">{{saleritem.mtrlname}}</div>
            <div v-if="reporttype==2">{{saleritem.cusname}}</div>
          </div>

          <div class="reportdetail_mx_mode" v-if="reporttype==1">150*79*60cm</div>
          <div class="reportdetail_mx_mode" v-if="reporttype==2">业务员：{{saleritem.salername}}</div>

          <div style="display:flex;align-items: center">
            <div class="reportdetail_mx_amt">{{saleritem.amt}}元</div>
            <div class="reportdetail_mx_qty">{{saleritem.qty}}张</div>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        reporttype: 1, //来源 0-业务员销售排名统计表（同时显示客户列表、产品列表） 1-客户销售排名统计表（显示产品列表） 2-产品销售排名统计表（显示客户列表）
        saleramtlist: [{
            salername: "张小姗",
            cusname: "沙特石油王子有限公司",
            mtrlname: "经理椅 NF-8920",
            amt: "600,000",
            percent: "30",
            qty: 600
          },
          {
            salername: "李小四",
            cusname: "俄罗斯老铁有限公司",
            mtrlname: "经理椅 NF-8927",
            amt: "500,000",
            percent: "20",
            qty: 500
          },
          {
            salername: "王小五",
            cusname: "英国王室有限公司",
            mtrlname: "职员椅 NF-3343",
            amt: "400,000",
            percent: "15",
            qty: 400
          },
          {
            salername: "吴小丽",
            cusname: "法国浪漫有限公司",
            mtrlname: "电竞椅 S-150",
            amt: "300,000",
            percent: "10",
            qty: 300
          },
          {
            salername: "陆小六",
            cusname: "意大利时尚有限公司",
            mtrlname: "电竞椅 S-103",
            amt: "250,000",
            percent: "5",
            qty: 250
          },
          {
            salername: "刘小七",
            cusname: "丹麦饼匠有限公司",
            mtrlname: "电竞椅 S-120",
            amt: "210,000",
            percent: "4",
            qty: 210
          },
          {
            salername: "方小八",
            cusname: "德国战车有限公司",
            mtrlname: "职员椅 NF-6004M",
            amt: "200,000",
            percent: "3",
            qty: 200
          },
          {
            salername: "冯小轩",
            cusname: "澳大利亚袋鼠有限公司",
            mtrlname: "办公布椅 NF-513V",
            amt: "190,000",
            percent: "2",
            qty: 190
          },
          {
            salername: "马小梅",
            cusname: "新加坡花园有限公司",
            mtrlname: "办公布椅 NF-513M",
            amt: "180,000",
            percent: "1",
            qty: 180
          },
          {
            salername: "高小松",
            cusname: "美利坚老鹰有限公司",
            mtrlname: "休闲椅 901",
            amt: "170,000",
            percent: "0.9",
            qty: 170
          }
        ],
        arealist: [{
          areaname: "欧洲　",
          amt: "2,000,000",
          qty: 2000,
          percent:50
        },{
          areaname: "亚洲　",
          amt: "1,200,000",
          qty: 1200,
          percent:30
        },{
          areaname: "大洋洲",
          amt: "500,000",
          qty: 500,
          percent:12.5
        },{
          areaname: "非洲　",
          amt: "300,000",
          qty: 300,
          percent:7.5
        }]
      }
    },
    computed: {
      colortop: function () {
        return {
          kindred: this.reporttype == 0,
          kindblue: this.reporttype == 1,
          kindgreen: this.reporttype == 2
        };
      },
      colortitle: function () {
        return {
          bgred: this.reporttype == 0,
          bgblue: this.reporttype == 1,
          bggreen: this.reporttype == 2
        };
      }
    }

  }

</script>

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: "微软雅黑";
  }

  .img_wap {
    display: flex;
    margin-top: 20px;
  }

  .img-bingtu {
    width: 100%;
  }

  .reportdetail_mx_bar {
    border-top: 8px solid dodgerblue;
  }

  .kindblue {
    border-top: 8px solid dodgerblue;
  }

  .kindgreen {
    border-top: 8px solid yellowgreen;
  }

  .bgblue {
    background-color: dodgerblue;
  }

  .bggreen {
    background-color: yellowgreen;
  }

  .reportdetail_mx_title {
    color: white;
    font-size: 15px;
    font-weight: bold;
    padding: 3px 8px;
    margin-left: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .reportdetail_mx_subtitle {
    position: absolute;
    right: 10px;
    padding: 3px;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    color: grey;
    margin-top: 3px;
  }

  .reportmx_main {
    margin: 5px 10px 0 20px;
  }

  .reportmx_mx {
    margin: 0 10px 0 10px;
    padding: 0 0 30px 0;
  }

  .liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
    margin: 10px 0;
  }

  .reportdetail_mx_for {
    display: flex;
    /* margin: 5px 0 15px 10px; */
    align-items: center;

    padding: 5px 0 5px 0
  }

  .mx_border {
    border-bottom: 1px solid #eee;
  }

  .reportdetail_mx_index {
    flex: 0 0 10%;
    text-align: center;
    /* align-items: center; */
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;

  }

  .reportdetail_mx_name {
    flex: 0 0 80%;
    font-size: 15px;
    font-weight: bold
  }

  .reportdetail_mx_mode {
    font-size: 13px;
    color: #666
  }

  .reportdetail_mx_amt {
    font-size: 15px;
    font-weight: bold;
    color: #fd7526
  }

  .reportdetail_mx_qty {
    margin-left: 20px;
    font-size: 15px;
    color: #666
  }

</style>