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

<template>
  <div class="mobile-modal" v-show="showSayPriceBox" @touchmove="preventTouchMove($event)" @click="clearSimilar">
    <div class="mobile-modal-box">
      <div class="mobile-modal-header">编辑报价<i class="icon-guanbi iconfont" @click="cancel"></i></div>
      <div class="say-price" ref="mobileModalBox">
        <div>
          <div class="base-info">
            <div class="content-line clearfix">
              <div class="pull-left">品牌：</div><span class="pull-left">{{purchaseDetail.inbrand || '-'}}</span>
            </div>
            <div class="content-line clearfix">
              <div class="pull-left">物料名称：</div><span class="pull-left" style="width:5rem;">{{purchaseDetail.prodTitle || '-'}}</span>
            </div>
            <div class="content-line clearfix">
             <div class="pull-left"> 型号：</div><span class="pull-left">{{purchaseDetail.cmpCode || '-'}}</span>
            </div>
            <div class="content-line clearfix">
              <div class="pull-left"> 规格：</div><span class="pull-left">{{purchaseDetail.spec || '-'}}</span>
            </div>
            <div class="content-line">
              采购数量(PCS)：<span>{{purchaseDetail.needquantity || '-'}}</span>
            </div>
            <!--<div class="content-line">
              币种：<span>{{purchaseDetail.custCurrency || '不限'}}</span>
            </div>
            <div class="content-line">
              生产日期：<span>{{purchaseDetail.produceDate || '-'}}</span>
            </div>-->
            <div class="content-line">
              截止日期：<span>{{purchaseDetail.endDate | date}}</span>
            </div>
          </div>
          <div class="form-list">
            <ul class="mobile-switch-say">
              <li class="inline-block" :class="{'active': sayType == 'current'}" @click="setSayType('current')">当前型号报价</li>
              <li class="inline-block" :class="{'active': sayType == 'replace'}" @click="setSayType('replace')">替代型号报价</li>
            </ul>
            <div class="form-title">
              <span class="fl">价格梯度<span>(PCS)</span></span>
              <span class="fr">
            <!--<span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>-->
            <span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>
                <!--<span v-if="purchaseDetail.custCurrency" v-text="purchaseDetail.custCurrency"></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>
            <template v-if="sayType == 'replace'">
              <div class="replace">
                <span>品牌</span>
                <input type="text" v-model="sayPriceObj.replaceBrand" class="fr" @blur="checkBrand" @input="onBrandChange" placeholder="请勿填中文符号">
                <ul class="similar" v-show="showSimilarBrandList && sayPriceObj.replaceBrand">
                  <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
                </ul>
              </div>
              <div class="replace">
                <span>型号</span>
                <input type="text" v-model="sayPriceObj.replaceCmpCode" class="fr" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号">
                <ul class="similar" v-show="showSimilarCodeList && sayPriceObj.replaceCmpCode">
                  <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
                </ul>
              </div>
              <div class="replace">
                <span>规格</span>
                <input type="text" v-model="sayPriceObj.replaceSpec" class="fr" placeholder="(选填)">
              </div>
            </template>
            <div class="form-item" v-for="(reply, index) in sayPriceObj.replies">
              <input type="text" placeholder="分段数量" class="fl" @blur="onReplyLapQtyBlur(index)" @input="onReplyLapQtyInput(index)" v-model="reply.lapQty">
              <input type="text" placeholder="分段单价" class="fr" @input="onReplyPriceInput(index)" @blur="onReplyPriceBlur(index)" v-model="reply.price">
              <i class="iconfont icon-minus" v-if="index > 0" @click="setReplies('sub', index)"></i>
              <i class="iconfont icon-add" v-if="index == 0 && sayPriceObj.replies.length < 5" @click="setReplies('add', index)"></i>
            </div>
            <div class="date">
              <span>交期(天)</span>
              <input type="text" placeholder="最大值" @input="onLeadtimeInput" @blur="onLeadtimeBlur" v-model="sayPriceObj.leadtime" class="fr">
            </div>
            <div style="position: relative;height: 1rem;"></div>
          </div>
        </div>
        <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
      </div>
      <a class="say-price-btn" @click="commitSayPrice">确定</a>
    </div>
  </div>
