orglist.vue

<template>
  <div class="full-page">
    <div class="container orgListPage">
      <div class="head">
        <div class="search-control">
          <span class="placeholder" v-if="placeholder">
            <i class="glyphicon glyphicon-search"></i> 搜索您要找的社区医院
          </span>
          <input type="search" @focus="searchTextFocus" @blur="searchTextBlur" @keyup.enter="changesearch" v-model="searchOrgName"/>
        </div>
      </div>
      <div class="content">
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
          <li v-for="(item, index) in data" :key="index">
            <div class="org-item">
              <div class="cell picture">
                <div class="avatar" :style="{backgroundImage: 'url(' + (item.orgPictUrl ? item.orgPictUrl : defaultImg) + ')'}"></div>
              </div>
              <div class="cell info">
                <div class="title">{{item.orgname}}</div>
                <div class="des">{{item.saleaaddr}}</div>
                <small class="distance">距您 {{item.distance}}km</small>
              </div>
            </div>
          </li>
        </ul>
        <p class="text-center tips" v-show="!loadMoreState">
          --- 这已经是最下面了 ---
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrgListByPosition } from '@/api/sjkgbasic/sjkgbasic'
import _defaultImg from '../../assets/images/org-default-picture.png'
export default {
  name: 'orglist',
  data () {
    return {
      data: [],
      placeholder: true, // 搜索框提示占位符显示状态
      searchOrgName: '', // 机构名称手动搜索
      searchCurPage: 0, // 机构列表页数
      latitude: '28.22778',
      longitude: '112.93886',
      size: 10,
      tipsVisible: false,
      loadMoreState: true, // 加载更多状态
      enterSearchState: false, // 回车搜索状态
      defaultImg: _defaultImg
    }
  },
  created () {
    // this.getOrgListFn() // 获取附近机构
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
  },
  methods: {
    getOrgListFn () {
      if (!this.latitude || !this.longitude || this.latitude === '' || this.longitude === '') {
        this.$toast({
          message: '未获取到当前位置信息！',
          position: 'center',
          duration: 3000
        })
        return false
      }
      let params = {
        current: this.searchCurPage,
        latitude: this.latitude,
        longitude: this.longitude,
        size: this.size
      }
      if (this.searchOrgName !== '') {
        params.key = this.searchOrgName
      }
      this.$Indicator.open()
      getOrgListByPosition(params).then(res => {
        this.$Indicator.close()
        if (res.code === 0 && res.data.records.length > 0) {
          this.data = this.data.concat(res.data.records)
          this.loadMoreState = true
        } else {
          this.loadMoreState = false
          this.searchCurPage = this.searchCurPage - 1
        //   this.tipsVisible = true
        }
      }).catch((error) => {
        this.$Indicator.close()
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    loadMore () {
      if (this.loadMoreState) {
        this.searchCurPage = this.searchCurPage + 1
        this.getOrgListFn()
      }
    },
    changesearch () {
      console.log('change')
      this.loadMoreState = false
      this.data = []
      this.searchCurPage = 1
      this.getOrgListFn()
    },
    searchTextFocus () {
      this.placeholder = false
    },
    searchTextBlur () {
      if (this.searchOrgName === '') {
        this.placeholder = true
      } else {
        this.placeholder = false
      }
      // this.changesearch()
    }
  }
}
</script>

<style scoped>
  .full-page {
    background-color: #f5f6f7;
  }

  .orgListPage .head {
    padding: 1em 0;
    position: fixed;
    width: 100%;
    left: 0;
    background-color: #f5f6f7;
    z-index: 1;
  }

  .orgListPage .head .search-control{
    margin: 0 1em;
  }
  .orgListPage .content {
    padding-top: 17%;
  }
  .orgListPage ul > li {
    background-color: #fff;
    padding: 0.5em;
    margin-bottom: 1em;
  }

  .org-item {
    display: table;
    width: 100%;
  }
  .org-item > .cell {
    display: table-cell;
    vertical-align: middle;
  }
  .org-item > .cell.picture {
    width: 8em;
  }
  .org-item > .cell.picture > .avatar{
    width: 7em;
    height: 7em;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
  }

  .org-item > .cell.info{
    position: relative;
    vertical-align: top;
  }
  .org-item > .cell.info > .title {
    font-size: 1.1em;
    white-space:nowrap;
    text-overflow:ellipsis;
    max-width: 14em;
    overflow:hidden;
    margin-bottom: 5px;
  }
  .org-item > .cell.info > .des {
    color:#9aa0a4;
    white-space:nowrap;
    text-overflow:ellipsis;
    max-width: 14em;
    overflow:hidden;
  }
  .org-item > .cell.info > .distance{
    color:#9aa0a4;
    position:absolute;
    bottom:0;
    left:0;
  }

  .tips {
    color: #80848f;
    font-size: 0.9em;
  }
</style>