【原创】适合零基础-微信小程序开发之预约小程序-图书馆预约

最新推荐文章于 2024-05-29 11:53:59 发布
最新推荐文章于 2024-05-29 11:53:59 发布
阅读量3.2k 收藏 89
点赞数 11
分类专栏： 微信小程序 文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54803288/article/details/121443900
版权

实现这个小程序分三个步骤（不是云开发）使用语言JavaScript语言。

第一步骤：

首页

 代码：

App.json

{
  "pages": [ 
    "pages/index/index",
    "pages/yuyue/index", 
    "pages/user/index",
    "pages/login/index",
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "预约须知",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/yuyue/index",
        "text": "预约",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },
  
    
  "sitemapLocation": "sitemap.json"
}

index.wxml   主要实现轮播图和文字的效果（包可根据第一个代码的包建）

<!--index.wxml-->
<view class="index">
    <!--轮播图-->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for-items="{{lunboData}}">
      <swiper-item>
        <image src="{{item.imgurl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>




<text>

<text class="Go">【预约须知】</text>
1.图书馆现实行预约制,请同学提前通过图书馆微信小程序进行预约。每日19:00停止预约。
<text class="Go">2.疫情期间,开馆时间为8:00-21:00,法定节假日除外。</text>
3.疫情期间,每日同时在馆人数上限为300人。当馆内人数临近人数上限时,我馆将视情况采取限流措施。
4.一个微信号最多可预约1人。
<text class="Go">5.微信公众号预约目前仅支持校园卡，学生证及手机号实名认证,请务必填写真实有效信息。</text>
6.疫情期间,进馆时请全程正确佩戴口罩。
7.如有疑问请去图书馆一楼服务台咨询，感谢配合！

</text>
<view class="shuoming">
    <view class="shuoming_biaoti">预约订座使用说明</view>
    <view class="shuoming_xiangmu">1：需要登录，可提前预约4天</view>
    <view class="shuoming_xiangmu">2：先选定日期，然后选类型，选座位</view>
    <view class="shuoming_xiangmu">3：填写预约人的姓名和联系方式，然后按“提交座位预约”按扭即可。</view>
</view>
<navigator class="yuyue" url="/pages/dingzuo/index"  open-type='switchTab' >
    我要预约座位
</navigator>
</view>

index.js-引用图片数据

//index.js
Page({
  data: {
    //轮播图配置
    autoplay: true,
    interval: 3000,
    duration: 1200
  },
  onLoad: function () {
    var that = this; 
    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../image/G1.jpg"
        },
        {
          "id": 2,
          "imgurl": "../../image/G2.jpg"
        },
        {
          "id": 3,
          "imgurl": "../../image/G3.jpg"
        },
      
      ]
    }; 
    that.setData({
      lunboData: data.datas
    })
  }
})

第二步：

预约

代码：

yuyue/index.wxml

<!--pages/yuyue/index.wxml-->
<view class="jiaoshi">
    <view class="jiaoshi_list">图书馆一楼</view>
    <view class="jiaoshi_list jiaoshi_xuanzhong">图书馆二楼</view>
    <view class="jiaoshi_list">图书馆三楼</view>
    <view class="jiaoshi_list">图书馆四楼</view>
  
</view>


<view class="tishi">
    当前信息：图书馆二楼 | 2021-11-20 星期六
</view>



