list.vue

<template>
  <div class="full-page recommendPage">
    <img src="../../assets/images/recommend-img.png" class="bg"/>
    <div class="content" :class="animateClass">
      <img src="../../assets/images/recommend-body-bg.png" class="content-bg"/>
      <div class="list">
        <div class="list-head">
          <span class="title"><i class="glyphicon glyphicon-map-marker"></i> {{orgdata.orgName !== '' ? orgdata.orgName: '附近社区暂无电子健康券'}}</span>
          <span class="more" v-if="!queryAccountId" @click="goToOrgList">切换社区 <i class="glyphicon glyphicon-menu-right"></i></span>
          <span class="more" v-if="queryAccountId" @click="goToHome">我的福利 <i class="glyphicon glyphicon-menu-right"></i></span>
        </div>
        <div class="list-body">
          <div class="line"></div>
          <div class="list-block" id="listBlock" @scroll="scrollHandle">
            <div class="tips" v-show="tipsVisible">
              <p>抱歉您所在的社区暂无电子健康券</p>
              <p>请切换其它社区领取福利哟~</p>
            </div>
            <ul>
              <li v-for="(item, index) in data" :key="index" @click="handleClick(item.makeId, item.labelId)">
                <CouponItem :data="item"></CouponItem>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <mt-popup
    v-model="popupVisible"
    position="right">
      <div class="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 orglist" :key="index">
              <div class="org-item" @click="selectedOrgVoucher(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>
    </mt-popup>
    <!-- 扫码核销 -->
    <div class="model" v-show="modalvisible">
      <div class="model-body">
        <div class="title">请选择为谁领券?</div>
        <div class="footer">
          <div class="table">
            <div class="tr">
              <div class="td text-center">
                <button class="btn-orange-fill-o btn-samll" @click="handleRegister(1)">本人</button>
              </div>
              <div class="td text-center">
                <button class="btn-white-o btn-samll" @click="handleRegister(2)">配偶</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-center model-close">
        <i class="glyphicon glyphicon-remove-circle" @click="modalvisible=false"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { getVoucherByOrgId } from '@/api/make/make'
import { getOrgListByPosition } from '@/api/sjkgbasic/sjkgbasic'
import CouponItem from '@/components/couponItem'
import _defaultImg from '../../assets/images/org-default-picture.png'
import store from '@/store'
import { wxpermission } from '@/wxpermission'
const wx = require('weixin-js-sdk')

