LongjoeUI/src/pages/buytaskdetail.vue

<template>
  <div id="taskdetail">
    <div class="topbar">
      <div class="topbar_left" @click="goback">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </div>
      <div class="topbar_middle">
        采购订单详情
      </div>
      <div class="topbar_right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caidan"></use>
        </svg>
      </div>
    </div>
    <div id="content">
      <div class="toparea_dt" :class="colortop">
        <div class="taskcode_dt">
          BG190816001
          <svg class="icon" aria-hidden="true" v-if="ifnew==1">
            <use xlink:href="#icon-ziyuan"></use>
          </svg>
        </div>
        <div class="taskflag_dt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weikaishi" v-if="taskflag_dt=='待审核'"></use>
            <use xlink:href="#icon-jindu" v-if="taskflag_dt=='在进行'"></use>
            <use xlink:href="#icon-CombinedShape" v-if="taskflag_dt=='已完成'"></use>
          </svg>
          {{taskflag_dt}}
        </div>
      </div>
      <div class="taskinfo_dt">
        <div class="cust_dt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-kehu"></use>
          </svg>
          广东省佛山市顺德区某某纸箱商
        </div>
      </div>
      <div class="reptel_dt">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-address"></use>
        </svg>
        <span>王利云</span>
        <span style="margin-left:10px;">13800138000</span>
      </div>
      <div class="address_dt">地址：广东省顺德市芙蓉中路二段115号</div>

      <div class="liubai_dt"></div>

      <div class="middlearea">
        <div class="taskinfo_dttitle_dt">
          <div class="title_dt">负责人：</div>
          <div class="taskinfo_dtitem">张大三</div>
        </div>
        <div class='taskinfo_dtflex'>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt ">订货日期：</div>
            <div class="taskinfo_dtitem leftsize">2019-8-16</div>
          </div>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt rightside">相关号码：</div>
            <div class="taskinfo_dtitem requiredate">K1823103</div>
          </div>
        </div>
        <div class="taskinfo_dtamt">
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt">金额：</div>
            <div class="taskinfo_dtitem taskamt leftsize">¥10000</div>
          </div>
          <div class="taskinfo_dttitle_dt dingjin">
            <div class="title_dt rightside">已付金额：</div>
            <div class="taskinfo_dtitem taskamt">¥0</div>
          </div>
        </div>

        <div class="taskinfo_dtamt">
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt">未付金额：</div>
            <div class="taskinfo_dtitem taskamt leftsize">¥10000</div>
          </div>
          <div class="taskinfo_dttitle_dt rightside">
            <div class="title_dt">结算方式：</div>
            <div class="taskinfo_dtitem">记帐</div>
          </div>
        </div>

      </div>

      <div class="dscrp">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wentibuchong"></use>
        </svg>
        备注：出口单，请准时交货。
      </div>

      <div style="font-size:14px;margin:20px 20px 10px 20px">
        <div style="line-height:30px">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yasuobao"></use>
          </svg>
          唛头资料_1.rar
          <span style="font-size:12px;color:#888;margin-left:10px">9.4 MB</span>
        </div>
        <div style="line-height:30px">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yasuobao"></use>
          </svg>
          唛头资料_2.rar
          <span style="font-size:12px;color:#888;margin-left:10px">6.4 MB</span>
        </div>
      </div>



      <div class="liubai_dt"></div>
      <!-- <div class="mxjdinfo">*点击明细可查看明细产品进度</div> -->
      <div class="subtitle_dt">订单明细</div>
      <div class="taskmx_dt">

        <div id="rowmx_dt">
          <div class="mxmtrl_dt">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dian"></use>
            </svg>
            天地合纸箱 100*80*60cm
          </div>
          <div class="mxqty_dt">交期：2019-08-20</div>
          <div class="mxqty_dt">数量：600个，单价：8.33元，合计：5000元</div>

        </div>

        <div id="rowmx_dt">
          <div class="mxmtrl_dt">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dian"></use>
            </svg>
            躺椅纸箱 50*10*10
          </div>
          <div class="mxqty_dt">交期：2019-08-20</div>
          <div class="mxqty_dt">数量：400个，单价：7.5元，合计：3000元</div>
        </div>


        <div id="rowmx_dt">
          <div class="mxmtrl_dt">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dian"></use>
            </svg>
            1017G纸箱 74*23*10
          </div>
          <div class="mxqty_dt">交期：2019-08-20</div>
          <div class="mxqty_dt">数量：200个，单价：10元，合计：2000元</div>
          <div class="mxqty_dt">已收货数：200个，完成收货：2019-08-20</div>

        </div>
      </div>
      <div style="font-size:12px;color:#888;padding: 0px 0 10px 20px">*点击可查看明细相关信息</div>

      <div class="liubai_dt"></div>
      <div class="subtitle_dt">订单进度跟踪</div>
      <div class="jindu">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          下单：2019-08-16 09:08 张大三
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          初审：2018-12-11 09:30 李大四
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          终审：2018-12-11 09:30 王小五
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-baifenbi"></use>
          </svg>
          入库：20%&nbsp&nbsp(200/1000)
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          收货开单：2019-08-20 10:30 李小兵
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzouweijinxing"></use>
          </svg>
          收货完成：
        </div>

      </div>


    </div>

    <!-- 弹出详细信息 -->
    <div v-show="ifmx!=0">
      <div class="quote_edit_mask"></div>

      <div style="z-index: 9999;
    background-color: #ffffff;
    position: fixed;
    bottom: 0px;
    height: 90%;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 10px 0;">
        <div style="display:flex">
          <div style="margin:0 auto;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">明细相关信息</div>
          <div style="position: absolute;
            right: 20px;
            color: #ccc;
            font-size: 12px;
            line-height:26px;">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-guanbi"></use>
            </svg>
          </div>
        </div>

        <div style="font-size:14px;margin:5px 0 ;padding:0 15px">
          <div>供应商：广东省佛山市顺德区某某纸箱商</div>
          <div>物料编号：ZX1001</div>
          <div>物料名称：天地合纸箱 74*23*10</div>
          <div style="display:flex">
            <div style="flex:0 0 70%">采购数量：600个</div>
            <div style="position: absolute;right:20px">交货日期：2019-08-20</div>
          </div>

          <div style="display:flex">
            <div style="flex:0 0 70%">采购单价：8.33元</div>
            <div style="position: absolute;right:20px">金额：5000元</div>
          </div>
        </div>
        <div class="liubai_dt"></div>

        <div style="width: 100%;">
          <div style="display: flex;
    width: 105px;
    margin: 10px auto 5px auto;
    font-size: 15px;
    font-weight: bold;">

            <div style="color: #fd7526;border-bottom: 2px solid #fd7526;" v-if="ifmx==1">数量</div>
            <div style="color:#888;margin-left:30px" v-if="ifmx==1">价格</div>

            <div v-if="ifmx==2" style="color:#888;">数量</div>
            <div style="margin-left:30px;color: #fd7526;border-bottom: 2px solid #fd7526;" v-if="ifmx==2">价格</div>
          </div>
        </div>

        <div style="font-size:15px;padding:0 20px;font-weight:bold;color:#666" v-if="ifmx==1">

          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ;line-height:20px">
            <div style="display:flex;padding:10px 0 ">
              <div style="width:100px">需求数 <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg></div>
              <div style="position: absolute;right:30px;color:#888">1000</div>
            </div>

            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
              <div style="display:flex;">
                <div>生产需求数</div>
                <div style="position: absolute;right:30px;">1000</div>
              </div>

              <div style="display:flex;">
                <div>订单需求数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>

              <div style="display:flex;">
                <div>外协需求数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>

            </div>
          </div>

          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0;line-height:20px ">
            <div style="display:flex;padding:10px 0 ">
              <div style="width:100px">库存数 <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg></div>
              <div style="position: absolute;right:30px;color:#888">400</div>
            </div>

            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
              <div style="display:flex;">
                <div>材料仓</div>
                <div style="position: absolute;right:30px;">300</div>
              </div>

              <div style="display:flex;">
                <div>车间仓</div>
                <div style="position: absolute;right:30px;">100</div>
              </div>

            </div>
          </div>
          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0;line-height:20px ">
            <div style="width:100px">可装数</div>
            <div style="position: absolute;right:30px;color:#888">0</div>
          </div>

          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0;line-height:20px ">
            <div style="width:100px">外协商库存数</div>
            <div style="position: absolute;right:30px;color:#888">0</div>
          </div>

          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ">
            <div style="display:flex;padding:10px 0 ">
              <div style="width:100px">在途数 <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg></div>
              <div style="position: absolute;right:30px;color:#888">0</div>
            </div>

            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
              <div style="display:flex;">
                <div>采购未到货数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>

              <div style="display:flex;">
                <div>生产未完成数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>
              <div style="display:flex;">
                <div>外协未完成数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>
            </div>
          </div>

          <div style="display:flex;padding:20px 0 0 0;color:#f00;line-height:20px ">
            <div style="width:100px">缺料数</div>
            <div style="position: absolute;right:30px;color:#f00">600</div>
          </div>
        </div>

        <div style="padding:5px 10px" v-if="ifmx==2">
          <div
            style="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666">
            <div style="flex:0 0 25%;text-align: center;line-height:34px">供应商</div>
            <div style="flex:0 0 25%;text-align: center;line-height:34px">最新报价</div>
            <div style="flex:0 0 25%;text-align: center;line-height:34px">报价时间</div>
            <div style="flex:0 0 25%;text-align: center;line-height:34px">累计采购量</div>
          </div>

          <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">某某纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">8.33元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/8/1</div>
            <div style="flex:0 0 25%;text-align: center;">7000个</div>
          </div>

          <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">天天纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">9.2元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/8/1</div>
            <div style="flex:0 0 25%;text-align: center;">500个</div>
          </div>

          <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">景田纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">8.8元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/8/1</div>
            <div style="flex:0 0 25%;text-align: center;">600个</div>
          </div>

          <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">东南纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">9.6元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/7/1</div>
            <div style="flex:0 0 25%;text-align: center;">40个</div>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
  export default {

    name: 'buytaskDetail',
    data() {
      return {
        taskflag_dt: '在进行',
        ifnew: 1,
        ifmx: 0 //0-不弹出明细相关信息 1-数量相关信息 2-价格相关信息
      };
    },
    methods: {
      goback() {
        {
          history.back();
        }
      },
      gotomxjd() {
        this.$router.push({
          path: "/salemxjd"
        });
      }
    },
    computed: {
      colortop: function () {
        return {
          bgcolorred: this.taskflag_dt == "待审核",
          bgcolorgreen: this.taskflag_dt == "在进行",
          bgcolorblue: this.taskflag_dt == "已完成"
        };
      },
    }
  }

