微信小程序-电动汽车充电APP（2）

一、 pages文件中Index页面

1、index.js

// pages/index/index.js
var app = getApp();
var session_key;
var jsondata = {}, json_obj = [], image_obj = [], local_latitude, local_longitude;
var user_id, user_name, user_sex, user_image, wx_province, wx_city, wx_country;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    local_latitude: "",
    local_longitude: "",
    objectArray: [],
    scrollheight: null,

    //***********************************************************************
    //Banner数据
    images: [
    ],
    // 是否显示面板指示点
    indicatorDots: true,
    // 滑动方向是否为纵向
    vertical: false,
    // 自动切换
    autoplay: true,
    // 采用衔接滑动
    circular: true,
    // 自动切换时间间隔2s
    interval: 2000,
    // 滑动动画时长0.5s
    duration: 500,
    // 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    previousMargin: 0,
    // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    nextMargin: 0
  },


  /**********************************************************************************
//加载广告信息
**********************************************************************************/
  loadBanner() {
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/GetAllBanner',
      data: {

      },
      method: 'get',
      header: {
        'content-type': 'application/json',
      },
      // 设置请求的 header
      success: function (jsons) {
        console.log('--------------------------------------------->加载广告信息成功');
        var json = jsons.data;
        image_obj = [];
        for (var i = 0; i < json.length; i++) {
          //console.log(json[i].banner_image);
          image_obj.push("https://api.secondfull.com.cn/images/" + json[i].banner_image);
        }
        that.setData({
          images: image_obj
        });
      },

      fail: function (e) {
        console.log('--------------------------------------------->加载广告信息失败');
        wx.showToast({
          title: '通信网络异常，请检查连接',
          icon: 'none',
          duration: 2000 //持续的时间
        })
      },

      complete: function () {

      }
    })
  },


  /**********************************************************************************
  //加载电站信息
  **********************************************************************************/
  loadStation() {
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/GetAllChargeStation',
      data: {

      },
      method: 'get',
      header: {
        'content-type': 'application/json',
      },
      // 设置请求的 header
      success: function (jsons) {
        console.log('--------------------------------------------->加载电站信息成功');
        var json = jsons.data;

        //***********************************************************/
        //如果授权用户位置信息
        if (wx.getStorageSync('user_id') != '') {
          console.log('--------------------------------------------->授权用户位置');
          //先调用位置成功后再计算
          wx.getLocation({
            type: 'wgs84',
            success: function (res) {
              local_latitude = res.latitude;
              local_longitude = res.longitude;
              //距离计算
              if (json.length == 0) {
                wx.showToast({
                  title: '加载数据错误，请稍后重试',
                  icon: 'none',
                  duration: 2000 //持续的时间
                })
              }

            },

            fail: function (res) {
              wx.showToast({
                title: '您还未授权位置信息',
                icon: 'none',
                duration: 2000 //持续的时间
              })
            }
          })
        }
        //***********************************************************/

        json_obj = [];
        for (var i = 0; i < json.length; i++) {
          var m = {};
          m.id = json[0].id;
          m.station_id = json[i].station_id;
          m.station_name = json[i].station_name;
          m.station_address = json[i].station_address;
          m.station_free = json[i].station_free;
          m.station_total = json[i].station_total;
          m.station_price = json[i].station_price.toFixed(2);
          m.station_service = json[i].station_service.toFixed(2);
          m.station_type = json[i].station_type;
          if (json[i].station_image == '') {
            m.station_image = '../images/stationimage.png';
          }
          else {
            m.station_image = 'https://api.secondfull.com.cn/images/'+json[i].station_image;
          }
          m.station_distance = that.getDistance(local_latitude, local_longitude, json[i].station_latitude, json[i].station_longitude).toFixed(1);
          json_obj.push(m);
        }
        that.setData({
          objectArray: json_obj
        });
      },

      fail: function (e) {
        console.log('--------------------------------------------->加载电站信息失败');
        wx.showToast({
          title: '通信网络异常，请检查连接',
          icon: 'none',
          duration: 2000 //持续的时间
        })
      },

      complete: function () {

      }
    })
  },


  //------------------------------------------------------------------------------------
  //距离计算
  //------------------------------------------------------------------------------------
  getDistance: function (lat1, lng1, lat2, lng2) {

    lat1 = lat1 || 0;
    lng1 = lng1 || 0;
    lat2 = lat2 || 0;
    lng2 = lng2 || 0;

    var rad1 = lat1 * Math.PI / 180.0;
    var rad2 = lat2 * Math.PI / 180.0;
    var a = rad1 - rad2;
    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
    var r = 6378137;
    var distance = (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0);

    //console.log(distance / 1000);
    return distance / 1000;
  },

  gomap: function (e) {
    wx.navigateTo({
      url: '/pages/map/map'
    })
  },

  //点击事件 
  tablerow(e) {
    wx.navigateTo({
      url: '/pages/station/station?station_id=' + e.currentTarget.dataset.id
    })
  },

  /**********************************************************************************
  //加载微信登录状态
  **********************************************************************************/
  checkLogin() {
    var that = this;
    wx.checkSession({
      success: function (res) {
        console.log("登录状态");
      },
      fail: function (res) {
        console.log("离线状态");
        wx.redirectTo({
          url: "/pages/login/login"
        });
      }
    })
  },

  search: function (e) {
    var that = this;
    var station_name = e.detail.value;
    wx.request({
      url: 'https://api域名/Api/Default/GetChargeStationByName',
      data: {
        station_name: station_name,
      },
      method: 'get',
      header: {
        'content-type': 'application/json',
      },
      // 设置请求的 header
      success: function (jsons) {
        console.log('--------------------------------------------->查询电站信息成功');
        var json = jsons.data;

        //***********************************************************/
        //如果授权用户位置信息
        if (wx.getStorageSync('user_id') != '') {
          console.log('--------------------------------------------->授权用户位置');
          //先调用位置成功后再计算
          wx.getLocation({
            type: 'wgs84',
            success: function (res) {
              console.log(res);
              local_latitude = res.latitude;
              local_longitude = res.longitude;
              //距离计算
              if (json.length == 0) {
                wx.showToast({
                  title: '加载数据错误，请稍后重试',
                  icon: 'none',
                  duration: 2000 //持续的时间
                })
              }

            },

            fail: function (res) {
              wx.showToast({
                title: '您还未授权位置信息',
                icon: 'none',
                duration: 2000 //持续的时间
              })
            }
          })
        }
        //***********************************************************/

        json_obj = [];
        for (var i = 0; i < json.length; i++) {
          var m = {};
          m.id = json[0].id;
          m.station_id = json[i].station_id;
          m.station_name = json[i].station_name;
          m.station_address = json[i].station_address;
          m.station_free = json[i].station_free;
          m.station_total = json[i].station_total;
          m.station_price = json[i].station_price;
          m.station_service = json[i].station_service;
          m.station_type = json[i].station_type;
          if (json[i].station_image == '') {
            m.station_image = '../images/stationimage.png';
          }
          else {
            m.station_image = 'https://api.secondfull.com.cn/images/' + json[i].station_image;
          }
          m.station_distance = that.getDistance(local_latitude, local_longitude, json[i].station_latitude, json[i].station_longitude);
          json_obj.push(m);
        }
        that.setData({
          objectArray: json_obj
        });

      },

      fail: function (e) {
        console.log('--------------------------------------------->查询电站信息失败');
        wx.showToast({
          title: '通信网络异常，请检查连接',
          icon: 'none',
          duration: 2000 //持续的时间
        })
      },

      complete: function () {

      }
    })
  },





  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('--------------------------------------------->页面加载');
    //this.checkLogin();
    wx.setNavigationBarTitle({
      title: '云充电' //修改title
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var scrollheight;
    wx.getSystemInfo({
      success({
        windowHeight
      }) {
        scrollheight = windowHeight - 100;
      }
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('--------------------------------------------->页面显示');
    console.log('--------------------------------------------->open_id='+wx.getStorageSync("open_id"));
    //this.checkLogin();
    this.loadStation(); //第一次加载数据
    this.loadBanner();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('--------------------------------------------->页面隐藏');
  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('--------------------------------------------->下拉刷新');
    this.loadStation();
    this.loadBanner();
    wx.showNavigationBarLoading(); //在标题栏中显示加载

    setTimeout(function () {
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1500);
  },

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

  },

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

  }



})

 2、index.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

