智能充电柜软件开发: 技术栈: 小程序使用 uniapp 进行页面搭建，运用 vue、vuex、uview、axios 、腾讯地图定位导航、微信登录、微信支付等；后台管理系统使用 el-admin、element-UI、vue、echarts 、支付宝 PC 端转账提现等。

# 智能充电柜软件开发

#### 介绍
技术栈: 小程序使用 uniapp  进行页面搭建，运用 vue、vuex、uview、axios 、腾讯地图定位导航、微信登录、微信支付等；后台管理系统使用 el-admin、element-UI、vue、echarts 、支付宝 PC  端转账提现等。

#### 小程序功能介绍
### 一、用户登录功能

授权登录配置 将授权登录弹窗配置各项存入数组中，以便调用

wx.getUserProfile获取用户信息并存入缓存 全局注册vuex，如import { mapState, mapMutations, mapGetters } from 'vuex'; 将获取到的用户信息存到缓存中的state中，并用mutations方法可以对state中信息进行更改，使用getters方法监听用户是否已经授权

userInfo用户信息对象使用 userInfo为用户信息对象，不包含 openid 等敏感信息，将获取用户信息对象存入缓存中

wx.getSetting查看用户是否授权 利用该 API组件获取该用户是否已经授权，若授权，设置该用户授权状态，当用户每次进入小程序时要判断当前是否已获得授权，如果没有就去获得授权，如果获得授权，就直接设置该用户授权状态

uni.login实现登录功能、 设置provider服务供应商为weixin实现微信小程序登录

用户头像显示 先从缓存数据中获取用户头像链接，如avatarUrl: state => state.user.avatarUrl，并将其应用到对应组件的路径中实现头像显示 cover-view为覆盖在原生组件上的文本视图，cover-image为覆盖在原生组件上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里

### 二、获取当前位置及地图显示

uni.authorize定位授权 利用该API组件提前向用户发起授权请求该用户当前位置，调用该API会弹窗提示用户是否同意授权小程序用手机定位功能授权使用小程序

uni.getSetting判断是否授权 利用该 API组件获取该用户是否已经授权，若授权，获取该用户的当前位置，当用户每次进入小程序时要判断当前是否已获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置

uni.getLocation获取当前地理位置 利用该API组件获取用户当前的地理位置信息，比如当前位置的经度及纬度

map 地图组件对地图的展示 利用map地图组件对用户当前位置进行地图展示，对scale属性进行设置，使地图可以进行相应的缩放操作，对markers属性进行相应设置，使用户当前位置有标记点显示，对enable-building、show-location属性设置为true，展示用户当前位置的建筑物所在，并显示带有方向的当前定位点，对circles属性进行设置使当前位置以圆的形式展示

### 三、 扫码充电功能

Vuex 跨组件、页面共享数据 每一个Vuex 应用的核心是 store（仓库），它包含着我们的应用中大部分的状态 (state)。状态管理有5个核心：state、getter、mutation、action、module。 通过state对柜体信息进行存储，并通过属性访问，在根节点注入 store，在组件中使用时，可以通过 this.$store 访问到 state 里的数据。
通过mutations中编写相应方法对Vuex中store数据进行改变，在调用时需要以相应的 type 调用 store.commit 方法调用 mutations（需要在根节点注入 store）

uni.scanCode客户端扫码接口 调用该API接口，进入客户端扫码界面，扫码成功后返回对应的结果

编写打开充电页面程序，并获取当前充电柜仓位的状态

扫码进入小程序的充电界面，选择仓位，选择充电时长提醒（选填），点击开始充电

### 四、 预约充电柜功能 
 
预约跟普通充电区别：预约生成订单的时候不会打开柜门，需要自己点击打开柜门

checkbox-group多项选择器 checkbox-group是个多项选择器，内部由多个 checkbox 组成。 checkbox的默认颜色，在不同平台不一样。微信小程序、360小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的，更改颜色要使用color属性，如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%为style="transform:scale(0.7)"
u-select定时提醒时长列选择器 可以使用uView 中u-select定时提醒时长列选择器进行充电时长提醒

### 五、 点击标志点充电

标志点显示 在map地图上自定义窗口，使用cover-view、cover-image等组件对自定义窗口进行编写代码，通过调用缓存中充电柜位置信息，如充电柜的经纬度，并在地图相应位置对充电柜做相应标记，通过显示自定义图片使相应位置出现标记点

