warm_man/pages/Street/index.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <view class="street-container">
    <view class="item" v-for="(item,index) in lists">
      <view class="title-container">
        <view class="title">{{ item.name }}</view>
      </view>
      <view class="address-container">

        <view class="address-main">
          <view class="address-icon">
            <u-icon :name="staticImage.map"></u-icon>
          </view>
          <view class="address">
            {{ item.address }}
          </view>
        </view>
        <view class="button">
          <u-button
                  :custom-style="{border:'none'}" class="custom-style" size="small" radius="10" color="#178AF2" text="一键导航" @click="callLocation(item)"></u-button>
        </view>
      </view>
      <view class="phone-container">
        <view class="phone-main">
          <view class="phone-icon">
          <u-icon :name="staticImage.phone"></u-icon>
          </view>
          <view class="phone">
            {{ item.tel }}
          </view>
        </view>
        <view class="button">
          <u-button :custom-style="{border:'none'}" class="custom-style" size="small" radius="10" color="#FF9545" text="一键拨号" @click="callPhone(item.tel)"></u-button>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" fontSize="28" marginBottom="50" marginTop="30" @loadmore="getStreetPhoneList()"/>

  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {streetCallList} from "@/api/other";
import {lineList} from "@/api/line";
import {userLineList} from "@/api/user";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      list: [{
        name: '最新资讯'
      }, {
        name: '表彰评优'
      }, {
        name: '活动回顾'
      }],
      // 或者如下，也可以配置keyName参数修改对象键名
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      current: 1,
      title: '街道联系方式',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
        map: imghost + '/street-map.png',
        phone: imghost + '/street-phone.png',
      },
      user: {
        avatar: imghost + '/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685,
      },
      isTop: false,
      lists: [],
      pages:{
        page:1,
        limit:10,
      },
      size: {
        height: 500,
      },
      status:'loadmore',
    }
  },
  onLoad() {

  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
    listHeight() {
      let that = this;
      let height;
      let info = uni.createSelectorQuery().in(this).select('.subsection');
      info.boundingClientRect(function (data) {
        that.size.height = data.height;
      }).exec(function (res) {

      });
      // that.size.height = (api.navHeight().windowHeight - height);
    }
  },
  methods: {
    callPhone(phone){
      uni.makePhoneCall({
        phoneNumber: phone?.toString()
      });
    },
    callLocation(item){
          uni.openLocation({
            latitude:parseFloat(item.coordinate[1]),
            longitude:parseFloat(item.coordinate[0]),
            name:item.address,
          })
    },
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = index;
    },
    scrollToLower() {

    },
    getStreetPhoneList(clear = false) {
      if(clear){
        this.status = 'loadmore'
        this.pages.page = 1;
        this.pages.limit = 10;
        this.lists = [];
      }
      if(this.status === 'nomore'){
        return false;
      }
      this.status = 'loading';
        streetCallList(this.pages).then(res => {
          if(res.data.length === 0){
            this.status = 'nomore';
          }else{
            this.status = 'loadmore';
          }
          this.lists.push.apply(this.lists,res.data.map(item => {
            item.coordinate = item.coordinate.split(',')
            return item;
          }))
        }).catch(err => {
          this.status = 'loadmore';
        })

      this.pages.page++;
    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    // this.listHeight();
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    this.getStreetPhoneList();
  },
  onReachBottom(){

    console.log('bottom')
    this.getStreetPhoneList();
  },
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>