mall-web-ssr/pages/mobile/center/vendor/seek_btob_details.vue

<template>
  <div class="orderbtob_details_wrapper">
    <div class="mobile-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p v-if="active === 'done'">已报价</p>
      <p v-if="active === 'invalid'">已失效</p>
      <p v-if="active === 'agreed'">已采纳</p>
      <p v-if="active === 'todo'">我要报价</p>
    </div>
    <div class="orderbtob_details_content">
      <div class="orderbtob_details_top">
        <div class="item">
          <span class="name">客户：</span>
          {{listInfo.inquiry.enterprise && listInfo.inquiry.enterprise.enName}}
        </div>
        <div class="item clearfix">
          <span class="name fl">收货地址：</span>
          <span class="fl" style="width: 5.2rem">{{listInfo.inquiry.enterprise && listInfo.inquiry.enterprise.enAddress}}</span>
        </div>
        <div class="item clearfix">
          <span class="name fl">联系电话：</span>
          <span class="fl" style="width: 5.2rem">{{listInfo.inquiry.enterprise && listInfo.inquiry.enterprise.enTel}}</span>
        </div>
        <div class="item">
          <span class="name">单据：</span>
          {{listInfo.inquiry.code}}
        </div>
        <div class="item clearfix">
          <span class="name fl">物料：</span>
          <span class="fl" style="width: 5.2rem">
            <p>{{listInfo.product.code}}</p>
            <p style="margin:5px 0">{{listInfo.product.title}}</p>
            <p>{{listInfo.product.spec}}</p>
          </span>
        </div>
        <div class="item">
          <span class="name">币别：</span>
          {{listInfo.currency}}
        </div>
        <div class="item">
          <span class="name">税率：</span>
          {{listInfo.taxrate + '%' || '无'}}
        </div>
        <div class="item">
          <span class="name">询价类型：</span>
          {{listInfo.inquiry.inquirytype || '无'}}
        </div>
        <!--<div class="item">-->
          <!--<span class="name">金额：</span>-->
          <!--{{listInfo.sum}}-->
        <!--</div>-->
      </div>
      <div class="orderbtob_details_middle">
        <div class="list">
          <template v-if="active === 'todo'">
            <div class="item clearfix">
              <span class="name">交货周期：</span>
              <input type="number" class="dateinput" v-model="listInfo.leadtime" >天
            </div>
            <div class="item clearfix">
              <span class="name">最小起订：</span>
              <input type="number" class="dateinput" v-model="listInfo.minOrderQty" >PCS
            </div>
            <div class="item clearfix">
              <span class="name">最小包装：</span>
              <input type="number" class="dateinput" v-model="listInfo.minPackQty">PCS
            </div>
          </template>
          <template v-else>
            <div class="item clearfix">
              <span class="name">交货周期：</span>
              <span>{{listInfo.leadtime || '-'}}天</span>
            </div>
            <div class="item clearfix">
              <span class="name">最小起订：</span>
              <span>{{listInfo.minOrderQty || '-'}}PCS</span>
            </div>
            <div class="item clearfix">
              <span class="name">最小包装：</span>
              <span>{{listInfo.minPackQty || '-'}}PCS</span>
            </div>
          </template>
          <div class="item clearfix" style="position: relative" v-if="listInfo.replies && listInfo.replies.length > 0">
            <span class="fl name">分段报价：</span>
            <ul class="fl table">
              <li class="li_title clearfix">
                <div class="fl fisrt">段数</div>
                <div class="fl">分段数量</div>
                <div class="fl" >分段单价</div>
              </li>
              <li class="li_content clearfix" v-for="(item, index) in listInfo.replies">
                <div class="fl fisrt">{{index + 1}}</div>
                <div class="fl" v-if="index === 0">
                  <input type="number" value="0" disabled readonly />
                </div>
                <div class="fl" v-if="index !== 0">
                  <input type="number" v-model="item.lapQty" />
                </div>
                <div class="fl" >
                  <input type="number" v-model="item.price" :readonly="active !== 'todo'"/>
                </div>
              </li>
              <div class="posixicon"  v-if="active === 'todo'">
                <i class="iconfont icon-add" @click="addItem()"></i>
                <i class="iconfont icon-minus" @click="deleteItem()"></i>
              </div>
            </ul>
            <div style="clear:both"></div>
            <div class="replayBtn" @click="Replay(item)" v-if="active === 'todo'">
              报价
            </div>
          </div>
        </div>
      </div>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>

