第一节：什么构成了微信小程序、创建一个自己的小程序
第二节：微信开发者工具使用教程
第三节：深入了解并掌握小程序核心组件
第四节：初始化云函数和数据库
第五节：云数据库的增删改查
第六节：项目大纲以及制作登录、注册页面
第七节：制作活动申请页面
第八节：活动申请页面的补充
第九节：我的页面制作
第十节：活动详情页面制作
第十一节：活动历史页面制作
第十二节：预约老师页面制作
第十三节：预约历史页面制作
第十四节：活動承認端制作
第十五节：予約承認端制作
项目的Github仓库地址 项目的线上文档地址 このプロジェクトは大学1年生から2年生の頃にフロントエンドを独学した時に作成した、比較的大規模なプロジェクトです。メインの原型は汕頭大学校团委のWeChatミニプログラムで、WeChatのネイティブ構文とテンセントクラウド開発フレームワークを使用して開発されています。汕頭大学校团委の教師の予約申請と活動申請の承認プロセスを簡素化することを目的としています。すべてのコードとフレームワークはゼロから構築され、数バージョンの反復と試行錯誤を経て、約2年間安定して運用されています。そのため、このシリーズの記事を書きたいと思っています。一方面は開発経験や心得を共有し、もう一方は学校組織に微力ながら貢献したいと思っています。
このシリーズのブログを通じて、「汕頭大学校团委WeChatミニプログラム」の開発プロセス、機能実装、技術的な詳細を深く紹介し、より多くの開発者やユーザーがこのミニプログラムを理解し、使用できるようになることを願っています。私たちはこのオープンソースプロジェクトに貢献してくれる開発者を歓迎します。PRリクエストの提出や質問の残しを歓迎します。このプロジェクトは純粋に愛の発電なので、金銭的な利益は一切ありません。このプロジェクトがお役に立てれば、星を1ついただけますか？
前言
前節ではユーザー側の全ページの作成を完了しました。次に承認側の構築を開始します。承認側は「活動承認端→予約承認端」の順序で構築していきます。古いルールに従って、まず思维大纲を見てみましょう。
対応する前準備も非常に馴染み深いはずです。app.jsonでページを作成することです。この節で使用するページはすべて以下に記載していますので、必要に応じてご利用ください。
"pages/approval/approval",
"pages/approvalPass/approvaPass",
"pages/approvalReject/approvaReject",
"pages/approvalEnd/approvalEnd",
"pages/TeventDetail/TeventDetail"
前準備が整いましたら、正式に制作を開始しましょう。
成品图
核心思想
1.基本スタイルは「我的」ページを参照
2.カスタムナビゲーションページが必要
3.教師版の活動詳細ページが必要
4.クラウド開発を通じて活動の承認を実現（updata）
实现步骤
使用する知識は以前に説明したものなので、ここでは詳しく説明しません。疑問がある場合は、下にコメントを残してください。
私たちは「待承認→承認済み→却下済み→終了済み→教師版の活動詳細」の順序でソースコードを順次公開します。
approval.wxml
<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>
approval.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;
}
.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;
}
approval.js
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)
}
})
},
// クラウドストレージファイルのダウンロードアドレスを取得、このアドレスは1日有効
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
}
})
}
})
}
}
})
},
})
},
})
approvalPass.wxml
<!-- flexboxレイアウトを使用 -->
<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>
approvalPass.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;
}
.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;
}
approvalPass.js
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)
}
})
},
// クラウドストレージファイルのダウンロードアドレスを取得、このアドレスは1日有効
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
}
})
}
})
}
}
})
},
})
}
})
approvalReject.wxml
<!-- flexboxレイアウトを使用 -->
<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>
approvalReject.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;
}
.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;
}
approvalReject.js
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',
})
}
})
approvalEnd.wxml
<!-- flexboxレイアウトを使用 -->
<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>
approvalEnd.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;
}
.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;
}
approvalEnd.js
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'
})
}
})
TeventDetail.wxml
<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は2回目の承認 -->
<button bindtap="pass2" class="button_location1" style="margin-left:5%; width: 90%;">承認する</button>
</block>
TeventDetail.wxss
.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;
}
TeventDetail.js
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
})
},
})
题外话
このシリーズの記事は継続的に更新されます。手取り足取りでミニプログラムプロジェクトをゼロから作成する方法を教えます！そして無料でソースコードを提供します。何か疑問があれば、下にコメントを残して議論してください！あなたの賛同と保存が私の最大の動力です！！