毕设作品网 | 一个免费分享计算机毕业设计作品的网站
当前位置: 系统源码 > 微信小程序停车场收费管理系统+后台管理系统(首页开发)

微信小程序停车场收费管理系统+后台管理系统(首页开发)

2022-06-20 08:06 分类:系统源码 作者:云诺 阅读(50)

这是我业余时间采用微信小程序开发的停车场收费管理系统,使用了微信小程序+后台管理系统的设计架构,小程序使用的是微信原生组件和Vant Weapp组件库,平常工作上使用微信小程序的技术点比较少,所以业余通过开发停车场收费管理系统来加强自己的学习能力,微信小程序系统已经开发完成,趁现在有时间就以博客的形式记录我的开发过程,下面介绍下微信小程序停车场收费管理系统首页开发开发的过程。

QQ截图20220620195214.jpg


微信小程序停车场收费管理首页WXML代码如下:

<!-- 顶部下拉选项 -->    
<view>    
<picker mode="selector" bindchange="bindPickerChange" range="{{parkingArray}}" range-key="{{'p_name'}}"    
value="{{index}}">    
<view>    
{{parkingArray[index].p_name}}    
<mp-icon type="field" icon="done" color="rgb(0, 0, 0)" size="{{21}}"></mp-icon>    
<!-- <mp-icon type="field" icon="more" color="black" size="{{23}}"sty></mp-icon> -->    
</view>    
</picker>    
</view>    
<!-- 滑块视图容器 -->    
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">    
<block wx:for="{{imgUrls}}">    
<swiper-item>    
<image src="{{item}}" width="355" height="150" />    
</swiper-item>    
</block>    
</swiper>    
<!-- 车牌号码输入框 -->    
<view>    
<view>请输入车牌号码    
</view>    
<!-- 车牌号头两位 -->    
<view>    
<!-- <view bindtap='openKeyboard'>    
<view class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</view>    
<view class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</view>    
</view> -->    
<view bindtap='openKeyboard'>{{carnum[0] || ''}}</view>    
<view bindtap='openKeyboard'>{{carnum[1] || ''}}</view>    
<!-- 车牌号后五位 -->    
<view bindtap='openKeyboard'>{{carnum[2] || ''}}</view>    
<view bindtap='openKeyboard'>{{carnum[3] || ''}}</view>    
<view bindtap='openKeyboard'>{{carnum[4] || ''}}</view>    
<view bindtap='openKeyboard'>{{carnum[5] || ''}}</view>    
<view bindtap='openKeyboard'>{{carnum[6] || ''}}</view>    
<!-- 新能源 -->    
<view class="carNumber-item {{showNewPower ? '': 'carNumber-item-newpower'}}">    
<view wx:if="{{!showNewPower}}">    
<view>新能源</view>    
</view>    
<view wx:if="{{showNewPower}}">{{carnum[7] || ''}}</view>    
</view>    
</view>    
</view>    
<!-- 确认提交车牌 -->    
<view>    
<van-button type="info" icon="add-o" color="#8B4C39" bindtap="showPowerBtn">    
<view wx:if="{{!showNewPower}}">{{carType[0]}}</view>    
<view wx:else>{{carType[1]}}</view>    
</van-button>    
<van-button type="primary" bindtap="submitNumber">查询</van-button>    
<mp-dialog title="提示" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}">    
<view>查询失败,请重新输入</view>    
</mp-dialog>    
</view>    
<!-- 扫码缴费 -->    
<view>    
<button form-type="submit" disabled="{{false}}" bindtap='saoma' style="width:80%">    
扫码缴费    
</button>    
</view>    
<!-- 虚拟键盘 -->    
<view hidden='{{!KeyboardState}}'>    
<view>    
<view bindtap='closeKeyboard'>关闭</view>    
</view>    
<!-- 省份简写键盘 -->    
<view hidden="{{carnum[0]}}">    
<view wx:for="{{provinces}}" wx:key="{{index}}">    
<view wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist"    
bindtap='bindChoose'>{{itemlist}}</view>    
</view>    
<view bindtap='bindDelChoose'>    
<text class="font_family icon-shanchu keyboard-del-font">清除</text>    
</view>    
</view>    
<!-- 车牌号码选择键盘 -->    
<view class="keyboard-item iscarnumber" hidden="{{!carnum[0]}}">    
<view wx:for="{{numbers}}" wx:key="{{index}}">    
<view wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist"    
bindtap='bindChoose'>{{itemlist}}</view>    
</view>    
<view bindtap='bindDelChoose'>    
<text class="font_family icon-shanchu keyboard-del-font">清除</text>    
</view>    
</view>    
</view>    
<van-toast id="van-toast" />

微信小程序停车场收费管理首页JS代码如下:

