【随心写作】共享充电宝小程序首页代码

头像
ThinkPHP
     浙江
    阅读 14 分钟

    首页页面

    const app = getApp()

import { getDistance } from "../../utils/util.js" 

Page({
  data: {
    // 地址授权开始
    scopeUserLocationShow: false,
    // 地址授权结束
    latitude: "",
    longitude: "",
    markers: [],
    covers: [],
    provinceCode: "",
    cityCode: "",
    districtCode: "",
    storeData: {},
    storeDetail: null,
    showDetailDialog: false
  },
  onReady: function (e) {
    this.checkUserLocation()
  },
  scopeUserLocationHide() {
    wx.showToast({
      title: '请选择授权',
      icon: "none"
    })
    return

    this.setData({
      scopeUserLocationShow: false
    })
  },
  checkUserLocation() {
    const that = this
    wx.getSetting({
      success: (res => {
        console.log(res)
        let authSetting = res.authSetting
        if(authSetting["scope.userLocation"]) {
          that.getLocation()
        } else {
          setTimeout(() => {
            that.setData({
              scopeUserLocationShow: true
            })
          }, 2000)
        }
      })
    })
  },
  getLocation() {
    const that = this
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res)
        wx.setStorageSync('latitude', res.latitude)
        wx.setStorageSync('longitude', res.longitude)

        const mapOption = {
          location: res.latitude + "," + res.longitude,
          key: "X4RBZ1-2A5R9X-Z7O4V-97HB4K-ZOSHF-OXBNA6"
        }

        that.mapCtx = wx.createMapContext('myMap')
        that.moveToLocation()

        wx.request({
          url: 'https://apis.map.qq.com/ws/geocoder/v1/',
          data: mapOption,
          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)

            wx.setStorageSync('province_code', province_code)
            wx.setStorageSync('city_code', city_code)
            wx.setStorageSync('district_code', district_code)

            that.setData({
              provinceCode: province_code,
              cityCode: city_code,
              districtCode: district_code
            })
          }
        })

        that.setData({
          scopeUserLocationShow: false,
          latitude: res.latitude,
          longitude: res.longitude
        })

        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
      },
      fail(err) {
        err = err["errMsg"]
        console.log(err)
        wx.showModal({
          confirmText: "确认授权",
          content: '需要授权位置信息',
          success (res) {
            if (res.confirm) {
              wx.openSetting({
                success: (res) => {
                  if (res.authSetting["scope.userLocation"]) {
                    wx.showToast({
                      title: "授权成功",
                      icon: "none",
                    })
                    that.getLocation()
                  } else {
                    
                  }
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
     })
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  scanCode(e) {
    console.log(e)
    wx.scanCode({
      success (res) {
        console.log(res)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  bindregionchange(e) {
    const centerLocation = e.detail.centerLocation
    this.showDetailDialogClose()
    if(e.type == "end") {
      this.loadData(centerLocation.latitude, centerLocation.longitude)
    }
  },
  showDetailDialogClose() {
    if(this.data.showDetailDialog) {
      this.setData({
        showDetailDialog: false
      })
    }
  },
  bindmarkertap(e) {
    console.log(e.markerId)
    let markers = this.data.markers

    markers.forEach((item, index) => {
      if(item.id == e.markerId) {
        markers[index].width = 64
        markers[index].height = 64
      } else {
        markers[index].width = 42
        markers[index].height = 42
      }
    })
    this.mapCtx.addMarkers({
      markers: markers,
      clear: true
    })
    try {
      this.setData({
        storeDetail: this.data.storeData[e.markerId],
        showDetailDialog: true
      })
    } catch(e) {
      console.log(e)
    }
  },
  bindcontroltap(e) {
    console.log(222, e)
  },
  addmarker(e) {
    // const that = this

    // wx.request({
    //   url: app.globalData.apiUrl + '/store/add',
    //   method: 'GET',
    //   data: {
    //     latitude: e.detail.latitude,
    //     longitude: e.detail.longitude,
    //     province_code: that.data.provinceCode,
    //     city_code: that.data.cityCode,
    //     district_code: that.data.districtCode
    //   },
    //   headers: {
    //     'content-type': 'application/json',
    //   },
    //   dataType: 'json',
    //   success: function (res) {
    //   }
    // })
  },
  toScan() {
  },
  goUrl(e) {
    const url = e.currentTarget.dataset.url
    console.log(e)
    wx.navigateTo({
      url: url,
    })
  },
  loadData(latitude = false, longitude = false) {
    const that = this
    wx.request({
      url: app.globalData.apiUrl + '/store/list',
      data: {
        latitude: latitude || that.data.latitude,
        longitude: longitude || that.data.longitude,
        offset: 0,
        limit: 50
      },
      method: 'GET',
      headers: {
        'content-type': 'application/json',
      },
      dataType: 'json',
      fail: function (err) {
        console.log(err)
        wx.showToast({
          title: err.errMsg,
          icon: "none"
        })
      },
      success: function (res) {
        
        console.log(res)
        let markers = [], includePoints = []

        includePoints.push({
          latitude: parseFloat(that.data.latitude),
          longitude: parseFloat(that.data.longitude)
        })

        let marker;
        res.data.data.forEach((row, index) => {
          row.distance = getDistance(that.data.latitude, that.data.longitude, row.latitude, row.longitude)
          try {
            that.data.storeData[row.store_id] = row
          } catch(error) {}

          marker = {
            zIndex: 2,
            id: row.store_id,
            latitude: parseFloat(row.latitude),
            longitude: parseFloat(row.longitude),
            width: 42,
            height: 42,
            iconPath: '/static/image/home/logo.png'
          }
          markers.push(marker)
        })

        that.setData({
          "markers": markers
        })

        that.mapCtx.addMarkers({
          markers: markers,
          clear: true
        })
      }
    })
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 100,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})

    首页配置

    {
    "usingComponents": {
      "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog",
      "mp-loading": "weui-miniprogram/loading/loading"
    }
  }

    首页js部分

    const app = getApp()

import { getDistance } from "../../utils/util.js" 

Page({
  data: {
    // 地址授权开始
    scopeUserLocationShow: false,
    // 地址授权结束
    latitude: "",
    longitude: "",
    markers: [],
    covers: [],
    provinceCode: "",
    cityCode: "",
    districtCode: "",
    storeData: {},
    storeDetail: null,
    showDetailDialog: false
  },
  onReady: function (e) {
    this.checkUserLocation()
  },
  scopeUserLocationHide() {
    wx.showToast({
      title: '请选择授权',
      icon: "none"
    })
    return

    this.setData({
      scopeUserLocationShow: false
    })
  },
  checkUserLocation() {
    const that = this
    wx.getSetting({
      success: (res => {
        console.log(res)
        let authSetting = res.authSetting
        if(authSetting["scope.userLocation"]) {
          that.getLocation()
        } else {
          setTimeout(() => {
            that.setData({
              scopeUserLocationShow: true
            })
          }, 2000)
        }
      })
    })
  },
  getLocation() {
    const that = this
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res)
        wx.setStorageSync('latitude', res.latitude)
        wx.setStorageSync('longitude', res.longitude)

        const mapOption = {
          location: res.latitude + "," + res.longitude,
          key: "X4RBZ1-2A5R9X-Z7O4V-97HB4K-ZOSHF-OXBNA6"
        }

        that.mapCtx = wx.createMapContext('myMap')
        that.moveToLocation()

        wx.request({
          url: 'https://apis.map.qq.com/ws/geocoder/v1/',
          data: mapOption,
          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)

            wx.setStorageSync('province_code', province_code)
            wx.setStorageSync('city_code', city_code)
            wx.setStorageSync('district_code', district_code)

            that.setData({
              provinceCode: province_code,
              cityCode: city_code,
              districtCode: district_code
            })
          }
        })

        that.setData({
          scopeUserLocationShow: false,
          latitude: res.latitude,
          longitude: res.longitude
        })

        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
      },
      fail(err) {
        err = err["errMsg"]
        console.log(err)
        wx.showModal({
          confirmText: "确认授权",
          content: '需要授权位置信息',
          success (res) {
            if (res.confirm) {
              wx.openSetting({
                success: (res) => {
                  if (res.authSetting["scope.userLocation"]) {
                    wx.showToast({
                      title: "授权成功",
                      icon: "none",
                    })
                    that.getLocation()
                  } else {
                    
                  }
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
     })
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  scanCode(e) {
    console.log(e)
    wx.scanCode({
      success (res) {
        console.log(res)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  bindregionchange(e) {
    const centerLocation = e.detail.centerLocation
    this.showDetailDialogClose()
    if(e.type == "end") {
      this.loadData(centerLocation.latitude, centerLocation.longitude)
    }
  },
  showDetailDialogClose() {
    if(this.data.showDetailDialog) {
      this.setData({
        showDetailDialog: false
      })
    }
  },
  bindmarkertap(e) {
    console.log(e.markerId)
    let markers = this.data.markers

    markers.forEach((item, index) => {
      if(item.id == e.markerId) {
        markers[index].width = 64
        markers[index].height = 64
      } else {
        markers[index].width = 42
        markers[index].height = 42
      }
    })
    this.mapCtx.addMarkers({
      markers: markers,
      clear: true
    })
    try {
      this.setData({
        storeDetail: this.data.storeData[e.markerId],
        showDetailDialog: true
      })
    } catch(e) {
      console.log(e)
    }
  },
  bindcontroltap(e) {
    console.log(222, e)
  },
  addmarker(e) {
    // const that = this

    // wx.request({
    //   url: app.globalData.apiUrl + '/store/add',
    //   method: 'GET',
    //   data: {
    //     latitude: e.detail.latitude,
    //     longitude: e.detail.longitude,
    //     province_code: that.data.provinceCode,
    //     city_code: that.data.cityCode,
    //     district_code: that.data.districtCode
    //   },
    //   headers: {
    //     'content-type': 'application/json',
    //   },
    //   dataType: 'json',
    //   success: function (res) {
    //   }
    // })
  },
  toScan() {
  },
  goUrl(e) {
    const url = e.currentTarget.dataset.url
    console.log(e)
    wx.navigateTo({
      url: url,
    })
  },
  loadData(latitude = false, longitude = false) {
    const that = this
    wx.request({
      url: app.globalData.apiUrl + '/store/list',
      data: {
        latitude: latitude || that.data.latitude,
        longitude: longitude || that.data.longitude,
        offset: 0,
        limit: 50
      },
      method: 'GET',
      headers: {
        'content-type': 'application/json',
      },
      dataType: 'json',
      fail: function (err) {
        console.log(err)
        wx.showToast({
          title: err.errMsg,
          icon: "none"
        })
      },
      success: function (res) {
        
        console.log(res)
        let markers = [], includePoints = []

        includePoints.push({
          latitude: parseFloat(that.data.latitude),
          longitude: parseFloat(that.data.longitude)
        })

        let marker;
        res.data.data.forEach((row, index) => {
          row.distance = getDistance(that.data.latitude, that.data.longitude, row.latitude, row.longitude)
          try {
            that.data.storeData[row.store_id] = row
          } catch(error) {}

          marker = {
            zIndex: 2,
            id: row.store_id,
            latitude: parseFloat(row.latitude),
            longitude: parseFloat(row.longitude),
            width: 42,
            height: 42,
            iconPath: '/static/image/home/logo.png'
          }
          markers.push(marker)
        })

        that.setData({
          "markers": markers
        })

        that.mapCtx.addMarkers({
          markers: markers,
          clear: true
        })
      }
    })
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 100,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})

app.json

    {

    "pages":[
  "pages/index/index",
  "pages/my/index",
  "pages/store/list",
  "pages/store/detail",
  "pages/store/add"
],
"useExtendedLib": {
  "kbone": true,
  "weui": true
},
"style": "v2",
"requiredPrivateInfos": ["getLocation", "chooseAddress", "chooseLocation"],
"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
},
"window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#F8F8F8",
  "navigationBarTitleText": "小拼充电",
  "navigationBarTextStyle":"black"
}

    }

    app.wxss

    .loading-view {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 0;
}
    小程序
    ThinkPHP
    4 声望3 粉丝
    « 上一篇
    【随心写作】小程序如何申请地址定位权限
    下一篇 »
    【随心写作】共享充电宝小程序个人中心页

    引用和评论

    推荐阅读
    头像
    【正版】小程序拼团源码

    ThinkPHP阅读 290

    头像
    通过duxapp提供的基础方法、UI组件、全局样式，快速编写项目

    ShaoGongBra阅读 3.6k

    头像
    如何通过即构小程序组件实现直播带货功能？

    ZEGO即构阅读 1.7k

    头像
    移动端、微信小程序兼容性问题汇总（持续更新……

    池月赞 1阅读 798

    头像
    Taro小程序开发性能优化实践

    京东云开发者阅读 521

    头像
    duxui：基于Taro，兼容React Native、小程序、H5的多端UI库

    ShaoGongBra阅读 405

    头像
    JINGWHALE ART 年度流行色

    用户bPc3Q8h阅读 341

    0 条评论
    得票最新