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

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

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

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

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

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

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

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

第九节 ”我的“页面制作

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

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

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

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

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

前言

1.用户端导航栏的搭建

1.1成品图

1.2实际操作

Step1

Steap2

2.“活动申请”页面的制作

2.1成品图

2.2实现思路

2.3实际操作

apply.wmxl

apply.wxss

apply.js

题外话

前言

在第六节我们完成了登录页面以及注册页面的制作，那么在我们后面几节我们将制作用户端的主页面，也就是下图。一共分为五部分的制作。这篇我们主要是介绍活动申请页面和提供其全部代码（代码行数较多），在后一节我们将会更详细的解活动申请页面。我们将会按照“活动申请”——>“我的主页”——>“历史活动”的顺序进行制作，这篇文章将会制作活动申请页面！！那我们现在开始吧！

1.用户端导航栏的搭建

1.1成品图

1.2实际操作

Step1

首先在app.json中新建四个页面，这里我将一开始的index页面作为“我的”页面。故只需要建四个页面即可，为了方便大家我把这个代码也放在下面了。

    "pages": ["pages/choicePage/choicePage","pages/index/index","pages/indexLogin/indexLogin","pages/indexRegister/indexRegister","pages/nextChoice/nextChoice","pages/approvalLogin/approvalLogin","pages/approvalRegister/approvalRegister","pages/appointmentApprovalLogin/appointmentApprovalLogin","pages/appointmentApprovalRegister/appointmentApprovalRegister","pages/apply/apply","pages/history/history","pages/appointment/appointment",  "pages/history2/history2"],

Steap2

其次在app.json文件中建立tabar，并且完善tabr样式，我把代码也放在下面了

 "tabBar": {"color": "#C0C0C0","selectedColor": "#000000","list": [{"pagePath": "pages/index/index","text": "我的","iconPath": "/icon/用户 (1).png","selectedIconPath": "/icon/用户.png"},{"pagePath": "pages/apply/apply","text": "活动申请","iconPath": "/icon/测试申请 (1).png","selectedIconPath": "/icon/测试申请.png"},{"pagePath": "pages/history/history","text": "活动历史","iconPath": "/icon/历史 (1).png","selectedIconPath": "/icon/历史.png"},{"pagePath": "pages/appointment/appointment","text": "预约老师","iconPath": "/icon/预约(1).png","selectedIconPath": "/icon/预约.png"},{"pagePath": "pages/history2/history2","text": "历史预约","iconPath": "/icon/历史预约.png","selectedIconPath": "/icon/历史预约 (1).png"}]},

注意：这里你需要把tabar属性置于跟window同层级！！！

这里的图片你可以去阿里巴巴矢量图标库里找，若有需要图片的可私我。注意把图片的路径换成你自己图片的路径哦！

2.“活动申请”页面的制作

2.1成品图

2.2实现思路

一般的文字输入框可以直接用input组件，结合相关js代码进行保存输入内容的操作

归属组织、活动地点用单项选择器即可，起始结束时间用时间选择器

特殊的选择需要实现下拉隐藏和显示的功能（如是否有赞助选项）

提交按钮配合云开发功能实现把表单全部上传

注：这里代码有将近一千行，为了避免文章过长，我直接把全部的代码放在下面了。之后我会在第八节中挑出几个特别重要的部分进行讲解和分析！！

2.3实际操作

apply.wmxl

