mall-web-ssr/components/store/CommodityInfo.vue

<template>
  <div>
    <div class="menu-com row">
      <div class="menu-title col-md-12">
        <nuxt-link to="/">商城首页</nuxt-link> >
        <nuxt-link to="/eCommerce/home/origin" v-if="storeInfo.type == 'AGENCY' || storeInfo.type == 'DISTRIBUTION'" title="代理经销">代理经销</nuxt-link>
        <nuxt-link to="/eCommerce/home/factory" v-if="storeInfo.type == 'ORIGINAL_FACTORY'" title="原厂专区">原厂专区</nuxt-link>
        <nuxt-link :to="'/store/' + storeInfo.uuid" v-if="storeInfo.type == 'CONSIGNMENT'" title="库存寄售">库存寄售</nuxt-link>
        >
        <span v-if="storeInfo.type != 'CONSIGNMENT'"><nuxt-link :to="'/store/' + storeInfo.uuid" :title="storeInfo.storeName" v-text="storeInfo.storeName">storeInfo.storeName</nuxt-link>> </span>
        <span>产品详情</span>
      </div>
    </div>
    <div id="commodity-info-fragment">
      <div class="commodity-detail">
        <div class="img">
          <img src="/images/floor/specificPrice-store.png" alt="" class="specific-price" v-if="isConsignment && isSpecificPriceTag(commodity.tag)">
          <img :src="commodity.img || '/images/store/common/default.png'" style="width: 256px;height: 256px;"/>
          <div class="box">
            <img v-if="commodity.status === 602" src="/images/store/isSellOut.png" alt="">
          </div>
        </div>
        <div class="content">
          <div class="code">
            <span v-text="commodity.code"></span>
          </div>
          <div class="commodity-info-detail">
            <div class="com-info" v-if="commodity.status !== 613">
              <span class="name">价&nbsp;格</span>：
              <span class="money">
                <span v-if="fragment.currency == 'RMB'">￥</span>
                <span v-if="fragment.currency == 'USD'">$</span>
                <span>{{fragment.price | currency}}</span>
              </span>
            </div>
            <div class="com-info">
              <span class="name">品&nbsp;牌</span>：<span v-text="commodity.brandNameEn"></span>
            </div>
            <div class="com-info">
              <span class="name no-letter">物料名称</span>：<span v-text="commodity.kindNameCn || '无物料名称信息'"></span>
            </div>
            <div class="com-info">
              <span class="name">规&nbsp;格</span>：<span v-text="commodity.spec || '无规格信息'"></span>
            </div>
            <div class="com-info">
              <span class="name">下&nbsp;载</span>：<a @click="toAttach(component.attach)" v-if="component.attach">规格书</a><span v-if="!component.attach">暂无信息</span>
            </div>
            <div class="com-info">
              <span class="name">包&nbsp;装</span>：<span v-text="commodity.packaging || '无包装信息'"></span>
            </div>
            <div class="com-info">
              <span class="name" style="letter-spacing: 1.5px;">最小包装数</span>：<span v-text="commodity.minPackQty || '无最小包装数信息'"></span>
            </div>
            <div class="com-info">
              <span class="name">库&nbsp;存</span>：<span v-text="commodity.reserve || 0"></span><em style="margin-left: 3px;">PCS</em>
              （<span v-text="commodity.minBuyQty || 1"></span>个起订）
              <span :class="commodity.breakUp?'div-sell can-div-sell':'div-sell not-div-sell'" v-if="commodity.breakUp">可拆卖</span>
            </div>
            <div class="com-info">
              <span class="name">交&nbsp;期</span>：
              <div class="delivery">
                <span v-text="commodity.b2cMinDelivery || 0"></span>
                <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">-</span>
                <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery" v-text="commodity.b2cMaxDelivery || 0"></span>
                <span>(天)</span>
              </div>
            </div>
            <div class="com-info form-inline" v-if="commodity.status !== 602 && commodity.status !== 612 && commodity.status !== 613">
              <span class="name">数&nbsp;量</span>：
              <div class="input-group" style="width: 120px">
                <div :class="fragment.canSub ? ' input-group-addon operate':'input-group-addon'" @click="fragment.canSub ?subNum():''" :style="!fragment.canSub ?'cursor: not-allowed;':''">-</div>
                <input type="text" class="form-control" placeholder="数量" v-model="fragment.num" @change="inputNum()" @input="onInput()" style="padding: 0;min-width: 100px;text-align: center;"/>
                <div :class="fragment.canAdd ?'input-group-addon operate':'input-group-addon'" @click="fragment.canAdd ?addNum():''" :style="!fragment.canAdd ?'cursor: not-allowed;':''">+</div>
                <!--   <div class="input-group-addon operate" @click="subNum()">-</div>
                   <input type="text" class="form-control" placeholder="数量" v-model="fragment.num" @change="inputNum()"style="padding: 0;min-width: 100px;text-align: center;"/>
                   <div class="input-group-addon operate" @click="addNum()">+</div>-->
              </div>
              ×
              <!--<div class="select">
                <select class="form-control"  :disabled="commodity.currencyName != 'RMB-USD'" v-model="fragment.currency" @change="changeCurrency()">
                  <option value="RMB">RMB</option>
                  <option value="USD">USD</option>
                </select>
              </div>-->
              <div class="select">
                <span v-if="fragment.currency == 'RMB'">￥</span>
                <span v-if="fragment.currency == 'USD'">$</span>
                <span>{{(fragment.price || 0) | currency}}</span>
                <span v-if="fragment.currency == 'RMB'" class="tax"> ( 含税 ) </span>
              </div>
              ＝
              <span class="money">
                 <span v-if="fragment.currency == 'RMB'">￥</span>
                 <span v-if="fragment.currency == 'USD'">$</span>
                 <span>{{calculate | currencyShort}}</span>
              </span>
            </div>
            <div class="button" v-if="commodity.status !== 602 && commodity.status !== 612 && commodity.status !== 613">
              <button class="btn btn-default btn-primary" @click="buyNow(false, commodity)">加入购物车</button>
              <button class="btn btn-default btn-now" @click="buyNow(true, commodity)">立即购买</button>
            </div>
            <div class="button" v-if="commodity.status === 613 || commodity.status === 602">
              <button class="btn btn-default btn-primary" @click="immediatelyClick(commodity, $event)">立即询价</button>
            </div>
            <div class="warn-area" v-if="commodity.status === 602 || commodity.status === 612" v-text="commodity.status === 602 ? '此产品已售罄':'此产品已下架'"></div>
          </div>
          <div class="price-block" v-if="commodity.status !== 613">
            <div class="commodity-price">
              <div class="title">价格梯度</div>
              <div class="table">
                <div class="head">
                  <div class="fragment">梯度/pcs</div>
                  <div class="price" v-if="commodity.currencyName == 'RMB'">单价￥(含税)</div>
                  <div class="price" v-if="commodity.currencyName == 'USD'">单价$</div>
                </div>
                <ul class="list-unstyled list-inline">
                  <li v-for="price in commodity.prices">
                    <div class="fragment">
                      <span v-text="price.start"></span>+
                    </div>
                    <div class="price" v-if="commodity.currencyName == 'RMB'">
                      <span v-if="price.rMBPrice">{{price.rMBPrice || 0 | currency}}</span>
                    </div>
                    <div class="price" v-if="commodity.currencyName == 'USD'">
                      <span v-if="price.uSDPrice">{{price.uSDPrice || 0 | currency}}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="我要询价"
      :visible.sync="hasDialog">
      <div class="form_dialog">
        <ul class="list-inline">
          <li class="form-item">
            <span>品牌：</span>
            <p v-text="applyObj.brand ? spliceString(applyObj.brand, 90) : '-'">32432</p>
          </li>
          <li class="form-item">
            <span>物料名称：</span>
            <p v-text="applyObj.prodName ? spliceString(applyObj.prodName, 90) : '-'">32</p>
          </li>
          <li class="form-item">
            <span>型号：</span>
            <p v-text="applyObj.cmpCode ? spliceString(applyObj.cmpCode, 90) : '-'">32432</p>
          </li>
          <li class="form-item">
            <span>规格：</span>
            <p v-text="applyObj.spec ? spliceString(applyObj.spec, 90) : '-'">32432</p>
          </li>
          <li class="form-item">
            <span><i>*</i>截止日期：</span>
            <el-date-picker
              :class="{'error': !validObj.deadline}"
              v-model="applyObj.deadline"
              type="date"
              :picker-options="pickerOptions"
              @change="setDeadLineValid"
              :editable="false"
              :clearable="true"
              size="mini">
            </el-date-picker>
          </li>
          <li class="form-item">
            <span>封装：</span>
            <input type="text" class="form-control" v-model="applyObj.encapsulation"/>
          </li>
          <!--<li class="form-item">-->
          <!--<span>单价预算：</span>-->
          <!--<select v-model="applyObj.currency" class="form-control" style="width:40px;">-->
          <!--<option value="RMB">¥</option>-->
          <!--<option value="USD">$</option>-->
          <!--</select>-->
          <!--<input type="number" v-model="applyObj.unitPrice" class="form-control" :class="{'error': !validObj.unitPrice}"/>-->
          <!--</li>-->
          <!--<li class="form-item">-->
          <!--<span>生产日期：</span>-->
          <!--<input type="text" class="form-control" v-model="applyObj.produceDate"/>-->
          <!--</li>-->
          <li class="form-item">
            <span>采购数量(PCS)：</span>
            <input type="number" class="form-control" v-model="applyObj.amount" :class="{'error': !validObj.amount}"/>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <button @click="authorityInterceptor(baseUrls.userPublishSeek, goPublish)" :disabled="isClick">询价提交</button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  function initFragment (commodity) {
    if (!commodity) {
      return {}
    }
    let fragment = {}
    let prices = commodity.prices.length > 0 ? commodity.prices[0] : {}
    fragment.num = commodity.minBuyQty
    fragment.prices = prices

    if (commodity.currencyName !== 'USD') {
      fragment.currency = 'RMB'
    } else {
      fragment.currency = 'USD'
    }

    if (fragment.currency !== 'USD') {
      fragment.price = prices.rMBPrice
    } else {
      fragment.price = prices.uSDPrice
    }
    fragment.canAdd = true
    fragment.canSub = false
    return fragment
  }
  function getFragment (commodity, fragment) {
    // 判断是否小于第一分段的起订量
    if (commodity.prices[0].start > fragment.num) {
      fragment.num = commodity.prices[0].start
    }
    // 获取分段的信息
    let prices = commodity.prices
    for (let i = 0; i < prices.length; i++) {
      if (fragment.num <= prices[i].end) {
        fragment.prices = prices[i]
        break
      }
    }
  }
  export default {
    name: 'commodity-info',
    data () {
      return {
        isClick: false,
        applyObj: {
          cmpCode: '',
          brand: '',
          unitPrice: '',
          currency: 'RMB',
          prodName: '',
          spec: '',
          encapsulation: '',
          produceDate: '',
          amount: '',
          deadline: ''
        },
        validObj: {
          unitPrice: true,
          amount: true,
          deadline: true
        },
        pickerOptions: {
          disabledDate (time) {
            // 大于等于今天 小于三个月后
            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
          }
        },
        hasDialog: false,
        fragment: {
          currency: 'RMB',
          num: 0,
          price: 0,
          canAdd: true,
          canSub: true}
      }
    },
    watch: {
      fragment: function (val, oldVal) {
      }
    },
    filters: {
      currencyShort: function (num) {
        if (typeof num === 'number' && num > 0) {
          if (num <= 0.01) {
            num = 0.01
          } else {
            if (num.toString().indexOf('.') === -1) {
              num += '.00'
            } else {
              let inputStr = num.toString()
              let arr = inputStr.split('.')
              let floatNum = arr[1]
              if (floatNum && arr[0]) {
                if (floatNum.length > 2) {
                  num = inputStr.substring(0, arr[0].length + 3)
                  if (Number(floatNum.charAt(2)) >= 1) {
                    num = (Math.ceil(Number(num) * 100) + 1) / 100
                    let inputStr1 = num.toString()
                    let arr1 = inputStr1.split('.')
                    let floatNum1 = arr1[1]
                    if (num.toString().indexOf('.') === -1) {
                      num += '.00'
                    }
                    if (floatNum1 && floatNum1.length === 1) {
                      num = num + '0'
                    }
                  }
                } else if (floatNum.length === 1) {
                  num = num + '0'
                }
              }
            }
          }
        }
        return num
      },
      currency: function (num) {
        if (typeof num === 'number' && num > 0) {
          if (num <= 0.000001) {
            num = 0.000001
          } else {
            if (num.toString().indexOf('.') === -1) {
              num += '.00'
            } else {
              let inputStr = num.toString()
              let arr = inputStr.split('.')
              let floatNum = arr[1]
              if (floatNum && arr[0]) {
                if (floatNum.length > 6) {
                  num = inputStr.substring(0, arr[0].length + 7)
                  if (Number(floatNum.charAt(6)) > 4) {
                    num = (Number(num) * 1000000 + 1) / 1000000
                  }
                } else if (floatNum.length === 1) {
                  num = num + '0'
                }
              }
            }
          }
        }
        return num
      }
    },
    computed: {
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      },
      commodity () {
        let commodity = this.$store.state.shop.storeInfo.commodity.data
        this.fragment = initFragment(commodity)
        return commodity
      },
      component () {
        return this.$store.state.shop.storeInfo.component.data
      },
      calculate () {
        this.fragment.total = this.fragment.price * Math.pow(10, 6) * this.fragment.num
        return Math.ceil(this.fragment.total) / Math.pow(10, 6)
      },
      user () {
        return this.$store.state.option.user
      },
      isConsignment () {
        return this.storeInfo.type === 'CONSIGNMENT'
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.loadSaveHistory()
      })
    },
    methods: {
      isSpecificPriceTag: function (tag) {
        return tag && tag.indexOf('特价') !== -1
      },
      onInput () {
        let prices = this.commodity.prices
        if (prices && prices.length) {
          let _this = this
          for (let i = 0; i < prices.length; i++) {
            if (_this.fragment.num >= prices[i].start && _this.fragment.num <= prices[i].end) {
              _this.fragment.price = _this.fragment.currency === 'RMB' ? prices[i].rMBPrice : prices[i].uSDPrice
              break
            }
          }
        }
      },
      loadSaveHistory () {
        if (this.user.logged) {
          this.$store.dispatch('shop/saveHistory', {id: this.commodity.batchCode})
        }
      },
      changeCurrency () {
        if (this.fragment.currency === 'RMB') {
          this.fragment.price = this.fragment.prices.rMBPrice
        } else if (this.fragment.currency === 'USD') {
          this.fragment.price = this.fragment.prices.uSDPrice
        }
      },
      changeNum: function (newNum) {
        let pack = this.commodity.perQty || this.commodity.minPackQty
        let buy = this.commodity.minBuyQty
        let reserve = this.commodity.reserve
        let breakUp = this.commodity.breakUp
        if (!newNum) {
          this.fragment.num = buy
        } else {
          newNum = parseInt(newNum)
          if (breakUp) {
            if (newNum < buy) {
              this.$message.error('最小起订量为' + buy)
              this.fragment.num = buy
              this.fragment.canSub = false
              this.fragment.canAdd = true
            } else if (newNum > reserve) {
              this.$message.error('库存不足')
              this.fragment.num = reserve
              this.fragment.canAdd = false
              this.fragment.canSub = true
            } else {
              this.fragment.canSub = true
              this.fragment.canAdd = true
              this.fragment.num = newNum
              newNum === buy && (this.fragment.canSub = false)
              newNum === reserve && (this.fragment.canAdd = false)
            }
          } else {
            if (newNum < buy) {
              this.$message.error('最小起订量为' + buy)
              this.fragment.num = buy
              this.fragment.canSub = false
              if (newNum > reserve) {
                this.$message.error('库存不足')
                this.fragment.num = reserve - (reserve % pack)
                this.fragment.canAdd = false
              }
            } else if (newNum > reserve) {
              this.fragment.canSub = true
              this.fragment.canAdd = false
              this.$message.error('库存不足')
              this.fragment.num = reserve - (reserve % pack)
            } else {
              this.fragment.canSub = true
              this.fragment.canAdd = true
              let remainder = newNum % pack
              if (remainder !== 0) {
//                console.log(this.fragment.num)
                this.$message.error('不支持拆包且包装量为' + pack)
                // 这个直接赋值的，应该给这个值进行判断(Math.floor(newNum / pack) + 1) * pack
                let res = (Math.floor(newNum / pack) + 1) * pack
                this.fragment.num = res > reserve ? Math.floor(newNum / pack) * pack : res
              } else {
                this.fragment.num = newNum
              }
              newNum === buy && (this.fragment.canSub = false)
              newNum === reserve && (this.fragment.canAdd = false)
            }
          }
        }
      },
      subNum () {
        let pack = this.commodity.perQty || this.commodity.minPackQty
        let newNum = 0
        if (this.commodity.breakUp) {
          newNum = this.fragment.num - 1
        } else {
          newNum = this.fragment.num - pack
        }
        this.changeNum(newNum)
        getFragment(this.commodity, this.fragment)
        this.onInput()
      },
      addNum () {
        let pack = this.commodity.perQty || this.commodity.minPackQty
        let newNum = 0
        if (this.commodity.breakUp) {
          newNum = this.fragment.num + 1
        } else {
          newNum = this.fragment.num + pack
        }
        this.changeNum(newNum)
        getFragment(this.commodity, this.fragment)
        this.onInput()
      },
      inputNum () {
        if ((/^[\d]*$/).test(this.fragment.num)) {
          this.changeNum(this.fragment.num)
          getFragment(this.commodity, this.fragment)
        } else {
          this.$message.error('请输入整数')
          this.fragment.num = this.commodity.minBuyQty
        }
      },
      buyNow: function (isBuy, item) {
        if (!this.$store.state.option.user.logged) {
          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
            if (response.data) {
              window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
            }
          })
        } else {
          if (item) {
            if (isBuy) {
              this.$http.post('/trade/order/buyNow', [{
                uuid: item.uuid,
                batchCode: item.batchCode,
                number: this.fragment.num,
                storeid: item.storeid,
                storeUuid: item.storeid,
                currencyName: item.currencyName,
                minPackQty: item.minPackQty
              }])
                .then(response => {
                  if (response.data.success) {
                    if (response.data.message) {
                      this.$message({
                        message: response.data.message,
                        type: 'success'
                      })
                      window.setTimeout(function () {
                        window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
                      }, 1000)
                    } else {
                      window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
                    }
                  } else {
                    if (response.data.data && response.data.data.unvailable === 1) {
                      this.$message.error('产品信息已失效，请刷新界面')
                    } else {
                      this.$message.error(response.data.message)
                    }
                  }
                }, err => {
                  // console.log(err)
                  if (item.minBuyQty > item.reserve) {
                    this.$message.error('商品' + item.code + '的库存已经不满足最小起订量')
                  }
                })
            } else {
              // this.$store.dispatch('user/addCar', {uuid: item.uuid, batchCode: item.batchCode, number: item.minBuyQty})
              this.$http.post('/trade/cart/add', {
                uuid: item.uuid,
                batchCode: item.batchCode,
                number: this.fragment.num,
                storeid: item.storeid,
                storeUuid: item.storeid,
                currencyName: item.currencyName,
                minPackQty: item.minPackQty
              })
                .then(response => {
                  if (response.data.success) {
                    if (response.data.message) {
                      this.$message({
                        message: '添加购物车成功，但商品信息有更新',
                        type: 'success'
                      })
                    } else {
                      this.$message({
                        message: '添加购物车成功',
                        type: 'success'
                      })
                    }
                  } else {
                    if (response.data.code === 2) {
                      this.$message.error(response.data.message + '，请刷新页面')
                    } else {
                      this.$message.error(response.data.message)
                    }
                  }
                })
            }
          }
        }
      },
      toAttach: function (url) {
        if (this.user.logged) {
          if (url && url !== '1') {
            window.open(url)
          } else {
            this.$message.error('规格书地址错误')
          }
        } else {
          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
            if (response.data) {
              window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
            }
          })
        }
      },
      // 格式化字符串长度
      spliceString (str, length) {
        return str && str.length ? this.baseUtils.spliceStr(str, length) : '暂无信息'
      },
      // 弹出询价界面
      immediatelyClick (type, event) {
        event.stopPropagation()
        if (!this.user.logged) {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        } else {
          this.hasDialog = true
          this.applyObj.cmpCode = type.code
          this.applyObj.brand = type.brandNameEn
          this.applyObj.spec = type.spec
          this.applyObj.prodName = type.kindNameCn
        }
      },
      // 时间格式化
      setDeadLineValid: function () {
        if(this.applyObj.deadline === '') {return ''}
        this.applyObj.deadline = this.baseUtils.formatDate(this.baseUtils.getFullDay(new Date(this.applyObj.deadline)), 'yyyy-MM-dd hh:mm:ss')
        this.validObj.deadline = true
      },
      // 检查单价预算
      checkUnitPrice () {
        this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
        if (!this.validObj.unitPrice && this.applyObj.unitPrice <= 0) {
          this.$message.error('单价必须是大于0的数字')
        }
        return this.validObj.unitPrice
      },
      // 检查采购数量
      checkAmount () {
        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
        return this.validObj.amount
      },
      // 检查时间是否有输入
      checkDeadline () {
        this.validObj.deadline = Boolean(this.applyObj.deadline)
        return this.validObj.deadline
      },
      // 检查各个字段输入正常数据
      checkAll () {
        return this.checkDeadline() && this.checkUnitPrice() && this.checkAmount()
      },
      emptyForm () {
        for (let attr in this.applyObj) {
          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
        }
      },
      // 请求询价信息
      goPublish () {
        let _this = this
        this.isClick = true
        setTimeout(function () {
          _this.isClick = false
        }, 1000)
        if (this.checkAll()) {
          let inquiry = {}
          let inquiryItem = {}
          if (this.user.data.enterprise) {
            inquiry.enUU = this.user.data.enterprise.uu
          }
          let date = new Date()
          let currency = this.applyObj.unitPrice ? this.applyObj.currency : null
          inquiry.recorderUU = this.user.data.userUU
          inquiry.code = 'MALL' + date.getTime()
          inquiry.date = date
          inquiry.recorder = this.user.data.userName
          inquiry.endDate = this.applyObj.deadline
          inquiry.sourceapp = 'MALL'
          inquiry.amount = 1
          inquiryItem.userUU = this.user.data.userUU
          inquiryItem.source = 'MALL'
          inquiryItem.userName = this.user.data.userName
          inquiryItem.userTel = this.user.data.userTel
          inquiryItem.needquantity = this.applyObj.amount
          inquiryItem.inbrand = this.applyObj.brand
          inquiryItem.currency = currency
          inquiryItem.cmpCode = this.applyObj.cmpCode.toUpperCase()
          inquiryItem.unitPrice = this.applyObj.unitPrice
          inquiryItem.produceDate = this.applyObj.produceDate
          inquiryItem.date = date
          inquiryItem.endDate = this.applyObj.deadline
          inquiryItem.encapsulation = this.applyObj.encapsulation
          inquiryItem.spec = this.applyObj.spec
          inquiryItem.prodTitle = this.applyObj.prodName
          let inquiryItems = []
          inquiryItems.push(inquiryItem)
          inquiry.inquiryItems = inquiryItems
          inquiry.currency = this.applyObj.unitPrice ? this.applyObj.currency : null
          this.$http.post('/inquiry/buyer/save', inquiry)
            .then(res => {
              this.$message.success('发布成功')
              this.hasDialog = false
              this.emptyForm()
            }, error => {
              // console.log(error)
              this.$message.error('发布失败')
            })
        } else {
          if (!this.validObj.deadline) {
            this.$message.error('截止日期不能为空')
          } else if (!this.validObj.amount) {
            this.$message.error('请输入正确的数值')
          }
        }
      }
    }
  }
