【免费开放源码】审批类小程序项目实战（我的页面）

第一节：什么构成了微信小程序、创建一个自己的小程序

第二节：微信开发者工具使用教程

第三节：深入了解并掌握小程序核心组件

第四节：初始化云函数和数据库

第五节：云数据库的增删改查

第六节：项目大纲以及制作登录、注册页面

第七节：制作活动申请页面

第八节：活动申请页面的补充

第九节    ”我的“页面制作

第十节：活动详情页面制作

第十一节：活动历史页面制作

第十二节：预约老师页面制作

第十三节：预约历史页面制作

第十四节：活动审批端制作

第十五节：预约审批端制作

前言

        在第八节的结尾我们得知，一个活动有多个状态的值，这一节我们将制作“我的”页面，在这个页面我们会展示自己申请全部活动，并且根据每个状态制作其不同的样式。如下图

 

”我的“页面的思维导图（这节我们不实现第三点的功能）

知道了大概的内容，那么我们现在开始吧~ 

---

成品图

注：这里只显示自己申请的活动，若有多个自己申请的活动，那么盒子将会从上到下依次排列

---

核心思想

1.页面一运行就调用云函数来获取用户的openid

2.请求查询数据库里的记录，利用获取的openid来进行筛选

3.请求到符合条件的数据通过this.setData方法赋给data中的一个空数组

4.在wxml中通过wx：for对其数组进行列表渲染

5.使用wx：if配合state的值进行条件渲染

---

实现步骤 

WXML：

如果前面已经对所有记录进行了列表渲染，那么在后面调用每个记录的单个属性值则可用item._属性的格式。

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <!-- 活动 -->
    <view class="mine_application">
    <!-- 活动标题 -->
       <view class="mine_application_title">
       我发起的活动<image src="../../icon/backaround.png" style="width: 40px; height: 40px;position: relative; left: 140px; top: 7px;" bindtap="back"></image>
      </view>
      <block wx:for="{{infor}}"></block>
      <!-- 活动内容 点击可跳转至详情页面 -->
      <view class="mine_application_content" wx:for="{{imfor}}" >
              <view class="event" bindtap="goDetail" data-id="{{item._id}}">
                     <view class="">活动名称：{{item.a1_huodongName}}</view>
                     <view class="eventTime">活动开始时间：{{item.a2_startTime}}</view>
              </view>
              <!-- 右上角的状态栏 -->
              <!-- 用条件渲染来展示多种样式的活动内容 -->
              <!-- 状态为3代表已结束，2为已驳回，1为已通过，0为审核中 -->
              <block wx:if="{{item.state==0}}">
              <!-- 审核中 -->
              <view class="state_0">
              <view class="state_content">审核中</view>
              </view>
              <!-- 活动下方的小点 -->
              <image src="../../icon/yellow.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
              </block>

              <block wx:if="{{item.state==1}}">
              <!-- 已通过 -->
              <view class="state_1">
              <view class="state_content">已通过</view>
              </view>
              <!-- 活动下方的小点 -->
              <image src="../../icon/green.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
              <view class="next_location" >
              <button class="button_detail" size="mini" bindtap="" data-id="{{item._id}}">活动总结 >
              </button>
              </view>
              </block>
              
              <block wx:if="{{item.state==2}}">
              <!-- 已驳回 -->
              <view class="state_2">
              <view class="state_content">已驳回</view>
              </view>
              <!-- 活动下方的小点 -->
              <image src="../../icon/red.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
              <view class="reject_location">
              <button class="button_detail" size="mini" bindtap="" data-id="{{item._id}}">驳回详情 >
              </button>
              </view>
              </block>
      </view>
    </view>
  </view>
</view>

