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

<template>
  <div>
    <div class="material-wrapper" >
      <div class="order-nav">
        <div :class="activeType === '' ? 'active': ''" @click="ChangeList('')"><span>公司产品库</span></div>
        <div :class="activeType === 'mine' ? 'active' : ''" @click="ChangeList('mine')"><span>我的产品库</span></div>
      </div>
      <div class="search-content">
        <input type="text" placeholder="请输入您要查找的品牌或型号" v-model="seekKeyword" @keyup.13="searchSeek">
        <span @click="searchSeek" >
            <i class="iconfont icon-sousuo"></i>
            </span>
      </div>

      <div class="scrollContent" id="provider-wrapper">
        <div class="providerList" v-for="(item, index) in GetEnterpriseListData">
          <div class="top">
            <div class="icon" :class="item.standard ? 'standed' : 'istanded'"></div>
            <div class="text" style="width: 4.3rem">
              {{item.pcmpcode}}
            </div>
            <div class="text" style="width: 1rem;color: #666;font-size: 0.28rem">
              {{item.goods && item.goods.selfSale ? '寄售' : '自营' || '-'}}
            </div>
            <div class="text" style="width: 1rem;color: #666;font-size: 0.28rem">
              {{item.goods && item.goods.autoPublish ? '已上架' : '已下架' }}
            </div>
            <!-- <div class="pms">
               {{item.storeid === '33069557578d44e69bd91ad12d28a8d4' ? '寄售' : '自营'}}
             </div>-->
            <!--<img class="store-type" v-if="item.goods && item.goods.storeid === '33069557578d44e69bd91ad12d28a8d4'" src="/images/mobile/product/consignment.png" alt="">-->
            <!--<img class="store-type" src="/images/mobile/product/self.png" alt="" v-else >=-->
            <img class="store-type" src="/images/mobile/product/mine_icon.png" v-if="item.addProductPerson"/>
          </div>
          <div class="middle">
            <div class="list" style="height: 0.46rem;">
              <div class="fl">
                <div class="name">品牌：</div>
                <div class="text">{{item.pbranden || item.pbrand || '-'}}</div>
              </div>
              <!--<div class="fr">-->
                <!--<div class="button" @click="update(item)">编辑</div>-->
                <!--<div class="button" @click="offProduct(item, index)">下架</div>-->
              <!--</div>-->
            </div>
            <div class="list">
                <div class="name">物料名称：</div>
                <div class="text">{{item.kind || item.kinden || '-'}}</div>
              <!--<div class="fr">-->
                <!--<div class="textinfo" v-if="item.goods && item.goods.breakUp">可拆卖</div>-->
              <!--</div>-->
            </div>
            <div class="list">
              <div class="name">规格：</div>
              <div class="text">{{item.spec || '-'}}</div>
            </div>
            <div class="list">
              <div class="fl">
                <div class="name">包装方式：</div>
                <div class="text">{{item.packaging || '无包装信息'}}</div>
              </div>
              <div class="fr">
                <div class="name">库存：</div>
                <div class="text">{{item.erpReserve || '-'}}</div>
              </div>

            </div>

            <div class="list">
              <div class="fl">
                <div class="name">最小包装数：</div>
                <div class="text">{{item.minPackQty || '暂无包装信息'}}</div>
              </div>
              <div class="fr">
                <div class="name">成本单价：</div>
                <div class="text">{{item.price || '-'}}</div>
              </div>
            </div>

            <div class="list">
              <div class="fl">
                <div class="name">最小起订量：</div>
                <div class="text">{{item.goods && item.goods.minBuyQty || '-'}}</div>
              </div>
              <div class="fr">
                <div class="name">交期(天)：</div>
                <div class="text" v-if="item.goods && item.goods.b2cMaxDelivery && (item.goods.b2cMaxDelivery != item.goods.b2cMinDelivery)" v-text="item.goods.b2cMinDelivery + '-'+ item.goods.b2cMaxDelivery"></div>
                <div class="text" v-if="item.goods && item.goods.b2cMaxDelivery && (item.goods.b2cMaxDelivery == item.goods.b2cMinDelivery)" v-text="item.goods.b2cMinDelivery"></div>
              </div>
            </div>
            <!--<div class="list">-->
              <!--<div class="name">生产日期：</div>-->
              <!--<div class="text" :title="item.produceDate">{{item.produceDate || '-'}}</div>-->
            <!--</div>-->

            <div class="list">
              <div class="name left">价格梯度：</div>
              <div class="table left">
                <ul>
                  <li class="title">
                    <div>分段数量/PCS</div>
                    <div>分段单价</div>
                  </li>
                  <template  v-if="item.goods">
                    <li v-for="price in item.goods.prices">
                      <div>{{price.start}}+</div>
                      <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
                      <div v-else>${{price.rMBPrice}}</div>
                    </li>
                  </template>
                </ul>
              </div>
            </div>

          </div>
          <div class="clearfix">
            <div class="pull-right add" @click="addProtoperson(item)" :class="{noadd: item.addProductPerson}">加入个人产品</div>
            <div class="pull-right look" @click="toAddpro(item)">编辑上架</div>
            <div class="pull-right look" @click="updateMateriel(item)">编辑物料</div>
          </div>
        </div>
      </div>
      <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
      <pull-up :fixId="'provider-wrapper'" :searchMore="isSearchSearchingMore" :allPage="EnterprisePage" :page="seekPage" @pullUpAction="getMoreSearch"></pull-up>

    </div>
    <!-- 编辑物料 -->
    <div class="update-materiel" v-show="showMateriel" @click="closeAlert">
      <div class="mobile-nav">
        <div class="mobile-header mobile-center-header">
          <a @click="showMateriel = false"><i class="iconfont icon-fanhui"></i></a>
          <p>编辑物料</p>
          <p class="en-name">
            <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}
          </p>
        </div>
      </div>
      <div class="update-materiel-wrapper" @click="clearInfo()">
        <template v-if="MaterielItem.standard === 1">
          <img class="imgUrl" src="/images/mobile/@2x/productDetail/Strand.png" />
        </template>
        <template v-else>
          <img class="imgUrl" src="/images/mobile/@2x/productDetail/isStrand.png" />
        </template>
        <div ref="scroll" style="height: 100%;overflow-y:scroll">
          <div>
            <div style="background: #fff;border: 1px solid #dcdcdc;padding-bottom: 0.5rem;">
              <div class="update-materiel-wrapper-list clearfix" :class="{'overHidden': MaterielItem.standard === 1}">
                <div class="name pull-left"><a class="red">*</a>品牌：</div>
                <template v-if="MaterielItem.standard === 1">
                  {{MaterielItem.pbranden}}
                </template>
                <template v-else>
                  <div class="input pull-left clearfix" :class="{'overHidden': MaterielItem.standard === 1}">
                    <input type="text" v-model="MaterielItem.pbranden" placeholder="请勿填中文符号" @blur.stop="checkBrand" @input.stop="onBrandChange"/>
                    <ul class="similar brand-similar-list" v-show="showSimilarBrandList && MaterielItem.pbranden">
                      <li v-for="sBrand in similarBrand" @click.stop="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
                    </ul>
                    <i class="iconfont icon-guanbi1" @click.stop="MaterielItem.pbranden = ''"></i>
                  </div>
                </template>
              </div>
              <div class="update-materiel-wrapper-list clearfix" :class="{'overHidden': MaterielItem.standard === 1}">
                <div class="name pull-left"><a class="red">*</a>物料名称：</div>
                <template v-if="MaterielItem.standard === 1">
                  {{MaterielItem.kind}}
                </template>
                <template v-else>
                  <div class="input pull-left clearfix"  style="width: 4.44rem">
                    <!--<input type="text" v-model="MaterielItem.kind" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号">-->
                    <input type="text" placeholder="请输入物料名称" v-model="MaterielItem.kind"/>
                    <i class="iconfont icon-guanbi1" @click.stop="MaterielItem.kind = ''"></i>
                  </div>
                </template>
              </div>
              <div class="update-materiel-wrapper-list clearfix">
                <div class="name pull-left"><a class="red">*</a>型号：</div>
                <template v-if="MaterielItem.standard === 1">
                  {{MaterielItem.pcmpcode}}
                </template>
                <template v-else>
                  <div class="input pull-left clearfix">
                    <input type="text" v-model="MaterielItem.pcmpcode" @blur.stop="checkCode" @input.stop="onCodeChange" placeholder="请勿填中文符号">
                    <ul class="similar" v-show="showSimilarCodeList && MaterielItem.pcmpcode">
                      <li v-for="sCode in similarCode" @click.stop="setCode(sCode.code)">{{sCode.code}}</li>
                    </ul>
                    <!--<input type="text" placeholder="请输入型号" v-model="MaterielItem.pcmpcode"/>-->
                    <i class="iconfont icon-guanbi1" @click.stop="MaterielItem.pcmpcode = ''"></i>
                  </div>
                </template>
              </div>
              <div class="update-materiel-wrapper-list clearfix">
                <div class="name pull-left"><a class="red" style="opacity: 0">*</a>规格：</div>
                <div class="input pull-left clearfix">
                  <input type="text" placeholder="请输入规格" v-model="MaterielItem.spec" @blur="checkSpec" @input="onSpecInput" maxlength="50"/>
                  <i class="iconfont icon-guanbi1" @click.stop="MaterielItem.spec = ''"></i>
                </div>
              </div>
              <div class="update-materiel-wrapper-list clearfix">
                <div class="name pull-left"><a class="red" style="opacity: 0">*</a>最小包装数：</div>
                <div class="input pull-left clearfix" style="width: 4.15rem;">
                  <input type="number"  placeholder="请输入最小包装数" v-model="MaterielItem.minPackQty" maxlength="6"/>
                  <i class="iconfont icon-guanbi1" @click.stop="MaterielItem.minPackQty = ''"></i>
                </div>
              </div>
              <div class="update-materiel-wrapper-list clearfix">
                <div class="name pull-left"><a class="red" style="opacity: 0">*</a>包装方式：</div>
                <div class="selectInput pull-left" @click.stop="showdropmenu('pack')">
                  <span>{{MaterielItem.packaging || '无包装信息'}}</span>
                  <img src="/images/mobile/product/drop_icon.png"/>
                  <ul :class="{active : showDrop === 'pack' }">
                    <li v-for="item in packObj" @click.stop="choosePack(item)">{{item}}</li>
                  </ul>
                </div>
              </div>
              <div class="update-materiel-wrapper-list clearfix">
                <div class="name pull-left"><a class="red" style="opacity: 0">*</a>规格书：</div>
              </div>
              <div class="clearfix">
                <div class="update-materiel-wrapper-image">
                  <a :href="MaterielItem.Regulpic" target="_blank" v-if="MaterielItem.IsSave">
                   <img src="/images/mobile/openStore/pdf.png"  style='width: 0.49rem; height: 0.49rem;display:block;margin: 0.2rem auto 0'/>
                  </a>
                  <img v-else src="/images/mobile/openStore/upload.png"  style='width: 0.49rem; height: 0.49rem;display:block;margin: 0.2rem auto 0'/>
                  <input type="file" class="com-input" @change="update" accept=".pdf" v-if="MaterielItem.standard !== 1"/>
                  <span style="position: relative" v-if="MaterielItem.Regulpic === ''">上传规格书</span>
                </div>
                <span class="uploadImgInfo pull-left">
                  <div class="name"><a class="red">*</a>仅支持PDF格式文件，大小不超过20M：</div>
                  <div class="name"><a class="red">*</a>规格书上传后，将在两个工作日内完成审核</div>
                  <div class="name"><a class="red">*</a>如审核不通过，将会以消息的形式通知您</div>
                  <div class="name"><a class="red">*</a>已有原厂规格书的器件暂不开放上传</div>
                  <div class="name"><a class="red">*</a>更新规格书需重新审核</div>
                </span>
                <div style="clear:both"></div>
                <div class="uploadImgBtn pull-left">上传规格书<input type="file" class="com-input" @change="update" accept=".pdf" /></div>

              </div>

              <div class="update-materiel-wrapper-list clearfix">
                <div class="name pull-left"><a class="red" style="opacity: 0">*</a>物料图片：</div>
              </div>
              <div class="clearfix">
                <div class="update-materiel-wrapper-image">
                  <img  :src="MaterielItem.cmpImg || '/images/mobile/openStore/upload.png'"  style='width: 0.49rem; height: 0.49rem;display:block;margin: 0.2rem auto 0'/>
                  <input type="file" class="com-input" @change="update2" accept="image/jpeg,image/jpg,image/png" />
                  <span style="position: relative" v-if="MaterielItem.cmpImg === ''">上传图片</span>
                </div>
                <span class="uploadImgInfo pull-left" style="line-height: 1.09rem">
                  <div class="name"><a class="red">*</a>仅支持JPG、PNG格式文件，大小不超过1M</div>
                </span>
                <div style="clear:both"></div>
                <div class="uploadImgBtn pull-left" style="margin-top: 0.15rem">上传图片<input type="file" class="com-input" @change="update2" accept="image/jpeg,image/jpg,image/png" /></div>
              </div>
            </div>
            <div class="update-materiel-wrapper-controll clearfix">
            <div class="pull-left" @click.stop="saveMateriel()">保存</div>
            <div class="pull-right" @click.stop="saveMateriel('a')">取消</div>
          </div>
            <div style="height: 1rem;position:relative"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { RemindBox, PullUp } from '~components/mobile/common'
  import BScroll from 'better-scroll'
  export default {
    layout: 'mobile',
    middleware: 'authenticated',
    name: 'mobileProduct',
    data() {
      return {
        activeType: '',
        collectResult: '',
        timeoutCount: 0,
        isSearchSearchingMore: false, // 是否请求状态
        EnterprisePage: 0, // 总页数
        GetEnterpriseListData: [], // 当前数据源
        seekPage: 1, // 当前页数
        seekKeyword: '', // 搜索关键字
        MaterielItem: {}, // 当前选择编辑物料对象 或者 编辑上下架对象
        showMateriel: false, // 编辑物料弹窗
        showSimilarCodeList: false, // 型号选择框
        showSimilarBrandList: false, // 品牌选择框
        similarBrand: [],
        similarCode: [],
        packObj: ['Bulk-散装', 'Reel-卷装', 'Tape/Reel-编带', 'Tray-盘装', 'Tube-管装', '盒装', '袋装', '罐装', '瓶装', '桶装', '箱装', '其他'],
        showDrop: ''
      }
    },
    created() {
      this.getResourceProvidor()
    },
    computed: {
      // 是否展示空数据
      StateNone() {
        return this.GetEnterpriseListData.length === 0 && this.EnterprisePage === 0
      }
    },
    methods: {
      // 获取当前企业产品库
      GetEnterpriseList: function() {
        let params = {
          _status: 'all',
          count: 20,
          isStandard: true,
          keyword: this.seekKeyword || '',
          page: this.seekPage,
          sorting: { id: 'DESC' },
          type: 'nStandard'
        }
        return this.$http.get('/trade/products', { params })
      },
      // 获取当前个人产品库
      GetPersonList: function(cb) {
        let params = {
          _status: 'all',
          count: 20,
          isStandard: true,
          keyword: this.seekKeyword || '',
          page: this.seekPage,
          sorting: { id: 'DESC' },
          type: 'all'
        }
        return this.$http.get('/trade/products/person', { params })
      },
      ChangeList(_tp) {
        this.activeType = _tp
        this.seekPage = 0
        this.GetEnterpriseListData = []
        this.getResourceProvidor()
      },
      getResourceProvidor: function() {
        if (this.activeType === '') {
          this.GetEnterpriseList().then(res => {
            this.GetEnterpriseListData = this.GetEnterpriseListData.concat(res.data.content)
            this.EnterprisePage = res.data.totalPages
            this.isSearchSearchingMore = false
          })
        } else if (this.activeType === 'mine') {
          this.GetPersonList().then(res => {
            this.GetEnterpriseListData = this.GetEnterpriseListData.concat(res.data.content)
            this.EnterprisePage = res.data.totalPages
            this.isSearchSearchingMore = false
          })
        } else if (this.providerType === 'onLine') {
          this.GetOnlineList().then(res => {
            this.GetEnterpriseListData = this.GetEnterpriseListData.concat(res.data.content)
            this.EnterprisePage = res.data.totalPages
            this.isSearchSearchingMore = false
          })
        }
      },
      getMoreSearch: function () {
        this.seekPage++
        this.isSearchSearchingMore = true
        this.getResourceProvidor()
      },
      searchSeek: function() {
       this.ChangeList(this.activeType)
      },
      addProtoperson: function(item) {
        if (item.addProductPerson) {
          this.collectResult = '已在个人产品库'
          this.timeoutCount++
          return false
        }
        this.$http.post('/trade/products/person', [item.id])
          .then(response => {
            this.collectResult = '绑定成功'
            this.timeoutCount++
            this.seekPage = 1
            this.GetEnterpriseListData.splice(0, this.GetEnterpriseListData.length)
            this.GetEnterpriseListData = null
            this.GetEnterpriseListData = []
            this.reloadData()
          }, () => {
            this.collectResult = '绑定失败'
            this.timeoutCount++
          })
      },
      toAddpro(list) {},
      update2 (e) {
        // 上传图片
        let file = e.target.files[0]
        if (file.size > 1024 * 1024) {
          this.setRemindText(`上传文件不得超过1M`)
          return false
        }
        let param = new FormData()
        param.append('file', file, file.name)
        param.append('chunk', '0')
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        this.$http.post('/api/images', param, config)
          .then(response => {
            this.$set(this.MaterielItem, 'cmpImg', response.data[0].path)
            // this.MaterielItem.cmpImg = response.data[0].path
          })
      },
      update (e) {
        // 上传PDF
        let file = e.target.files[0]
        if (file.size > 1024 * 1024 * 20) {
          this.setRemindText(`上传文件不得超过20M`)
          return false
        }
        let param = new FormData()
        param.append('file', file, file.name)
        param.append('chunk', '0')
        let config = {
          headers: {'Content-Type': file.type}
        }
        this.$http.post('/file', param, config)
          .then(response => {
            this.MaterielItem.IsSave = true
            this.MaterielItem.Regulpic = response.data[0].path
          }, err => {
            console.log(err)
          })
      },
      // 编辑物料
      updateMateriel(item) {
        // Object.assign(this.MaterielItem, item, {Regulpic: '', IsSave: false, cmpImg: ''})
        this.MaterielItem = item
        this.$item = this.baseUtils.deepCopy(item)
        this.MaterielItem.IsSave = (item.productAttachSubmit && item.productAttachSubmit.uploadAttach || item.attach) ? true : false // 规格书是否存在
        this.$set(this.MaterielItem, 'cmpImg', item.cmpImg || '')
        this.$set(this.MaterielItem, 'Regulpic', (item.productAttachSubmit && item.productAttachSubmit.uploadAttach) || item.attach || '')
        this.showMateriel = true
        // this._initScroll()
      },
      // 编辑物料保存按钮
      saveMateriel(str) {
        if (str) {
          let _key1 = Object.keys(this.$item)
          let _key2 = Object.keys(this.MaterielItem)
          for (let i = 0; i < _key1.length; i++) {
            this.MaterielItem[_key2[i]] = this.$item[_key1[i]]
          }
          this.showMateriel = false
          return
        }
        if (this.MaterielItem.pbranden === '') {
          this.setRemindText('品牌不能为空')
          return
        } else if (this.MaterielItem.kind === '') {
          this.setRemindText('物料名称不能为空')
          return
        } else if (this.MaterielItem.pcmpcode === '') {
          this.setRemindText('型号不能为空')
          return
        }
        this.MaterielItem.pcmpcode = this.MaterielItem.pcmpcode
        this.MaterielItem.pbranden = this.MaterielItem.pbranden
        let item = {
          id: this.MaterielItem.id,
          kind : this.MaterielItem.kind,
          pbranden: this.MaterielItem.pbranden,
          pcmpcode: this.MaterielItem.pcmpcode,
          spec: this.MaterielItem.spec,
          url: ''
        }
        this.$http.post('/trade/products/update/product?attachUrl=', item).then(res => {
          if (res.data.success) {
            this.setRemindText('修改成功')
            this.showMateriel = false
            this.page = 1
            this.GetEnterpriseListData = null
            this.GetEnterpriseListData = []
            this.getResourceProvidor()
          } else {
            this.setRemindText(res.data.message)
          }
        })
      },
      // 显示包装选择
      showdropmenu(str) {
        this.showDrop = str
      },
      // 选择包装
      choosePack(item) {
        this.showDrop = ''
        this.MaterielItem.packaging = item
      },
      // 关闭包装选项
      closeAlert() {
        this.MaterielItem = this.$item
        this.showDrop = ''
      },
      clearInfo() {
        this.showSimilarCodeList = false
        this.showSimilarBrandList = false
      },
      checkBrand: function () {
        // this.MaterielItem.brand = this.MaterielItem.brand && this.MaterielItem.brand !== ''
        if (!this.MaterielItem.pbranden || this.MaterielItem.pbranden === '') {
          this.setRemindText('品牌不能为空')
        }
        return this.MaterielItem.pbranden
      },
      checkCode: function () {
        if (!this.MaterielItem.pcmpcode || this.MaterielItem.pcmpcode === '') {
          this.setRemindText('型号不能为空')
        }
        return this.MaterielItem.pcmpcode
      },
      onCodeChange: function () {
        this.MaterielItem.pcmpcode = this.MaterielItem.pcmpcode.trim()
        if ((/[^\x00-\xff]/g).test(this.MaterielItem.pcmpcode)) {
          let chineseIndex = -1
          for (let i = 0; i < this.MaterielItem.pcmpcode.length; i++) {
            if ((/[^\x00-\xff]/g).test(this.MaterielItem.pcmpcode.charAt(i))) {
              chineseIndex = i
              break
            }
          }
          this.MaterielItem.pcmpcode = this.baseUtils.cutOutString(this.MaterielItem.pcmpcode, chineseIndex)
        } else if (this.MaterielItem.pcmpcode && this.baseUtils.getRealLen(this.MaterielItem.pcmpcode) > 100) {
          this.MaterielItem.pcmpcode = this.baseUtils.cutOutString(this.MaterielItem.pcmpcode, 100)
        } else {
          this.getSimilarCode()
        }
      },
      onBrandChange: function () {
        this.MaterielItem.pbranden = this.MaterielItem.pbranden.trim()
        if ((/[^\x00-\xff]/g).test(this.MaterielItem.pbranden)) {
          let chineseIndex = -1
          for (let i = 0; i < this.MaterielItem.pbranden.length; i++) {
            if ((/[^\x00-\xff]/g).test(this.MaterielItem.pbranden.charAt(i)) && !(/[\u4e00-\u9fa5]/).test(this.MaterielItem.pbranden.charAt(i))) {
              chineseIndex = i
              break
            }
          }
          if (chineseIndex > -1) {
            this.MaterielItem.pbranden = this.MaterielItem.pbranden.substring(0, chineseIndex)
          }
        } else if (this.MaterielItem.pbranden && this.baseUtils.getRealLen(this.MaterielItem.pbranden) > 50) {
          this.MaterielItem.pbranden = this.baseUtils.cutOutString(this.MaterielItem.pbranden, 50)
        } else {
          this.getSimilarBrand()
        }
      },
      getSimilarBrand: function () {
        if (this.MaterielItem.pbranden) {
          this.$http.get('/search/similarBrands', {params: {keyword: this.MaterielItem.pbranden}})
            .then(response => {
              this.similarBrand = response.data
              this.showSimilarBrandList = response.data.length > 0
            })
        } else {
          this.showSimilarBrandList = false
        }
      },
      getSimilarCode: function () {
        if (this.MaterielItem.pcmpcode) {
          this.$http.get('/search/similarComponents', {params: {keyword: this.MaterielItem.pcmpcode}})
            .then(response => {
              this.similarCode = response.data
              this.showSimilarCodeList = response.data.length > 0
            })
        } else {
          this.showSimilarCodeList = false
        }
      },
      setCode: function (code) {
        this.MaterielItem.pcmpcode = code
        this.showSimilarCodeList = false
      },
      setBrand: function (brand) {
        this.MaterielItem.pbranden = brand
        this.showSimilarBrandList = false
      },
      setRemindText: function (str) {
        this.collectResult = str
        this.timeoutCount++
      },
      checkSpec: function () {
        // let nullStrFlag =
        // this.MaterielItem.spec = nullStrFlag
        if (!this.baseUtils.checkNullStr(this.MaterielItem.spec)) {
          this.setRemindText('规格输入不合法')
        }
        return this.MaterielItem.spec
      },
      onSpecInput: function () {
        if (this.MaterielItem.spec && this.baseUtils.getRealLen(this.MaterielItem.spec) > 100) {
          this.MaterielItem.spec = this.baseUtils.cutOutString(this.MaterielItem.spec, 100)
        }
      },
      _initScroll() {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.scroll, {
              click: true
            })
          } else {
            this.scroll.refresh()
          }
        })
      }
    },
    components: {
      RemindBox,
      PullUp
    }
  }