</script>
<style type="text/scss" lang="scss">
  .btn-buy-now {
    background-color: #5078CB;
    color: #fff;
    width: 80px;
    height: 30px;
    font-size: 12px;
    border: 1px solid #5078cb;
    position: relative;
  }
  .btn-add-cart {
    margin-top: 10px;
    color: #214797;
    width: 80px;
    height: 30px;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
  }
  .btn-buy-now:hover{
    background: #214797;
  }
  .btn-buy-now.disabled,
  .btn-buy-now.disabled:focus{
    background-color: #d1d2d3!important;
    border: none!important;
    outline: none;
    color: #fff!important;
    cursor: not-allowed;
  }
  .el-dialog{
    width: 680px!important;
    .el-dialog__header{
      background: #4290f7;
      line-height: 40px;
      padding: 0 20px 0;
      display:block;
      .el-dialog__title{
        color:#fff;
      }
      .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
        color:#fff;
      }
    }
    .el-dialog__body{
      padding: 10px 20px;
    }
    .el-dialog__footer{
      text-align: center;
      button{
        display:inline-block;
        background: #3c7cf5;
        color:#fff;
        font-size: 14px;
        line-height: 30px;
        height:30px;
        padding:0 10px;
        box-shadow: none;
        border: 0;
        border-radius:5px;
      }
    }
  }
  .form_dialog{
    .el-date-editor--date{
      width: 230px;
      &.error {
        input {
          border: 1px solid #f4645f !important;
        }
      }
    }
    ul{
      li{
        width:50%;
        font-size: 14px;
        color:#666;
        vertical-align: top;
        margin-bottom:15px;
        &.form-item {
          position: relative;
          p{
            margin:0;
            margin-left:80px;
            word-break: break-all;
            word-wrap: break-word;
          }
          span {
            float:left;
            width: 112px;
            text-align: right;
            display: inline-block;
            color:#3c7cf5;
            i {
              position: relative;
              top: 2px;
              right: 5px;
              color: #e41515;
            }
          }
          ul {
            line-height: normal;
            position: absolute;
            top: 19px;
            left: 79px;
            background: #fff;
            border: 1px solid #b5b5b5;
            z-index: 1;
            max-height: 120px;
            overflow-y: auto;
            overflow-x: hidden;
            border-radius: 3px;
            width: 114px;
            font-size: 12px;
            li {
              height: 24px;
              line-height: 24px;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 5px;
              &:hover {
                background: #ddd;
              }
            }
          }
          select {
            width: 40px;
            position: absolute;
            height: 20px;
            background: url('/images/applyPurchase/select.png')no-repeat right;
            background-position-x: 23px;
            padding: 0 0 0 7px;
            border-radius: 0;
            & + input {
              padding-left: 45px;
            }
          }
          .el-input {
            width: 198px;
          }
          input {
            font-size: 14px;
            width: 198px;
            height: 20px;
            line-height: 20px;
            border-radius: 2px;
            padding: 0 3px;
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            &.error {
              border-color: #f4645f!important;
            }
          }
        }
      }
    }
  }
  .container.commodity {
    width: 1190px;
    padding-left: 0;
    padding-right: 0;
  }
  .commodity .commodity-detail {
    width: 100%;
    display: inline-block;
    font-size: 0;
  }

  .commodity-detail .img{
    float: left;
    width: 258px;
    height: 320px;
    position: relative;
  }

  .commodity-detail .img >img {
      border: 1px solid #D6D3CE;
  }
  .commodity-detail .img .specific-price {
    position: absolute;
    left: 0;
    top: 0;
    border: none;
  }

  .commodity-detail .img  .box {
    height: 62px;
    position: relative;
  }
  .commodity-detail .img  .box img {
    position: absolute;
    right: 3px;
    bottom: 64px;
  }

  .commodity-detail .content {
    width: 932px;
    float: left;
    font-size: 14px;
  }

  .commodity-detail .content {
    padding-left: 20px;
  }

  .commodity-detail .content .code {
    font-size: 24px;
    color: rgb(50, 50, 50);
    font-weight: 600;
    border-bottom: 1px solid #D6D3CE;
    line-height: 40px;
  }
  .commodity-detail .content .code span{
    word-break: break-all;
  }

	.commodity-detail .content .com-info {
		font-size: 14px;
		line-height: 26px;
	}
  .commodity-detail .content .com-info em {
    font-size: 14px;
    line-height: 26px;
    font-style: normal;
  }
	.input-group .input-group-operate {
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		color: #555;
		text-align: center;
		background-color: #eee;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

  .input-group .input-group-operate:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  .input-group .input-group-operate:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .content .com-info .name {
    display: inline-block;
    width: 80px;
    letter-spacing: 15px;
  }
  .content .com-info .no-letter {
    letter-spacing: 1.5px;
  }
  .content .com-info a{
    color: #1162a4;
  }
  .content .com-info:hover a{
    color: #23527c;
  }
  .content .warn-area {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 15px;
  }
  .commodity-info-detail {
    float: left;
    padding-top: 10px;
    width: 582px;
  }

  .price-block {
    float: right;
    width: 330px;
    margin-top: 10px;
    height: 220px;
  }

  .commodity-price {
    line-height: 30px;
    text-align: center;
    border: 1px solid #D6D3CE;
  }

  .commodity-price .title {
    background-color: #f7f7f7;
    border-bottom: 1px solid #D6D3CE;
  }

  .commodity-price .head {
    border-bottom: 1px solid #D6D3CE;
  }

  .commodity-price .fragment {
    display: inline-block;
    width: 150px;
  }

  .commodity-price .price {
    width: 150px;
    display: inline-block;
  }

  .com-info div.select {
    display: inline-block;
    font-weight: 600;
    color: red;
    font-size: 14px;
  }
  .com-info div.select .tax {
    font-weight: normal;
    color: black;
    font-size: 12px;
  }
  .com-info .operate {
    cursor: pointer;
  }

  .com-info .operate:hover, .com-info .operate:link {
    background-color: #00B83F;
    color: white;
  }

  .com-info .money {
    font-weight: 600;
    color: red;
    font-size: 14px;
  }

  .com-info select {
    border-radius: 4px;
    width: 120px!important;
  }

  ul.list-inline {
    margin: 0;
  }

  .commodity-price ul.list-inline li {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px dashed #D6D3CE;
  }

  .commodity-price .table {
    margin-bottom: 0;
  }

  .commodity-price ul>li:last-child {
    border-bottom: none;
  }

  div.button {
    padding-top: 20px;
    float: left;
  }

  button.btn-now {
    border: 1px solid #3D76C6;
    color: #3D76C6;
    margin-left: 30px;
  }

  .com-info .delivery {
    display: inline;
  }
  #commodity-info-fragment{
    margin-bottom: 20px;
  }

  .commodity-detail .content .com-info .div-sell {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    color: #fff;
    padding: 0 5px;
    display: inline-block;
    position: relative;
  }
  .commodity-detail .content .com-info .can-div-sell {
    background: #5078cb;
  }
  .commodity-detail .content .com-info .not-div-sell {
    background: #fc8200;
  }
  .commodity-detail .content .com-info .can-div-sell:before {
    content: '';
    position: absolute;
    left: -8px;
    top: 10px;
    border-left: 8px solid transparent;
    border-bottom: 6px solid #5078cb;
  }
  .commodity-detail .content .com-info .not-div-sell:before {
    content: '';
    position: absolute;
    left: -8px;
    top: 10px;
    border-left: 8px solid transparent;
    border-bottom: 6px solid #fc8200;
  }
</style>