query-home.vue

<!--
   * @Descrip: 查询首页
 * @Author: your name
 * @Date: 2019-10-15 14:30:00
 * @LastEditTime: 2019-11-22 09:45:40
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="query" class="public-style" title="产品查询">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>产品选择</span>
      </div>
    </h-header>
    <!-- 搜索 -->
    <div class="search has-header">
      <input v-model="searchInput" type="text" placeholder="请输入产品类别/产品线">
    </div>
    <scroll
      ref="scrollLists"
      :updateData="[prolists]"
      :pullUp="true"
      @pullingUp="loadMore"
    >
      <div class="scroll-box">

        <div v-for="(item,index) in prolists" :key="index" class="wrap">

          <div class="box" @click="goLists(item.division)">
            <div class="leftPic">

              <img src="@/assets/productQuery/product-query.png" alt="" class="leftPic">
            </div>
            <div class="first">
              <p class="product-class">主机厂</p>
              <p class="product">{{ item.factory_bp_name }}</p>
            </div>
            <div class="second">
              <p class="product-class">产品名称</p>
              <div class="product">
                <p>{{ item.division_n }}</p>
              </div>
              <img src="@/assets/productQuery/down.png" alt="" @click.stop="queryDivision(item.factory_bp_id,index)">
            </div>
            <!-- <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" > -->
          </div>
        </div>
      </div>
    </scroll>
  </h-view>
</template>