<view class="comment">（用户所填全部信息都将用于确认是否为校内人员以及方便联系有关负责人跟进活动进度）</view><!-- 活动内容 -->
<view class="subtitle"><text class="subtitle_font">活动内容:</text>
</view><!-- 活动名称 -->
<view class="inputborder"><input type="text" placeholder="活动名称（必填*）" class="PnameInput" bindinput="huodongName"/>
</view><!-- 选择所归属的组织 -->
<view class="subtitle"><text class="subtitle_font">所归属的组织:</text>
</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" class="inputborder"><view class="xuanzheyuyue">当前选择：{{multiArray[0][multiIndex[0]]}}<!-- {{multiArray[1][multiIndex[1]]}} --></view></picker><!-- 活动时间 -->
<view><!-- 起始时间 --><view  class="subtitle"><text class="subtitle_font">起始时间*</text></view><view class="inputborder"><view class="StartDate" ><picker mode="date" start="2017-09-01"  bindchange="bindDatechangeStart" ><view>{{liststart}}<image src="../../icon/outline.png" class="_icon"></image></view></picker></view></view>
</view><view><!-- 截止时间 -->
<view class="subtitle"><text class="subtitle_font">截止时间*</text>
</view>
<view class="inputborder"><view class="eTime"><picker mode="date" class="StartDate" start='{{liststart}}' bindchange="bindDatechangeEnd"><view>{{listend}}<image src="../../icon/outline.png" class="_icon"></image></view></picker></view>
</view>
</view><!-- 活动地点 -->
<view class="subtitle"><text class="subtitle_font">活动地点*</text>
</view>
<view class="inputborder"><view class="eTime"><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="xuanzheyuyue">当前选择：{{array[index]}}</view></picker></view>
</view>
<view class="inputborder"><input type="text" placeholder="活动地点（必填*）" class="PnameInput" bindinput="huodongPlace"/>
</view>  <!-- 负责人 -->
<view class="subtitle"><text class="subtitle_font">负责人:</text>
</view><!-- 负责人名字 -->
<view class="inputborder"><input type="text" placeholder="名字（必填*）" class="PnameInput" bindinput="fzrName"/>
</view><!-- 负责人年级专业 -->
<view class="inputborder"><input type="text" placeholder="年级专业（必填*）" class="PnameInput" bindinput="fzrGrade"/>
</view><!-- 负责人联系方式 -->
<view class="inputborder"><input type="number" placeholder="联系方式（必填*）" class="PnameInput" bindinput="fzrTelephone"/>
</view><!-- 负责人电子邮箱 -->
<view class="inputborder"><input type="text" placeholder="电子邮箱（选填*）" class="PnameInput" bindinput="fzrMail"/>
</view>  <!-- 预计参与人数 -->
<view class="subtitle"><text class="subtitle_font">预计参与人数</text>
</view>
<input type="text" placeholder="数量（必填*）" class="inputborder" bindinput="amount"/><!-- 项目内容阐述 -->
<view class="subtitle"><text class="subtitle_font">项目内容阐述</text>
</view>
<input type="text" placeholder="简单阐述项目的具体内容" class="inputborder"  bindinput="briefContent"/><!-- 活动经费预算 -->
<view class="subtitle"><text class="subtitle_font">活动经费预算:</text>
</view>
<!-- 预算金额部分 -->
<view class="inputborder">
<input type="text" placeholder="合计：xx元" bindinput="ysTotal" class="PnameInput"/>
</view>
<view class="inputborder">
<input type="text" placeholder="自筹数：xx元" bindinput="yssTotal" class="PnameInput"/>
</view>
<view class="inputborder">
<input type="text" placeholder="申请拨款数：xx元" bindinput="ysbTotal" class="PnameInput"/>
</view><!-- 是否有赞助 -->
<view class="inputborder"><view class="Pname">是否有赞助 <view class="xiaozi">*</view> </view><view><radio-group bindchange="radioChange2"><label wx:for="{{itens}}" wx:key="index" class="Pnamechoose"><view><radio value="{{item.value}}"/></view><view>{{item.name}}</view></label></radio-group></view><view hidden="{{displays}}"><view class="Pname">赞助相关信息 <view class="xiaozi">*</view> </view><input type="text" placeholder="赞助公司(必填)" class="inputborder" bindinput="Company"/><input type="text" placeholder="赞助形式" class="inputborder" bindinput="Form"/><input type="number" placeholder="赞助金额(必填)" class="inputborder" bindinput="Money"/><!-- 选择是否已经提交合同 --><view class="Pname">是否已经提交合同 <view class="xiaozi">*</view></view><radio-group bindchange="radioChange2plus"><label wx:for="{{contractItens}}" wx:key="index" class="Pnamechoose"><view><radio value="{{item.value}}"/></view><view>{{item.name}}</view></label></radio-group></view>
</view><view class="inputborder"><view class="Pname2">是否需要借款 <view class="xiaozi">*</view> </view><view><radio-group bindchange="radioChange"><label wx:for="{{items}}" wx:key="index" class="Pnamechoose"><view><radio value="{{item.value}}"/></view><view>{{item.name}}</view></label></radio-group></view>   <!-- 勾选需要借款 -->
<view hidden="{{display}}"><view class="Pname2">借款人信息填写</view><input type="text" placeholder="借款人*"  bindinput="jkrName" class="inputborder"/><input type="text" placeholder="专业*" class="inputborder" bindinput="jkrGrade"/><input type="text" placeholder="年纪*" class="inputborder" bindinput="jkrAge"/><input type="number" placeholder="联系电话*" class="inputborder" bindinput="jkrTelephone"/><input type="number" placeholder="借款金额*" class="inputborder" bindinput="jkrMoney"/></view></view> <!-- 是否需要发放劳务费 -->
<view class="inputborder"><view class="Pname">是否需要申请发放教师的劳务费</view><view class="xiaozi">*</view><view class="xiaozi">（劳务申请表需提交两周提交）</view><view><radio-group bindchange="radioChange3"><label wx:for="{{itemslwf}}" wx:key="index" class="Pnamechoose"><view><radio value="{{item.value}}"></radio></view><view>{{item.name}}</view></label></radio-group></view><view hidden="{{displaylwf}}"><view class="subtitle"> <text class="Pname">劳务费申请事项填写</text></view><input type="text" placeholder="发放对象填写"  bindinput="lwfDuix" class="inputborder"/><input type="number" placeholder="申请金额"  bindinput="lwfMoney" class="inputborder"/></view></view><view class="inputborder"><view class="Pname">是否需要上传至OA <view class="xiaozi">*</view></view><view><radio-group bindchange="radioChange4"><label wx:for="{{itemsoa}}" wx:key="index" class="Pnamechoose"><view><radio value="{{item.value}}"/></view><view>{{item.name}}</view></label></radio-group></view></view><button bindtap="submit" >提交</button>

