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

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

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

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

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

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

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

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

第九节：我的页面制作

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

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

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

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

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

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

前言

成品图

核心思想

实现步骤

题外话

前言

在第九节我们制作了“我的”页面，在这一节我们将制作“活动历史”页面。在这个页面我们将展示“活动总结审核中”“已结束”两种状态的活动，也就是state值为3、4的活动。具体样式如下图所示。

“活动历史”的思维导图

成品图

核心思想

跟“我的”页面制作的思路基本一致，只是盒子的样式不同！

实现步骤

history.wxml：

<view class="container"><view class="userinfo"><view class="mine_application"><view class="mine_application_title">已经结束的活动</view><view class="mine_application_content" wx:for="{{list}}"><view class="event" bindtap="goDetail" data-id="{{item._id}}"> <view>活动名称：{{item.a1_huodongName}}</view><view class="eventTime"> 活动起始时间：{{item.a2_startTime}}</view></view><!-- 状态为4为活动总结报告已审批，3为已提交活动总结报告 --><block wx:if="{{item.state==3}}"><!-- 已通过 --><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"><view>活动总结审核中..</view></button></view></block><block wx:if="{{item.state==4}}"><!-- 活动报告已审批通过 --><view class="state_4"><view class="state_content">已结束</view></view><!-- 活动下方的小点 --><image src="../../icon/grey.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image></block></view></view></view>
</view>

history.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);}.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: 15px;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_content{position:relative;margin-top: 10px;margin-left: 10px;font-size:12;color:white;}.button_detail{background-color: white;color:#727885;}.next_location{width:150px;height:40px;position: absolute;z-index: 1;bottom: 0px;right: 0px;}.state_1{width: 80px;height: 40px;background-color:#43CF7C;border-radius: 0 15px 0 15px;z-index: 2;
}.state_content{position: relative;margin-top:10px ;margin-left: 15px;font-size: 12;color: white;}.state_4{float: right;width:80px;height:40px;background-color:#CCCCCC;border-radius:0 15px 0 15px;z-index: 2;flex-direction: row;position: relative;margin-left: 20px;}

history.js：

const db  = wx.cloud.database()
const app = getApp()
const _ = db.command
Page({data: {list:[],},//获取活动列表getList(){//调用云函数来获取用户openidwx.cloud.callFunction({name:'getData'}).then(res=>{console.log("用户openid",res.result.openid)db.collection("huoDong").where({//使用用户的openid来筛选活动_openid:res.result.openid,state:_.or(3,4)}).get().then(res=>{console.log('查询数据库成功',res.data)wx.stopPullDownRefresh()//将返回的res.data里面的值赋值给listthis.setData({list:res.data})})}).catch(err=>{console.log("请求云函数失败",err)})},onLoad() {wx.startPullDownRefresh()this.getList()},//监听下拉刷新onPullDownRefresh:function(){console.log('用户刷新了页面')//刷新页面数据this.getList()},//跳转活动详情页面goDetail(e){console.log("点击了详情页面,将展示活动的id ",e)wx.navigateTo({// 跳转到活动详情页面并携带活动idurl: '/pages/eventDetail/eventDetail?id=' +e.currentTarget.dataset.id })},
})

题外话

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

【免费开放源码】审批类小程序项目实战（活动历史页面）相关推荐

【免费开放源码】审批类小程序项目实战(活动审批端)
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...
【免费开放源码】审批类小程序项目实战（预约审批端）
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...
【免费开放源码】审批类小程序项目实战（活动申请页面）
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...
【免费开放源码】审批类小程序项目实战（IDE介绍篇）
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...
【免费开放源码】审批类小程序项目实战（预约历史页面）
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...
【免费开放源码】审批类小程序项目实战（我的页面）
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...
视频教程-微信小程序项目实战之我画你猜视频课程-微信开发
微信小程序项目实战之我画你猜视频课程精通PHP软件开发和WEB前端开发技术,熟悉PHP.Java.Javascript.HTML等语言,熟悉HTTP协议及W3C相关互联网规范,曾在山西某知名公司担任 ...
视频教程-微信小程序项目实战：电影购票系统-微信开发
微信小程序项目实战:电影购票系统东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过100 ...
视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...

【免费开放源码】审批类小程序项目实战（活动历史页面）

前言

成品图

核心思想

实现步骤

题外话

【免费开放源码】审批类小程序项目实战（活动历史页面）相关推荐

最新文章

热门文章