先上页面
1.注册与登陆
用户打开微信APP，搜索“校园电动车管理和充电指引”或者点击微信好久分享的链接或扫描小程序二维码便可以搜索到小程序,新用户将进入登陆页面。可先点击最下方“马上注册”或者直接选择学生用户身份并且点击微信一键登陆微信授权后直接注册并登陆进入到小程序的主页面。若选择管理员身份则无法进入并提示非管理员弹窗。管理员身份只能由管理者在后台添加。
2.个人用户信息登记
进入到主页面后，点击车辆登记，跳转到信息登记表格界面。按照表格提示，用户填入姓名、学号、学院、班级、车牌号、以及车辆的照片。点击submit按钮提交用户信息。点击reset可重置表格信息。信息提交后，载入云数据库与微信id关联起来。
3. 个人用户信息查询
当用户非新人用户，当打卡该小程序时，会直接跳过登陆界面。直接进入到主界面。可通过用户中心界面查看到当前自己的信息，也可以通过点击主页面的“我的车辆”查看是否有车辆信息。
4. 充电站信息以及充电指引
信息管理首页可以看到有充电站信息，点击对应的去充电按钮可以跳转到充电指引界面。并且将自动将自己所在第设置为起点。充电站地设置为终点点击该界面的去充电则出现路径规划信息。并且下方显示两个地点间的距离。
想当更改当前起点。或者所搜目的地时可点击下方相应按钮，更该起点或终点。搜索对应地点名称。出现周围可地位的地点。选择其中一个。点击完成。会重新返回地图界面。且此时已经更换了起点或终点。
4 用户留言
当用户对该软件操作有疑问时，可以点击首页上方的信息图标，可以给系统的管理者留言。
首页代码wxml
<HtView></HtView><tanchukuang aaa="{{showdetail}}"advatar="{{advatar}}" user="{{user}}" chepai="{{chepai}}" ></tanchukuang><!-- 第一部分 --><view> <image class="tu" src="../../images/che.png"></image></view><view class="message"> <view class="massageregister"> <view class="item1"> <image src="../../images/cheicon.png" class="icon"></image> <view class="text" bindtap="watch"> <view class="xingxi">我的车辆</view> <view class="mashang">点击查看>></view> </view> </view> <!-- --> <view class="item2" bindtap="updata"> <image src="../../images/dengji.png" class="icon"></image> <view class="text"> <view class="xingxi">车辆登记</view> <view class="mashang">马上登记>></view> </view> </view> </view> <view class="guodu"> <view class="chargedi">充电站信息</view> <view class="dixian"></view> </view><!-- 第二部分 --> <view class="two"> <view class="two-item" wx:for="{{chargeplace}}"data-index="{{index}}" data-item="{{item}}"> <image class="img" src="cloud://cloud1-3gst10j6dcabd343.636c-cloud1-3gst10j6dcabd343-1311463877/桩.jpg"></image> <view class="describe"> <view class="describe-item">位置:{{item.placename}}</view> <view class="describe-item">距离:{{item.distance}}米</view> <view class="describe-item">空闲充电桩:{{item.chargeNumber}}</view> <button class="btn" bindtap="gocharge">去充电</button> </view> </view>首页wxss
/* pages/message/message.wxss */.page{ background:rgb(246,246,246); }.item1{ align-items: center; background: white; position: absolute; left: 380rpx; top: 350rpx; margin-left: 30rpx; display: flex; flex-direction: row; width: 300rpx; height: 200rpx; border-radius: 5%; }.icon{ margin-left: 30rpx; width: 100rpx; height: 100rpx;}.item2{ align-items: center; background: white; position: absolute; left: 40rpx; top: 350rpx; margin-left: 25rpx; display: flex; flex-direction: row; width: 300rpx; height: 200rpx; border-radius: 5%; }.massageregister{ background:#F9F9F9; width: 98%; height: 200rpx; /* border: 1rpx solid rgb(143, 181, 231); */ margin-left: 20rpx; display: flex; flex-direction: row; }.tu{ border-radius: 2%; position: relative; display:flex; width: 100%; height: 340rpx;}.text{ margin-left: 20rpx;}.xingxi{ font-size: rpx; margin-bottom: 10rpx; color:rgb(21,36,123);}.mashang{ font-size: 20rpx; color:rgb(202,203,234);}.two{ margin-left: 20rpx; margin-top: 20rpx; /* border: 1rpx solid red; */ width: 94%;}.guodu{ margin-left: 20rpx; /* margin-top: 10rpx; */ height: 50rpx; width: 98%; }.chargedi{ color: rgb(51, 51, 51); margin-left: 20rpx;}.dixian{ position: absolute; left: 20rpx; top: 665rpx; margin-left: 18rpx; height: 20rpx; width: 165rpx; background: rgb(201,203,234);}.two-item{ margin-bottom: 18rpx; display: flex; flex-direction: row; align-items: center; /* border: 1rpx solid red; */ width: 100%; height: 260rpx; border-radius: 10rpx; background: white;}.img{ border-radius: 10rpx; margin-left: 10rpx; width: 300rpx; height: 240rpx;}.describe{ margin-left: 20rpx; display: flex; flex-direction: column;}.describe-item{ margin-top: 5rpx; margin-bottom: 10rpx;}.btn{ padding-left: 135rpx; display: flex; flex-direction: row; color: #F9F9F9; font-size: 35rpx; align-items: center; height: 65rpx; background:rgb(21,36,123);}首页js
const app = getApp()const db = wx.cloud.database()var util = require("../../utils/location.js");var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); //引用库var qqmapsdk = new QQMapWX({ key: "N3UBZ-YNRCU-6JZVP-277MY-B365O-KNFK5"//微信小程序，腾讯位置服务key});var mode='driving';Page({ /** * 页面的初始数据 */ data: { showdetail:true, chargeplace:[], resKm:[], student:false, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ student:app.userInfo.student }) db.collection('chargeplace').get().then(res=>{ console.log(res.data[0]) this.setData({ chargeplace:res.data, end1:res.data[0].placeweidu+','+res.data[0].placejingdu, end2:res.data[1].placeweidu+','+res.data[1].placejingdu, end3:res.data[2].placeweidu+','+res.data[2].placejingdu }) }) wx.getLocation({ isHighAccuracy: true, success:(res)=> { const latitude = res.latitude; const longitude = res.longitude; // const resKm=[] // for(var i=0;i<this.data.chargeplace.length;i++){ // console.log(this.data.chargeplace[i].placeweidu) // resKm[i] = this.getDistance(latitude,longitude,this.data.chargeplace[i].placeweidu,this.data.chargeplace[i].placejingdu) // } // this.setData({ // disKm:resKm // }) this.setData({ qi:res.latitude + ',' + res.longitude, }) }, }) this.distance(this.data.qi,this.data.qi) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, watch(){ console.log("车辆信息") this.setData({ showdetail:false }) var userId=app.userInfo._id db.collection('studentuser').where({ _openid:userId }).get().then(res=>{ console.log(res) console.log(res.data[0].resVlu.name) this.setData({ advatar:res.data[0].picture[0], user:res.data[0].resVlu.name, chepai:res.data[0].resVlu.discrib }) }) }, updata(){ wx.navigateTo({ url: '../../pages/uploading/uploading', }) }, gocharge(){ wx.switchTab({ url: '../charge/charge', }) } })
3286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