WXSS：

    
.button_location{
       border-radius: 80rpx;
       margin-top: 55%;
       color:#FFFFFF;
       background-color: #D43030;
       box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);

   }
   .Teacherbutton_location{
     margin-top: 10px;
     border-radius: 80rpx;
     color:black;
     background-color: #FFFFFF;
     box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);

  }
   .mine_application{
     margin-left: 15px;
     margin-right: 15px;
   }
   .mine_application_title{
     border-bottom: 5rpx solid #A6A6A6;
     font-size: 28px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }

   .mine_application_content{
          height: 150px;
          width: 100%;
          display: flex;
          position: relative;
          box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.1);
          margin-top: 20px;
          border-radius: 15px;

   }
   .event{
          font-size: 20px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          position: relative;
          margin:15px;
          width: 90%;
          flex: 1;
   }
   .eventTime{
          margin-top: 5px;
          font-size: 14px;
          color: #A0A9BD;
   }
   .state_0{
          float: right;
          width: 80px;
          height: 40px;
          background-color:#FFC300;
          border-radius: 0 15px 0 15px;
   }
   .state_1{
         width: 80px;
         height: 40px;
         background-color:#43CF7C;
         border-radius: 0 15px 0 15px;
         z-index: 2;
   }
   .state_2{
     width: 80px;
     height: 40px;
     background-color:#FF5733;
     border-radius: 0 15px 0 15px;
     z-index: 2;
   }
   .state_content{
          position: relative;
          margin-top:10px ;
          margin-left: 15px;
          font-size: 12;
          color: white;
   }
   .button_detail{
     background-color: white;
     color:#727885;
   }
   .next_location{
     width:110px;
     height:40px;
     position: absolute;
     z-index: 1;
     bottom: 0px;
     right: 0px;
}
   .reject_location{
     width:110px;
     height:40px;
     position: absolute;
     z-index: 1;
     bottom: 0px;
     right: 0px;
   }

JS：

在这里通过调用了getData云函数来获取用户id跟注册页面同理，同时利用了where多重查询的条件，只查询了第一次待审批，已通过、已驳回状态的活动（利用了command）

const db  = wx.cloud.database()
const app = getApp()
const _ = db.command
Page({
       data: {
         list:[],
         imfor:[],
         
       },
       //获取活动列表
       getList(){
              //调用云函数来获取用户openid
              wx.cloud.callFunction({
                     name:'getData'
              })
                     .then(res=>{
                            console.log("用户openid",res.result.openid)
                            db.collection("huoDong")
                            .where({
                                   //使用用户的openid来筛选活动
                                 _openid:res.result.openid,
                            //      使用state的值来筛选活动，过滤掉已结束的活动
                                   state: _.lt(3)
                            })
                            .get()
                            .then(res=>{
                                   console.log('查询数据库成功',res.data)
                                   //将返回的res.data里面的值赋值给list
                                   this.setData({
                                          imfor :res.data,
                                   })
                                   wx.stopPullDownRefresh()
                                   console.log("结束刷新")
                            })
                     })
                     .catch(err=>{
                            console.log("请求云函数失败",err)
                     })
       },
       onLoad() {
       // 启动的时候自动刷新页面
       wx.startPullDownRefresh()
       this.getList()
       },

       //监听下拉刷新
       onPullDownRefresh:function(){
              console.log('用户刷新了页面')
              //刷新页面数据
              this.getList()
       },

       //返回首页并退出登录
       back(){
              console.log("点击了返回")
              wx.showModal({
                     title: '退出登录并返回主页',
                     content: '您确定退出用户端吗？',
                     success (res) {
                     if (res.confirm) {
                            wx.redirectTo({
                                   url: '../choicePage/choicePage',
                                 })
                     } else if (res.cancel) {
                     console.log('用户点击取消')
                     }
                     }
              })
       }
})

     
   

---

题外话

这一系列文章会持续更新，手把手教你从零创建一个小程序项目！并且免费提供源码。如果有什么疑问欢迎大家在底下留言讨论！你的赞和收藏是我最大的动力！！