<view class="yuyue">
    <view  class="yuyue_xiangmu biaoti">
        <view class="yuyue_xiangmu1">时间</view>
        <view class="yuyue_xiangmu2">日期</view>
        <view class="yuyue_xiangmu3">操作</view>
        <view class="yuyue_xiangmu4">星期</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">8:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view>
        <view class="yuyue_xiangmu4">星期六</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">9:00</view>
        <view class="yuyue_xiangmu2 yuyue_guoqi">11-20</view>
        <view class="yuyue_xiangmu3 yuyue_yes">
           
            <view>预约成功</view>
        </view> 
        <view class="yuyue_xiangmu4">星期六</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">10:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view>
        <view class="yuyue_xiangmu4">星期六</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">11:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
         <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view>
        <view class="yuyue_xiangmu4">星期六</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">12:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view>
        <view class="yuyue_xiangmu4">星期六</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">13:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
         <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view>
        <view class="yuyue_xiangmu4">星期六</view>
    </view>       
    <view class="h10"></view>

    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">14:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> 
        <view class="yuyue_xiangmu4">星期六</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">15:00</view>
        <view class="yuyue_xiangmu2 yuyue_yes">11-20</view>
        <view class="yuyue_xiangmu3 yuyue_yes">
          
            <view>预约成功</view>
        </view> 
        <view class="yuyue_xiangmu4">星期六</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">16:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> 
        <view class="yuyue_xiangmu4">星期六</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">17:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> 
        <view class="yuyue_xiangmu4">星期六</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">18:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> 
        <view class="yuyue_xiangmu4">星期六</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">19:00</view>
        <view class="yuyue_xiangmu2">11-20</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> 
        <view class="yuyue_xiangmu4">星期六</view>
    </view> 
    <view class="h10"></view>
</view>

yuyue/index.wxss

/* pages/yuyue/index.wxss */
.jiaoshi{
  display: flex; 
  flex-wrap: wrap;
  border-bottom: 3px solid orangered;
}
.jiaoshi_list{
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  background-color: gainsboro;
  border-radius: 5px;
  border:3px solid white;
}
.jiaoshi_xuanzhong{
  background-color: orangered;
  color: white;
}

.tishi{
  padding: 5px;
  background-color: #f3f3f3;
  font-size: 12px;
  border-bottom: 3px solid orangered;
}