apply.wxss

input{border: 1px solid gray;}
/* 小标题位置 */
.subtitle{margin-left: 15px;}
/* 小标题内容 */
.subtitle_font{font-size: large;font-weight: 400;color: #D43C33;
}
/* 输入框 */
.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;
}
.Pname{margin: 28rpx 0 12rpx 0;font-weight: 900;display: inline-block;
}
.PnameInput{border: 1px solid white;border-radius: 1%;display: flex;padding: 15rpx;margin: 20rpx 0 20rpx 0;
}
.sTime{margin: 30rpx 0 30rpx 0;height: 80rpx;display: flex;justify-content: space-around;align-items: center;background:gainsboro;
}
.StartDate{font-size: larger;margin-top: 15px;margin-bottom: 15px;margin-right:15px ;margin-right: 0px;width: 95%;}
._icon{height: 20px;width: 20px;float: right;position: relative;}
.seView{font-weight: 900;
}
.Onepart{margin: 30rpx 0 30rpx 0;font-weight: 900;font-size: larger;
}.PmainName{margin-top: 40rpx;background: silver;display: flex;font-size: larger;height: 100rpx;font-weight: 900;justify-content: center;align-items: center;margin-bottom: 15rpx;
}
.xuanzheyuyue{display: flex;font-weight: 900;font-size: large;margin: 40rpx 0 40rpx 0;justify-content: center;align-items: center;
}
.Pnamechoose{margin: 40rpx 0 40rpx 0;display: flex;width: 50%;flex-wrap: nowrap;justify-content: space-around;text-align: center;display: inline-block;display: space;
}
.xiaozi{font-size: x-small;color: red;display: inline-block;
}
.Pname2{margin: 30rpx 0 0 0;font-weight: 900;
}
.ButtonEnd{margin-top: 80rpx;margin-bottom: 80rpx;}.btn1 {color: white;background-color: thistle;
}
.btn1:active{background-color: rgb(224, 115, 64);
}
.lines{margin-top: 40rpx;display: flex;flex-direction: row;
}
.in{box-sizing: border-box;width: 240rpx;height: 100rpx;background-color: wheat;
}
.choose{margin-top: 20rpx;
}button{border-radius: 80rpx;margin-top: 5%;margin-bottom: 5%;color:#FFFFFF;background-color: #D43030;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}.title{margin-top: 10px;border: 5rpx solid #2c2421;border-radius: 10rpx;padding: 10rpx;display: flex;    /*设置显示样式**/vertical-align: center; /**垂直居中*/justify-content: center; /**内容居中*/}radio-group{margin-top: 10px;justify-content: center; /**内容居中*/}.btn1 {color: white;background-color: thistle;
}
.btn1:active{background-color: rgb(224, 115, 64);
}
.lines{margin-top: 40rpx;display: flex;flex-direction: row;
}
.in{box-sizing: border-box;width: 240rpx;height: 100rpx;background-color: wheat;
}
.choose{margin-top: 20rpx;
}
button{border-radius: 80rpx;margin-top: 5%;margin-bottom: 5%;color:#FFFFFF;background-color: #D43030;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);}
.title{margin-top: 10px;border: 5rpx solid #2c2421;border-radius: 10rpx;padding: 10rpx;display: flex;    /*设置显示样式**/vertical-align: center; /**垂直居中*/justify-content: center; /**内容居中*/}radio-group{margin-top: 10px;justify-content: center; /**内容居中*/}.comment{font-size: 12px;color:gray;margin-left: 15px;margin-right: 15px;
}
.abc{font-size: smaller;border: #D43030;
}

apply.js

const DB = wx.cloud.database().collection("huoDong")
var a = 0
var huodong =new Array();
var fzr = new Array();
let jkr = new Array();
var myDate = new Date();
var ddate = 0
let eventName=''Page({onLoad(){this.setData({liststart:this.data.startDates,listend:this.data.startDates,listyuyue1:this.data.startDates,listyuyue2:this.data.startDates,date1:this.data.startDates,date2:this.data.startDates,date3:this.data.startDates,date4:this.data.startDates,date5:this.data.startDates})},data:{array: ['','校区1', '校区2'],objectArray: [{id: 0,name: ''},{id: 1,name: '校区1'},{id: 2,name: '校区2'},],index: 0,startDates: myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate(),// 活动时间liststart: '',listend:'',listyuyue1:'',listyuyue2:'',huodongna :'',huodongpl:"",fzrna:"",fzrgr:"",fzrte:"",fzrma:"",jkrna:"",jkrgr:"",jkrag:"",jkrte:"",jkrmo:"",ystal:"",ysstal:"",ysbtal:"",money:"",company:"",form:"",contract:"",src:"",xingming:"Hello World!",userInfo:"",hasUserInfo:"true",openid:"",xieyi:"",cyrs:"",briefContent:"",items: [{value: '需要借款', name: '是'},{value: '不需要借款', name: '否'},],// 这个是是否需要借款item:'',huodongbeizhu:'',display:true,itens: [{value: '有赞助', name: '是'},{value: '没有赞助', name: '否'},],contractItens:[{value: '已提交', name: '是'},{value: '未提交', name: '否'},],iten:'',displays:true,multiArray: [['','组织1', '组织2','组织3','组织4','组织5','组织6','组织7']
],objectMultiArray: [[{id: 0,  name: '未选择'},{id: 1,  name: '组织1'},{id: 2,  name: '组织2'},{id: 3,  name: '组织3'},{id: 4,  name: '组织4'},{id: 5,  name: '组织5'},{id: 6,  name: '组织6'},{id: 7,  name: '组织7'},], ],multiIndex: [0],newins:'',newtea:'',area:'',select1: false,changdi1: false,accountIndex: 0,indoor:"",date1: " ",select2: false,changdi2: false,accountIndex1: 0,outdoor:"",wuzi: false,lists: [{"reward": "","num": 0}, ],banyun: false,lists1: [{"sth": "","mon": 0}, ],xc: false,date5: "",itemslwf: [{value: '需要发放劳务费', name: '是'},{value: '不需要发放劳务费', name: '否'},],itemlwf:"",lwfduixiang:"",lwfmoney:"",displaylwf:true,itemsoa:[{value: '需要上传OA', name: '是'},{value: '不需要上传OA', name: '否'},],itemoa:"",itemxc: [{value: true, name: '是'},{value: false, name: '否'},],},// 活动名称huodongName(res){console.log(res.detail.value,"活动名称")let huodongna = res.detail.valuethis.setData({huodongna})console.log(huodongna)},// 起始时间选择bindDatechangeStart(e){// console.log(e)let obj = e.detail.valuethis.setData({liststart:obj})console.log("活动开始时间为", obj,this.data.liststart)},// 截止时间选择bindDatechangeEnd(e){console.log(e.detail.value)let objb =e.detail.valuethis.setData({listend:objb})console.log("活动截止时间为",objb,this.data.listend)},//活动地点 huodongPlace(res){console.log(res.detail.value,"活动地点")let huodongpl = res.detail.valuethis.setData({huodongpl})console.log(huodongpl)},//选择校区bindPickerChange: function(e) {console.log('选择校区的picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})var area0 = "校区1"if(e.detail.value==1){this.setData({area: area0})}var area1 = "校区2"if(e.detail.value==2){this.setData({area: area1})}console.log('校区:',this.data.area)},// 负责人信息fzrName(res){console.log(res.detail.value,"负责人姓名")let fzrna = res.detail.valuethis.setData({fzrna})console.log(fzrna,"fzrna")},fzrGrade(res){console.log(res.detail.value,"负责人专业")let fzrgr = res.detail.valuethis.setData({fzrgr})console.log(fzrgr,"fzrgr")},fzrTelephone(res){console.log(res.detail.value,"负责人联系方式")let fzrte = res.detail.valuethis.setData({fzrte})console.log(fzrte,"fzrte")},fzrMail(res){console.log(res.detail.value,"负责人电子邮箱")let fzrma = res.detail.valuethis.setData({fzrma})console.log(fzrma,"fzrma")},//活动经费预算//合计数ysTotal(res){console.log(res.detail.value,"合计总额")let ystal = res.detail.valuethis.setData({ystal:res.detail.value})console.log(ystal,"ystal")},//自筹数yssTotal(res){console.log(res.detail.value,"自筹金额")let ysstal = res.detail.valuethis.setData({ysstal:res.detail.value})console.log(ysstal,"ysstal")},//申请拨款数ysbTotal(res){console.log(res.detail.value,"拨款金额")let ysbtal = res.detail.valuethis.setData({ysbtal:res.detail.value})console.log(ysbtal,"ysbtal")},// 预约起始时间选择bindDatechangeYuyue1(e){console.log(e.detail.value)let listyuyue1 =e.detail.valuethis.setData({listyuyue1})console.log("预约开始时间为", listyuyue1,this.data.listyuyue1)},// 预约截止时间选择bindDatechangeYuyue2(e){console.log(e.detail.value)let listyuyue2 =e.detail.valuethis.setData({listyuyue2})console.log("预约截止时间为", listyuyue2,this.data.listyuyue2)},// 是否需要借款单项选择radioChange(e) {console.log('radio发生change事件，携带value值为：', e.detail.value)const items = this.data.itemslet item = e.detail.valuethis.setData({items,item})if(item == "不需要借款"){this.setData({display:true})}else{this.setData({display:false})}console.log(item, this.data.display+"借款")},//是否有赞助radioChange2(e) {console.log('radio发生change事件，携带value值为：', e.detail.value)const itens = this.data.itenslet iten = e.detail.value  this.setData({itens,iten})if(iten == "没有赞助"){this.setData({displays:true})}else{this.setData({displays:false})}console.log(iten, this.data.displays)},// 是否有提交赞助合同单项选择radioChange2plus(e) {console.log('radio发生change事件，携带value值为：', e.detail.value)this.setData({contract:e.detail.value})},// 是否需要申请发放劳务费radioChange3(e) {console.log('radio发生change事件，携带value值为', e.detail.value)const itemslwf = this.data.itemslwflet itemlwf = e.detail.value  this.setData({itemslwf,itemlwf})if(itemlwf == "不需要发放劳务费"){this.setData({displaylwf:true})}else{this.setData({displaylwf:false})}console.log(this.data.itemlwf)},// 是否需要上传oaradioChange4(e) {console.log('radio发生change事件，携带value值为：', e.detail.value)const itemsoa = this.data.itemsoalet itemoa = e.detail.valuethis.setData({itemsoa,itemoa})console.log(this.data.itemoa)},// 所归属的组织选择bindMultiPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({multiIndex: e.detail.value})var newins0 = "组织1"if(this.data.multiIndex[0]==1){this.setData({newins: newins0})}var newins1 = "组织2"if(this.data.multiIndex[0]==2){this.setData({newins: newins1})}var newins2 = "组织3"if(this.data.multiIndex[0]==3){this.setData({newins: newins2})}var newins3 = "组织4"if(this.data.multiIndex[0]==4){this.setData({newins: newins3})}var newins4 = "组织5"if(this.data.multiIndex[0]==5){this.setData({newins: newins4})}var newins5 = "组织6"if(this.data.multiIndex[0]==6){this.setData({newins: newins5})}var newins6 = "组织7"if(this.data.multiIndex[0]==7){this.setData({newins: newins6})}},// 获取用户信息getUserProfile(e){wx.getUserProfile({desc: '展示用户信息',success:(res) =>{console.log(res)this.setData({userInfo:res.userInfo,hasUserInfo:true})},})console.log(this.data.src, this.data.xingming)},// 借款人信息// 借款人姓名jkrName(res){console.log(res.detail.value,"借款人姓名")let jkrna = res.detail.valuethis.setData({jkrna})console.log(jkrna)},// 借款人专业jkrGrade(res){console.log(res.detail.value,"借款人专业")let jkrgr = res.detail.valuethis.setData({jkrgr})console.log(jkrgr)},// 借款人年龄jkrAge(res){console.log(res.detail.value,"借款人年龄")let jkrag = res.detail.valuethis.setData({jkrag})console.log(jkrag)},// 借款人电话jkrTelephone(res){console.log(res.detail.value,"借款人联系电话")let jkrte = res.detail.valuethis.setData({jkrte})console.log(jkrte)},// 借款金额jkrMoney(res){console.log(res.detail.value,"借款金额")let jkrmo = res.detail.valuethis.setData({jkrmo})console.log(jkrmo)},// 赞助金额Money(res){console.log(res.detail.value,"赞助金额")let money = res.detail.valuethis.setData({money})console.log(money)},//赞助公司Company(res){console.log(res.detail.value,"赞助公司")let company = res.detail.valuethis.setData({company})console.log(company)},//赞助形式Form(res){console.log(res.detail.value,"赞助形式")let form = res.detail.valuethis.setData({form})console.log(form)},lwfDuix(res){console.log(res.detail.value,"劳务费对象")let lwfduixiang = res.detail.valuethis.setData({lwfduixiang})console.log(this.data.lwfduixiang)},lwfMoney(res){console.log(res.detail.value,"劳务费金额")let lwfmoney = res.detail.valuethis.setData({lwfmoney})console.log(this.data.lwfmoney)},// 活动备注获取huodongBeizhu(res){console.log(res.detail.value,"活动地点")let huodongbeizhu = "预约事项备注："+res.detail.valuethis.setData({huodongbeizhu})console.log(huodongbeizhu)},//预计参与人数填写amount(res){console.log(res.detail.value,"预计参与人数")let cyrs = res.detail.valuethis.setData({cyrs})console.log(cyrs)},// 项目内容阐述填写briefContent(res){console.log(res.detail.value,"项目内容阐述是")let briefContent = res.detail.valuethis.setData({briefContent})console.log(briefContent)},     // 提交按钮提交信息Tijiao(e){if(this.data.huodongna ==''){wx.showToast({icon:"none",title: '活动名称尚未填写',})}else if(this.data.huodongpl ==''){wx.showToast({icon:"none",title: '活动地点尚未填写',})}else if(this.data.fzrma =='' || this.data.fzrgr =='' || this.data.fzrte =='' || this.data.fzrma ==''){wx.showToast({icon:"none",title: '负责人信息尚未填写完整',})}else if(this.data.item == ''){wx.showToast({icon:"none",title: '活动经费部分尚未填写完整',})}else if(this.data.iten == ''){wx.showToast({icon:"none",title: '是否有赞助尚未勾选',})}else{switch(this.data.item){case "不需要借款":switch(this.data.iten){case "没有赞助":this.final()break;case "有赞助":if(this.data.money == ''){wx.showToast({icon:"none",title: '赞助金额未填写',})}else if(this.data.xieyi == ''){wx.showToast({icon:"none",title: '赞助协议未上传',})}else{this.final()}break;    }break;case '需要借款':if(this.data.jkrna =='' || this.data.jkrgr =='' || this.data.jkrag =='' || this.data.jkrte =='' ||this.data.jkrmo ==''){wx.showToast({icon:"none",title: '借款人信息尚未填写完整',})}else{switch(this.data.iten){case "没有赞助":// final后面有定义this.final()break;case "有赞助":if(this.data.money == ''){wx.showToast({icon:"none",title: '赞助金额未填写',})}else if(this.data.xieyi == ''){wx.showToast({icon:"none",title: '赞助协议未上传',})}else{this.final()}break;    }break;}}}},upLoad(){let that =thiswx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res) {// tempFilePath可以作为 img 标签的 src 属性显示图片// const tempFilePaths = res.tempFilePathsconsole.log("选择成功",res)console.log(res.tempFilePaths[0])that.upLoadImg(res.tempFilePaths[0]);}})},upLoadImg(fileUrl){wx.cloud.uploadFile({cloudPath: 'qqq.png', // 上传至云端的路径filePath: fileUrl, // 小程序临时文件路径success: res => {// 返回文件 IDconsole.log("上传成功",res)},fail: console.error})},// 用于上传所有数据到数据库final(){wx.cloud.callFunction({name:"getOpenid",success:(res) =>{// 用success:(res) =>{}这种方法表示函数可以不怕易位的影响，可以不需要使用 let that= this来转换方向console.log( "获取id成功",res.result.openid)this.setData({openid:res.result.openid})console.log(this.data.openid, "这是this.data.openid")},fail(res){console.log("获取id失败",res)}})      let yhuodongna =this.data.huodongnalet newins = this.data.multiArray[0]let newtea = this.data.multiArray[1]},changeyes1() {this.setData({changdi1: true,})},changeno1() {this.setData({changdi1: false,})},changeyes2() {this.setData({changdi2: true,})},changeno2() {this.setData({changdi2: false,})},changeyes3() {this.setData({wuzi: true,})},changeno3() {this.setData({wuzi: false,})},changeyes4() {this.setData({banyun: true,})},changeno4() {this.setData({banyun: false,})},changeyes5() {this.setData({xc: true,})},changeno5() {this.setData({xc: false,})},bindShowMsg1() {this.setData({select1: !this.data.select1})},bindShowMsg2() {this.setData({select2: !this.data.select2})},bindDateChange1: function (e) {console.log(e.detail.value)this.setData({date1: e.detail.value})},bindDateChange2: function (e) {console.log(e.detail.value)this.setData({date2: e.detail.value})},bindDateChange3: function (e) {console.log(e.detail.value)this.setData({date3: e.detail.value})},bindDateChange4: function (e) {console.log(e.detail.value)this.setData({date4: e.detail.value})},bindDateChange5: function (e) {console.log(e.detail.value)this.setData({date5: e.detail.value})},//刷新页面onPullDownRefresh: function () {console.log('用户刷新了页面')//刷新页面数据this.getList()},//获取openidgetList() {wx.cloud.callFunction({name: 'getData'}).then(res => {console.log("用户openid", res.result.openid)}).catch(err => {console.log("请求云函数失败", err)})},//提交信息到数据库submit: function (e) {let that = this;if (!this.data.huodongna) {wx.showToast({title: "请填写活动名称",icon: "none",});return false;}if (!this.data.huodongpl) {wx.showToast({title: "请填写活动地点",icon: "none",});return false;}if (!this.data.fzrna || !this.data.fzrgr || !this.data.fzrte) {wx.showToast({title: "请填写完整负责人信息",icon: "none",});return false;}if (!this.data.ystal || !this.data.ysstal || !this.data.ysbtal) {wx.showToast({title: "请填写完整活动经费预算",icon: "none",});return false;}if(this.data.iten == "有赞助" || !this.data.iten){if(!this.data.company || !this.data.form || !this.data.money){wx.showToast({title: "请填写完整赞助相关信息",icon: "none",});return false;}}if(this.data.item == "需要借款" || !this.data.item){if(!this.data.jkrna || !this.data.jkrgr || !this.data.jkrag || !this.data.jkrte || !this.data.jkrmo){wx.showToast({title: "请填写完整借款人相关信息",icon: "none",});return false;}}if(this.data.itemlwf == "需要发放劳务费" || !this.data.itemlwf){if(!this.data.lwfduixiang || !this.data.lwfmoney){wx.showToast({title: "请填写完整劳务费申请相关信息",icon: "none",});return false;}}if (!this.data.cyrs) {wx.showToast({title: "请填写预计参与人数",icon: "none",});return false;}if (!this.data.itemoa) {wx.showToast({title: "请选择是否上传OA",icon: "none",});return false;}wx.showLoading({title: '正在上传中……',mask:true})this.final()DB.add({ // add指 插入数据库中的userlist表；//将我们获取到的新值代入data: { // data 字段表示需新增的 JSON 数据       a1_huodongName:this.data.huodongna,a2_startTime:this.data.liststart,a3_endTime:this.data.listend,a4_huodongPlace:this.data.huodongpl,a5_area:this.data.area,b1_fzrName:this.data.fzrna,b2_fzrGrade:this.data.fzrgr,b3_fzrTelephone:this.data.fzrte,b4_fzrMail:this.data.fzrma,c1_jingfeiTotal:this.data.ystal,c2_jingfeiSelf: this.data.ysstal,c3_jingfeiApply: this.data.ysbtal,d1_sponsor:this.data.iten,d2_sponsorCompany:this.data.company,d3_sponsorForm:this.data.form,d4_sponsorMoney:this.data.money,d5_sponsorContract:this.data.contract,e1_borrow:this.data.item,e2_jkrName:this.data.jkrna,e3_jkrGrade:this.data.jkrgr,e4_jkrAge:this.data.jkrag,e5_jkrTelephone:this.data.jkrte,e6_jkrMoney:this.data.jkrmo,f1_serviceFee:this.data.itemlwf,f2_serviceObject:this.data.lwfduixiang,f3_serviceMoney:this.data.lwfmoney,g1_orderInstitute: this.data.newins,g2_organizationId: this.data.multiIndex[0],h1_remark:this.data.huodongbeizhu,h2_participant:this.data.cyrs,h3_uploadOA:this.data.itemoa,h4_briefContent:this.data.briefContent,state:0,},}).then(res => {console.log("上传成功", res)wx.showToast({title: '成功',})wx.switchTab({url: '../index/index',}).then(()=>{wx.startPullDownRefresh()})}).catch(err => {console.log("上传失败", err)wx.showToast({title: '失败',icon:"none"})})}})

题外话

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

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

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

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

前言