</template>
<script>
  import { sayPriceReplace } from '~utils/mixin'
  import {RemindBox} from '~components/mobile/common'
  export default {
    data () {
      return {
        showCurrencyList: false,
        sayPriceObj: {
          currency: 'RMB',
          leadtime: '',
          replies: [
            {
              lapQty: '',
              price: ''
            }
          ],
          replaceBrand: '',
          replaceCmpCode: '',
          replaceSpec: ''
        },
        validSayPrice: {
          leadtime: false,
          repliesPrice: false,
          repliesLapQty: false,
          replaceBrand: false,
          replaceCmpCode: false,
          replaceSpec: true
        },
        sayType: 'current',
        remindText: '',
        timeoutCount: 0
      }
    },
    mixins: [sayPriceReplace],
    props: ['showSayPriceBox'],
    components: {
      RemindBox
    },
    watch: {
      'showSayPriceBox': {
        handler: function(val, old) {
          if (val) {
            this.$nextTick(() => {
              this._initscroll()
            })
          }
          this.sayType = 'current'
          this.resetSayPrice()
        },
        deep: true
      }
    },
    mounted () {
      this.$nextTick(() => {
        document.addEventListener('click', this.checkCurrencySelect)
        this._initscroll()
        this.initScroll.scrollTo(0, 0, 0)
      })
    },
    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 JSON.parse(JSON.stringify(this.$store.state.applyPurchase.purchaseManList.purchaseManDetail.data))
      },
      user () {
        return this.$store.state.option.user
      }
    },
    methods: {
      cancel: function () {
        this.$emit('cancelSayPriceAction', false)
      },
      checkCurrencySelect: function () {
        this.showCurrencyList = false
      },
      setShowCurrencyList: function (event) {
        event.stopPropagation()
        this.showCurrencyList = !this.showCurrencyList
      },
      setCurrency: function (type) {
        this.sayPriceObj.currency = type
        this.showCurrencyList = false
      },
      resetSayPrice: function () {
        this.sayPriceObj = {
          currency: 'RMB',
          leadtime: '',
          replies: [
            {
              lapQty: '',
              price: ''
            }
          ],
          replaceBrand: '',
          replaceCmpCode: '',
          replaceSpec: ''
        }
      },
      setReplies: function (type, index) {
        if (type === 'add' && this.sayPriceObj.replies.length < 5) {
          this.sayPriceObj.replies.splice(this.sayPriceObj.replies.length, 0, {
            lapQty: '',
            price: ''
          })
        } else if (type === 'sub' && this.sayPriceObj.replies.length > 1) {
          this.sayPriceObj.replies.splice(index, 1)
        }
        this._initscroll()
      },
      commitSayPrice: function () {
        if (this.checkValid()) {
          let purchaseMan = JSON.parse(JSON.stringify(this.purchaseDetail))
//          this.showLoading = true
          purchaseMan.leadtime = this.sayPriceObj.leadtime
          purchaseMan.replies = this.sayPriceObj.replies
          purchaseMan.vendUU = this.user.data.enterprise.uu
          purchaseMan.vendUserUU = this.user.data.userUU
          purchaseMan.qutoApp = 'MALL'
          purchaseMan.currency = this.sayPriceObj.currency
          if (this.sayType === 'replace') {
            purchaseMan.replaceBrand = this.sayPriceObj.replaceBrand
            purchaseMan.replaceCmpCode = this.sayPriceObj.replaceCmpCode
            purchaseMan.replaceSpec = this.sayPriceObj.replaceSpec
            purchaseMan.isReplace = 1
          }
          this.$http.post('/inquiry/sale/item/saveQuote', purchaseMan).then(response => {
            this.showLoading = false
            if (response.data.success === false) {
              this.onRemind('response.data.message')
            } else {
//              this.onRemind('报价成功')
              this.resetSayPrice()
              this.$emit('cancelSayPriceAction', true, JSON.parse(response.data).quteId)
            }
          }, error => {
            console.log(error)
            this.onRemind('请勿重复报价或报价自己的求购')
//            this.showLoading = false
          })
        } else {
          this.onRemind('请输入正确的报价信息')
        }
      },
      onLeadtimeInput: function () {
        this.sayPriceObj.leadtime = this.sayPriceObj.leadtime.replace(/[^\-?\d.]/g, '')
        if (this.sayPriceObj.leadtime.length > 3) {
          this.sayPriceObj.leadtime = this.sayPriceObj.leadtime.substring(0, 3)
        }
      },
      onLeadtimeBlur: function () {
        if (!this.sayPriceObj.leadtime || this.sayPriceObj.leadtime < 1 || this.sayPriceObj.leadtime >= 1000 || this.sayPriceObj.leadtime.toString().indexOf('.') !== -1) {
          this.validSayPrice.leadtime = false
          this.onRemind('交期请填写1-999之间的正整数')
        } else {
          this.validSayPrice.leadtime = true
        }
      },
      onReplyPriceInput: function (index) {
        this.sayPriceObj.replies[index].price = this.sayPriceObj.replies[index].price.replace(/[^\-?\d.]/g, '')
        let price = this.sayPriceObj.replies[index].price
        if (price >= 10000) {
          this.sayPriceObj.replies[index].price = price.substring(0, 4)
        } else if (price.indexOf('.') > -1) {
          let arr = price.split('.')
          if (arr[0].length > 4) {
            this.sayPriceObj.replies[index].price = Number(arr[0].substring(0, 4) + '.' + arr[1])
          } else if (arr[1].length > 6) {
            this.sayPriceObj.replies[index].price = Number(arr[0] + '.' + arr[1].substring(0, 6))
          }
        }
      },
      onReplyPriceBlur: function (index) {
        let price = this.sayPriceObj.replies[index].price
        if (!price) {
          this.sayPriceObj.replies[index].price = ''
          this.onRemind('价格不能为空')
          this.validSayPrice.repliesPrice = false
        } else if (price <= 0) {
          this.sayPriceObj.replies[index].price = ''
          this.onRemind('输入值必须为正整数')
          this.validSayPrice.repliesPrice = false
        } else {
          this.validSayPrice.repliesPrice = true
        }
      },
      onReplyLapQtyBlur: function (index) {
        let lapQty = Number(this.sayPriceObj.replies[index].lapQty)
        let limitDownObj = this.getLimitDownQty()
        if (!lapQty || lapQty < 1) {
          this.sayPriceObj.replies[index].lapQty = ''
          this.onRemind('输入值必须为正整数')
          this.validSayPrice.repliesLapQty = false
        } else if (limitDownObj.index !== index && limitDownObj.lapQty > lapQty) {
          this.onRemind('输入值必须大于#该梯度的下限#')
          this.sayPriceObj.replies[index].lapQty = ''
          this.validSayPrice.repliesLapQty = false
        } else if ((index - 1 >= 0 && this.sayPriceObj.replies[index - 1].lapQty && this.sayPriceObj.replies[index - 1].lapQty >= lapQty) || (index + 1 < this.sayPriceObj.replies.length && this.sayPriceObj.replies[index + 1].lapQty && this.sayPriceObj.replies[index + 1].lapQty <= lapQty)) {
          this.onRemind('输入值会导致梯度重叠，请重新修改')
          this.sayPriceObj.replies[index].lapQty = ''
          this.validSayPrice.repliesLapQty = false
        } else {
          this.validSayPrice.repliesLapQty = true
        }
      },
      onReplyLapQtyInput: function (index) {
        this.sayPriceObj.replies[index].lapQty = this.sayPriceObj.replies[index].lapQty.replace(/[^\-?\d.]/g, '')
        let lapQty = this.sayPriceObj.replies[index].lapQty
        if (lapQty.length > 9) {
          this.sayPriceObj.replies[index].lapQty = lapQty.substring(0, 9)
        }
      },
      getLimitDownQty: function () {
        for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
          if (this.sayPriceObj.replies[i].lapQty) {
            return {
              lapQty: this.sayPriceObj.replies[i].lapQty,
              index: i
            }
          }
        }
        return {index: -1}
      },
      checkValid: function () {
        this.validSayPrice.repliesLapQty = true
        this.validSayPrice.repliesPrice = true
        this.validSayPrice.leadtime = true
        let validReplace = this.sayType === 'replace' ? this.validSayPrice.replaceBrand && this.validSayPrice.replaceCmpCode && this.validSayPrice.replaceSpec : true
        for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
          if (!this.sayPriceObj.replies[i].lapQty || !/^[0-9]+([.]{1}[0-9]+)?$/.test(this.sayPriceObj.replies[i].lapQty) || this.sayPriceObj.replies[i].lapQty === '') {
            this.validSayPrice.repliesLapQty = false
            break
          } else if (!this.sayPriceObj.replies[i].price || !/^[0-9]+([.]{1}[0-9]+)?$/.test(this.sayPriceObj.replies[i].price) || this.sayPriceObj.replies[i].price === '') {
            this.validSayPrice.repliesPrice = false
            break
          }
        }
        if (!this.sayPriceObj.leadtime || !/^\d+$/.test(this.sayPriceObj.leadtime) || this.sayPriceObj.leadtime === '') {
          this.validSayPrice.leadtime = false
        }
        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice && validReplace
      },
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount ++
      },
      setSayType: function (type) {
        this.sayType = type
        this.resetSayPrice()
        this.$nextTick(() => {
          this._initscroll()
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-modal {
    z-index: 1;
    .base-info .content-line{
      height: auto;
      white-space: inherit;
    }
    .base-info .content-line span {
      width: 5.5rem;
      word-wrap:break-word;
      word-break:break-all;
    }
    .mobile-modal-box {
      top: 1.66rem;
      left: 3%;
      right: 3%;
      width: 7rem;
      bottom: 1.66rem;
      margin: 0 auto;
      .say-price {
        background: #f3f3f3;
        padding: .18rem 0 1rem;
        width: 100%;
        overflow: hidden;
        height: 90%;
        .base-info {
          margin-bottom: .12rem;
        }
        .form-list {
          /*height: 7.53rem;*/
          /*background: #fff;*/
          /*padding-top: .2rem;*/
          /*padding-bottom: 0.4rem;*/
          > div {
            height: .7rem;
            line-height: .7rem;
            width: 5.82rem;
            font-size: .28rem;
            margin: 0 0 .18rem .3rem;
            input {
              height: .7rem;
              text-align: center;
              border: 1px solid #666;
              border-radius: .05rem;
              line-height: normal;
              padding: .1rem .2rem;
            }
            &.form-title {
              border: 1px solid #666;
              border-radius: .05rem;
              padding: 0 .07rem 0 .17rem;
              background: #fff;
              .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: .02rem 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: .02rem solid #dfdfdf;
                    &:hover, &:active {
                      background: #dedede;
                    }
                  }
                }
              }
            }
            &.form-item {
              position: relative;
              input {
                width: 2.84rem;
              }
              i {
                position: absolute;
                right: -.5rem;
                top: 0;
                font-size: .36rem;
                &.icon-add {
                  color: #4768f3;
                }
                &.icon-minus {
                  color: #8d8d8d;
                }
              }
            }
            &.date {
              input {
                width: 4.6rem;
              }
            }
            &.replace {
              position: relative;
              span {
                display: inline-block;
                width: .66rem;
                text-align: left;
              }
              input {
                width: 5.1rem;
                text-align: left;
              }
              .similar {
                position: absolute;
                width: 5.1rem;
                max-height: 2.5rem;
                overflow-y: auto;
                z-index: 12;
                border: 1px solid #7e7e7e;
                border-radius: .05rem;
                left: .72rem;
                top: .68rem;
                background: #fff;
                li {
                  height: .5rem;
                  line-height: .5rem;
                  font-size: .26rem;
                  color: #999;
                  padding-left: .19rem;
                  &:focus, &:active, &:hover {
                    background: #999;
                    color: #fff;
                  }
                }
              }
            }
          }
        }
      }
      .say-price-btn {
        width: 6.44rem;
        position: absolute;
        bottom: 0.1rem;
        left: 0;
        right: 0;
      }
    }
  }
</style>