.yuyue{
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.yuyue_xiangmu{
  display: flex;
  padding: 5px;
  border-bottom: 1px solid gainsboro;
}
.yuyue_xiangmu1{
  padding: 5px;
  width: 20%;
  border-right: 1px solid gainsboro;
}
.yuyue_xiangmu2{
  padding: 5px;
  width: 20%;
  border-right: 1px solid gainsboro;
}
.yuyue_xiangmu3{
  padding: 5px;
  width: 40%;
  border-right: 1px solid gainsboro;
}
.yuyue_xiangmu4{
  padding: 5px;
  width: 20%;
}
.yuyue_guoqi{
  text-decoration: line-through;
  color: red;
}
.yuyue_yes{
  color:green;
  font-weight: bold;
}.biaoti{
  font-weight: bold;
}
.h10{ height: 10px; background-color: #f3f3f3;}

第三步

个人中心

代码:

user.wxml-实现个人登录

 


<view class="user_info_wrap">
  <view wx:if="{{userinfo.avatarUrl}}" class="user_img_wrap">
    <image class="user_bg" src="{{userinfo.avatarUrl}}" ></image>
    <view class="user_info">
      <image class="user_icon" src="{{userinfo.avatarUrl}}"></image>
      <view class="user_name">{{userinfo.nickName}}</view>
    </view>
  </view>
  <view wx:else class="user_btn">
    <navigator url="/pages/login/index" >登录</navigator>
  </view>
</view>
<view class="user_content">
  
  <view class="user_main">
    <!-- 历史足迹 -->
    <view class="history_wrap">
      <navigator>
       
      </navigator>
      <navigator url="/pages/collect/index">
        <view class="his_num"></view>
        <view class="his_name"></view>
      </navigator>
      <navigator>
        <view class="his_num"></view>
        <view class="his_name"></view>
      </navigator>
      <navigator>
        <view class="his_num"></view>
        <view class="his_name"></view>
      </navigator>
    </view>
    <!-- 我的订单 -->
    <view class="orders_wrap">
      <view class="orders_title">我的预约</view>
      <view class="order_content">
        <navigator url="/pages/order/index?type=1">
          <view class="iconfont icon-ding_dan"></view>
          <view class="order_name">预约信息</view>
        </navigator>
        <navigator url="/pages/order/index?type=2">
          <view class="iconfont icon-fukuantongzhi"></view>
          <view class="order_name">预约时间</view>
        </navigator>
        <navigator url="/pages/order/index?type=3">
          <view class="iconfont icon-receipt-address"></view>
          <view class="order_name">预约地点</view>
        </navigator>
        <navigator>
          <view class="iconfont icon-tuihuotuikuan_dianpu"></view>
          <view class="order_name">预约退订</view>
        </navigator>
      </view>
    </view>
    <!-- 收货地址管理 -->
    <view class="address_wrap">
      住址管理
    </view>
    <!-- 应用信息相关 -->
    <view class="app_info_wrap">
      <view class="app_info_item app_info_contact">
        <text>联系客服</text>
        <text>400-618-4000</text>
      </view>
      <navigator url="/pages/feedback/index" class="app_info_item">意见反馈</navigator>
      <view class="app_info_item">关于我们</view>
    </view>
    <!-- 推荐 -->
    <view class="recommend_wrap">
      把应用推荐给其他人
    </view>
  </view>
</view>

user/index.wxss

page {
  background-color: #edece8;
}
.user_info_wrap {
  height: 45vh;
  overflow: hidden;
  background-color: var(--themeColor);
  position: relative;
}
.user_info_wrap .user_img_wrap {
  position: relative;
}
.user_info_wrap .user_img_wrap .user_bg {
  height: 50vh;
  filter: blur(10rpx);
}
.user_info_wrap .user_img_wrap .user_info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  text-align: center;
}
.user_info_wrap .user_img_wrap .user_info .user_icon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.user_info_wrap .user_img_wrap .user_info .user_name {
  color: #fff;
  margin-top: 40rpx;
}
.user_info_wrap .user_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40%;
  border: 1rpx solid greenyellow;
  color: greenyellow;
  font-size: 38rpx;
  padding: 30rpx;
  border-radius: 10rpx;
}
.user_content {
  position: relative;
}
.user_content .user_main {
  padding-bottom: 100rpx;
  color: #666;
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  top: -40rpx;
}
.user_content .user_main .history_wrap {
  background-color: #fff;
  display: flex;
}
.user_content .user_main .history_wrap navigator {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
}
.user_content .user_main .history_wrap navigator .his_num {
  color: var(--themeColor);
}
.user_content .user_main .orders_wrap {
  background-color: #fff;
  margin-top: 30rpx;
}
.user_content .user_main .orders_wrap .orders_title {
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}
.user_content .user_main .orders_wrap .order_content {
  display: flex;
}
.user_content .user_main .orders_wrap .order_content navigator {
  padding: 15rpx 0;
  flex: 1;
  text-align: center;
}
.user_content .user_main .orders_wrap .order_content navigator .iconfont {
  color: var(--themeColor);
  font-size: 40rpx;
}
.user_content .user_main .address_wrap {
  margin-top: 30rpx;
  background-color: #fff;
  padding: 20rpx ;
}
.user_content .user_main .app_info_wrap {
  margin-top: 30rpx;
  background-color: #fff;
}
.user_content .user_main .app_info_wrap .app_info_item {
  padding: 20rpx ;
  border-bottom: 1rpx solid #ccc;
}
.user_content .user_main .app_info_wrap .app_info_contact {
  display: flex;
  justify-content: space-between;
}
.user_content .user_main .recommend_wrap {
  margin-top: 30rpx;
  background-color: #fff;
  padding: 20rpx ;
}

这篇文章关于小程序的实现就分享到这里，供大家交流学习参考！

关于部分二级菜单实现下一篇文章再分享。

