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="detail.cmpImg || '/images/store/common/default.png'">
        </div>
        <div class="right">
          <h4 v-text="detail.cmpCode">3</h4>
          <ul class="list-unstyled">
            <li class="item">
              <span>类目(名称)</span>
              <p v-text="detail.prodName? spliceString(detail.prodName, 135) : '暂无信息'">2</p>
            </li>
            <li class="item">
              <span>品牌</span>
              <p v-text="detail.brand ? detail.brand : '暂无信息'">32</p>
            </li>
            <li class="item">
              <span>单位</span>
              <p v-text="detail.unit ? detail.unit : '暂无信息'">32</p>
            </li>
            <li class="item">
              <span>规格</span>
              <p v-text="detail.spec ? detail.spec : '暂无信息'">32</p>
            </li>
          </ul>
          <a @click="hasDialog = true">立即询价</a>
        </div>
      </div>
      <div class="info">
        <ul class="list-unstyled">
          <li><p>产品参数<span>（仅供参考，以实际产品为准）</span></p></li>
          <li v-if="!detail.cmpUuId" class="empty">暂无相关信息！</li>
          <li v-if="detail.cmpUuId" v-for="item in cmpInfo.properties"><span v-text="item.property.labelCn"></span><span v-text="item.value"></span></li>
        </ul>
      </div>
    </div>
    <el-dialog
      title="我要询价"
      :visible.sync="hasDialog ">
      <div class="form_dialog">
        <ul class="list-inline">
          <li class="form-item">
            <span>型号：</span>
            <p v-text="detail.cmpCode ? spliceString(detail.cmpCode, 90) : '-'">3</p>
          </li>
          <li class="form-item">
            <span>类目：</span>
            <p v-text="detail.prodName ? spliceString(detail.prodName, 90) : '-'">3</p>
          </li>
          <li class="form-item">
            <span>品牌：</span>
            <p v-text="detail.brand ? spliceString(detail.brand, 90) : '-'">3</p>
          </li>
          <li class="form-item">
            <span>规格：</span>
            <p v-text="detail.spec ? spliceString(detail.spec, 90) : '-'">3</p>
          </li>
          <li class="form-item">
            <span><i>*</i>截止日期：</span>
            <el-date-picker
              :class="{'error': !validObj.deadline}"
              v-model="applyObj.deadline"
              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="applyObj.encapsulation"/>
          </li>
          <li class="form-item">
            <span>单价预算：</span>
            <select v-model="applyObj.currency" class="form-control" style="width:40px;">
              <option value="RMB">¥</option>
              <option value="USD">$</option>
            </select>
            <input type="number" v-model="applyObj.unitPrice" class="form-control" :class="{'error': !validObj.unitPrice}"/>
          </li>
          <li class="form-item">
            <span>生产日期：</span>
            <input type="text" class="form-control" v-model="applyObj.produceDate"/>
          </li>
          <li class="form-item">
            <span>采购数量：</span>
            <input type="number" class="form-control" v-model="applyObj.amount" :class="{'error': !validObj.amount}"/>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <a type="button" @click="goPublish">询价提交</a>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {spliceStr, formatDate} from '~utils/baseUtils.js'
  export default {
    name: 'DetailsView',
    data () {
      return {
        applyObj: {
          unitPrice: '',
          currency: 'RMB',
          encapsulation: '',
          produceDate: '',
          amount: '',
          deadline: ''
        },
        validObj: {
          unitPrice: true,
          amount: true,
          deadline: true
        },
        pickerOptions: {
          disabledDate (time) {
            // 大于等于今天 小于三个月后
            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
          }
        },
        hasDialog: false,
        searchCode: '',
        test: '一二三四五六攻八怕址一二三四五六攻八怕址一二三四五六攻八怕址1234567890一二三四五六攻八怕址1234567890一二三四五六攻八怕址1234567890一二三四五六攻八怕址1234567890一二三四五六攻八怕址'
      }
    },
    computed: {
      detail () {
        return this.$store.state.supplier.detail.detail.data
      },
      cmpInfo () {
        console.log(this.$store.state.supplier.detail.cmpInfo.data)
        return this.$store.state.supplier.detail.cmpInfo.data
      },
      user () {
        return this.$store.state.option.user
      }
    },
    methods: {
      spliceString (str, length) {
        return spliceStr(str, length)
      },
      // 时间格式化
      setDeadLineValid: function () {
        this.applyObj.deadline = formatDate(this.applyObj.deadline, 'yyyy-MM-dd hh:mm:ss')
        this.validObj.deadline = true
      },
      // 检查单价预算
      checkUnitPrice () {
        this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
        if (!this.validObj.unitPrice && this.applyObj.unitPrice <= 0) {
          this.$message.error('单价必须是大于0的数字')
        }
        return this.validObj.unitPrice
      },
      // 检查采购数量
      checkAmount () {
        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
        return this.validObj.amount
      },
      // 检查时间是否有输入
      checkDeadline () {
        this.validObj.deadline = Boolean(this.applyObj.deadline)
        return this.validObj.deadline
      },
      // 检查各个字段输入正常数据
      checkAll () {
        return this.checkDeadline() && this.checkUnitPrice() && this.checkAmount()
      },
      emptyForm () {
        for (let attr in this.applyObj) {
          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
        }
      },
      // 请求询价信息
      goPublish () {
        if (this.checkAll()) {
          let inquiry = {}
          let inquiryItem = {}
          if (this.user.data.enterprise) {
            inquiry.enUU = this.user.data.enterprise.uu
          }
          let date = new Date()
          let currency = this.applyObj.unitPrice ? this.applyObj.currency : null
          inquiry.recorderUU = this.user.data.userUU
          inquiry.code = 'MALL' + date.getTime()
          inquiry.date = date
          inquiry.recorder = this.user.data.userName
          inquiry.endDate = this.applyObj.deadline
          inquiry.sourceapp = 'MALL'
          inquiry.amount = 1
          inquiryItem.userUU = this.user.data.userUU
          inquiryItem.source = 'MALL'
          inquiryItem.userName = this.user.data.userName
          inquiryItem.userTel = this.user.data.userTel
          inquiryItem.needquantity = this.applyObj.amount
          inquiryItem.inbrand = this.detail.brand
          inquiryItem.currency = currency
          inquiryItem.cmpCode = this.detail.cmpCode.toUpperCase()
          inquiryItem.unitPrice = this.applyObj.unitPrice
          inquiryItem.produceDate = this.applyObj.produceDate
          inquiryItem.date = date
          inquiryItem.endDate = this.applyObj.deadline
          inquiryItem.encapsulation = this.applyObj.encapsulation
          inquiryItem.spec = this.detail.spec
          inquiryItem.prodTitle = this.detail.prodName
          let inquiryItems = []
          inquiryItems.push(inquiryItem)
          inquiry.inquiryItems = inquiryItems
          inquiry.currency = this.applyObj.unitPrice ? this.applyObj.currency : null
          this.$http.post('/inquiry/buyer/save', inquiry)
            .then(res => {
              this.$message.success('发布成功')
              this.hasDialog = false
              this.emptyForm()
            }, error => {
              console.log(error)
              this.$message.error('发布失败')
            })
        } else {
          if (!this.validObj.deadline) {
            this.$message.error('截止日期不能为空')
          } else if (!this.validObj.amount) {
            this.$message.error('请输入正确的数值')
          }
        }
      }
    }
  }
</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{
    .el-date-editor--date {
      width: 230px;
      &.error {
        input {
          border: 1px solid #f4645f !important;
        }
      }
    }
    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;
    ul{
      margin-left:0;
      li{
        line-height: 34px;
        text-align: center;
        overflow: hidden;
        > span{
          display:inline-block;
          width:50%;
        }
        &:nth-child(odd){
          background: #fff;
        }
        &:nth-child(even){
          background: #f5f6f8;
        }
        &:first-child{
          font-weight: bold;
          color:#fff;
          background: #3c7cf5;
          padding-left:15px;
          text-align: left;
          p{
            font-size: 16px;
            margin:0;
            span{
              font-size: 12px;
            }
          }
        }
        &.empty{
          padding: 100px 0;
          font-size: 24px;
        }
      }
    }
  }
}
</style>