3、index.wxml

<view class="page">

  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">

    <block wx:for='{{images}}' wx:key='index'>
      <swiper-item>
        <image src='{{item}}' mode='aspectFill' class='swiper-item-images' />
      </swiper-item>
    </block>

  </swiper>
  <view class="search-class">
    <input class="input-class" confirm-type="search" bindconfirm="search" placeholder="   请输入电站名称搜索" />
    <image src="../images/map.png" class="icon_list" mode="widthFix" bindtap="gomap"></image>
  </view>

  <scroll-view scroll-y style='height:{{scrollheight}}px;' scroll-with-animation='true'>
    <view wx:for="{{objectArray}}" wx:key="index">
      <view class="table" bindtap='tablerow' data-id="{{item.station_id}}">
        <view class="tb_head">
          <view class="tb_singer">
            <view class="tb_head_left">
              <image src="../images/station.png" class="icon_head" mode="widthFix"></image>
            </view>
            <view class="tb_head_data_left">
              {{item.station_name}}
            </view>
          </view>

          <view class="tb_singer">
            <view class="tb_head_right">
              <image src="../images/navigation.png" class="icon_image" mode="widthFix"></image>
            </view>
            <view class="tb_head_data_right">
              {{item.station_distance}}km
            </view>
          </view>

        </view>


        <view class="container_line"></view>
        <view class="tb_image">
          <image src="{{item.station_image}}" class="icon_station_image" mode="widthFix"></image>
        </view>

        <view class="tb_left">

          <view class="tb_body">
            <view class="tb_singer">
              <view class="tb_body_left">
                电价
              </view>
              <view class="tb_body_data_left">
                {{item.station_price}}元/度
              </view>
            </view>
            <view class="tb_singer">
              <view class="tb_body_right">
                服务费
              </view>
              <view class="tb_body_data_right">
                {{item.station_service}}元/度
              </view>
            </view>
          </view>

          <view class="tb_content">
            <view class="tb_content_left">
              {{item.station_type}}
            </view>
            <view class="tb_content_data">
              空闲 {{item.station_free}}
            </view>
            <view class="tb_content_data_left">
              /总共 {{item.station_total}}
            </view>
          </view>

        </view>
        <view class="tb_foot">
          <image src="../images/position.png" class="icon_image" mode="widthFix"></image>
          <view class="tb_address">{{item.station_address}}</view>
        </view>
      </view>
      <view class="row_space"></view>
    </view>
  </scroll-view>
