mall-web-ssr/components/applyPurchase/PublishApply.vue

<template>
  <div class="publish-apply">
    <div class="good-purchaser">
      <p class="good-purchaser-title">
        <img src="/images/applyPurchase/good-purchaser-title.png" alt="">
      </p>
      <ul>
        <li v-for="(goodMan, index) in goodPurchaseMan.content">
          <i v-text="index + 1" :style="'background: url(/images/applyPurchase/level-' + getRankBg(index)  + '.png) center no-repeat;'"></i>
          <span v-text="goodMan.name"></span>
        </li>
      </ul>
    </div>
    <div class="publish-area">
      <div class="publish-form-area">
        <p>单个发布</p>
        <div>
          <div class="form-item">
            <span>
              <i>*</i>型号：
            </span>
            <input type="text" class="form-control" :class="{'error': !validObj.code}" v-model="applyObj.code" maxlength="30" @blur="checkCode" @input="onCodeChange" />
          </div>
          <div class="form-item">
            <span>
              <i>*</i>品牌：
            </span>
            <input type="text" class="form-control" :class="{'error': !validObj.brand}" maxlength="20" v-model="applyObj.brand" @blur="checkBrand" @input="onBrandChange" />
          </div>
          <div class="form-item">
            <span>
              单价预算：
            </span>
            <select v-model="applyObj.currency">
              <option value="RMB">¥</option>
              <option value="USD">$</option>
            </select>
            <input type="number" class="form-control" :class="{'error': !validObj.unitPrice}" v-model="applyObj.unitPrice" @blur="checkUnitPrice" @input="onUnitPriceInput" />
          </div>
          <div class="form-item">
           <span>
              封装：
            </span>
            <input type="text" class="form-control" maxlength="20" v-model="applyObj.encapsulation" @input="onEncapsulationChange" />
          </div>
          <div class="form-item">
            <span>
              生产日期：
            </span>
            <input type="text" class="form-control" v-model="applyObj.produceDate" @input="onProduceDateChange" />
          </div>
          <div class="form-item">
            <span>
              采购数量：
            </span>
            <input type="number" class="form-control" :class="{'error': !validObj.amount}" v-model="applyObj.amount" @blur="checkAmount" />
          </div>
          <div class="form-item">
            <span>
              <i>*</i>截止日期：
            </span>
            <!--<input type="text" class="form-control" readonly :class="{'error': !validObj.deadline}" v-model="applyObj.deadline" @blur="checkDeadline" />-->
            <el-date-picker
              v-model="applyObj.deadline"
              type="date"
              :picker-options="pickerOptions"
              :class="{'error': !validObj.deadline}"
              @change="checkDeadline"
              size="mini">
            </el-date-picker>
          </div>
        </div>
        <a @click="goPublish()">发布求购</a>
      </div>
      <div class="publish-upload">
        <h1>批量发布</h1>
        <h2>3秒一键配单采购</h2>
        <img src="/images/applyPurchase/upload.png" alt="" />
        <h3>把Excel格式的BOM拖放到框中</h3>
        <img class="download-line" src="/images/applyPurchase/download.png" alt="">
        <img class="apply-logo" src="/images/applyPurchase/publish-apply.png" alt="">
      </div>
    </div>
    <div class="apply-rank">
      <table>
        <thead>
          <tr>
            <th width="62">排名</th>
            <th width="124">求购型号</th>
            <th width="57">数量</th>
            <th width="72">求购次数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(rank, index) in purchaseRank">
            <td><div>NO.<span>{{index + 1}}</span><i>|</i></div></td>
            <td :title="rank.spCode"><div><span>{{rank.spCode}}</span><i>|</i></div></td>
            <td :title="rank.spAmount"><div><span>{{rank.spAmount}}</span><i>|</i></div></td>
            <td :title="rank.uuAmount"><div>{{rank.uuAmount}}</div></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--提示框-->
    <div class="com-del-box" v-if="showRemindBox">
      <div class="title">
        <a @click="showRemindBox = false"><i class="fa fa-close fa-lg"></i></a>
      </div>
      <div class="content">
        <!--<p style="line-height: 20px;margin-top: 10px;padding:0 10px">非常抱歉，目前暂无此品牌！<br>若直接前往“品牌申请”，我们将为您先开通寄售功能，待申请通过后再提交开店申请。</p>-->
        <!--<p style="line-height: 20px;">前往<a @click="goBrandApply()"  target="_blank" style="color: #5078CB">品牌申请&nbsp;<i class="fa fa-arrow-right"></i></a></p>-->
        <p><img src="/images/applyPurchase/check.png" alt="">发布成功</p>
        <p>其中 <span>100</span>个求购型号有现货在售，您可前往“<span>买家中心-我的求购</span>”查询并直接购买</p>
        <div>
          <a @click="showRemindBox = false">我知道了</a>
          <a href="javascript:void(0)">前往我的求购</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let getRealLen = function (str) {
    let len = 0
    for (let i = 0; i < str.length; i++) {
      if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
        len += 2
      } else {
        len++
      }
    }
    return len
  }
  export default {
    data () {
      return {
        applyObj: {
          code: '',
          brand: '',
          unitPrice: '',
          currency: 'RMB',
          encapsulation: '',
          produceDate: '',
          amount: '',
          deadline: ''
        },
        validObj: {
          code: true,
          brand: true,
          unitPrice: true,
//          encapsulation: true,
//          produceDate: 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
          }
        },
        showRemindBox: false
      }
    },
    computed: {
      goodPurchaseMan () {
        return this.$store.state.applyPurchase.goodPurchaseMan.goodPurchaseMan.data
      },
      purchaseRank () {
        return this.$store.state.applyPurchase.purchaseApplyRank.purchaseApplyRank.data
      },
      user () {
        return this.$store.state.option.user
      }
    },
    methods: {
      emptyForm: function () {
        for (let attr in this.applyObj) {
          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
        }
      },
      getRankBg: function (index) {
        return index === 0 ? 1 : index < 3 ? 2 : 3
      },
      goPublish: function () {
        if (this.user.logged) {
          if (this.checkAll()) {
            this.$http.post('/seek/saveOneSeekPurchase', this.applyObj)
              .then(response => {
                this.$message.success('发布成功')
  //              this.showRemindBox = true
                this.emptyForm()
                this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: 1, count: 10})
              }, error => {
                console.log(error)
                this.$message.error('发布失败')
              })
          } else {
            if (!this.validObj.code) {
              this.$message.error('型号不能为空')
            } else if (!this.validObj.brand) {
              this.$message.error('品牌不能为空')
            } else if (!this.validObj.deadline) {
              this.$message.error('截止日期不能为空')
            } else if (!this.validObj.amount || !this.validObj.unitPrice) {
              this.$message.error('请输入正确的数值')
            }
//            this.$message.error('请填写正确的信息')
          }
        } else {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        }
      },
      checkCode: function () {
        this.validObj.code = this.applyObj.code && this.applyObj.code !== ''
        return this.validObj.code
      },
      checkBrand: function () {
        this.validObj.brand = this.applyObj.brand && this.applyObj.brand !== ''
        return this.validObj.brand
      },
      checkUnitPrice: function () {
        this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
        return this.validObj.unitPrice
      },