</script>

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

  .topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9990;
    display: flex;
    font-size: 18px;
    align-items: center;
  }

  .topbar_left {
    /* flex: 0 0 %; */
    margin-left: 10px;
  }

  .topbar_middle {
    text-align: center;
    flex: 0 0 85%;
  }

  .topbar_right {
    /* flex: 0 0 10%; */
    position: absolute;
    right: 10px;
  }

  #taskdetail {
    background-color: #fff;
  }

  #content {
    position: absolute;
    top: 44px;
    background-color: #fff;
    width: 100%
  }

  .toparea_dt {
    color: white;
    background-color: rgb(252, 78, 44);
    height: 80px;
    display: flex;
  }

  .bgcolorred {
    background-color: #fc4e2c
  }

  .bgcolorgreen {
    background-color: #8dc026;
  }

  .bgcolorblue {
    background-color: #1e90ff;
  }

  .taskcode_dt {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0 10px 20px;
    line-height: 30px;
  }

  .taskflag_dt {
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    line-height: 30px;
    position: absolute;
    right: 20px;
  }

  .taskinfo_dt {
    background-color: #fff;
    width: 100%;
    height: 35px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    position: absolute;
    top: 50px;
  }

  .cust_dt {
    font-size: 16px;
    font-weight: bold;
    padding: 10px
  }

  .reptel_dt {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 2px 10px;
  }

  .address_dt {
    font-size: 13px;
    margin-left: 30px;
    margin-right: 20px;
    margin-bottom: 10px;
    color: #666;
  }

  .hyaddress_dt {
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #666;
  }

  .liubai_dt {
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
  }

  .middlearea {
    margin: 10px;
    font-size: 14px;
  }

  .taskinfo_dtflex {
    display: flex;
    /* height: 60px; */
    align-items: center;
    line-height: 20px;
  }

  .taskinfo_dttitle_dt {
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
  }

  .title_dt {
    width: 80px;
    text-align: right
  }

  .taskinfo_dtitem {
    font-weight: normal;
    color: #333;

  }

  .taskinfo_dtamt {
    display: flex;
    line-height: 20px;
  }

  .taskamt {
    font-weight: bold;
    color: red;
  }

  .leftsize {
    width: 100px;
  }

  .dscrp {
    border-radius: 10px;
    background: #f5f5f5;
    padding: 10px 20px;
    margin: 0 20px 10px 20px;
    font-size: 14px;
    color: #555;
    line-height: 18px;
  }

  .subtitle_dt {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin: 0 20px;
    line-height: 43px;
  }

  .jindu {
    border-top: 1px solid #f0f0f0;
    margin: 0 20px;
    font-size: 14px;
    line-height: 30px;
    padding: 10px 0;
  }

  .jindubtn {
    margin-left: 20px;
    border: 1px solid #bbb;
    padding: 0 10px;
    border-radius: 15px;
    font-size: 13px;
  }

  .taskmx_dt {
    border-top: 1px solid #f0f0f0;
    margin: 0 20px 0 10px;
    padding: 0 0 20px 0;
  }

  #rowmx_dt {

    /* margin-bottom: 10px; */
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .mxmtrl_dt {
    margin: 5px;
    font-size: 14px;
  }

  .mxqty_dt {
    font-size: 14px;
    color: #888;
    margin-bottom: 3px;
    margin-left: 25px;
  }

  .mxjdinfo {
    background-color: #f6f6f6;
    font-size: 12px;
    color: #888;
    padding: 5px 0 5px 5px;
  }

  /* .mx_bottomarea {
    display: flex;
  } */

  .mx_btndetail {
    position: absolute;
    right: 20px;
    color: #888;
    font-size: 13px;
    margin-right: 0px;
    border-radius: 5px;
  }

  .quote_edit_mask {
    height: 100%;
    width: 100%;
    background-color: #1d1d1d;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    z-index: 9998;
  }

</style>