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

<template>
  <div class="mobile-modal">
    <div class="mobile-modal-box">
      <div class="mobile-modal-header">{{agreed == 1 ? '已采纳' : '已报价'}}<i class="icon-guanbi iconfont" @click="cancel"></i></div>
      <div class="say-price-info">
        <div v-if="isBuyer">
          <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.needquantity || '-'}}</span>
            </div>
            <div class="content-line">
              币种：<span>{{purchaseDetail.currency || '不限'}}</span>
            </div>
            <div class="content-line">
              截止日期：<span>{{purchaseDetail.endDate | date}}</span>
            </div>
          </div>
          <div class="base-info">
            <div class="content-line">
              买家：<span>{{purchaseDetail.inquiry.enterprise.enName || purchaseDetail.userName}}</span>
            </div>
            <div class="content-line">
              联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
            </div>
          </div>
          <div class="base-info say-info" v-for="(item, index) in purchaseDetail.qutations" @click="selectQutation(index)">
            <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex == index" src="/images/mobile/@2x/applyPurchase/say-price-check.png" alt="">
            <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex != index" src="/images/mobile/@2x/applyPurchase/say-price-default.png" alt="">
            <img v-if="item.agreed == 1" src="/images/mobile/@2x/applyPurchase/say-price-accept.png" alt="">
            <div class="content-line">
              {{item.vendName}}
            </div>
            <div class="content-line">
              报价人：<span v-if="item.user">{{item.user.userName | userNameFilter}}</span>
              <span v-else>-</span>
            </div>
            <div class="content-line">
              电话：<span v-if="item.user">{{item.user.userTel}}</span>
              <span v-else>-</span>
            </div>
            <div class="content-line date">
              交期(天)：<span>{{item.leadtime}}</span>
            </div>
            <p>{{item.offerTime | date}}</p>
            <div class="price-level">
              <p>价格梯度：<span>(pcs)</span></p>
              <ul>
                <li v-for="replie in item.replies">
                  <span>{{replie.lapQty ? replie.lapQty + '+' : '-'}}</span>
                  <span>{{replie.price ? (purchaseDetail.currency == 'USD' ? '$' : '¥') + replie.price : '-'}}</span>
                </li>
              </ul>
            </div>
          </div>
          <a class="say-price-btn" v-if="purchaseDetail.agreed != 1" @click="acceptQutation">采纳报价</a>
        </div>
        <div v-if="!isBuyer">
          <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.needquantity || '-'}}</span>
            </div>
            <div class="content-line">
              币种：<span>{{purchaseDetail.currency || '不限'}}</span>
            </div>
            <div class="content-line">
              截止日期：<span>{{purchaseDetail.endDate | date}}</span>
            </div>
            <div class="content-line">
              买家：<span>{{purchaseDetail.inquiry.enterprise.enName || purchaseDetail.userName}}</span>
            </div>
            <div class="content-line">
              联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
            </div>
          </div>
          <div class="base-info">
            <div class="content-line">
              报价人：<span v-if="purchaseDetail.user">{{purchaseDetail.user.userName | userNameFilter}}</span>
              <span v-else>-</span>
            </div>
            <div class="content-line">
              联系电话：<span v-if="purchaseDetail.user">{{purchaseDetail.user.userTel || '-'}}</span>
              <span v-else>-</span>
            </div>
          </div>
          <div class="base-info say-info">
            <div class="content-line date">
              交期(天)：<span>{{purchaseDetail.leadtime}}</span>
            </div>
            <p>{{purchaseDetail.offerTime | date}}</p>
            <div class="price-level vendor">
              <p>价格梯度：<span>(pcs)</span></p>
              <ul>
                <li v-for="replie in purchaseDetail.replies">
                  <span>{{replie.lapQty ? replie.lapQty + '+' : '-'}}</span>
                  <span>{{replie.price ? (purchaseDetail.currency == 'USD' ? '$' : '¥') + replie.price : '-'}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
      </div>
    </div>
  </div>
</template>
<script>
  import {RemindBox} from '~components/mobile/common'
  export default {
    data () {
      return {
        activeIndex: -1,
        remindText: '',
        timeoutCount: 0
      }
    },
    components: {
      RemindBox
    },
    props: ['agreed'],
    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 '-'
        }
      },
      userNameFilter (str) {
        return str ? str.substring(0, 1) + '**' : '-'
      }
    },
    computed: {
      purchaseDetail () {
        return this.isBuyer ? this.$store.state.applyPurchase.purchaseManList.buyerInquiryDetail.data : this.$store.state.applyPurchase.purchaseManList.vendorInquiryDetail.data
      },
      user () {
        return this.$store.state.option.user
      },
      isBuyer () {
        return this.$route.query.type === 'buyer'
      }
    },
    methods: {
      cancel: function () {
        this.$emit('cancelSayPriceInfoAction', false)
      },
      selectQutation: function (index) {
        this.activeIndex = this.activeIndex === index ? -1 : index
      },
      acceptQutation: function () {
        if (this.activeIndex > -1) {
          let obj = this.purchaseDetail.qutations[this.activeIndex]
          this.$http.post('/inquiry/buyer/decide?id=' + obj.id + '&status=1')
            .then(response => {
//              this.$message.success('采纳成功')
//              this.onRemind('采纳成功')
              this.$emit('cancelSayPriceInfoAction', true)
//              this.$route.query.type === 'saler' ? this.$store.dispatch('applyPurchase/loadVendorInquiryDetail', {id: this.$route.params.id}) : this.$store.dispatch('applyPurchase/loadBuyerInquiryDetail', {id: this.$route.params.id})
            }, err => {
              console.log(err)
//              this.$message.success('系统错误')
              this.onRemind('系统错误')
            })
        } else {
//          this.$message.success('请选择报价信息')
          this.onRemind('请选择报价信息')
        }
      },
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount ++
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-modal {
    .mobile-modal-box {
      top: 5%;
      left: 3%;
      right: 3%;
      bottom: 5%;
      width: auto;
      .say-price-info {
        background: #f3f3f3;
        padding: .18rem 0;
        width: 100%;
        overflow-y: auto;
        height: 90%;
        .base-info {
          &.say-info {
            /*height: 4.54rem;*/
            position: relative;
            > img {
              position: absolute;
              right: 0;
              top: 0;
              width: 1rem;
              height: 1rem;
            }
            .content-line {
              width: 4.55rem;
              span {
                color: #333;
              }
              &.date {
                span {
                  color: #ef5042;
                }
              }
            }
            > p {
              font-size: .24rem;
              color: #999;
            }
            .price-level {
              font-size: .26rem;
              /*position: absolute;*/
              /*top: 1.3rem;*/
              /*right: .3rem;*/
              position: relative;
              bottom: .3rem;
              width: 4rem;
              text-align: center;
              margin-left: 2rem;
              p {
                margin-bottom: .1rem;
                span {
                  color: #666;
                }
              }
              ul {
                li {
                  height: .52rem;
                  span {
                    height: .52rem;
                    line-height: .52rem;
                    padding-left: .22rem;
                    text-align: left;
                    display: inline-block;
                    border-top: .02rem solid #7e7e7e;
                    border-left: .02rem solid #7e7e7e;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    &:first-child {
                      width: 45%;
                    }
                    &:last-child {
                      width: 55%;
                      border-right: .02rem solid #7e7e7e;
                    }
                  }
                  &:last-child {
                    border-bottom: .02rem solid #7e7e7e;
                  }
                }
              }
              &.vendor {
                margin: .15rem auto 0;
              }
            }
          }
        }
        .say-price-btn {
          margin: .37rem auto .7rem;
        }
      }
    }
  }
</style>