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

<template>
  <div class="mobile-modal" @touchmove="preventTouchMove($event)">
    <div class="mobile-modal-box">
      <div class="mobile-modal-header">
        {{sayInfoTitle}}
        <!--{{purchaseDetail.agreed == 1 || agreed == 1 ? '已采纳' : '已报价'}}-->
        <i class="icon-guanbi iconfont" @click="cancel"></i>
      </div>
      <!--<i class="icon-guanbi iconfont" @click="cancel"></i>-->
      <div class="say-price-info" ref="mobileModalBox">
        <div>
          <div v-if="isBuyer" class="is-buyer">
            <div class="base-info base">
              <div class="content-line">
                品牌：<span>{{purchaseDetail.inbrand || '-'}}</span>
              </div>
              <div class="content-line">
                物料名称：<span>{{purchaseDetail.prodTitle || '-'}}</span>
              </div>
              <div class="content-line">
                型号：<span>{{purchaseDetail.cmpCode || '-'}}</span>
              </div>
              <div class="content-line">
                规格：<span>{{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 class="content-line">
                联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
              </div>
            </div>
           <!-- <div class="base-info">
              <div class="content-line">
                买家：<span>{{purchaseDetail.inquiry && purchaseDetail.inquiry.enterprise ? purchaseDetail.inquiry.enterprise.enName : purchaseDetail.userName}}</span>
              </div>
              <div class="content-line">
                联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
              </div>
            </div>-->
            <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="base-info say-info say" :class="{'long': item.showRefuseList}" v-for="(item, index) in qutationsTemp" v-if="(sayType == 'current' && item.isReplace != 1) || (sayType == 'replace' && item.isReplace == 1)">
          <!--    <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-title">
                <i>{{index + 1}}</i>
                <div class="inline-block text-ellipse vend-name">{{item.vendName}}</div>
                <img src="/images/mobile/center/accept.png" alt="" v-if="item.agreed == 1">
                <img src="/images/mobile/center/refuse.png" alt="" v-if="item.agreed == 0">
              </div>
              <template v-if="item.isReplace == 1">
                <div class="content-line">
                  品牌：<span>{{item.replaceBrand || '-'}}</span>
                </div>
                <div class="content-line">
                  型号：<span>{{item.replaceCmpCode || '-'}}</span>
                </div>
                <div class="content-line">
                  规格：<span>{{item.replaceSpec || '-'}}</span>
                </div>
                <div class="content-line">
                  报价人：<span v-if="item.user">{{item.user.userName}}</span>
                  <span v-else>-</span>
                </div>
                <div class="content-line date">
                  交期(天)：<span>{{item.leadtime}}</span>
                </div>
                <div class="content-line">
                  电话：<span v-if="item.user">{{item.user.userTel}}</span>
                  <span v-else>-</span>
                </div>
              </template>
              <template v-else>
                <div class="content-line">
                  报价人：<span v-if="item.user">{{item.user.userName}}</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>
              </template>
              <div class="content-line date">
                报价时间：<span>{{item.offerTime | date}}</span>
              </div>
              <!--<p>{{item.offerTime | date}}</p>-->
              <div class="price clearfix">
                <span>价格梯度：<br/>(PCS)</span>
                <table class="com-price-list com-price-listLong">
                <thead>
                <tr>
                  <th>分段数量</th>
                  <th>分段单价</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="replie in item.replies">
                  <td class="date text-ellipse">{{replie.lapQty ? replie.lapQty + '+' : '-'}}</td>
                  <td class="date text-ellipse">{{replie.price ? (item.currency == 'USD' ? '$' : '¥') + replie.price : '-'}}</td>
                </tr>
                </tbody>
              </table>
              </div>
              <div class="refused-txt" v-if="item.agreed === 0">拒绝理由：<span>{{item.refusereason}}</span></div>
              <!--<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 ? (item.currency == 'USD' ? '$' : '¥') + replie.price : '-'}}</span>
                  </li>
                </ul>
              </div>-->
              <div class="operate-say" v-if="item.agreed != 1 && item.agreed != 0">
                <a class="operate-say-btn inline-block" @click="acceptQutation(item)">采纳报价</a>
                <a class="operate-say-btn inline-block refuse" @click="setShowRefuseList(item, !item.showRefuseList)">
                  拒绝报价
                  <img src="/images/mobile/center/refuse-arrow-down.png" alt="">
                  <ul v-if="item.showRefuseList">
                    <li class="text-ellipse" @click.stop="selectRefuse(item, '采购需求变更')">采购需求变更</li>
                    <li class="text-ellipse" @click.stop="selectRefuse(item, '价格过高')">价格过高</li>
                    <li class="text-ellipse" @click.stop="selectRefuse(item, '需进一步了解原因')">需进一步了解原因</li>
                    <li class="text-ellipse" @click.stop="selectRefuse(item, '已选定合适供应商')">已选定合适供应商</li>
                    <li class="text-ellipse" @click.stop="selectRefuse(item, '交期过长')">交期过长</li>
                  </ul>
                </a>
              </div>
            </div>
           <!-- <a class="say-price-btn" v-if="purchaseDetail.agreed != 1" @click="acceptQutation">采纳报价</a>
            <div style="height: 0.5rem;width: 100%"></div>-->
          </div>
          <div v-if="!isBuyer" class="is-vendor">
            <div class="base-info">
              <div class="content-title">
                <span class="inline-block text-ellipse">{{purchaseDetail.inquiry && purchaseDetail.inquiry.enterprise ? purchaseDetail.inquiry.enterprise.enName : purchaseDetail.userName}}</span>
                <img src="/images/mobile/center/accept.png" alt="" v-if="purchaseDetail.agreed == 1">
                <img src="/images/mobile/center/refuse.png" alt="" v-if="purchaseDetail.agreed == 0">
              </div>
              <div class="content-line">
                品牌：<span>{{purchaseDetail.inbrand || '-'}}</span>
              </div>
              <div class="content-line">
                物料名称：<span>{{purchaseDetail.prodTitle || '-'}}</span>
              </div>
              <div class="content-line">
                型号：<span>{{purchaseDetail.cmpCode || '-'}}</span>
              </div>
              <div class="content-line">
                规格：<span>{{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 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}}</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">
              <template v-if="purchaseDetail.isReplace == 1">
                <div class="content-line inline-block">
                  品牌：<span>{{purchaseDetail.replaceBrand || '-'}}</span>
                </div>
                <div class="content-line inline-block">
                  型号：<span>{{purchaseDetail.replaceCmpCode || '-'}}</span>
                </div>
                <div class="content-line inline-block">
                  规格：<span>{{purchaseDetail.replaceSpec || '-'}}</span>
                </div>
                <div class="content-line inline-block">
                  报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
                </div>
                <div class="content-line inline-block date">
                  交期(天)：<span>{{purchaseDetail.leadtime}}</span>
                </div>
                <div class="content-line inline-block">
                  电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
                </div>
              </template>
              <template v-else>
                <div class="content-line inline-block">
                  报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
                </div>
                <div class="content-line inline-block">
                  电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
                </div>
                <div class="content-line inline-block date">
                  交期(天)：<span>{{purchaseDetail.leadtime}}</span>
                </div>
              </template>
              <div class="content-line inline-block date">
                报价时间：<span>{{purchaseDetail.offerTime | date}}</span>
              </div>
              <!--<p>{{purchaseDetail.offerTime | date}}</p>-->
              <div class="price clearfix">
                <span>价格梯度：<br/>(PCS)</span>
                <table class="com-price-list com-price-listLong">
                  <thead>
                  <tr>
                    <th>分段数量</th>
                    <th>分段单价</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="replie in purchaseDetail.replies">
                    <td class="date text-ellipse">{{replie.lapQty ? replie.lapQty + '+' : '-'}}</td>
                    <td class="date text-ellipse">{{replie.price ? (purchaseDetail.currency == 'USD' ? '$' : '¥') + replie.price : '-'}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div class="refused-txt" v-if="purchaseDetail.agreed === 0">拒绝理由：<span v-text="purchaseDetail.refusereason"></span></div>
              <!--<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>
        </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,
        qutationsTemp: [],
        refusereason: '',
        sayType: 'current',
        currentCount: 0,
        replaceCount: 0
      }
    },
    components: {
      RemindBox
    },
    props: ['agreed', 'userType'],
    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 () {
        let obj = {}
        if (this.isBuyer) {
          this.replaceCount = 0
          this.currentCount = 0
          obj = this.baseUtils.deepCopy(this.$store.state.applyPurchase.purchaseManList.buyerInquiryDetail.data)
          if (obj.qutations) {
            this.qutationsTemp = obj.qutations
            for (let i = 0; i < this.qutationsTemp.length; i++) {
              this.$set(this.qutationsTemp[i], 'showRefuseList', false)
              this.qutationsTemp[i].isReplace === 1 ? this.replaceCount++ : this.currentCount++
            }
          }
          if (this.currentCount === 0) {
            this.sayType = 'replace'
          }
        } else {
          obj = this.$store.state.applyPurchase.purchaseManList.vendorInquiryDetail.data
        }
        return obj
      },
      user () {
        return this.$store.state.option.user
      },
      isBuyer () {
        return this.$route.query.type === 'buyer' || this.userType === 'buyer'
      },
      sayInfoTitle () {
        if (this.isBuyer) {
          return this.sayType === 'current' ? '当前型号报价' : '替代型号报价'
        } else {
          return this.purchaseDetail.isReplace === 1 ? '替代型号报价' : '当前型号报价'
        }
      }
    },
    methods: {
      cancel: function () {
        this.$emit('cancelSayPriceInfoAction', false)
      },
      selectQutation: function (index) {
        this.activeIndex = this.activeIndex === index ? -1 : index
      },
      acceptQutation: function (item) {
//        if (this.activeIndex > -1) {
//        } else {
// //          this.$message.success('请选择报价信息')
//          this.onRemind('请选择报价信息')
//        }
        this.$http.post('/inquiry/buyer/adopt?id=' + item.id + '&status=1')
          .then(response => {
//              this.$message.success('采纳成功')
              this.onRemind('采纳成功')
//            this.$emit('cancelSayPriceInfoAction', true)
            item.agreed = 1
//              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(err.response.data.message || '系统错误')
          })
      },
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount ++
      },
      selectRefuse: function (item, reason) {
        item.showRefuseList = false
        this.$http.post(`/inquiry/buyer/refuse?id=${item.id}&status=0&refusereason=${encodeURIComponent(reason)}`)
          .then(res => {
            item.agreed = 0
            this.onRemind('拒绝报价成功')
            item.refusereason = reason
          }, err => {
            this.onRemind(err.response.data.message || '拒绝报价失败,系统错误')
            console.log(err)
          })
      },
      setShowRefuseList: function (item, flag) {
//        console.log(flag)
        item.showRefuseList = flag
      },
      setSayType: function (sayType) {
        if ((sayType === 'current' && this.currentCount > 0) || (sayType === 'replace' && this.replaceCount > 0)) {
          this.sayType = sayType
        } else {
          this.onRemind(`暂无${sayType === 'current' ? '当前型号报价' : '替代型号报价'}`)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
//        console.log('start')
        this._initscroll()
      })
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-modal {
    .mobile-modal-box {
      top: 1.66rem;
      left: 3%;
      right: 3%;
      bottom: 1.66rem;
      width: 7rem;
      margin: 0 auto;
      background: #fff;
      .icon-guanbi {
        position: absolute;
        right: -.25rem;
        font-size: .6rem;
        top: -.4rem;
        color: #fff;
        z-index: 1;
      }
      .say-price-info {
        /*background: #f3f3f3;*/
        /*padding: .18rem 0 0 0;*/
        width: 100%;
        overflow: hidden;
        max-height: 90%;
        position: relative;
        margin-top: .1rem;
        .refused-txt {
          span{
            color: #ef5042;
          }
        }
        .base-info {
          margin: 0 auto;
          /*border-bottom: .18rem solid #f3f3f3;*/
         /* &:last-child {
            margin-bottom: 0;
          }*/
          &.say-info {
            /*height: 4.54rem;*/
            position: relative;
           /* margin-top: .18rem;*/
            > 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: 4.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;
                    width: 50%;
                    &:last-child {
                      border-right: .02rem solid #7e7e7e;
                    }
                  }
                  &:last-child {
                    border-bottom: .02rem solid #7e7e7e;
                  }
                }
              }
              &.vendor {
                margin: .15rem auto 0;
              }
            }
          }
        }
        .price {
          margin-top: .3rem;
          span {
            width: 1.4rem;
            color: #666;
            font-size: .28rem;
            display: inline-block;
            float: left;
          }
          table {
            float: left;
            margin: 0 0 .32rem 0;
          }
        }
        .is-buyer {
          height: 100%;
          .base {
            background: #3f84f6;
            color: #fff;
            margin: 0 .1rem .1rem .1rem;
            border-radius: .1rem;
            .content-line {
              span {
                color: #fff;
              }
            }
          }
          .say {
            .content-title {
              border-bottom: 1px solid #d3d3d3;
              font-size: .28rem;
              font-weight: bold;
              height: .81rem;
              line-height: .81rem;
              .vend-name {
                width: 5rem;
              }
              img {
                width: .69rem;
                margin-left: .2rem;
              }
              i {
                display: inline-block;
                width: .4rem;
                height: .4rem;
                line-height: .4rem;
                color: #fff;
                font-weight: bold;
                font-style: normal;
                background: #3f84f6;
                border-radius: .05rem;
                text-align: center;
                margin-right: .12rem;
              }
            }
            .content-line {
              width: 50%;
              margin-top: .3rem;
              display: inline-block;
              vertical-align: middle;
            }
            .operate-say {
              text-align: center;
              margin-bottom: .73rem;
              .operate-say-btn {
                width: 3rem;
                height: .54rem;
                line-height: .54rem;
                text-align: center;
                font-size: .28rem;
                background: #fff;
                color: #3f84f6;
                border: 1px solid #3f84f6;
                border-radius: .08rem;
                &.refuse {
                  color: #666;
                  border-color: #e5e5e5;
                  margin-left: .2rem;
                  position: relative;
                  img {
                    width: .1rem;
                    position: absolute;
                    right: .21rem;
                    top: .25rem;
                  }
                  ul {
                    position: absolute;
                    width: 3rem;
                    li {
                      height: .58rem;
                      line-height: .58rem;
                      padding-left: .16rem;
                      font-size: .28rem;
                      color: #666;
                      background: #fff;
                      text-align: left;
                      border: 1px solid #e5e5e5;
                      border-bottom-left-radius: .08rem;
                      border-bottom-right-radius: .08rem;
                      border-top: none;
                      &:active, &:hover, &:focus {
                        background: #dbf0fd;
                        color: #333;
                      }
                    }
                  }
                }
              }
            }
            &.long {
              .operate-say {
                margin-bottom: 3rem;
              }
            }
          }
        }
        .is-vendor {
          height: 100%;
          .base-info {
            .content-title {
              color: #3f84f6;
              font-size: .28rem;
              font-weight: bold;
              height: .82rem;
              line-height: .82rem;
              border-bottom: 1px solid #d3d3d3;
              margin-bottom: .1rem;
              span {
                width: 5.62rem;
              }
              img {
                width: .76rem;
              }
            }
          }
          .say-info {
            border-top: 1px solid #d3d3d3;
            .inline-block {
              width: 50%;
              margin-top: .1rem;
            }
            .price {
              margin-top: .2rem;
            }
          }
        }
        .say-price-btn {
          margin: .37rem auto .7rem;
        }
      }
    }
  }
</style>