//      checkEncapsulation: function () {
//        this.validObj.encapsulation = this.applyObj.encapsulation && this.applyObj.encapsulation !== ''
//      },
//      checkProduceDate: function () {
//        this.validObj.produceDate = this.applyObj.produceDate && this.applyObj.produceDate !== ''
//      },
      checkAmount: function () {
        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 100000000
        return this.validObj.amount
      },
      checkAll: function () {
        return this.checkCode() && this.checkBrand() && this.checkUnitPrice() && this.checkAmount() && this.checkDeadline()
      },
      checkDeadline: function () {
        this.validObj.deadline = this.applyObj.deadline && this.applyObj.deadline !== ''
        return this.validObj.deadline
      },
      onUnitPriceInput: function () {
        let price = this.applyObj.unitPrice
        if (price >= 9999) {
          this.applyObj.unitPrice = price.substring(0, 4)
        } else if (price.indexOf('.') > -1) {
          let arr = price.split('.')
          if (arr[0].length > 4) {
            this.applyObj.unitPrice = Number(arr[0].substring(0, 4) + '.' + arr[1])
          } else if (arr[1].length > 6) {
            this.applyObj.unitPrice = Number(arr[0] + '.' + arr[1].substring(0, 6))
          }
        }
      },
      onProduceDateChange: function () {
        if (this.applyObj.produceDate && getRealLen(this.applyObj.produceDate) > 12) {
          this.applyObj.produceDate = this.applyObj.produceDate.substring(0, this.applyObj.produceDate.length - 1)
        }
      },
      onEncapsulationChange: function () {
        if (this.applyObj.encapsulation && getRealLen(this.applyObj.encapsulation) > 20) {
          this.applyObj.encapsulation = this.applyObj.encapsulation.substring(0, this.applyObj.encapsulation.length - 1)
        }
      },
      onCodeChange: function () {
        if (this.applyObj.code && getRealLen(this.applyObj.code) > 30) {
          this.applyObj.code = this.applyObj.code.substring(0, this.applyObj.code.length - 1)
        }
      },
      onBrandChange: function () {
        if (this.applyObj.brand && getRealLen(this.applyObj.brand) > 20) {
          this.applyObj.brand = this.applyObj.brand.substring(0, this.applyObj.brand.length - 1)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .publish-apply {
    background: url('/images/applyPurchase/banner.png') center center/cover no-repeat;
    height: 583px;
    text-align: center;
    padding-top: 290px;
    >div {
      display: inline-block;
      border: 1px solid #3975f4;
      height: 267px;
      margin-right: 6px;
      vertical-align: middle;
      background: #fff;
    }
    .good-purchaser {
      width: 225px;
      .good-purchaser-title {
        height: 55px;
        line-height: 55px;
        background: #3975f4;
        margin: 0;
      }
      ul {
        padding: 0 22px 0 10px;
        li {
          line-height: 42px;
          span {
            float: right;
            display: inline-block;
            width: 152px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
          }
          i {
            display: inline-block;
            float: left;
            width: 25px;
            color: #fff;
            font-size: 16px;
            font-style: normal;
          }
        }
      }
    }
    .publish-area {
      width: 549px;
      .publish-form-area {
        width: 243px;
        float: left;
        height: 100%;
        p {
          padding-top: 18px;
          font-size: 26px;
          color: #3975f4;
          margin-bottom: 7px;
        }
        >div {
          text-align: left;
          margin-left: 14px;
          .form-item {
            margin-bottom: 5px;
            span {
              width: 80px;
              text-align: right;
              display: inline-block;
              i {
                position: relative;
                top: 2px;
                right: 3px;
                color: #e41515;
              }
            }
            select {
              width: 32px;
              position: absolute;
              height: 20px;
              background: url('/images/applyPurchase/select.png')no-repeat right;
              background-position-x: 15px;
              padding: 0 0 0 3px;
              & + input {
                padding-left: 34px;
              }
            }
            input {
              width: 111px;
              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;
              }
            }
          }
        }
        >a {
          width: 90px;
          height: 25px;
          line-height: 25px;
          background: #3975f4;
          color: #fefefe;
          font-size: 16px;
          display: block;
          margin: 0 auto;
          border-radius: 3px;
          cursor: pointer;
        }
      }
      .publish-upload {
        background: url('/images/applyPurchase/publish-apply-bg.png')no-repeat;
        background-size: cover;
        width: 304px;
        height: 100%;
        padding-left: 22px;
        float: right;
        color: #fff;
        position: relative;
        h1 {
          font-size: 26px;
          margin: 22px 0 0 0;
        }
        h2 {
          font-size: 16px;
          margin: 10px 0 23px 0;
        }
        h3 {
          font-size: 16px;
          margin: 20px 0 13px 0;
        }
        .download-line {
          cursor: pointer;
        }
        .apply-logo {
          position: absolute;
          left: -20px;
          top: 86px;
        }
      }
    }
    .apply-rank {
      width: 317px;
      margin-right: 0;
      background: url('/images/applyPurchase/rank-title.png') no-repeat;
      background-color: #fff;
      background-size: 319px 74px;
      background-position: -3px -2px;
      table {
        margin: 76px auto 0;
        width: 98%;
        thead {
          background: #e0e0e0;
          height: 26px;
          line-height: 26px;
          border-radius: 3px;
          tr {
            th {
              font-size: 16px;
              font-weight: bold;
              text-align: center;
            }
          }
        }
        tbody {
          tr {
            height: 25px;
            line-height: 25px;
            &:first-child {
              td {
                padding-top: 10px;
              }
            }
            td {
              color: #666;
              &:nth-child(1) {
                color: #f6682f;
                font-size: 12px;
                >div {
                  width: 62px;
                  span {
                    font-size: 16px;
                  }
                }
              }
              &:nth-child(2) {
                >div {
                  width: 122px;
                }
              }
              &:nth-child(3) {
                >div {
                  width: 55px;
                }
              }
              &:nth-child(4) {
                >div {
                  width: 72px;
                }
              }
              >div {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 8px;
                position: relative;
                height: 30px;
                i {
                  font-style: normal;
                  float: right;
                  color: #8b8b8b;
                  font-size: 14px;
                  position: absolute;
                  right: 0;
                }
              }
            }
          }
        }
      }
    }
    .com-del-box{
      position: fixed;
      z-index: 1000;
      height: auto;
      opacity: 1;
      background-color: white;
      width: 310px;
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      -o-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
      margin: -155px 0 0 -75px;
      top: 55%;
      left: 43%;
      .title{
        height: 24px;
        background-color: #007aff;
        text-align: right;
        padding-right: 15px;
        line-height: 24px;
        a{
          color: white;
          font-size: 12px;
        }
      }
      .content{
        width: 100%;
        text-align: center;
        margin: 0 auto;
        p{
          padding: 12px 31px;
          margin: 0;
          i{
            color: #5078cb;
            font-size: 16px;
            margin-right: 10px;
          }
          span {
            color: #007aff;
          }
          &:last-child {
            font-size: 12px;
          }
        }
        div{
          width: 100%;
          text-align: center;
          margin: 0 auto 20px;
          a{
            padding: 0 19px;
            height: 26px;
            line-height: 26px;
            display: inline-block;
            text-align: center;
            font-size: 14px;
            color: #fff;
            &:first-child{
              background: #c8c6c6;
              margin-right: 10px;
            }
            &:last-child{
              background: #007aff;
            }
          }
        }
      }
    }
  }
  .el-date-editor--date{
    width: 110px;
    &.error {
      input {
        border: 1px solid #f4645f !important;
      }
    }
  }
  .el-icon-date {
    display: none;
  }
  .el-input__inner {
    height: 20px;
    border-radius: 0;
    border: 1px solid #c9c9c9;
  }
</style>