<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>