【随心写作】共享充电宝小程序门店列表页

页面

<view class="nav-list">
  <view bindtap="navDataChange" data-type="1" class="nav-item {{typeData == 1 ? 'nav-item-active' : ''}}">可租借</view>
  <view bindtap="navDataChange" data-type="2" class="nav-item {{typeData == 2 ? 'nav-item-active' : ''}}">可归还</view>
</view>

<!-- <mp-searchbar bindfocus="setChooseAddress" cancel="false" cancelText=""></mp-searchbar> -->
<mp-cell title="选择地址" bindtap="setChooseAddress" class="address-cell-view">
  <view slot="footer" class="address-footer-view">
    {{ areaAddress || "请选择" }}
    <mp-icon type="field" icon="arrow" color="#999" size="{{10}}"></mp-icon>
  </view>
</mp-cell>

<view wx:if="{{listData && listData.length > 0}}">
  <view class="list">
    <view class="item" wx:for="{{listData}}" bindtap="goUrl" data-url="/pages/store/detail?id={{item.store_id}}">
      <image src="{{item.store_image}}" class="item-image"></image>
      <view class="info-view">
        <view class="base-view">
          <view class="name-view">{{ item.store_name }}</view>
          <view class="desc-view">{{ item.distance }}</view>
        </view>
        <view class="address-view">
          {{ item.full_address }}
        </view>
        <view class="state-view">
          <view class="{{item.use_count > 0 ? 'yes-state' : 'no-state'}} item-state">{{ item.use_count > 0 ? "可租借" : "不可租借" }}</view>
          <view class="{{item.return_count > 0 ? 'yes-state' : 'no-state'}} item-state">{{ item.return_count > 0 ? "可归还" : "不可归还"}}</view>
        </view>
      </view>
    </view>

    <view class="footer-view" bindtap="goHome">
      切换为地图视角
    </view>
  </view>
</view>

<view wx:if="{{listData && listData.length == 0}}">
  <view class="empty-view">
    暂无店铺
  </view>
</view>

<mp-loading tips="" type="circle" class="loading-view" show="{{!listData}}"></mp-loading>

逻辑

// pages/store/list.js
const app = getApp()
import { getDistance } from "../../utils/util.js" 


const province_code = wx.getStorageSync("province_code")
const city_code = wx.getStorageSync("city_code")
const district_code = wx.getStorageSync("district_code")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    typeData: 1,
    areaAddress: "",
    listData: false,
    provinceCode: province_code,
    cityCode: city_code,
    districtCode: district_code
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const latitude = wx.getStorageSync("latitude")
    const longitude = wx.getStorageSync("longitude")
    if(!latitude || !longitude) {
      this.goHome()
      return
    }
    
    this.data.latitude = latitude
    this.data.longitude = longitude
    
    this.loadData()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  loadData() {
    const that = this
    wx.request({
      url: app.globalData.apiUrl + '/store/list',
      data: {
        latitude: that.data.latitude,
        longitude: that.data.longitude,
        province_code: that.data.provinceCode,
        city_code: that.data.cityCode,
        district_code: that.data.districtCode,
        type: that.data.typeData
      },
      success(ret) {
        let data = ret.data.data
        
        data.forEach((item, index) => {
          data[index].distance = getDistance(that.data.latitude, that.data.longitude, item.latitude, item.longitude)
          console.log(item, index)
        })
        that.setData({
          listData: data
        })
      }
    })
  },
  setChooseAddress() {
    const that = this
    wx.chooseLocation({
      success (res) {
        that.data.latitude = res.latitude
        that.data.longitude = res.longitude

        wx.request({
          url: 'https://apis.map.qq.com/ws/geocoder/v1/',
          data: {
            location: res.latitude + "," + res.longitude,
            key: "X4RBZ1-2A5R9X-Z7O4V-97HB4K-ZOSHF-OXBNA6"
          },
          success: function(res) {
            const adcode = res.data.result.ad_info.adcode
            const province_code = adcode.substr(0, 2)
            const city_code = adcode.substr(2, 2)
            const district_code = adcode.substr(4, 2)

            that.data.provinceCode = province_code
            that.data.cityCode = city_code
            that.data.districtCode = district_code

            const adInfo = res.data.result.ad_info
            that.setData({
              areaAddress: adInfo.province + adInfo.city + adInfo.district
            })

            that.loadData()
          }
        })
      },
      fail(error) {
        console.log(error)
      }
    })
  },
  goUrl(e) {
    const url = e.currentTarget.dataset.url
    console.log(e)
    wx.navigateTo({
      url: url,
    })
  },
  goHome(e) {
    wx.reLaunch({
      url: '/pages/index/index',
    })
  },
  navDataChange(e) {
    this.setData({
      typeData: e.currentTarget.dataset.type
    })
    this.loadData()
  }
})

配置

{
  "usingComponents": {
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-icon": "weui-miniprogram/icon/icon",
    "mp-loading": "weui-miniprogram/loading/loading"
  }
}

样式

/* pages/store/list.wxss */
page {
  padding-bottom: 120rpx;
}

.nav-list {
  display: flex;
  padding: 24rpx;
  font-size: 32rpx;
}
.nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-cell-view .weui-cell__hd, .address-cell-view .address-footer-view  {
  font-size: 28rpx;
}

.empty-view {
  text-align: center;
  margin-top: 40%;
  color: #999;
}

.nav-list .nav-item-active {
  color: #07c160;
  font-weight: bold;
}

.item {
  display: flex;
  padding: 32rpx;
  font-size: 24rpx;
}

.base-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.state-view {
  display: flex;
}

.item-state {
  margin-right: 24rpx;
}

.name-view {
  font-weight: bold;
  font-size: 32rpx;
  color: #000;
}

.desc-view {
  font-weight: bold;
  color: #555;
}

.address-view {
  color: #999;
}

.yes-state {
  color: #07c160;
  font-weight: bold;
}

.no-state {
  color: #999;
}

.item-image {
  width: 180rpx;
  height: 180rpx;
  margin-right: 24rpx;
}

.footer-view {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 32rpx;
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}