<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    name: 'seek_btob_details',
    layout: 'mobileActivity',
    middleware: 'authenticated',
    data() {
      return {
        active: this.$route.query.active,
        listInfo: {
          inquiry: { },
          replies: [{
            lapQty: 0,
            price: ''
          }],
          product: {}
        },
        token: '',
        collectResult: '',
        timeoutCount: 0
      }
    },
    created() {
      this.getInitInfo()
      this._getToken()
    },
    methods: {
      addItem() {
        this.listInfo.replies.push({
          lapQty: '',
          price: ''
        })
      },
      deleteItem() {
        if (this.listInfo.replies.length === 1) {
          return
        }
        this.listInfo.replies.splice(this.listInfo.replies.length - 1, 1)
      },
      Replay() {
        if (this.listInfo.leadtime === '') {
          this._iniFo('交货周期不能为空')
          return
        } else if (this.listInfo.minOrderQty === '') {
          this._iniFo('最小起订量不能为空')
          return
        } else if (this.listInfo.minPackQty === '') {
          this._iniFo('最小包装不能为空')
          return
        }
        let replies = []
        // 判断分段数是否合法
        let valid = true
        let validLapQty = 0
        let _listInfo = this.listInfo
        this.listInfo.replies.forEach(function (r, i) {
          if ((i > 0 ? r.lapQty : 1) || r.price) {
            replies.push(r)
          }
          // 直接比较是字符串比较，需要先转换再比较  2017年9月7日 15:05:51
          if (i > 0 && parseInt(r.lapQty) <= parseInt(_listInfo.replies[i - 1].lapQty) || r.lapQty == null) {
            valid = false
            validLapQty = r.lapQty
          }
        })
        if (!valid) {
          if (validLapQty) {
            this._iniFo('分段' + validLapQty + '小于等于了上一分段数，不能保存！')
          } else {
            this._iniFo('分段数量不合法，不能保存！')
          }
          return
        }
        this.listInfo.replies = replies
        this.$http.post(`/sale/inquiry/items/${this.$route.query.id}/reply?token=${this.token}`, this.listInfo).then(res => {
          this._iniFo('报价成功')
          // this.getInitInfo()
          let _this = this
          setTimeout(function () {
            // _this.$router.push(`/mobile/center/vendor/seek_btob_details?id=${this.$route.query.id}&active=done`)
            _this.$router.go(-1)
          }, 500)
        })
      },
      _iniFo(str) {
        this.collectResult = str
        this.timeoutCount++
      },
      getInitInfo() {
        this.$http.get(`/sale/inquiry/${this.$route.query.id}/info/mobile`).then(res => {
          if (res.data.replies.length === 0 || !res.data.replies[0].price) {
            res.data.replies[0] = res.data.replies[0] || {}
            res.data.replies[0].price = ''
          }
          this.listInfo = res.data
        })
      },
      _getToken() {
        this.$http.get('/token?userType=sale').then(res => {
          this.token = res.data.token
        })
      }
    },
    components: {
      RemindBox
    },
    filters: {
      time: function(time) {
        if (typeof time === 'number') {
          if (!time) {
            return '无'
          } else {
            let d = new Date(time)
            let year = d.getFullYear()
            let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1)
            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
            return year + '-' + month + '-' + day
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .orderbtob_details_wrapper {
    background: #f5f5f5;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    .mobile-header{
      position: fixed;
      top: 0;
      z-index: 10;
      width:100%;
      height:.88rem;
      line-height: .88rem;
      /*border-bottom:.01rem solid #ccc;*/
      background: #3e82f5;
      padding:0 .2rem 0 .1rem;
      color:#fff;
    }
    .mobile-header p{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size:.36rem;
      text-align: center;
      margin: 0;
      width: 6rem;
      padding-left: 1rem;
    }
    .mobile-header a{
      font-size:.28rem;
      color:#fff;
      position: absolute;
    }
    .mobile-header a i{
      font-size: .48rem;
      margin-right: -.1rem;
    }
    .orderbtob_details_content {
      margin-top: 0.9rem;
      padding: 0.2rem;
      .orderbtob_details_top {
        background: #3f84f6;
        border-radius: 0.07rem;
        border: solid 0.01rem #e3e5e8;
        padding: 0.24rem 0.2rem 0.14rem;
        .item {
          color: #fff;
          font-size: 0.28rem;
          margin-bottom: 0.1rem;
        }
      }
      .orderbtob_details_middle {
        margin-top: 0.2rem;
        .list {
          border: solid 1px #e3e5e8;
          border-radius: 0.07rem;
          overflow: hidden;
          color: #333;
          font-size: 0.28rem;
          padding: 0.24rem 0.2rem;
          margin-bottom: 0.2rem;
          background: #fff;
          .item {
            margin-bottom: 0.1rem;
            line-height: 0.5rem;
          }
          .ovrflow {
            width: 5.2rem;
            line-height: 0.5rem
          }
          .name {
            color: #666;
            width: 1.6rem;
            display: inline-block;
          }
          .dateinput {
            width: 3.49rem;
            height: .5rem;
            line-height: .5rem;
            border: 1px solid #aeaeae;
            font-size: .26rem;
            vertical-align: middle;
            background: #fff;
            border-radius: 0;
            margin-right: 0.05rem;
          }
        }
        .replayBtn {
          width: 6.59rem;
          height: 0.77rem;
          background-color: #3f84f6;
          border-radius: 0.08rem;
          font-size: 0.28rem;
          line-height: 0.77rem;
          color: #ffffff;
          overflow: hidden;
          text-align: center;
          margin-top: 0.2rem
        }
        .table {
          width: 4.52rem;
          background-color: #f3f3f3;
          color: #333333;
          font-size: 0.28rem;
          .li_title {
            border: 1px solid #c5c5c5;
            div {
              width: 1.87rem;
              text-align: center;
              border-right: 1px solid #c5c5c5;
              &:last-child {
                border-right: 0
              }
            }
            .fisrt {
              width: 0.74rem;
            }
          }
          .li_content {
            border: 1px solid #c5c5c5;
            background: #fff;
            border-top: 0px;
            div {
              width: 1.87rem;
              text-align: center;
              border-right: 1px solid #c5c5c5;
              &:last-child {
                border-right: 0
              }
              input {
                text-align: center;
                width: 100%;
                height: 0.49rem;
                border: 0;
              }
            }
            .fisrt {
              width: 0.74rem;
            }
          }
        }
      }
      .bottom {
        font-size: 0.2rem;
        color: #999;
        border-top: 1px solid #aeaeae;
        padding-top: 0.1rem;
      }
      .noborder{
        border: 0
      }
    }
    .icon-add {
      color: #00d300;
      font-size: 0.4rem
    }
    .icon-minus {
      color: #cacaca;
      font-size: 0.4rem;
      display: block;
    }
    .posixicon {
      position: absolute;
      right: 0.3rem;
      width: 0.4rem;
      top: 0;
    }
  }
</style>