第十四节：活动审批端制作
目录
目录
在上一节我们已经完成了用户端的全部页面的制作，接下来我们将要开始搭建审批端的搭建，我们将以活动审批端——>预约审批端的顺序来依次搭建。老规则先来看思维大纲~
相对应的前期工作我们也应该很熟悉了，就是在app.json中创建页面。这一节用到的页面我都放在下面了，需要自取~
"pages/approval/approval",
"pages/approvalPass/approvaPass",
"pages/approvalReject/approvaReject",
"pages/approvalEnd/approvalEnd",
"pages/TeventDetail/TeventDetail"前期工作做好了，那么我们现在正式开始制作吧~
1.基本样式参照“我的”页面
2.需要自制一个导航页面
3.需要老师版的活动详情页面
4.通过云开发来实现活动的审批（updata）
因为用的知识都是之前有涉及过并且解释过的，这里我就不再多赘述直接上代码了，如果你对这些有疑问可以在底下留言~
我们将按照待审批——>已通过——>已驳回——>已结束——>老师版的活动详情来依次放送源码。
<view class="container">
<view class="container_content">
<view class="box">
<view class="mine_application">
<!-- 活动标题 -->
<view class="mine_application_title">
待审批的活动<image src="../../icon/work-box.png" style="width: 50px;height: 40px;position: absolute; right: 20px; top: 0px;" bindtap="download"></image>
</view>
<block wx:for="{{list}}"></block>
<!-- 活动内容 点击可跳转至详情页面 -->
<view class="mine_application_content" wx:for="{{list}}" >
<view class="event" bindtap="goDetail" data-id="{{item._id}}">
<view class="">活动名称：{{item.a1_huodongName}}</view>
<view class="eventTime">活动起始时间：{{item.a2_startTime}}</view>
<view class='organization'>归属组织：{{item.g1_orderInstitute}}</view>
<view class="name">负责人姓名：{{item.b1_fzrName}}</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==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>
</view>
</view>
</view>
<!-- 简易导航栏 -->
<view class="tabar">
<view class='goApprovalButton' bindtap="goApprovalPage">
<image src="../../icon/approval.png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">待审批</view>
</view>
<view class="goPassButton" bindtap="goPassPage">
<image src="../../icon/pass(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已通过</view>
</view>
<view class="goRejectButton" bindtap="goRejectPage">
<image src="../../icon/reject(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已驳回</view>
</view>
<view class="goEndingButton" bindtap="goEndingPage">
<image src="../../icon/end(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已结束</view>
</view>
</view>
</view>
</view>.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;
}
.box{
margin-bottom: 50px;
}
.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_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_content{
position: relative;
margin-top:10px ;
margin-left: 15px;
font-size: 12;
color: white;
}
.button_detail{
background-color: white;
color:#727885;
}
.organization{
font-size: 15px;
color:#FF5733;
margin-top: 5px;
}
.goApprovalButton{
position: absolute;
bottom:0px ;
left: 0px;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goPassButton{
position: absolute;
bottom:0px ;
left: 25%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goRejectButton{
position: absolute;
bottom:0px ;
left: 50%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goEndingButton{
position: absolute;
bottom: 0px;
left: 75%;
color:#FFFFFF;
background-color: white;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.button_content{
font-size: 15px;
color: black;
}
.container{
position: relative;
}
.container_content{
position: relative;
min-height: 100vh;
box-sizing: border-box;
padding-bottom: 60rpx;
padding-top: 0rpx;
}
.tabar{
width: 100%;
text-align: center;
letter-spacing: 4rpx;
position: absolute;
bottom: 0;
}
.name{
font-size: 17px;
font-weight: 200;
color: #174099;
}
.next_location{
width:150px;
height:40px;
position: absolute;
z-index: 1;
bottom: 0px;
right: 0px;
}const db = wx.cloud.database()
const _ = db.command
const t = new Date().getTime().toString().slice(0, -3);
Page({
data: {
list:[]
},
onLoad(options) {
db.collection("huoDong")
.where({
state:_.or(0,3),
})
.get()
.then(res=>{
console.log('查询数据库成功',res.data)
//将返回的res.data里面的值赋值给list
this.setData({
list :res.data,
})
console.log("这是list",this.data.list)
})
},
onPullDownRefresh() {
},
onReachBottom() {
},
goDetail(e){
console.log("点击了详情页面,将展示活动的id ",e)
wx.navigateTo({
// 跳转到活动详情页面并携带活动id
url: '/pages/TeventDetail/TeventDetail?id=' +e.currentTarget.dataset.id
})
},
// 前往待审批页面
goApprovalPage(){
wx.showToast({
title: '您已经在当前页面',
icon:'none'
})
},
// 前往已通过页面
goPassPage(){
wx.redirectTo({
url: '../approvalPass/approvaPass',
})
},
// 前往已驳回页面
goRejectPage(){
wx.redirectTo({
url: '../approvalReject/approvaReject',
})
},
// 前往已结束页面
goEndingPage(){
wx.redirectTo({
url: '../approvalEnd/approvalEnd',
})
},
//一键导出excel表格
download(){
let that = this
wx.showModal({
title: '您是否导需要出待审批的活动',
content: '注：进行到报告待审批的活动不会导出',
success (res) {
if (res.confirm) {
console.log('点击了一键导出excel')
//引用了huoDongEX的云函数，调取了huoDong里面的数据
wx.cloud.callFunction({
name:'huoDongEx',
success(res) {
console.log("读取成功", res.result.data)
//将调取的数据存入函数里
that.savaExcel(res.result.data)
},
})
} else if (res.cancel) {
//取消绑定的操作
}
}
})
},
//把数据保存到excel里，并把excel保存到云存储
savaExcel(userdata) {
let that = this
//调取getExcel云函数（核心）
wx.cloud.callFunction({
name: "getHuoDongEx",
data: {
userdata: userdata
},
success(res) {
console.log("保存成功", res)
//调取获取地址的函数
that.getFileUrl(res.result.fileID)
},
fail(res) {
console.log("保存失败", res)
}
})
},
//获取云存储文件下载地址，这个地址有效期一天
getFileUrl(fileID) {
let that = this;
wx.cloud.getTempFileURL({
fileList: [fileID],
success: res => {
// 这里的文件下载链接延迟很高，不能实时更新excel里面的数据，故采用文件下载链接拼接时间字符串的形式来达到可下载实时文件的目的
console.log("文件下载链接", res.fileList[0].tempFileURL)
// 这里就是拼接，方法来自 https://blog.csdn.net/sjn0503/article/details/74936613
const finalUrl = `${res.fileList[0].tempFileURL}?${t}`
console.log("实时文件下载链接",finalUrl)
that.setData({
fileUrl: finalUrl
})
//获取到文件下载链接后，使用showModal和setClipboardData来达到给用户复制地址的目的
wx.showModal({
title:'一键导出excel成功',
content:finalUrl,
showCancel:true,
confirmText:'复制地址',
success(res){
if (res.confirm) {
wx.setClipboardData({
data: that.data.fileUrl,
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data) // data
}
})
}
})
}
}
})
},
})
},
})<!-- 采用的是flexbos布局 -->
<view class="container">
<view class="container_content">
<view class="box">
<view class="mine_application">
<!-- 活动标题 -->
<view class="mine_application_title">
已审批的活动<image src="../../icon/work-box.png" style="width: 50px;height: 40px;position: absolute; right: 20px; top: 0px;" bindtap="download"></image>
</view>
<block wx:for="{{list}}"></block>
<!-- 活动内容 点击可跳转至详情页面 -->
<view class="mine_application_content" wx:for="{{list}}" >
<view class="event" bindtap="goDetail" data-id="{{item._id}}">
<view class="">活动名称：{{item.a1_huodongName}}</view>
<view class="eventTime">活动起始时间：{{item.a2_startTime}}</view>
<view class='organization'>归属组织：{{item.g1_orderInstitute}}</view>
<view class="name">负责人姓名：{{item.b1_fzrName}}</view>
</view>
<!-- 右上角的状态栏 -->
<!-- 用条件渲染来展示多种样式的活动内容 -->
<!-- 状态为3代表已结束，2为已驳回，1为已通过，0为审核中 -->
<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>
<view class="reject_location">
<button class="button_detail" size="mini" bindtap="goDetail" data-id="{{item._id}}">驳回详情 >
</button>
</view>
</block>
</view>
</view>
</view>
<!-- 简易导航栏 -->
<view class="tabar">
<view class='goApprovalButton' bindtap="goApprovalPage">
<image src="../../icon/approval(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">待审批</view>
</view>
<view class="goPassButton" bindtap="goPassPage">
<image src="../../icon/pass.png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已通过</view>
</view>
<view class="goRejectButton" bindtap="goRejectPage">
<image src="../../icon/reject(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已驳回</view>
</view>
<view class="goEndingButton" bindtap="goEndingPage">
<image src="../../icon/end(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已结束</view>
</view>
</view>
</view>
</view>.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;
}
.box{
margin-bottom: 50px;
}
.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_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;
}
.button_detail{
background-color: white;
color:#727885;
}
.organization{
font-size: 15px;
color:#FF5733;
margin-top: 5px;
}
.goApprovalButton{
position: absolute;
bottom:0px ;
left: 0px;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goPassButton{
position: absolute;
bottom:0px ;
left: 25%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goRejectButton{
position: absolute;
bottom:0px ;
left: 50%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goEndingButton{
position: absolute;
bottom: 0px;
left: 75%;
color:#FFFFFF;
background-color: white;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.button_content{
font-size: 15px;
color: black;
}
.container{
position: relative;
}
.container_content{
position: relative;
min-height: 100vh;
box-sizing: border-box;
padding-bottom: 60rpx;
padding-top: 0rpx;
}
.tabar{
width: 100%;
text-align: center;
letter-spacing: 4rpx;
position: absolute;
bottom: 0;
}
.name{
font-size: 17px;
font-weight: 200;
color: #174099;
}const db = wx.cloud.database()
const _ = db.command
const t = new Date().getTime().toString().slice(0, -3);
Page({
data: {
list:[]
},
onLoad(options) {
db.collection("huoDong")
.where({
// 使用command指令从而起到“或”的作用 后面的版本删去了
state:1
})
.get()
.then(res=>{
console.log('查询数据库成功',res.data)
//将返回的res.data里面的值赋值给list
this.setData({
list :res.data,
})
console.log("这是list",this.data.list)
})
},
onPullDownRefresh() {
},
onReachBottom() {
},
goDetail(e){
console.log("点击了详情页面,将展示活动的id ",e)
wx.navigateTo({
// 跳转到活动详情页面并携带活动id
url: '/pages/TeventDetail/TeventDetail?id=' +e.currentTarget.dataset.id
})
},
// 前往待审批页面
goApprovalPage(){
wx.redirectTo({
url: '../approval/approval',
})
},
// 前往已通过页面
goPassPage(){
wx.showToast({
title: '您已经在当前页面',
icon:'none'
})
},
// 前往已驳回页面
goRejectPage(){
wx.redirectTo({
url: '../approvalReject/approvaReject',
})
},
// 前往已结束页面
goEndingPage(){
wx.redirectTo({
url: '../approvalEnd/approvalEnd',
})
},
//一键导出excel表格
download(){
let that = this
wx.showModal({
title: '您是否需要导出已通过的活动',
content: '',
success (res) {
if (res.confirm) {
console.log('点击了一键导出excel')
//引用了huoDongEX的云函数，调取了huoDong里面的数据
wx.cloud.callFunction({
name:'huoDongEx1',
success(res) {
console.log("读取成功", res.result.data)
//将调取的数据存入函数里
that.savaExcel(res.result.data)
},
})
} else if (res.cancel) {
//取消绑定的操作
}
}
})
},
//把数据保存到excel里，并把excel保存到云存储
savaExcel(userdata) {
let that = this
//调取getExcel云函数（核心）
wx.cloud.callFunction({
name: "getHuoDongEx1",
data: {
userdata: userdata
},
success(res) {
console.log("保存成功", res)
//调取获取地址的函数
that.getFileUrl(res.result.fileID)
},
fail(res) {
console.log("保存失败", res)
}
})
},
//获取云存储文件下载地址，这个地址有效期一天
getFileUrl(fileID) {
let that = this;
wx.cloud.getTempFileURL({
fileList: [fileID],
success: res => {
// 这里的文件下载链接延迟很高，不能实时更新excel里面的数据，故采用文件下载链接拼接时间字符串的形式来达到可下载实时文件的目的
console.log("文件下载链接", res.fileList[0].tempFileURL)
// 这里就是拼接，方法来自 https://blog.csdn.net/sjn0503/article/details/74936613
const finalUrl = `${res.fileList[0].tempFileURL}?${t}`
console.log("实时文件下载链接",finalUrl)
that.setData({
fileUrl: finalUrl
})
//获取到文件下载链接后，使用showModal和setClipboardData来达到给用户复制地址的目的
wx.showModal({
title:'一键导出excel成功',
content:finalUrl,
showCancel:true,
confirmText:'复制地址',
success(res){
if (res.confirm) {
wx.setClipboardData({
data: that.data.fileUrl,
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data) // data
}
})
}
})
}
}
})
},
})
}
})<!-- 采用的是flexbos布局 -->
<view class="container">
<view class="container_content">
<view class="box">
<view class="mine_application">
<!-- 活动标题 -->
<view class="mine_application_title">
已审批的活动
</view>
<block wx:for="{{list}}"></block>
<!-- 活动内容 点击可跳转至详情页面 -->
<view class="mine_application_content" wx:for="{{list}}" >
<view class="event" bindtap="goDetail" data-id="{{item._id}}">
<view class="">活动名称：{{item.a1_huodongName}}</view>
<view class="eventTime">活动起始时间：{{item.a2_startTime}}</view>
<view class='organization'>归属组织：{{item.g1_orderInstitute}}</view>
<view class="name">负责人姓名：{{item.b1_fzrName}}</view>
</view>
<!-- 右上角的状态栏 -->
<!-- 用条件渲染来展示多种样式的活动内容 -->
<!-- 状态为3代表已结束，2为已驳回，1为已通过，0为审核中 -->
<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>
<view class="reject_location">
<button class="button_detail" size="mini" bindtap="goDetail" data-id="{{item._id}}">驳回详情 >
</button>
</view>
</block>
</view>
</view>
<!-- 简易导航栏 -->
<view class="tabar">
<view class='goApprovalButton' bindtap="goApprovalPage">
<image src="../../icon/approval(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">待审批</view>
</view>
<view class="goPassButton" bindtap="goPassPage">
<image src="../../icon/pass(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已通过</view>
</view>
<view class="goRejectButton" bindtap="goRejectPage">
<image src="../../icon/reject.png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已驳回</view>
</view>
<view class="goEndingButton" bindtap="goEndingPage">
<image src="../../icon/end(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已结束</view>
</view>
</view>
</view>
</view>
</view>.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;
}
.box{
margin-bottom: 50px;
}
.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_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;
}
.organization{
font-size: 15px;
color:#FF5733;
margin-top: 5px;
}
.goApprovalButton{
position: absolute;
bottom:0px ;
left: 0px;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goPassButton{
position: absolute;
bottom:0px ;
left: 25%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goRejectButton{
position: absolute;
bottom:0px ;
left: 50%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goEndingButton{
position: absolute;
bottom: 0px;
left: 75%;
color:#FFFFFF;
background-color: white;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.button_content{
font-size: 15px;
color: black;
}
.container{
position: relative;
}
.container_content{
position: relative;
min-height: 100vh;
box-sizing: border-box;
padding-bottom: 60rpx;
padding-top: 0rpx;
}
.tabar{
width: 100%;
text-align: center;
letter-spacing: 4rpx;
position: absolute;
bottom: 0;
}
.name{
font-size: 17px;
font-weight: 200;
color: #174099;
}
.reject_location{
width:110px;
height:40px;
position: absolute;
z-index: 1;
bottom: 0px;
right: 0px;
}const db = wx.cloud.database()
const _ = db.command
Page({
data: {
list:[]
},
onLoad(options) {
db.collection("huoDong")
.where({
// 使用command指令从而起到“或”的作用 后面的版本删去了
state:2
})
.get()
.then(res=>{
console.log('查询数据库成功',res.data)
//将返回的res.data里面的值赋值给list
this.setData({
list :res.data,
})
console.log("这是list",this.data.list)
})
},
onPullDownRefresh() {
},
onReachBottom() {
},
goDetail(e){
console.log("点击了详情页面,将展示活动的id ",e)
wx.navigateTo({
// 跳转到活动详情页面并携带活动id
url: '/pages/TeventDetail/TeventDetail?id=' +e.currentTarget.dataset.id
})
},
// 前往待审批页面
goApprovalPage(){
wx.redirectTo({
url: '../approval/approval',
})
},
// 前往已通过页面
goPassPage(){
wx.redirectTo({
url: '../approvalPass/approvaPass',
})
},
// 前往已驳回页面
goRejectPage(){
wx.showToast({
title: '您已经在当前页面',
icon:'none'
})
},
// 前往已结束页面
goEndingPage(){
wx.redirectTo({
url: '../approvalEnd/approvalEnd',
})
}
})<!-- 采用的是flexbos布局 -->
<view class="container">
<view class="container_content">
<view class="box">
<view class="mine_application">
<!-- 活动标题 -->
<view class="mine_application_title">
已结束的活动
</view>
<block wx:for="{{list}}"></block>
<!-- 活动内容 点击可跳转至详情页面 -->
<view class="mine_application_content" wx:for="{{list}}" >
<view class="event" bindtap="goDetail" data-id="{{item._id}}">
<view class="">活动名称：{{item.a1_huodongName}}</view>
<view class="eventTime">活动起始时间：{{item.a2_startTime}}</view>
<view class='organization'>归属组织：{{item.g1_orderInstitute}}</view>
<view class="name">负责人姓名：{{item.b1_fzrName}}</view>
</view>
<!-- 右上角的状态栏 -->
<!-- 用条件渲染来展示多种样式的活动内容 -->
<!-- 状态为4为活动总结报告已审批，3为已提交活动总结报告 -->
<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 class="tabar">
<view class='goApprovalButton' bindtap="goApprovalPage">
<image src="../../icon/approval(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">待审批</view>
</view>
<view class="goPassButton" bindtap="goPassPage">
<image src="../../icon/pass(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已通过</view>
</view>
<view class="goRejectButton" bindtap="goRejectPage">
<image src="../../icon/reject(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已驳回</view>
</view>
<view class="goEndingButton" bindtap="goEndingPage">
<image src="../../icon/end.png" style="width: 40px; height: 40px; margin-top: 5px;"></image>
<view class="button_content">已结束</view>
</view>
</view>
</view>
</view>.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;
}
.box{
margin-bottom: 50px;
}
.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_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;
}
.state_content{
position: relative;
margin-top:10px ;
margin-left: 15px;
font-size: 12;
color: white;
}
.button_detail{
background-color: white;
color:#727885;
}
.organization{
font-size: 15px;
color:#FF5733;
margin-top: 5px;
}
.goApprovalButton{
position: absolute;
bottom:0px ;
left: 0px;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goPassButton{
position: absolute;
bottom:0px ;
left: 25%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goRejectButton{
position: absolute;
bottom:0px ;
left: 50%;
color:#FFFFFF;
background-color:#FFFFFF;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.goEndingButton{
position: absolute;
bottom: 0px;
left: 75%;
color:#FFFFFF;
background-color: white;
border-top: 2px solid grey;
width: 25%;
height: 70px;
text-align:center;
margin-top: 10px;
}
.button_content{
font-size: 15px;
color: black;
}
.container{
position: relative;
}
.container_content{
position: relative;
min-height: 100vh;
box-sizing: border-box;
padding-bottom: 60rpx;
padding-top: 0rpx;
}
.tabar{
width: 100%;
text-align: center;
letter-spacing: 4rpx;
position: absolute;
bottom: 0;
}
.name{
font-size: 17px;
font-weight: 200;
color: #174099;
}
const db = wx.cloud.database()
const _ = db.command
Page({
data: {
list:[]
},
onLoad(options) {
//调用云函数来突破返回数据库的条数只有20条的限制
wx.cloud.callFunction({
name:'getAll'
})
.then(res=>{
console.log('成功',res)
this.setData({
list :res.result.data,
})
})
.catch(res=>{
console.log("失败",res);
})
// db.collection("huoDong")
// .where({
// // 使用command指令从而起到“或”的作用
// state:_.or(3,4)
// })
// .get()
// .then(res=>{
// console.log('查询数据库成功',res.data)
// //将返回的res.data里面的值赋值给list
// this.setData({
// list :res.data,
// })
// console.log("这是list",this.data.list)
// })
},
onPullDownRefresh() {
},
onReachBottom() {
},
goDetail(e){
console.log("点击了详情页面,将展示活动的id ",e)
wx.navigateTo({
// 跳转到活动详情页面并携带活动id
url: '/pages/TeventDetail/TeventDetail?id=' +e.currentTarget.dataset.id
})
},
// 前往待审批页面
goApprovalPage(){
wx.redirectTo({
url: '../approval/approval',
})
},
// 前往已通过页面
goPassPage(){
wx.redirectTo({
url: '../approvalPass/approvaPass',
})
},
// 前往已驳回页面
goRejectPage(){
wx.redirectTo({
url: '../approvalReject/approvaReject',
})
},
// 前往已结束页面
goEndingPage(){
wx.showToast({
title: '您已经在当前页面',
icon:'none'
})
}
})<view>
<!-- 活动基本信息 -->
<view>
<view class="subtitle_font">活动基本信息</view>
<view class="inputborder">
<view>活动名称：{{list.a1_huodongName}}</view>
<view>活动开始时间：{{list.a2_startTime}}</view>
<view>活动结束时间：{{list.a3_endTime}}</view>
<view>活动地点：{{list.a4_huodongPlace}}</view>
<view>活动校区：{{list.a5_area}}</view>
</view>
</view>
<!-- 负责人信息 -->
<view>
<view class="subtitle_font">负责人信息</view>
<view class="inputborder">
<view>负责人姓名：{{list.b1_fzrName}}</view>
<view>负责人专业：{{list.b2_fzrGrade}}</view>
<view>负责人手机号：{{list.b3_fzrTelephone}}</view>
<view>负责人邮箱：{{list.b4_fzrMail}}</view>
</view>
</view>
<!-- 活动经费预算 -->
<view>
<view class="subtitle_font">活动经费预算</view>
<view class="inputborder">
<view>活动经费预算总计：{{list.c1_jingfeiTotal}}</view>
<view>活动那个经费自筹数：{{list.c2_jingfeiSelf}}</view>
<view>活动申请拨款数：{{list.c3_jingfeiApply}}</view>
</view>
</view>
<!-- 赞助信息 -->
<view>
<view class="subtitle_font">赞助信息</view>
<view class="inputborder">
<view>是否有赞助：{{list.d1_sponsor}}</view>
<view>赞助公司：{{list.d2_sponsorCompany}}</view>
<view>赞助形式：{{list.d3_sponsorForm}}</view>
<view>赞助金额：{{list.d4_sponsorMoney}}</view>
<view>是否提交赞助合同：{{list.d5_sponsorContract}}</view>
</view>
</view>
<!-- 借款信息 -->
<view>
<view class="subtitle_font">借款信息</view>
<view class="inputborder">
<view>是否需要借款：{{list.e1_borrow}}</view>
<view>借款人姓名：{{list.e2_jkrName}}</view>
<view>借款人专业：{{list.e3_jkrGrade}}</view>
<view>借款人年龄：{{list.e4_jkrAge}}</view>
<view>借款人电话：{{list.e5_jkrTelephone}}</view>
<view>借款金额：{{list.e6_jkrMoney}}</view>
</view>
</view>
<!-- 劳务信息 -->
<view>
<view class="subtitle_font">劳务信息</view>
<view class="inputborder">
<view>是否需要发放劳务费：{{list.f1_serviceFee}}</view>
<view>劳务费对象：{{list.f2_serviceObject}}</view>
<view>申请劳务费金额：{{list.f3_serviceMoney}}</view>
</view>
</view>
<!-- 预约信息 -->
<view>
<view class="subtitle_font">预约信息</view>
<view class="inputborder">
<view>所归属的组织：{{list.g1_orderInstitute}}</view>
<view>{{list.g2_orderTeacher}}</view>
<view>{{list.g3_orderStartTime}}</view>
<view>{{list.g4_orderEndTime}}</view>
</view>
</view>
<!-- 备注信息 -->
<view>
<view class="subtitle_font">备注信息</view>
<view class="inputborder">
<view>{{list.h1_remark}}</view>
<view>预计参与人数：{{list.h2_participant}}</view>
<view>是否需要上传至OA：{{list.h3_uploadOA}}</view>
<view>项目内容阐述：{{list.h4_briefContent}}</view>
<!-- 只有已驳回的活动才会显示驳回理由 -->
<block wx:if="{{list.state==2}}">
<view>驳回理由：{{list.rejectReason}}</view>
</block>
</view>
</view>
<!-- 只有已提交活动申请报告的才可见 -->
<block wx:if="{{list.state==3}}">
<view>
<view class="subtitle_font">活动结束信息</view>
<view class="inputborder">
<view>活动实际参与人数：{{list.practicalMember}}</view>
<view>项目实际支出：{{list.practicalTotalMoney}}</view>
<view>实际赞助金额：{{list.practicalSponsorship}}</view>
<view>实际申请拨款金额：{{list.practicalApMoney}}</view>
<view wx:for="{{list.publicityLink}}">
<view>
宣传报道链接：{{item.link}}
</view>
</view>
<view wx:for="{{list.oaLink}}">
<text>oa报道链接：{{item.link}}</text>
</view>
</view>
</view>
</block>
</view>
<!-- 条件渲染，只有待审批的活动才能显示 -->
<block wx:if="{{list.state==0}}">
<view class="subtitle_font">如果驳回，请备注驳回理由</view>
<input bindinput="rejectReason" class="rejectReason" placeholder="驳回的理由"> </input>
<button bindtap="pass" class="button_location1" style="margin-left:2%; width: 48%;">审批通过</button>
<button bindtap="reject" class="button_location2" style="margin-right:2%;width:48%" >审批驳回</button>
</block>
<!-- 条件渲染，只有提交活动总结报告的活动才能显示 -->
<block wx:if="{{list.state==3}}">
<!-- pass2是指第二次通过审批 -->
<button bindtap="pass2" class="button_location1" style="margin-left:5%; width: 90%;">审批通过</button>
</block>.rejectReason{
margin-top: 15px;
margin-left: 20px;
margin-right:20px;
margin-bottom: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 15px;
padding-right:15px;
border-radius: 30px;
border: 1px solid #F2E6E6;
}
.inputborder{
margin-top: 15px;
margin-left: 20px;
margin-right:20px;
margin-bottom: 15px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 15px;
padding-right:15px;
border-radius: 30px;
border: 1px solid #F2E6E6;
}
/* 小标题内容 */
.subtitle_font{
font-size: large;
font-weight: 400;
color: #D43C33;
margin-left: 20px;
}
/* 审批通过 */
.button_location1{
border-radius: 80rpx;
margin-top: 5%;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
float: left;
}
/* 审批驳回 */
.button_location2{
border-radius: 80rpx;
margin-top: 5%;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
float: right;
}let eventid = ''
const DB = wx.cloud.database().collection("huoDong")
Page({
data:{
list:[],
id:"",
rejectReason:""
},
onLoad(option){
console.log("列表所携带的值",option)
var id = option.id
this.setData({
id :option.id
})
wx.cloud.database().collection("huoDong")
.doc(id)
.get()
.then(res=>{
this.setData({
list:res.data
})
console.log("这是huodong",this.data.list)
})
.catch(res=>{
console.log("活动详情页请求失败",res)
})
},
pass(){
let that = this;
wx.showLoading({
title: '正在上传中……',
mask:true
})
DB.doc(this.data.id)
.update({ // updata指 插入数据库中的userlist表；
//将我们获取到的新值代入
data: {
state:1
},
}).then(res => {
console.log("上传成功", res)
wx.showToast({
title: '成功',
})
wx.redirectTo({
url: '../approval/approval',
})
.then(()=>{
wx.startPullDownRefresh()
})
})
.catch(err => {
console.log("上传失败", err)
wx.showToast({
title: '失败',
icon:"none"
})
})
},
pass2(){
let that = this;
wx.showLoading({
title: '正在上传中……',
mask:true
})
DB.doc(this.data.id)
.update({ // updata指 插入数据库中的userlist表；
//将我们获取到的新值代入
data: {
state:4
},
}).then(res => {
console.log("上传成功", res)
wx.showToast({
title: '成功',
})
wx.navigateTo({
url: '../approvalEnd/approvalEnd',
})
.then(()=>{
wx.startPullDownRefresh()
})
})
.catch(err => {
console.log("上传失败", err)
wx.showToast({
title: '失败',
icon:"none"
})
})
},
reject(){
let that = this;
wx.showLoading({
title: '正在上传中……',
mask:true
})
DB.doc(this.data.id)
.update({ // updata指 插入数据库中的userlist表；
//将我们获取到的新值代入
data: {
state:2,
rejectReason: this.data.rejectReason
},
}).then(res => {
console.log("上传成功", res)
wx.showToast({
title: '成功',
})
wx.redirectTo({
url: '../approval/approval',
})
.then(()=>{
wx.startPullDownRefresh()
})
})
.catch(err => {
console.log("上传失败", err)
wx.showToast({
title: '失败',
icon:"none"
})
})
},
rejectReason(event){
console.log("这是驳回输入框里的信息",event.detail.value)
this.setData({
rejectReason:event.detail.value
})
},
})这一系列文章会持续更新，手把手教你从零创建一个小程序项目！并且免费提供源码。如果有什么疑问欢迎大家在底下留言讨论！你的赞和收藏是我最大的动力！！
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
我想用ruby编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否
是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在
前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源