query-home.vue

<!--
   * @Descrip: 查询首页
 * @Author: your name
 * @Date: 2019-10-15 14:30:00
 * @LastEditTime: 2019-12-17 11:27:19
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="query-home" class="public-style" title="产品查询">
    <h-header v-if="$route.path=='/query-home'" :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>
    <h-header v-if="$route.path=='/tab/query-home'" class="bar-custom">
      <div slot="center" class="top-word">产品中心</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.factory_bp_id)">
            <div class="leftPic">
              <img :src="item.url" alt="" class="leftPic">
            </div>
            <div class="first">
              <p class="product">{{ item.factory_bp_name }}</p>
            </div>
            <img class="arrow" src="@/assets/productQuery/getIn.png" alt="">
          </div>
        </div>
      </div>
    </scroll>
  </h-view>
</template>

<script>
import noImg from '../../assets/productQuery/none.png'

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) {
    next(vm => {
      vm.searchInput = ''
      vm.pagenum = 1
      vm.proQuery()
    })
  },
  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.prolists.forEach(item => {
              item['url'] = item.factory_attachment_id ? process.env.filePath + 'attachment_id=' + item.factory_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            vm.$refs.scrollLists.update(true)
          } else if (vm.prolists.length === 10) {
            vm.prolists.forEach(item => {
              item['url'] = item.factory_attachment_id ? process.env.filePath + 'attachment_id=' + item.factory_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            vm.$refs.scrollLists.update(false)
          }
          console.log(vm.prolists)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 跳列表 val = 产品线
    goLists (val) {
      this.$router.push({
        name: 'ProductList',
        params: {
          factory_bp_id: 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.prolists.forEach(item => {
              item['url'] = item.factory_attachment_id ? process.env.filePath + 'attachment_id=' + item.factory_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            vm.$refs.scrollLists.update(true)
          } else if (returnData.length === 10) {
            returnData.forEach((data, index, array) => {
              vm.prolists.push(array[index])
            })
            vm.prolists.forEach(item => {
              item['url'] = item.factory_attachment_id ? process.env.filePath + 'attachment_id=' + item.factory_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            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.prolists.forEach(item => {
            item['url'] = item.factory_attachment_id ? process.env.filePath + 'attachment_id=' + item.factory_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
          })
          vm.$refs.scrollLists.update(true)
        } else if (vm.lists.length === 10) {
          vm.prolists.forEach(item => {
            item['url'] = item.factory_attachment_id ? process.env.filePath + 'attachment_id=' + item.factory_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
          })
          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-home {
    .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 {
      width: 100%;
      height: 80px;
      background: #fff;
      margin-bottom: 8px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;

      .leftPic {
        height: 40px;
        width: 40px;
        border-radius: 8px;

        img {
          height: 40px;
          width: 40px;
        }
      }

      .first {
        flex-grow: 1;
        margin-left: 20px;
        .product {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #383F45;
          text-align: left;
        }
      }

      .arrow {
        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;
        }

        .search {
          input {
            background: url("../../assets/contractStart/search1.png") 320px no-repeat;
            background-size: 16px 16px;
            background-color: rgba(239, 239, 239, 0.55);
            padding: 8px 12px;
            border-radius: 4px;
            width: 100%;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #888c8f;
          }
        }
      }
    }
  }
</style>