</view>

4、index.wxss

page {
  background-color: #f4f4f4;
  font-size: 13px;
  color: #333;
}

.search-class {
  display: flex;
  margin: 10px;
}

.input-class {
  height: 3.2em;
  width: 100%;
  font-size: 12px;
  border-width: 0px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px #e1e2e6 solid;
}

.swiper-item-images{
  width: 100%;
  height: 300rpx;
}

.button_row {
  margin: 10px;
  display: flex;
}

.icon_list {
  margin-left: 5px;
  height: 45px;
  width: 45px;
}

.icon_image {
  margin-left: 10px;
  margin-top: 3px;
  height: 14px;
  width: 14px;
}

.icon_station_image {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  height: 150px;
  width: 100%;
}

.icon_head {
  margin-top: 3px;
  height: 14px;
  width: 14px;
}

.icon_font {
  text-align: center;
}

.container_line {
  width: 100%;
  border-top: 1px #eee solid;
}

.container_space {
  height: 10px;
}

.button_row {
  margin: 10px;
  display: flex;
}

button::after {
  border-width: 0px;
}

.table {
  border-bottom: #fff 1px solid;
  border-top: #fff 1px solid;
  background-color: #fff;
  height: auto;
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 10px;
  border-radius: 5px 5px 5px 5px;
}

.tb_left {
  font-size: 13px;
}

.tb_right {
  font-size: 13px;
}

.tb_address {
  width: 100%;
  padding-top: 0px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
  color: #999;
}

.tb_content {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
}

.tb_content_left {
  display: flex;
  color: #999;
}

.tb_content_data {
  margin-left: 10px;
  display: flex;
  font-weight: bold;
  color: #ff8a00;
}

.tb_content_data_left {
  padding-bottom: 5px;
}

.tb_head {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
}

.tb_head_left {
  display: flex;
}

.tb_head_data_left {
  padding-left: 10px;
  padding-bottom: 5px;
  color: #333;
  font-weight: bold;
}

.tb_head_right {
  font-size: 13px;
  margin-right: 10px;
}

.tb_head_data_right {
  font-size: 13px;
  padding-top: 0px;
  margin-right: 10px;
  color: #999;
}

.tb_body {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 0px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
}

.tb_singer {
  display: flex;
  margin-right: 10px;
}

.tb_body_left {
  display: flex;
  color: #999;
}

.tb_body_data_left {
  padding-bottom: 5px;
  margin-left: 10px;
}

.tb_body_right {
  font-size: 13px;
  margin-right: 10px;
  color: #999;
}

.tb_body_data_right {
  font-size: 13px;
  margin-right: 10px;
}

.tb_foot {
  display: flex;
}

.tb_image {
  display: flex;
}

.row_space {
  height: 10px;
  background: #f4f4f4;
}