Page({    
/**    
   * 页面的初始数据    
   */    
data: {    
parkingArray: [],    
parkName: '路边停车场',    
index: 0,    
imgUrls: [    
'/images/parking1.jpg',    
'/images/parking2.jpg',    
'/images/parking3.jpg'    
],    
// 滑块视图:indicatorDots显示小圆点,autoplay自动播放,interval自动切换时间间隔,duration滑动动画时长    
indicatorDots: true,    
autoplay: true,    
interval: 5000,    
duration: 1000,    
// 省份输入    
provinces: [    
['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],    
['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],    
['桂', '琼', '渝', '川', '贵', '云', '藏'],    
['陕', '甘', '青', '宁', '新'],    
],    
// 车牌输入    
numbers: [    
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],    
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],    
["A", "S", "D", "F", "G", "H", "J", "K", "L", "港"],    
["Z", "X", "C", "V", "B", "N", "M", "澳"]    
],    
carnum: [],    
carNum: '',    
carType: ['切换新能源汽车', '切换普通汽车'],    
showNewPower: false,    
KeyboardState: false,    
showOneButtonDialog: false,    
oneButton: [{    
text: '确定'    
}]    
},    
// 停车场选项列表    
bindPickerChange: function (e) {    
// console.log('picker发送选择改变,携带值为', e.detail.value)    
this.setData({    
index: e.detail.value,    
parkName: this.data.parkingArray[e.detail.value].p_name    
})    
},    
// 扫码功能    
saoma() {    
// 允许从相机和相册扫码    
wx.scanCode({    
success(res) {    
console.log(res)    
}    
})    
},    
// 打开虚拟键盘    
openKeyboard() {    
this.setData({    
KeyboardState: true    
})    
},    
// 关闭虚拟键盘    
closeKeyboard() {    
this.setData({    
KeyboardState: false    
})    
},    
// 绑定输入号码    
bindChoose(e) {    
if (!this.data.carnum[6] || this.data.showNewPower) {    
var arr = [];    
arr[0] = e.target.dataset.val;    
this.data.carnum = this.data.carnum.concat(arr)    
this.setData({    
carnum: this.data.carnum    
})    
}    
},    
// 清除按钮    
bindDelChoose() {    
if (this.data.carnum.length != 0) {    
this.data.carnum.splice(this.data.carnum.length - 1, 1);    
this.setData({    
carnum: this.data.carnum    
})    
}    
}
)

微信小程序停车场收费管理首页WXSS代码如下:

page{    
/* background-color: rgb(172, 218, 236); */    
opacity: 0.75;    
background: -webkit-linear-gradient(top, #330033 0%,#CCCCCC 100%);    
background: -o-linear-gradient(top, #330033 0%,#CCCCCC 100%);    
background: -ms-linear-gradient(top, #330033 0%,#CCCCCC  100%);    
/* background: linear-gradient(to bottom, #0099ffde 0%,#68d3db 100%); */    
background: linear-gradient(to bottom, #e8e9d7de 0%,#f0efa8 100%);    
}    
/* .page{    
background: #fff;    
position: absolute;    
top:0;    
bottom:0;    
width: 100%;    
} */    
/* 顶部下拉选项 */    
.picker_items {    
display: flex;    
justify-content: center;    
height: 80rpx;    
align-items: center;    
font-size: 105%;    
font-weight: bolder;    
font-family: "宋体";    
color: rgb(0, 0, 0);    
}    
/* icon图标 */    
.icon_done {    
display: block;    
box-sizing: border-box;    
width: 45rpx;    
height: 65rpx;    
}    
.icon_more {    
display: block;    
width: 60rpx;    
height: 90rpx;    
}    
/* 滑块视图容器 */    
swiper {    
width: 700rpx;    
height: 300rpx;    
margin: 0 auto;    
padding-top: 24rpx;    
}    
/* 滑块视图容器-图片 */    
.slide-image {    
display: block;    
width: 100%;    
height: 100%;    
border-radius: 18rpx;    
}    
/* 车牌号标题 */    
.carNumber_title {    
margin-top: 10px;    
margin-bottom: 10px;    
color: rgb(44, 3, 110);    
font-size: 17px;    
display: flex;    
justify-content: center;    
}    
/* 车牌号码 */    
.carNumber-items {    
text-align: center;    
border-radius: 25%;    
}    
/* 数字键盘-省份列表 */    
.carNumber-items-box {    
width: 158rpx;    
height: 90rpx;    
border: 2rpx solid #CCCCCC;    
border-radius: 4rpx;    
display: inline-block;    
vertical-align: middle;    
position: relative;    
margin-right: 30rpx;    
}    
.carNumber-items-province {    
border-right: 1rpx solid #ccc;    
}    
.carNumber-items-box-list {    
width: 76rpx;    
height: 70rpx;    
line-height: 70rpx;    
text-align: center;    
display: inline-block;    
font-size: 18px;    
margin: 10rpx 0;    
vertical-align: middle;    
}    
/* 虚拟键盘-新能源 */    
.carNumber-items-box::after {    
content: "";    
width: 6rpx;    
height: 6rpx;    
position: absolute;    
right: -22rpx;    
top: 40rpx;    
border-radius: 50%;    
background-color: #ccc;    
}    
/* 虚拟键盘-车牌号后五位 */    
.carNumber-item {    
width: 76rpx;    
height: 90rpx;    
font-size: 18px;    
text-align: center;    
border: 2rpx solid #CCCCCC;    
border-radius: 20rpx;    
line-height: 90rpx;    
display: inline-block;    
margin: 0 4rpx;    
vertical-align: middle;    
}

具体实现细节,大家可以扫下面小程序二维码自己下载学习,第一次分享,不喜勿喷!!

 

祝生活愉快!

「一个免费分享计算机毕业设计资源的网站」

点赞(82) 下载资源

微信&QQ扫码免费下载毕业设计资源

QQ小程序
微信小程序
下载资源 1

微信&QQ扫码免费下载毕业设计资源

QQ小程序
微信小程序

相关推荐

共有 0 条评论 - 微信小程序停车场收费管理系统+后台管理系统(首页开发)

关于毕设作品网

本人也是计算机软件大学毕业生,经历过痛苦的毕业设计过程,从选题、开题、编码、创写论文到答辩结束,呕心沥血!为了让学弟学妹在毕设方面少走弯路, 遂成立了这个免费资源分享网站。毕设资源网始终的宗旨是通过阅读、参考、研究、实践后完成自己的毕业设计作品。

友情链接

欢迎大家于本站交换友链,只要网站内容充实,站点跟本站的内容相似就行啦!

站点统计

  • 文章总数:45 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:55 个
  • 评论总数:0 条
  • 访问总量: 3820次
  • 最近更新:2022年10月02日