小绵羊Do
关注
  • 11
    点赞
  • 踩
  • 89
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
使用微信小程序开发制作一个简易的在线预约应用
m0_72166538的博客
03-14 192
下面是一个简单的在线预约应用的代码案例，包含用户注册登录、查看、预约和取消预约等功能。通过以上代码案例，我们可以实现一个简易的在线预约应用。首先，我们需要设计小程序的界面，包括登录、注册、预约和查看预约等页面。可以使用微信小程序提供的WXML和WXSS进行界面的布局和样式的设定。用户登录后，可以浏览可供预约的服务列表，并选择合适的服务进行预约。可以使用微信提供的开放接口实现基本的用户账号和密码的管理。用户可以查看自己已经预约的服务和预约详情。可以使用微信小程序提供的交互组件和事件绑定实现取消预约的功能。
自已写的 自习室预约小程序微信
12-26
自习室预约小程序微信，实现了前台轮播 分类 自习室查看 在线预约 时间选择等。
微信自动预约小程序开发指南：从小白到专家
lin13600956163的博客
02-05 1639
在小程序模板的基础上，根据业务需要，添加所需的功能模块。选好模板后，你可以开始编辑模板页面中的内容，包括图片、文字内容、功能模块等。你可以根据实际需求，替换图片和文字内容，使小程序更符合你的业务需求。在【设计小程序】的模块中，点击【更换模板】以选择适合你需求的小程序模板。你可以根据模板的预览效果，以及模板的描述来找到最适合你的模板。在平台上注册并登录你的账户，以开始你的开发之旅。在页面的设计中，你可以设置一些控件，如导航、分享、客服等。在此处，你可以找到【轻应用小程序】的选项，点击以进入设计小程序页面。
微信小程序源码-图书馆自习室座位预约管理系统的计算机毕业设计(附演示视频+源码+LW)
2301_76953549的博客
05-29 731
而将成为社会公用信息，本系统包含了2个学生，即管理员和学生管理员权限主要实现了管理员服务端；首页、个人中心、学生管理、座位信息管理、自习室分类管理、座位预约管理、学院分类管理、专业分类管理、留言板管理、系统管理，学生微信端；首页、座位信息、座位预约、我的等功能，基本上实现了整个图书馆自习室座位预约小程序信息管理的过程。本系统在一般图书馆自习室座位预约的基础上增加了最新信息的功能方便学生快速浏览，是一个高效的、动态的、相互友好的图书馆自习室座位预约小程序。
微信预约小程序制作教程：五步搭建高效预约服务平台
lin13600956163的博客
09-15 365
你还可以对页面的布局和背景进行修改，以满足你的具体需求。记住，这是一个不断改进和学习的过程，所以不要害怕犯错误，只有通过实践，你才能不断进步。在当今的数字化时代，微信小程序已经成为一种全新的应用形式，它方便快捷，易于操作，深受用户喜爱。最后，当你对小程序进行了所有必要的修改后，点击【预览】按钮，预览你的小程序。在乔拓云网的设计小程序页面中，你可以看到许多预制的模板。在操作后台，你可以创建和管理你的小程序。登录后，进入乔拓云网的后台管理页面，在【轻应用小程序】中点击【去管理】，即可进入设计小程序页面。
【原创】基于SSM的医院预约挂号系统(医院预约挂号系统毕设源代码)
那条学长的博客
08-31 6135
项目介绍：后端采用SSM。前端使用的是Bootstrap的一个网站模板。通过3种角色使用。包括了核酸检测预约、普通门诊预约、挂号、接诊等多个不同的模块。
基于微信小程序的图书馆选座系统源码
wfuhui的博客
09-04 2253
大等于jdk1.8，大于mysql5.5，idea（eclipse），微信开发者工具。代码注释齐全，没有多余代码，适合学习（毕设），二次开发，包含论文技术相关文档。首页显示搜索房间，轮播图，公告信息（点击查看详情），房间列表。点击房间进入详情，点击日期跳转到选座界面，选择座位提交即可。个人中心显示我的信息（可编辑），我的预约（包含取消，完成）统计分析：查看用户，图书馆，订单数量；springboot mybatis 小程序。用户管理：查看注册用户信息，及删除。登录注册（含授权登录）房间管理：房间增删改查。
基于微信小程序图书馆座位预约系统设计与实现
03-04
【微信小程序图书馆座位预约系统设计与实现】 随着信息化时代的快速发展，图书馆作为知识的集散地，其服务方式也需要不断更新以满足用户日益增长的需求。传统的图书馆座位管理模式已无法适应现代高校师生的学习需求...
微信小程序-基于微信小程序的图书馆座位预约系统设计与实现（包括源码，数据库）.zip
最新发布
06-11
微信小程序-基于微信小程序的图书馆座位预约系统设计与实现（包括源码，数据库）.zip个人经导师指导并认可通过的高分设计项目，评审分98分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，...
基于微信小程序图书馆座位预约系统设计与实现 word可编辑.docx
04-04
1.3 从可行性角度分析小程序 2 1.3.1 技术可行性 2 1.3.2 经济可行性 3 1.3.3 社会可行性 3 1.4 章节小结 3 第2章 系统主要技术和语言介绍 4 2.1 微信开发者工具 4 2.2 Javascript介绍 4 2.3 Eclipse介绍 5 2.4 SSM...
毕设项目-图书馆座位预约微信小程序
03-28
“图书馆预约”是为了解决图书馆占座问题的预约性工具型小程序。用户只能在规定时间内预约当天座位，并需要按时签到/签退。如违纪，则该用户预约功能禁用1天。 目标用户： 去图书馆自习室的学生/社会人 开发思路...
驾校预约小程序
07-27
这是一个驾校预约小程序,主体功能是支付和预约,预约分时间段预约,接口有后台提供
微信小程序-家政预约微信小程序源代码
06-01
微信小程序--会议室预约、图书借阅
01-08
用微信开发者工具开发微信小程序，实现学院的各楼层会议室预约以及图书借阅，预约审核功能，简便办公流程，提高工作效率
微信小程序Demo：小程序教育类模板（课程预约）
07-12
微信小程序Demo：小程序教育类模板（课程预约）
微信小程序《图书馆》源码下载
02-03
实现图书馆搜书功能，来自 http://bbs.html51.com/t-264-1-1/
计算机毕业设计-微信小程序的图书馆座位预约_kci+项目源代码.rar
04-18
**项目名称：微信小程序的图书馆座位预约系统（kci+）** **功能介绍：** 本微信小程序旨在为图书馆读者提供一个便捷、高效的座位预约平台。通过该系统，读者可实时查看图书馆各阅览室的座位使用情况，并轻松预约...
图书馆预约微信小程序-day1
LiuNano的博客
03-14 3004
day 1 基本准备 视频地址：云开发开发图书馆预约小程序-day1_哔哩哔哩_bilibili 工欲善其事，必先利其器 基本准备: 注册微信小程序 注册成功后登录小程序后台管理页面，在开发设置中查看AppID（小程序ID）。 安装开发者工具稳定版 Stable Build | 微信开放文档 创建新的项目，初始化云开发项目 开通云开发，创建环境。 系统功能结构图： 我们首先先了解一下小程序的页面组成，在每一个页面中文件夹中都有四个文件他们分别为json文件，wxml文件，wxss文件，
公园预约小程序前后端完整代码，包括公园动态，公园简介，入园预约，停车预约等功能，基于腾讯小程序云开发，无须服务器和域名
Python代码大全
12-22 357
公园预约小程序前后端完整代码，包括公园动态，公园简介，入园预约，停车预约等功能，采用腾讯提供的小程序云开发解决方案，无须服务器和域名。由于入园市民、游客较多，为更好保障疫情防控和游客游园安全，公园可以采取网上小程序预约方式控制入园游客在可容峰值内，从而方面管理者和广大市民合理安排时间，错峰出行。预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项预约凭证：支持线下到场后校验签到/核销/二维码自助签到等多种方式详尽的预约数据：支持预约名单数据导出Excel， 打印。
微信小程序实现的图书馆预约系统
"微信小程序的图书馆预约系统设计与实现" 近年来，图书馆作为知识的宝库，对个人提升自我、获取信息起着至关重要的作用。然而，随着图书馆开放度的提高，座位资源紧张的问题日益凸显，特别是在考试高峰期，图书馆的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值