export default {
  name: 'recommend',
  data () {
    return {
      firstinit: true, // 是否是第一次加载，目的主要是初始化后获取附近第一条机构健康券信息，后续获取机构信息列表接口时不反复去加载数据第一条机构健康券信息
      tipsVisible: false,
      animateClass: 'off', // 健康券列标模块动画样式
      data: null,
      queryOrgId: this.$route.query.orgId ? this.$route.query.orgId : null,
      queryOrgName: this.$route.query.orgName ? this.$route.query.orgName : '',
      queryAccountId: this.$route.query.accountId ? this.$route.query.accountId : '',
      orglist: [],
      placeholder: true, // 搜索框提示占位符显示状态
      searchOrgName: '', // 机构名称手动搜索
      searchCurPage: 0, // 机构列表页数
      latitude: '',
      longitude: '',
      size: 10,
      loadMoreState: true, // 加载更多状态
      enterSearchState: false, // 回车搜索状态
      defaultImg: _defaultImg,
      orgdata: { // 附近第一家机构信息
        orgId: null,
        orgName: ''
      },
      popupVisible: false, // 机构列表浮层显示状态
      modalvisible: false, // “为谁领券”浮层状态
      selectedLabelId: null // 点击领取健康券labelId
    }
  },
  created () {
    // this.getOrgListFn()
  },
  mounted: function () {
    // document.getElementById('listBlock').addEventListener('scroll', this.scrollHandle)
  },
  computed: {
  },
  components: {
    CouponItem
  },
  methods: {
    getOrgListFn () {
      this.$Indicator.open()
      console.log('getLocation success')
      let that = this
      wxpermission(0, () => {
        wx && wx.getLocation({
          success: function (res) {
            console.log('getLocation success')
            that.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
            that.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。

            let params = {
              current: that.searchCurPage,
              latitude: that.latitude,
              longitude: that.longitude,
              size: that.size
            }
            if (that.searchOrgName && that.searchOrgName !== '') {
              params.key = that.searchOrgName
            }
            getOrgListByPosition(params).then(res => {
              that.$Indicator.close()
              if (res.code === 0 && res.data.records.length > 0) {
                that.orglist = that.orglist.concat(res.data.records)
                that.loadMoreState = true
                // 获取第一次页面加载后附近第一家社区机构电子健康券
                if (that.firstinit) {
                  that.selectedOrgVoucher(that.orglist[0])
                  that.firstinit = false
                }
              } else {
                that.loadMoreState = false
                that.searchCurPage = that.searchCurPage - 1
              //   this.tipsVisible = true
              }
            }).catch((error) => {
              that.$Indicator.close()
              that.$toast({
                message: error.message,
                position: 'center',
                duration: 3000
              })
            })
          },
          fail: function (res) {
            that.$Indicator.close()
            that.$toast({
              message: '位置获取失败，请打开定位后再重新尝试！',
              // message: JSON.stringify(res),
              position: 'center',
              duration: 3000
            })
          }
        })
      }, false)
    },
    loadMore () {
      if (!this.queryAccountId) {
        if (this.loadMoreState) {
          this.searchCurPage = this.searchCurPage + 1
          this.getOrgListFn()
        }
      } else {
        store.dispatch('setAccountId', this.queryAccountId)
        let org = {
          id: this.queryOrgId,
          orgname: this.queryOrgName
        }
        this.selectedOrgVoucher(org)
      }
    },
    changesearch () {
      console.log('change')
      this.loadMoreState = false
      this.orglist = []
      this.searchCurPage = 1
      this.getOrgListFn()
    },
    searchTextFocus () {
      this.placeholder = false
    },
    searchTextBlur () {
      if (this.searchOrgName === '') {
        this.placeholder = true
      } else {
        this.placeholder = false
      }
      // this.changesearch()
    },
    selectedOrgVoucher (org) { // 选择社区获取该社区健康券
      this.orgdata.orgId = org.id
      this.orgdata.orgName = org.orgname
      this.getVoucherByOrgIdFn()
      this.popupVisible = false
    },
    getVoucherByOrgIdFn () { // 获取机构健康券
      this.$Indicator.open()
      getVoucherByOrgId(this.orgdata.orgId).then(res => {
        this.$Indicator.close()
        if (res.code === 0 && res.data.length > 0) {
          this.tipsVisible = false
          this.data = res.data
        } else {
          this.tipsVisible = true
        }
      }).catch((error) => {
        this.$Indicator.close()
        this.tipsVisible = true
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    handleClick (makeId, labelId) { // 健康券领取
      this.selectedLabelId = labelId
      if (labelId === 1 || labelId === 3) {
        this.modalvisible = true
      } else if (labelId === 2) {
        this.$router.push({ // 福利券领取(家庭成员)
          path: '/member/addMember',
          query: {
            orgId: this.orgdata.orgId,
            orgName: this.orgdata.orgName,
            labelId: this.selectedLabelId
          }
        })
      }
    },
    goToOrgList () { // 显示机构列表浮层
      // this.$router.push({
      //   path: '/recommend/orglist'
      // })
      this.popupVisible = true
    },
    goToHome () {
      this.$router.push({
        path: '/home'
      })
    },
    handleRegister (type) { // 进入成员注册领券页 type=1本人 type=2配偶
      if (type === 1) {
        this.$router.push({ // 福利券领取(实名认证)
          path: '/member/addMain',
          query: {
            orgId: this.orgdata.orgId,
            orgName: this.orgdata.orgName
          }
        })
      } else if (type === 2) {
        this.$router.push({ // 福利券领取(家庭成员)
          path: '/member/addMember',
          query: {
            orgId: this.orgdata.orgId,
            orgName: this.orgdata.orgName,
            labelId: this.selectedLabelId
          }
        })
      }
    },
    scrollHandle () {
      let offsetTop = document.getElementById('listBlock').scrollTop
      console.log(offsetTop)
      if (offsetTop > 10) {
        this.animateClass = 'on'
      } else if (offsetTop === 0) {
        this.animateClass = 'off'
      }
    }
  }
}
</script>

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

  .recommendPage{
    position: relative;
  }
  .recommendPage > .bg {
    width: 100%;
  }

  .recommendPage > .content {
    position: absolute;
    bottom: 0;
    /* top:0; */
    left: 0;
    right: 0;
  }
  .recommendPage > .content.on {
    animation: moveTop 0.5s forwards;
  }
  .recommendPage > .content.off {
    animation: moveBot 0.5s forwards;
  }
  @keyframes moveTop
  {
    from {top:260px;}
    to {top:0;}
  }
  @keyframes moveBot
  {
    0% {top:0;}
    100% {top: initial;}
  }
  .recommendPage > .content > .content-bg {
    width: 100%;
  }
  .recommendPage > .content > .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 19%;
  }
  .recommendPage .list > .list-head {
    padding: 0 0.5em;
    margin-top: 10%;
    /* height: 4em;
    line-height: 4em; */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  .recommendPage .list > .list-head > .title {
    display:inline-block;
    font-size:1.1em;
    color:#fff;
    max-width: 18em;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .recommendPage .list > .list-head > .more {
    float:right;
    color:#fff;
    /* margin-top: 2px; */
  }

  .recommendPage .list > .list-body {
    padding: 0 0.5em;
    height: 100%;
    position: relative;
    background-image: url('../../assets/images/recommend-list-bg-dot.png');
    background-repeat: repeat-y;
    background-size: 100% auto;
    /* margin-top: 22%; */
  }

  /* .recommendPage > .content.on .list > .list-body {
    height: 88%;
    margin-top: 20%;
  }
  .recommendPage > .content.off .list > .list-body {
    height: 77%;
    margin-top: 22%;
  } */

  .recommendPage .list > .list-body > .line {
    background-color:#069179;
    border-radius:50px;
    height:0.8em;
    box-shadow:1px 1px 5px #069179;
    -moz-box-shadow:1px 1px 5px #069179;
    box-shadow:1px 1px 5px #069179;
    position: absolute;
    left: 0.5em;
    right: 0.5em;
    top: 0;
    z-index: 1;
  }
  .recommendPage .list > .list-body > .list-block {
    margin:0 0.8em;
    height:100%;
    background-color:#fff;
    overflow: auto;
  }
  .recommendPage .list > .list-body > .list-block ul {
    padding: 1em 0 0 0;
    margin: 0;
  }
  .recommendPage .list > .list-body > .list-block .tips{
    font-size: 1.2em;
    text-align: center;
    padding-top: 5em;
  }

  .recommendPage .mint-popup-right{
    left:0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: none;
    background-color: #f5f6f7;
  }

  .recommendPage .model > .model-body{
    margin-top: 50%;
  }

  /* org list css */
  .orgListPage {
    padding: 0 0.5em;
    max-height: 100%;
    overflow: auto;
  }
  .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: 15%;
  }
  .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>