【免费开放源码】审批类小程序项目实战(预约历史页面)

news2024/9/23 5:28:44

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

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

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

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

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

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

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

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

第九节:我的页面制作

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

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

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

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

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

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

目录

前言

成品图

核心思想

实现步骤 

history2.wxml:

history2.wxss:

history2.js:

题外话


前言

        上一节我们完成了预约老师页面的制作,这一节我们将制作与之相关的预约历史页面,该页面与活动历史的制作基本上是一样的,除了个别样式不同和状态state值的范围不同。那我们现在开始吧~预告!下节我们将开始制作审批端


成品图


核心思想

与活动历史页面制作的思想基本一致,在这不再赘述,以下仅列写出不同点。

1.预约的state值只有0、1、2三种值,分别对应待审批、已通过、已驳回

2.待审批的预约盒子样式底部有提示字段


实现步骤 

history2.wxml:

<view class="container">
  <view class="userinfo">
              <view class="mine_application">
                     <view class="mine_application_title">
                            历史预约
                            <view class="comment">(仅保留两天以内的数据)</view>
                     </view>
                            
                     <view class="mine_application_content" wx:for="{{list}}">
                            <view class="event" bindtap="goDetail" data-id="{{item._id}}"> 
                                   <view class="appointmentTime">{{item.appointment}}</view>
                                   <view class="appointmentInstitute">预约组织:{{item.g1_orderInstitute}}</view>
                                   <view class='appointmentTeacher'>预约老师:{{item.g1_orderTeacher}}</view>
                                   <view class="time">{{item.time}}</view>
                                   <!-- 只有已驳回才显示 -->
                                   <block wx:if="{{item.state==2}}">
                                          <view class="rejectReason">驳回理由:{{item.rejectReason}}</view>
                                   </block>
                                   
                            </view>       
                <!-- 状态为1为预约已通过,2为预约已驳回 -->
                <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>
                            <text style="width: 140px; height: 17px;position: absolute;left: 55px;bottom: 15px;">小组手正在审核中..</text>
                     </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>
                     </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>
                     </block>
                     </view>
              </view>
  </view>
</view>

history2.wxss:

.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: 250px;
            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;
     }
     .appointmentTime{
            margin-top: 0px;
            font-size: 16px;
            color: black;
     }
       .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;
              flex-direction: row;
              position: relative;
              margin-left: 20px;
       }
       .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;
     }
    .appointmentInstitute{

         font-size: 20px;
         color:#FF5733;
         margin-top: 10px;
    }
    .appointmentTeacher{

       font-size: 20px;
       color:#611504;
       margin-top: 10px;
  }
  .time{
       margin-top: 10px;
       font-size: 18px;
       color: #A0A9BD;
  }
  .pass{
       float: left;
       border-radius: 80rpx;
       margin-top: 2%;
       color:#FFFFFF;
       background-color: #D43030;
       box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
         
  }
  .reject{
       border-radius: 40rpx;
       margin-top: 2%;
       color:#FFFFFF;
       background-color: #D43030;
       box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
       float: left;
  }

.comment{
       font-size: 13px;
       float: right;
       margin-top: 16px;
       color: red;
}

   

history2.js:

