mall-web-ssr/components/supplier/details.vue

<template>
  <div class="details_info">
    <div class="container">
      <div class="crumbs">
        <div class="container">
          <div class="menu-com row">
            <div class="menu-title col-md-12">
              <a href="/">首页 ></a>
              <a href="/supplier">供应商资源 ></a>
              <span>供应商物料</span>
            </div>
          </div>
        </div>
      </div>
      <div class="top">
        <div class="img">
          <img src="/images/store/common/default.png">
        </div>
        <div class="right">
          <h4>32222222222222222222</h4>
          <ul class="list-unstyled">
            <li class="item">
              <span>类目(名称)</span>
              <p v-text="spliceString(test, 400)">3errrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr2</p>
            </li>
            <li class="item">
              <span>品牌</span>
              <p>32</p>
            </li>
            <li class="item">
              <span>单位</span>
              <p>32</p>
            </li>
            <li class="item">
              <span>规格</span>
              <p>32</p>
            </li>
            <li class="item">
              <span>种类</span>
              <p>32</p>
            </li>
          </ul>
          <a @click="hasDialog = true">立即询价</a>
        </div>
      </div>
      <div class="info">
        <table>
          <thead>
          <tr>
            <th colspan="4">
              <p>产品参数 <span>（仅供参考，以实际产品为准）</span></p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td width="297">工作温度范围: </td>
            <td width="297"></td>
            <td width="297">最大输入电压：</td>
            <td width="297"></td>
          </tr>
          <tr>
            <td>输出电压-Vout: </td>
            <td></td>
            <td>负载调节：</td>
            <td></td>
          </tr>
          <tr>
            <td>输出类型: </td>
            <td></td>
            <td>安装方式：</td>
            <td></td>
          </tr>
          <tr>
            <td>工作温度范围: </td>
            <td></td>
            <td>最大输入电压：</td>
            <td></td>
          </tr>
          <tr>
            <td>输出电压-Vout: </td>
            <td></td>
            <td>负载调节：</td>
            <td></td>
          </tr>
          <tr>
            <td>输出类型: </td>
            <td></td>
            <td>安装方式：</td>
            <td></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <el-dialog
      title="我要询价"
      :visible.sync="hasDialog "
      :before-close="handleClose">
      <div class="form_dialog">
        <ul class="list-inline">
          <li class="form-item">
            <span>型号：</span>
            <p>32432</p>
          </li>
          <li class="form-item">
            <span>类目：</span>
            <p>3244333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333332</p>
          </li>
          <li class="form-item">
            <span>品牌：</span>
            <p>32432</p>
          </li>
          <li class="form-item">
            <span>规格：</span>
            <p>32432</p>
          </li>
          <li class="form-item">
            <span><i>*</i>截止日期：</span>
            <el-date-picker
              v-model="form.name"
              type="date"
              :picker-options="pickerOptions"
              @change="setDeadLineValid"
              :editable="false"
              :clearable="true"
              size="mini">
            </el-date-picker>
          </li>
          <li class="form-item">
            <span>封装：</span>
            <input type="text" class="form-control" v-model="form.date1"/>
          </li>
          <li class="form-item">
            <span>单价预算：</span>
            <select v-model="form.date1" class="form-control" style="width:40px;">
            <option value="RMB">¥</option>
            <option value="USD">$</option>
            </select>
            <input type="number" class="form-control"/>
          </li>
          <li class="form-item">
            <span>生产日期：</span>
            <el-date-picker
              v-model="form.date2"
              type="date"
              :picker-options="pickerOptions"
              @change="setDeadProduction"
              :editable="false"
              :clearable="true"
              size="mini">
            </el-date-picker>
          </li>
          <li class="form-item">
            <span>采购数量：</span>
            <input type="number" class="form-control"/>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <a type="button" @click="hasDialog=false">询价提交</a>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {cutOutString, formatDate} from '~utils/baseUtils.js'
  export default {
    name: 'DetailsView',
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            // 大于等于今天 小于三个月后
            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
          }
        },
        hasDialog: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dialogVisible: false,
        searchCode: '',
        test: '322222222222222222222222222222222222222222222222222222'
      }
    },
    methods: {
      setDeadProduction () {
        this.form.name = formatDate(this.form.name, 'yyyy-MM-dd hh:mm:ss')
      },
      setDeadLineValid: function () {
        this.form.date2 = formatDate(this.form.date2, 'yyyy-MM-dd hh:mm:ss')
        // this.validObj.deadline = true
      },
      onSubmit () {
        console.log('submit!')
      },
      spliceString (str, length) {
        return cutOutString(str, length)
      },
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
.details_info{
  background: #fff;
  .el-dialog{
    width: 680px!important;
    .el-dialog__header{
      background: #4290f7;
      line-height: 40px;
      padding: 0 20px 0;
      .el-dialog__title{
        color:#fff;
      }
      .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
        color:#fff;
      }
    }
    .el-dialog__body{
      padding: 10px 20px;
    }
    .el-dialog__footer{
      text-align: center;
      a{
        display:inline-block;
        background: #3c7cf5;
        color:#fff;
        font-size: 14px;
        line-height: 30px;
        height:30px;
        padding:0 10px;
        border-radius:5px;
      }
    }
  }
  .form_dialog{
    ul{
      li{
        width:50%;
        font-size: 14px;
        color:#666;
        vertical-align: top;
        margin-bottom:15px;
        &.form-item {
          position: relative;
          p{
            margin:0;
            margin-left:80px;
            word-break: break-all;
            word-wrap: break-word;
          }
          span {
            float:left;
            width: 80px;
            text-align: right;
            display: inline-block;
            color:#3c7cf5;
            i {
              position: relative;
              top: 2px;
              right: 5px;
              color: #e41515;
            }
          }
          ul {
            line-height: normal;
            position: absolute;
            top: 19px;
            left: 79px;
            background: #fff;
            border: 1px solid #b5b5b5;
            z-index: 1;
            max-height: 120px;
            overflow-y: auto;
            overflow-x: hidden;
            border-radius: 3px;
            width: 114px;
            font-size: 12px;
            li {
              height: 24px;
              line-height: 24px;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 5px;
              &:hover {
                background: #ddd;
              }
            }
          }
          select {
            width: 40px;
            position: absolute;
            height: 20px;
            background: url('/images/applyPurchase/select.png')no-repeat right;
            background-position-x: 23px;
            padding: 0 0 0 7px;
            border-radius: 0;
            & + input {
              padding-left: 45px;
            }
          }
          .el-input {
            width: 230px;
          }
          input {
            font-size: 14px;
            width: 230px;
            height: 20px;
            line-height: 20px;
            border-radius: 2px;
            padding: 0 3px;
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            &.error {
              border-color: #f4645f!important;
            }
          }
        }
      }
    }
  }
  .crumbs{
    background: #fff;
    .menu-com{
      margin: 0;
      .menu-title{
        line-height: 40px;
        font-size: 14px;
        padding-left: 0;
        margin:0;
        a{
          color: #5078cb;
          font-size: 14px;
        }
      }
    }
  }
  .top{
    margin-bottom:20px;
    .img{
      float:left;
      width:350px;
      height:350px;
      vertical-align: top;
      padding:36px;
      border:1px solid #bababa;
      img{
        width:100%;
        height:100%;
      }
    }
    .right{
      position:relative;
      height:350px;
      margin-left:370px;
      h4{
        width:800px;
        font-size: 25px;
        line-height: 25px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        border-bottom:1px solid #3c7cf5;
        margin:0;
        padding-bottom:20px;
      }
      a{
        display:inline-block;
        position:absolute;
        bottom:0;
        left: 0;
        background: #3c7cf5;
        color:#fff;
        font-size: 14px;
        line-height: 30px;
        height:30px;
        padding:0 10px;
        border-radius:5px;
      }
      ul{
        padding-top:35px;
        li{
          margin-bottom:25px;
          span{
            display:inline-block;
            width:70px;
            float:left;
            color:#3c7cf5;
            vertical-align: top;
            text-align: right;
          }
          p{
            width:365px;
            font-size: 14px;
            color:#333;
            margin:0;
            margin-left:90px;
            word-wrap: break-word;
            word-break: normal;
          }
        }
      }
    }
  }
  .info{
    padding-bottom:90px;
    table{
      thead{
        tr{
          line-height: 34px;
          th{
            font-weight: bold;
            color:#fff;
            background: #3c7cf5;
            padding-left:15px;
            p{
              font-size: 16px;
              margin:0;
              span{
                font-size: 12px;
              }
            }
          }
        }
      }
      tbody{
        tr{
          line-height: 34px;
          &:nth-child(odd){
            background: #fff;
          }
          &:nth-child(even){
            background: #f5f6f8;
          }
          td{
            text-align: center;
          }
        }
      }
    }
  }
}
</style>