mall-web-ssr/components/mobile/applyPurchase/SayPrice.vue

<template>
  <div class="say-price">
    <div class="base-info">
      <div class="content-line">
        型号：<span>{{purchaseDetail.cmpCode || '-'}}</span>
      </div>
      <div class="content-line">
        品牌：<span>{{purchaseDetail.inbrand || '-'}}</span>
      </div>
      <div class="content-line">
        规格：<span>{{purchaseDetail.spec || '-'}}</span>
      </div>
      <div class="content-line">
        采购数量：<span>{{purchaseDetail.offerAmount || '-'}}</span>
      </div>
      <div class="content-line">
        币种：<span>{{purchaseDetail.currency || '不限'}}</span>
      </div>
      <div class="content-line">
        截止日期：<span>{{purchaseDetail.endDate | date}}</span>
      </div>
    </div>
    <div class="form-list">
      <div class="form-title">
        <span class="fl">价格梯度<span>(PCS)</span></span>
        <span class="fr">
          <span v-text="sayPriceObj.currency" @click="showCurrencyList = !showCurrencyList"></span>
          <img v-if="!showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
          <img v-if="showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" alt="">
          <ul v-if="showCurrencyList">
            <li @click="setCurrency('RMB')">RMB</li>
            <li @click="setCurrency('USD')">USD</li>
          </ul>
        </span>
      </div>
      <div class="form-item" v-for="(reply, index) in sayPriceObj.replies">
        <input type="number" placeholder="梯度" class="fl" v-model="reply.lapQty">
        <input type="number" placeholder="单价" class="fr" v-model="reply.price">
        <i class="iconfont icon-minus" v-if="sayPriceObj.replies.length > 1" @click="setReplies('sub', index)"></i>
        <i class="iconfont icon-add" v-if="sayPriceObj.replies.length < 5 && index == sayPriceObj.replies.length - 1" @click="setReplies('add', index)"></i>
      </div>
      <div class="date">
        <span>交期(天)</span>
        <input type="number" placeholder="最大值" v-model="sayPriceObj.leadtime" class="fr">
      </div>
      <a class="say-price-btn" @click="commitSayPrice">确定</a>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        showCurrencyList: false,
        sayPriceObj: {
          currency: 'RMB',
          leadtime: '',
          replies: [
            {
              lapQty: '',
              price: ''
            }
          ]
        }
      }
    },
    filters: {
      date: function (date) {
        if (date) {
          const d = new Date(Number(date))
          const year = d.getFullYear()
          const monthTemp = d.getMonth() + 1
          const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
          const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' '
          return year + '-' + month + '-' + day
        } else {
          return '-'
        }
      }
    },
    computed: {
      purchaseDetail () {
        return this.$store.state.applyPurchase.purchaseManList.purchaseManDetail.data
      },
      user () {
        return this.$store.state.option.user
      }
    },
    methods: {
      setCurrency: function (type) {
        this.sayPriceObj.currency = type
        this.showCurrencyList = false
      },
      resetSayPrice: function () {
        this.sayPriceObj = {
          currency: 'RMB',
          leadtime: '',
          replies: [
            {
              lapQty: '',
              price: ''
            }
          ]
        }
      },
      setReplies: function (type, index) {
        if (type === 'add' && this.sayPriceObj.replies.length < 5) {
          if (this.sayPriceObj.replies[index].lapQty && this.sayPriceObj.replies[index].price) {
            this.sayPriceObj.replies.splice(index + 1, 0, {
              lapQty: '',
              price: ''
            })
          } else {
            this.$message.error('请填完整信息')
          }
        } else if (type === 'sub' && this.sayPriceObj.replies.length > 1) {
          this.sayPriceObj.replies.splice(index, 1)
        }
      },
      commitSayPrice: function () {
        if (this.checkValid()) {
          let purchaseMan = this.purchaseDetail
//          this.showLoading = true
          purchaseMan.leadtime = this.sayPriceObj.leadtime
          purchaseMan.replies = this.sayPriceObj.replies
          purchaseMan.vendUU = this.user.data.enterprise.uu
          purchaseMan.vendorUserUU = this.user.data.userUU
          purchaseMan.qutoApp = 'MALL'
          if (!purchaseMan.currency) {
            purchaseMan.currency = this.sayPriceObj.currency
          }
          this.$http.post('/inquiry/sale/item/save', purchaseMan).then(response => {
            this.showLoading = false
            if (response.data.success === false) {
              this.$message.error(response.data.message)
            } else {
              this.$message.success('报价成功')
              this.resetSayPrice()
            }
          }, error => {
            console.log(error)
            this.$message.error('请勿重复报价或报价自己的求购')
//            this.showLoading = false
          })
        } else {
          this.$message.error('请输入正确的报价信息')
        }
      },
      checkValid: function () {
        for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
          if (!this.sayPriceObj.replies[i].lapQty || !this.sayPriceObj.replies[i].price) {
            return false
          }
        }
        return this.sayPriceObj.leadtime
      }
    }
  }
</script>
<style lang="scss" scoped>
  .say-price {
    background: #f3f3f3;
    padding: .18rem 0;
    position: absolute;
    top: .88rem;
    bottom: 1rem;
    width: 100%;
    overflow-y: auto;
    .form-list {
      height: 7.53rem;
      background: #fff;
      padding-top: .2rem;
      > div {
        height: .7rem;
        line-height: .7rem;
        width: 6.12rem;
        font-size: .28rem;
        margin: 0 auto .2rem;
        input {
          height: .7rem;
          text-align: center;
          border: .01rem solid #666;
          border-radius: .05rem;
        }
        &.form-title {
          border: .01rem solid #666;
          border-radius: .05rem;
          padding: 0 .07rem 0 .17rem;
          .fl {
            span {
              color: #666;
            }
          }
          .fr {
            position: relative;
            img {
              width: .12rem;
              height: .06rem;
              margin-left: .04rem;
            }
            > ul {
              position: absolute;
              top: .6rem;
              right: -.4rem;
              z-index: 1;
              width: 1.75rem;
              background: #fff;
              text-align: center;
              border-radius: .1rem;
              border: .01rem solid #dfdfdf;
              -webkit-box-shadow: 0 0 .12rem .02rem #e2d9d975;
              -moz-box-shadow:  0 0 .12rem .02rem #e2d9d975;
              box-shadow:  0 0 .12rem .02rem #e2d9d975;
              li {
                height: .52rem;
                line-height: .52rem;
                border-bottom: .01rem solid #dfdfdf;
                &:hover, &:active {
                  background: #dedede;
                }
              }
            }
          }
        }
        &.form-item {
          position: relative;
          input {
            width: 2.93rem;
          }
          i {
            position: absolute;
            right: -.32rem;
            top: 0;
            font-size: .3rem;
            & + i {
              right: -.65rem;
            }
            &.icon-add {
              color: #4768f3;
            }
            &.icon-minus {
              color: #8d8d8d;
            }
          }
        }
        &.date {
          input {
            width: 4.8rem;
          }
        }
      }
    }
  }
</style>