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

页面

<view class="list">
  <view class="item">
    <image src="{{storeData.store_image}}" class="item-image" mode="aspectFit"></image>
    <view class="info-view">
      <view class="base-view">
        <view class="name-view">{{ storeData.store_name }}</view>
      </view>
      <view class="address-view">
        {{ storeData.full_address }}
      </view>
      <view class="state-view">
        <view class="{{storeData.use_count > 0 ? 'yes-state' : 'no-state'}} item-state">{{ storeData.use_count > 0 ? "可租借" : "不可租借" }}</view>
        <view class="{{storeData.return_count > 0 ? 'yes-state' : 'no-state'}} item-state">{{ storeData.return_count > 0 ? "可归还" : "不可归还"}}</view>
      </view>
    </view>
  </view>

  <view class="to-view">
    <button type="primary" bindtap="openAddress">到这里约{{ storeData.distance }}</button>
  </view>
</view>

逻辑

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

Page({
  data: {
    storeData: null,
    id: 0,
    latitude: "",
    longitude: ""
  },
  
  onLoad(options) {
    const latitude = wx.getStorageSync("latitude")  
    const longitude = wx.getStorageSync("longitude")

    this.setData({
      id: options.id
    })
    if(!latitude || !longitude) {
      this.goHome()
      return
    }
    this.data.latitude = latitude
    this.data.longitude = longitude

    this.loadData()
  },
  openAddress() {
    console.log(this.data.storeData)
    wx.openLocation({
      latitude: parseFloat(this.data.storeData.latitude),
      longitude: parseFloat(this.data.storeData.longitude)
    })
  },
  goUrl(e) {
    const url = e.currentTarget.dataset.url
    console.log(e)
    wx.navigateTo({
      url: url,
    })
  },
  goHome(e) {
    wx.reLaunch({
      url: '/pages/index/index',
    })
  },
  loadData() {
    const that = this
    wx.request({
      url: app.globalData.apiUrl + "/store/detail",
      data: {
        id: this.data.id
      },
      success(ret) {
        let data = ret.data.data
        data.distance = getDistance(that.data.latitude, that.data.longitude, data.latitude, data.longitude)
        that.setData({
          storeData: data
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

样式

/* 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;
}

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

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

.to-view {
  margin: 48rpx;
}

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

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

.state-view {
  display: flex;
}

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

.name-view {
  font-weight: bold;
  font-size: 38rpx;
  color: #000;
  margin-bottom: 12rpx;
}

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

.address-view {
  margin-bottom: 12rpx;
}

.address-view {
  color: #999;
}

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

.no-state {
  color: #999;
}

.item-image {
  width: 100%;
  height: 420rpx;
  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;
}

配置

{
  "usingComponents": {}
}