点击标记点切换状态 点击标记点map地图上相应位置图片切换，使之处于选中状态 给存储充电柜数组设计下标，通过设置点击列表下标监听下标选中状态的值，从而改变图标路径

点击标记点导航栏切换 设计不点击标记点导航栏显示扫码充电，引导客户通过点击下方扫码充电处对充电柜进行使用，点击标记点导航栏处于显示附近状态

点击标记点显示充电柜信息 设计自定义弹窗，通过点击事件调用该充电柜的具体信息并进行相应显示

充电和导航按钮设计 调用uView中u-button组件对按钮进行设计，button组件的size（可选值为default(默认)，mini(小尺寸)和medium(中等尺寸)），并给按钮添加点击事件@click，使之发生对应结果，如点击充电会打开充电柜

导航功能 点击导航按钮，会打开相应充电柜的相应位置的地图导航，地图导航利用Map. routePlan方法对路线进行相应规划导航，用户也可以进行相应选择进行导航到相应位置，默认驾车导航到目的地

### 六、 寻找附近充电柜功能

页面显示 利用uin.navigateTo方法进行页面跳转

跳转页面显示 在全局注册uView，如import uView from "uview-ui"，就可以在自己的组件中使用其组件  
 （1）u-input输入框组件 u-input是输入框组件，通过v-model可以绑定输入框的值，通过border可以配置是否显示输入框的边框，通过type可以设置输入框的类型，type参数有两种形态：一是长文本内容输入的textarea类型；二是类似普通输入框的text类型。   
 （2） u-action-sheet操作菜单 u-action-sheet是用于从底部弹出一个操作菜单，供用户选择并返回结果，通过list设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供text属性，另外可选的有fontSize(字体大小)，color(颜色)，disabled(是否禁用)， subText(描述信息)，通过v-model绑定一个值为布尔值的变量控制组件的弹出与收起，v-model的值是双向绑定的  
 （3）导航功能 查询到相应充电柜时可以通过点击导航打开地图导航到相应位置，可以通过输入导航起点坐标和名称及导航终点坐标和名称进行导航，也可利用Map. routePlan方法对路线进行相应规划导航

### 七、 订单提示功能

弹出界面编写 编写弹出页面，将订单提示弹窗配置各项存入数组中，以便调用，点击查看跳转到我的订单

我的订单显示 在我的订单中有打开柜门、结束充电、定位等功能，点击定位可跳转到相应充电柜位置并进行导航

### 八、 个人设置

1、用户界面   
点击左上角的头像，通过点击事件跳转页面进入用户界面，用户界面包含个人信息显示、我的钱包、我的订单、我的服务（联系客服、使用说明、常见问题、故障报修、设置）等

2、个人信息显示  
 利用open-data组件对用户信息进行相应设置及显示 open-data是用于展示平台开放的数据开放能力，可以通过设置type 有效值设置相应的用户信息展示，也可以通过用户信息数据缓存调用对用户信息进行相应显示 type 有效值包含用户昵称（userNickName）、用户头像（userAvatarUrl）、用户性别（userGender）、拉取群名称（groupName）、用户所在城市（userCity）、用户所在省份（userProvince）、用户所在国家（userCountry）、用户的语言（userLanguage）等

3、我的钱包功能   
（1） 我的钱包主要页面展示 点击用户界面的我的钱包图标，可以使用uni.navigateTo组件进行页面跳转，首次进入我的钱包页面需要设置钱包支付密码，密码为6位数字

（2） 设置支付密码 编写页面运用到，它并不是一个组件，它仅仅是一个包装元素，接受控制属性，可用于列表渲染和条件渲染，当密码6位数输入完成会显示输入完成，并将输入值存入data中，并退出初始化，避免再次进入多次输入 （3） 用户账号余额显示 调用后端接口查询用户用户余额，并将其存到缓存数据，以便调用显示

（4） 账单查询 点击我的钱包页面账单图标，通过页面跳转到账单查询页面，账单类型分为充值、支付、提现三类，通过调用后端接口获取用户收入支出状况，并进行相应页面显示 （5） 充值功能 设置充值金额为10元、20元（首次充值送2元）、30元（首次充值送4元）、50元（首次充值送8元）、100元（首次充值送20元）、自定义金额，设置自定义金额充值必须大于0元，充值方式为微信支付 uni.getSystemInfoSync() API接口为获取系统信息同步接口，通过该接口获取用户充值状态，点击微信支付弹出支付窗口（二维码支付或密码支付），支付成功后将充值金额发送至后端以及存到数据缓存中