</script>

<style lang="scss">
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }
.material-wrapper {
  background: #f1f3f6;
  /*margin: 1.26rem 0 0.98rem 0;*/
  /*height: calc(100vh - 1.26rem - 0.98rem);*/
  position: fixed;
  width: 100%;
  top: 1.26rem;
  bottom: 0.98rem;
  overflow-y: auto;
  z-index: 100;
  .order-nav {
    background: #fff;
    div {
      height: 0.82rem;
      line-height: 0.82rem;
      display: inline-block;
      width: 50%;
      text-align: center;
      font-size: .28rem;
      color: #666;
      &.active span{
        color: #3f84f6;
        border-bottom: 0.04rem solid #3f84f6;
        padding-bottom: 0.2rem;
      }
    }
  }
  .search-content {
    text-align: center;
    padding: .25rem 0;
    input {
      border: 1px solid #376ff3;
    }
    span {
    }
  }
  .scrollContent {
    height: calc(100vh - 3.19rem - 0.98rem);
    overflow-y: auto;
    .providerList {
      margin-bottom: 0.24rem;
      .top {
        position: relative;
        padding: 0 0.24rem;
        border-bottom: 1px solid #d3d3d3;
        height: 0.9rem;
        line-height: 0.9rem;
        color: #0067e7;
        font-size: 0.3rem;
        background: #fff;
        &::after {
          clear: both;
          display: block;
          content: ' ';
          visibility: hidden;
          zoom: 1;
        }
        .text {
          width: 5.4rem;
        }
        .pms {
          color: #f57710;
          border: 1px solid #f57710;
          border-radius: 0.4rem;
          background: #fff;
          font-size: 0.24rem;
          height: 0.4rem;
          line-height: 0.4rem;
          width: 0.8rem;
          text-align: center;
          float: right;
          margin-top: 0.25rem;
        }
        .store-type {
          width: .77rem;
          height: .77rem;
          position: absolute;
          right: 0;
          top: 0;
        }
        .icon {
          width: 0.6rem;
          height: 0.36rem;
          line-height: 0.36rem;
          margin-top: 0.27rem;
          float: left;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 0.12rem;
          text-align: center;
          &.istanded {
            background-image: url('/images/mobile/@2x/istanded.png')
          }
          &.standed {
            background-image: url('/images/mobile/@2x/standed.png')
          }
        }
        .person-flag {
          width: .75rem;
          position: absolute;
          right: 0;
        }
        .text {
          float: left;
          width: 6.3rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .middle {
        padding: 0.24rem 0.24rem;
        background: #fff;
        .pms {
          color: #f57710;
          border: 1px solid #f57710;
          border-radius: 0.4rem;
          background: #fff;
          font-size: 0.24rem;
          height: 0.4rem;
          line-height: 0.4rem;
          width: 0.8rem;
          text-align: center;
        }
        .list {
          /*height: 0.46rem;*/
          .left {
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .textinfo {
            color: #0067e7;
            font-size: 0.3rem;
          }
          .button {
            font-size: 0.26rem;
            color: #fff;
            width: 0.92rem;
            text-align: center;
            border-radius: 5px;
            /*border:1px solid #1a58dd;*/
            background: #1a58dd;
            display: inline-block;
            margin-right: 0.2rem;
            line-height: 0.33rem;
            height: 0.37rem;
          }
          margin-bottom: 0.18rem;
          &::after{
            clear: both;
            display: block;
            content: ' ';
            visibility: hidden;
            zoom: 1;
          }
          .fl {
            width: 4.3rem;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .fr {
            text-align: left;
            width: 2.6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &.list-long {
            .fl {
              width: 100% !important;
            }
          }
          .name {
            color: #666;
            font-size: 0.3rem;
            display: inline-block;
          }
          .text {
            display: inline-block;
            color: #333;
            font-size: 0.3rem
          }
          .table {
            width: 5.5rem;
            margin-bottom: 0;
            margin-top: 0;
            li {
              height: 0.43rem;
              line-height: 0.43rem;
              border-left: .01rem solid #c5c5c5;
              font-size: .28rem;
              &::after {
                clear: both;
                display: block;
                content: ' ';
                visibility: hidden;
                zoom: 1;
              }
              div {
                text-align: center;
                width: 50%;
                float: left;
                border-right: .01rem solid #c5c5c5;
                border-bottom: .01rem solid #c5c5c5;
              }
              &:nth-child(odd) {
                background: #ddd;
                color: #666;
                font-size: 0.28rem;
              }
              &:nth-child(even) {
                background: #fcfcfc;
                color: #666;
                font-size: 0.28rem;
              }
              &:nth-last-of-type(1){
                color: #f31919;
              }
              &.title {
                font-size: 0.28rem;
                color: #333;
              }
            }
          }
        }
      }
      div.clearfix {
        padding: 0.2rem 0.2rem;
        border-top: 1px solid #d3d3d3;
        background: #fff;
        div{
          width: 2.1rem;
          height: .6rem;
          text-align: center;
          line-height: .6rem;
          border-radius: 3px;
          margin-right: .2rem;
          &.look {
            color: #008bf7;
            border: 1px solid #008bf7;
          }
          &.add {
            background: #fff;
            color: #f57710;
            border: 1px solid #f57710;
          }
          &.noadd{
            background: #cccbcb;
            color: #fff;
            border:1px solid #cccbcb;
          }
        }
      }
    }
  }
}
.update-materiel {
  position: fixed;
  z-index: 1000;
  background: #f1f3f6;
  /*background: red;*/
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  .mobile-header{
    position: fixed;
    top: 0;
    z-index: 100;
    width:100%;
    height: 1.26rem;
    line-height: 1.26rem;
    /*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;
    width: 6rem;
    padding-left: 1rem;
  }
  .mobile-center-header p.en-name {
    font-size: .3rem;
  }
  .mobile-header a{
    font-size:.28rem;
    color:#fff;
    position: absolute;
  }
  .mobile-header a i{
    font-size: .48rem;
    margin-right: -.1rem;
  }
  .update-materiel-wrapper {
    border-radius: 0.07rem;
    position: fixed;
    overflow: hidden;
    bottom: 0;
    top: 1.46rem;
    left: 0.2rem;
    right: 0.2rem;
    .imgUrl{
      position: absolute;
      width: 0.94rem;
      height: 0.94rem;
      right: 0;
      top: 0;
      z-index: 1;
    }
    .update-materiel-wrapper-image {
      width: 1.09rem;
      height: 1.09rem;
      border: 1px solid #dcdcdc;
      border-radius: 0.07rem;
      position: relative;
      margin: 0rem 0 0 0.5rem;
      text-align: center;
      position: relative;
      float: left;
      span {
        color: #b2b2b2;
        font-size: 0.2rem;
      }
      .com-input {
        width: 100%;
        height: 100%;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0;
        display: inline-block !important;
      }
    }
    .uploadImgBtn {
      color: #fff;
      font-size: .28rem;
      width: 1.51rem;
      @include lineHeight(0.47rem);
      border-radius: 0.07rem;
      background: #f9b209;
      text-align: center;
      margin: 0rem 0 0 0.3rem;
      position: relative;
      .com-input {
        width: 100%;
        height: 100%;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0;
        display: inline-block !important;
      }
    }
    .uploadImgInfo {
      font-size: 0.24rem;
      margin-left: 0.44rem;
      color: #999;
      .red {
        color: red;
      }
    }
    .update-materiel-wrapper-list {
      margin-left:0.28rem;
      margin-top: 0.3rem;
      line-height: 0.7rem;
      .red {color: #ea0f42}
      .name {color: #666;font-size: 0.28rem}
      .input {
        position: relative;
        width: 5rem;
        line-height: 0.7rem;
        height: 0.7rem;
        border: 1px solid #dcdcdc;
        input {
          text-indent: 5px;
          border: 0;
          border-radius: 0.07rem;
          line-height: 0.64rem;
          height: 0.64rem;
          width: 90%;
          font-size:0.28rem;
          float: left;
          color: #333;
        }
        i {
          font-size: 0.16rem;
          vertical-align: top;
          color: #666;
          float: right;
          margin-right: 0.05rem
        }
        .similar {
          position: absolute;
          width:100%;
          max-height: 2.5rem;
          overflow-y: auto;
          z-index: 12;
          border: 1px solid #7e7e7e;
          border-radius: .05rem;
          top: .5rem;
          background: #fff;
          li {
            height: .5rem;
            line-height: .5rem;
            font-size: .26rem;
            color: #999;
            padding-left: .19rem;
            &:focus, &:active, &:hover {
              background: #999;
              color: #fff;
            }
          }
        }
      }
    }
    .update-materiel-wrapper-list2 {
      margin-left: 0.28rem;
      margin-top: 0.3rem;
    }
    .update-materiel-wrapper-controll {
      margin: 0.4rem 0.2rem 0;
      div {
        width: 48%;
        background: #b5b5b5;
        font-size: 0.3rem;
        color: #fafbfc;
        text-align: center;
        @include lineHeight(0.62rem);
        border-radius: 0.07rem;
        &:first-child {
          background: #3f84f6;
        }
      }
    }
  }
  .selectInput {
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 0.7rem;
    line-height: 0.7rem;
    border: 1px solid #d2d2d2;
    border-radius: 2px;
    width: 4.44rem;
    text-indent: 0.12rem;
    img {
      position: absolute;
      width: 0.17rem;
      height: 0.11rem;
      right:0.1rem;
      top: 0.28rem;
    }
    &.selectInput2 {
      width: 1.56rem;
    }
    span {
      height: 0.64rem;
      line-height: 0.64rem;
      display: block;
      font-size: 0.28rem;
    }
    ul {
      position: absolute;
      left: 0;
      top: .64rem;
      z-index: 12;
      width: 100%;
      max-height: 3rem;
      overflow-y: auto;
      display: none;
      li {
        text-indent: 0px;
        width: 100%;
        background: #666;
        color: rgba(255, 255, 255, 0.89);
        text-align: center;
        font-size: .3rem;
      }
      &.active {
        display: block;
      }
    }
  }
}
</style>