const db  = wx.cloud.database()
const app = getApp()
Page({
       data: {
         list:[],
       },
       //获取活动列表
       getList(){
              //调用云函数来获取用户openid
              wx.cloud.callFunction({
                     name:'getData'
              })
                     .then(res=>{
                            console.log("用户openid",res.result.openid)
                            db.collection("appointment")
                            .where({
                                   //使用用户的openid来筛选活动
                                 _openid:res.result.openid,
                            })
                            .get()
                            .then(res=>{
                                   console.log('查询数据库成功',res.data)
                                   wx.stopPullDownRefresh()
                                   //将返回的res.data里面的值赋值给list
                                   this.setData({
                                          list:res.data
                                   })
                            })
                     })
                     .catch(err=>{
                            console.log("请求云函数失败",err)
                     })
       },
       onLoad() {
       wx.startPullDownRefresh()
       this.getList()
       },

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

题外话

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/133464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue与React分别实现登录拦截【详细例子+讲解】

文章标题一、Vue实现登录拦截1-1、 效果展示1-2 代码展示1-2-1 router.js1-2-2 store文件夹下1-2-2-1 state.js1-2-2-2 index.js1-2-2-3 mutation.js1-2-3 main.js【实现登录拦截的关键---全局路由守卫】1-2-4 pages下的login.vue1-3 总结二、 Vue项目功能简介2-1 功能2-2 查看…

基于RBAC模型的权限控制的一整套基础开发平台,前后端分离,后端django,前端 vue+ElementUI

Django-Vue-Admin 完整代码下载地址&#xff1a;基于RBAC模型的权限控制的一整套基础开发平台 &#x1f4a1; 「关于」 我们是一群热爱代码的青年&#xff0c;在这个炙热的时代下&#xff0c;我们希望静下心来通过Code带来一点我们的色彩和颜色。 因为热爱&#xff0c;所以…

TensorFlow之过拟合与欠拟合-1

1 基本概念 过度拟合&#xff08;overfit&#xff09; 创建的模型与用于该模型的训练数据之间发生过于密切的关系&#xff0c;从而引起该模型无法对新数据进行准确的预测。正则化&#xff08;Regularization&#xff09;策略可以减少过度拟合&#xff0c;或者使用大数据量、多…

考研数学660刷题记录

&#x1f422;&#x1f422; 基本概念-基本理论-基本方法 &#x1f422;&#x1f422; 660刷题记录 二轮复刷标志 ⭐&#xff1a;掌握不熟练 ⭐⭐&#xff1a;是基本方法的组合&#xff0c;但没解出来 ⭐⭐⭐&#xff1a;很难想到这种破局的手段 序号①、②&#xff1a;表示多…

【阶段一】Python快速入门02篇:数据结构-列表

本篇的思维导图: 数据结构-列表 列表的概念 列表(list)是用来存储一组有序数据元素的数据结构,元素之间用逗号分隔。列表中的数据元素应该包括在方括号中,而且列表是可变的数据类型,一旦创建了一个列表,你可以添加、删除或者搜索列表中的元素。在方括号中的数据可以是 i…

小程序:会议OA其他页面

目录 会议管理 一&#xff0c;自定义tabs组件 二&#xff0c;会议管理 父子组件传参演示 个人中心 会议管理 一&#xff0c;自定义tabs组件 文档参考:自定义组件 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/custom-co…

MacBook 与其他设备的低成本高性能数据传输方案

本篇文章分享在不使用路由器的情况下&#xff0c;使用“数据线或网线”将 MacBook 与其他设备连接在一起&#xff0c;获得更高效率的数据交换性能。 写在前面 最近考虑将 Mac 设备和其他的设备连在一起使用&#xff0c;比如之前在“廉价的家用工作站方案&#xff1a;前篇”或…

利用Python实现酒店评论的中文情感分析,含数据集

利用Python实现酒店评论的情感分析 完整代码下载地址&#xff1a;利用Python实现酒店评论的中文情感分析 情感极性分析&#xff0c;即情感分类&#xff0c;对带有主观情感色彩的文本进行分析、归纳。情感极性分析主要有两种分类方法&#xff1a;基于情感知识的方法和基于机器学…

抽象类和接口1

目录 &#x1f324;️抽象类概念 &#x1f324;️抽象类语法 &#x1f324;️抽象类的作用 ⛅接口的概念 ⛅接口的语法 ⛅接口的使用 ⛅接口的特性 ....... &#x1f324;️抽象类概念 在面向对象的概念中&#xff0c;所有对象都是通过类来描述的&#xff0c;但并不是所有的…

上手华为鸿蒙手表gt系列从准备到发布

文章目录1、前期准备2、证书&签名3、编码&发布FQA:问题1&#xff1a;The graphic card OpenGL version is too old for Previewer to work. It must be 3.2 or later. Update the OpenGL driver based on the graphics card model.问题2&#xff1a;编译成HAp,报错 ent…

[UE笔记]延迟与延迟补偿

Lag即延迟&#xff0c;是多人游戏中常会出现的一个现象。lag compensation即延迟补偿&#xff0c;是一种减少延迟对游戏造成影响的技术。 Ping 多个含义 一种指令&#xff08;用于验证ip地址是否存在或者主机是否正在运行&#xff09;描述服务器需要多长时间响应客户端的输入…

OpenCV实战——使用邻居访问扫描图像

OpenCV实战——使用邻居访问扫描图像0. 前言1. 图像锐化2. 邻居访问扫描图像3. 锐化滤波器4. 完整代码相关链接0. 前言 在图像处理中&#xff0c;有时需要根据某个像素的相邻像素的值计算该像素位置的值。当这个邻域包括上一行和下一行的像素时&#xff0c;就需要同时扫描图像…

JavaScript高级 浏览器的渲染原理与JavaScript代码执行原理

浏览器的渲染原理1. 网页的解析过程2. 浏览器内核1. V8引擎3. 浏览器渲染过程1. HTML解析2. 生成CSS规则3. 构建Render Tree4. 布局&#xff08;layout&#xff09;5. 绘制&#xff08;Paint&#xff09;4. 回流和重绘解析1. 回流2. 重绘3. web 性能优化4. 合成和性能优化5. 浏…

剑指offer----C语言版----第六天

目录 1. 用栈实现队列 1.1 题目描述 1.2 栈和队列的基础知识 1.3 思路分析 2. 扩展题目——用队列实现栈 2.1 题目描述 2.2 思路分析 1. 用栈实现队列 原题链接&#xff1a; 剑指 Offer 09. 用两个栈实现队列 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/…

数据结构集合框架与大O渐进表示法

作者&#xff1a;爱塔居的博客_CSDN博客-JavaSE领域博主 专栏&#xff1a;数据结构 作者简介&#xff1a;大三学生&#xff0c;希望跟大家一起进步&#xff01;&#x1f339; 博客简介&#xff1a;了解数据结构&#xff0c;学习一些关于数据结构的前置知识 文章目录 目录 文章目…

【论文翻译】Deep Learning for Multi-view Stereo via Plane Sweep: A Survey(2021)

一、论文简述 1. 第一作者&#xff1a;Qingtian Zhu 2. 发表年份&#xff1a;2021 3. 发表期刊&#xff1a;CVPR 4. 关键词&#xff1a;MVS、深度学习、综述 5. 核心思想&#xff1a;读到的第一篇深度MVS的综述&#xff0c;总结的很好&#xff0c;内容涵盖了2021年前的研究…

遗传算法python进阶理解+论文复现(纯干货,附前人总结引路)

遗传算法python进阶理解论文复现&#xff08;纯干货&#xff0c;附前人总结引路&#xff09;一、简介和相关概念遗传算法简介相关概念介绍二、与其他智能优化算法的比较蚁群算法粒子群优化算法人工神经网络算法模拟退火算法鱼群算法三、必学知识&#xff08;站在前人的肩膀上&a…

1214. 波动数列(推公式 + DP)

题目如下&#xff1a; 思路 or 题解&#xff1a; 我们可以设&#xff1a; 第一个数为 xxx d {a, -b} 那后续的数为&#xff1a;xd1x d_1xd1​ , xd1d)2x d_1 d_)2xd1​d)​2 … … xd1d2......dn−1x d_1 d_2 ... ... d_{n - 1}xd1​d2​......dn−1​ 根据题意和上面…

(Java高级教程)第二章Java多线程常见面试题-第三节:线程安全集合类和死锁

文章目录一&#xff1a;线程安全集合类&#xff08;1&#xff09;多线程环境下使用ArrayList&#xff08;2&#xff09;多线程环境使用队列&#xff08;3&#xff09;多线程使用哈希表二&#xff1a;死锁&#xff08;1&#xff09;概念&#xff08;2&#xff09;死锁产生的四个…

(小程序)会议OA项目-首页

目录 一、FIex布局简介 1.什么是flex布局&#xff1f; 2.flex属性 学习地址&#xff1a; 3.flex弹性布局演示 ① 容器的属性 ⑴ flex-direction属性 ⑵ flex-wrap属性 ⑶ flex-flow ⑷ justify-content属性 ⑸ align-items属性 ⑹ align-content属性 二、轮播图组件m…