（6） 提现功能 提现功能只支持提现到微信，提现界面显示可提醒金额、预计提现到账时间、收取手续费提示，并有全部提现快捷键按钮  
 (a) 快捷键按钮运用了switch标签进行编写，switch是开关选择器，拥有是否选中（checked）、是否禁用（disabled）、样式（type）、开关颜色（color）、点击触发事件（@change）等属性

(b) 提现按钮运用了uView中u-button组件编写 type属性值可选的有default(默认)、primary、success、info、warning、error等 size属性（可选值为default(默认)，mini(小尺寸)和medium(中等尺寸)）

(c) 收取手续费提示按钮运用了uView中u-alert-tips警告提示按钮进行编写 通过title和description等属性设置组件的标题和描述内容，如果内容和标题同时存在时，标题字体会被加粗加大，description中文字为辅助性文字，颜色比title浅一点，字号也小一点 通过type属性设置主题类型，使用预设的颜色，它拥有primary、success、error、warning、info等可选值 通过show-icon设置是否显示左边的辅助图标，作用是让信息类型更加醒目。

（7） 关注公众号广告区  
 uni.setClipboardData设置系统剪切板内容，并对其运用点击事件进行调用，official-account为公众号关注组件，当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内，点击该区域，会弹出公众号对应弹窗

4、我的订单功能  
 我的订单包含已预约、进行中、已完成、已过期、查看更多功能，给各个功能订单列表设置不同下标，使之点击相应功能可以根据下标进行相应页面跳转，调用数据缓存数据对订单进行相应显示，显示中拥有进行中、已取消、已完成、已过期、已预约、对应充电柜定位与导航功能显示 当用户点击打开柜门，柜门会相应打开，若用户忘记关闭充电柜门，手机会在小程序端提醒‘当前柜门未关闭，请先关闭柜门’等操作 当用户点击结束充电，会检查当前柜门状态，若关闭柜门会相应打开，并且充电完成时小程序端会弹出支付弹窗操作

5、我的服务功能  
 我的服务功能包含联系客服、使用说明、常见问题、故障报修、设置等功能，编写页面使用插槽组件，在作用域插槽内，父组件可以拿到子组件的数据，子组件可以在 slot 标签上绑定属性值，当需要多个插槽时，可以利用 元素的一个特殊的特性：name 来定义具名插槽，当 元素作为组件模板之中的内容分发插槽， 元素自身将被替换  
（1）联系客服 点击联系客服对应箭头，会弹出联系客服的信息窗口，点击拨打电话会调用uni.makePhoneCall拨打电话的API组件，进行拨打客服电话

（2）使用说明 点击使用说明对应箭头，会下载使用说明文件，并进行相应的打开 uni.downloadFile为下载文件资源到本地的API组件，用户在客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径 uni.openDocument为新开页面打开文档API组件，支持格式有doc、 xls、 ppt,、pdf、 docx、xlsx、 pptx等，filePath属性为文件路径，可通过 downFile 获得

（3）常见问题 点击常见问题对应箭头，跳转到常见问题页面，页面设计可加载更多，点击各类问题可进入详情页 u-loadmore为手动加载更多组件，有时候可能会因为网络，或者数据不满一页的原因，导致无法上拉触发onReachBottom生命周期，这时候(需status为loadmore状态)，用户点击组件，就会触发loadmore 事件，可以在回调中，进行状态的控制和数据的加载，同时也可以修改loadText的loadmore为"上拉或点击加载更多"进行更加人性化的提示 详情页调用rich-text富文本组件，其nodes属性支持Array 、String类型，nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

（4）故障报修 故障反馈包含账号问题、充电故障、扣费问题以及其他问题，在进行反馈时可以根据相应问题进行切换反馈，也可提交反馈内容信息及故障照片 反馈内容使用textarea多行输入框组件，上传图片调用了uni.chooseImage API接口，可以从本地相册选择图片或使用相机拍照，上传照片完毕调用uni.previewImage API接口可以点击图片对照片进行预览，并且可以通过长按对照片进行删除操作

（5）设置 点击设置相应箭头进入设置页面，设置包含修改密码等

Abby/智能充电柜软件开发

简介

发行版

贡献者

近期动态

Abby/智能充电柜软件开发 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Abby/智能充电柜软件开发