<script>
export default {
  name: 'QueryHome',
  data () {
    return {
      prolists: [],
      divisionList: [],
      list_flag: false,
      factory_bp_id: '',
      searchInput: '', // 搜索内容
      pagenum: 1,
    }
  },
  computed: {},
  watch: {
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    },
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === 'HomePage') {
      next(vm => {
        vm.searchInput = ''
        vm.pagenum = 1
        vm.proQuery()
      })
    }
    next()
  },
  methods:
 {
   // 初始产品查询
   proQuery () {
     let vm = this
     let url = $config.basePath + 'prd_product_type_list'
     let param = {
       searchInput: vm.searchInput,
       pagenum: vm.pagenum,
       pagesize: 10,
     }
     vm.hlsPopup.showLoading('数据加载中')
     vm.$post(url, param).then(function (res) {
       vm.hlsPopup.hideLoading()
       if (res.result === 'S') {
         vm.prolists = res.lists
         if (vm.prolists.length === 0) {
           vm.$refs.scrollLists.update(true)
         } else if (vm.prolists.length > 0 && vm.prolists.length < 10) {
           vm.$refs.scrollLists.update(true)
         } else if (vm.prolists.length === 10) {
           vm.$refs.scrollLists.update(false)
         }
       } else {
         hlsPopup.showLongCenter(res.message)
       }
     })
   },
   // 跳列表 val = 产品线
   goLists (val) {
     this.$router.push({
       name: 'ProductList',
       params: {
         division: val,
       },
     })
   },

   loadMore () {
     let vm = this
     vm.pagenum = vm.pagenum + 1
     let url = $config.basePath + 'prd_product_type_list'
     let param = {
       searchInput: vm.searchInput,
       pagenum: vm.pagenum,
       pagesize: 10,
     }
     vm.hlsPopup.showLoading('数据加载中')
     vm.$post(url, param).then(function (res) {
       vm.hlsPopup.hideLoading()
       let returnData = []
       if (res.result === 'S') {
         returnData = res.lists
         if (returnData.length === 0) {
           vm.$refs.scrollLists.update(true)
         } else if (returnData.length > 0 && returnData.length < 10) {
           returnData.forEach((data, index, array) => {
             vm.prolists.push(array[index])
           })
           vm.$refs.scrollLists.update(true)
         } else if (returnData.length === 10) {
           returnData.forEach((data, index, array) => {
             vm.prolists.push(array[index])
           })
           vm.$refs.scrollLists.update(false)
         }
       } else {
         hlsPopup.showLongCenter(res.message)
       }
     })
   },
   // 搜索
   search () {
     let vm = this
     vm.pagenum = 1
     let url = $config.basePath + 'prd_product_type_list'
     let param = {
       pagesize: 10,
       pagenum: vm.pagenum,
       searchInput: vm.searchInput,
     }
     vm.hlsPopup.showLoading('数据加载中')
     vm.hlsHttp.post(url, param).then(function (res) {
       vm.hlsPopup.hideLoading()
       vm.prolists = res.lists
       if (vm.prolists.length >= 0 && vm.prolists.length < 10) {
         vm.$refs.scrollLists.update(true)
       } else if (vm.lists.length === 10) {
         vm.$refs.scrollLists.update(false)
       }
     })
   },
   // 产品线查询val=主机厂id，ind=产品列表索引
   queryDivision (val, ind) {
     let vm = this
     let url = $config.basePath + 'prd_product_division_list'
     let param = {
       factory_bp_id: val,
     }
     vm.$post(url, param).then(function (res) {
       console.log(res)
       if (res.result === 'S') {
         vm.divisionList = res.lists.map(item => {
           return {
             code: item.division,
             code_name: item.product_line,
           }
         })
         //  vm.divisionList = res.lists
         vm.hlsPopup.selectList({
           list: vm.divisionList, // 下拉列表
           code: 'bp_type',
           object: {},
           returnItem: function (index, obj) {
             // 更改产品线（division）和 产品线描述（division_n）
             vm.prolists[ind].division_n = obj.bp_type_n
             vm.prolists[ind].division = obj.bp_type
           },
         })
       } else {
         hlsPopup.showLongCenter(res.message)
       }
     })
   },

 },
}
</script>
<style lang='less'>
#query {
    .search {
      background-color: #fff;
      padding: 8px 12px;
      position: absolute;
      width: 100%;
      z-index: 100;
      margin-bottom: 8px;

      input {
        padding-left: 12px;
        height: 36px;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #21254c;
        // line-height: 36px;
        border-radius: 4px;
        background: url("../../assets/contractStart/search1.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
      }

      input::placeholder {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        letter-spacing: 0;
      }

      input:focus {
      background: url("../../assets/contractStart/search2.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      border: 2px solid #bcc6ff;
    }
    }
    .scroll-box {
      padding: 8px;
    }
    .box {
        position: relative;
        width: 100%;
        height: 85px;
        background: #fff;
        border-top: 1px solid #cccccc70;
        margin-bottom: 8px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .leftPic {
          position: absolute;
          left: 12px;
          top:29px;
          height: 26px;
          width: 26px;
          background: rgba(29, 63, 255, 0.1);
          border-radius: 8px;
          img {
            height: 16px;
            width: 16px;
            position: absolute;
            left: 5px;
            top: 5px;
          }
        }
        .first {
            height: 42px;
            line-height: 42px;
            width: 80%;
            position: absolute;
            left: 50px;
            top: 0;
            border-bottom: 1px solid #F3F3F7;
            // display: flex;
            // flex-direction: row;
            //margin-top: 16px;
            .product-class {
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: rgba(56,63,69,0.60);
                position: absolute;
            }
            .product {
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #383F45;
                position: absolute;
                right: 0px;
            }
        }
        .second {
            height: 42px;
            line-height: 42px;
            width: 80%;
            position: absolute;
            left: 50px;
            top: 43px;
            .product-class {
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: rgba(56,63,69,0.60);
                position: absolute;
            }
            .product {
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #383F45;
                position: absolute;
                right: 30px;
                }
            img {
                width: 16px;
                height: 16px;
                position: absolute;
                right: 0;
                top: 12px;
            }
        }
        .arrow {
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 20px;
            height: 16px;
            width: 16px;
        }
    }
    .content{
      position: absolute;
      top:0;
    }
    .scrollContent{
     padding-top: 1.92rem;
      padding-bottom: 20px;
    }
}
.platform-ios {
    #query {
      .scrollContent {
        padding-top: 2.32rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #query {
        .scrollContent {
          padding-top: 2.72rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #query {
        .scrollContent {
          padding-top: 2.72rem;
        }
      }
    }
  }
</style>