记录:写的课表小程序终于完成啦,今天发布审核通过了,实现了基本的课表、等级考试、成绩、考试安排等信息查询。
部分页面如下:
更多功能后面完善:
登录页面:
js:
const db = wx.cloud.database();
import {
getTimeNow
} from '../../utils/util.js';
Page({
/**
* 页面的初始数据
*/
data: {
check: false,
preview: false,
passwordType: true,
preview1: false,
passwordType1: true,
xuehao: '',
jwxt: '',
webvpn: '',
User_info: '',
showPopover: true,
},
// 自定义遮罩 弹窗
show_cover(e) {
console.log('点击课l')
console.log(e.currentTarget.dataset)
this.setData({
showPopover: !this.data.showPopover
})
},
//
xunwen() {
wx.showToast({
title: '询问辅导员',
icon: "none",
duration: 3000,
mask: true
})
},
// 更改 预览 显示 正方系统
show() {
this.setData({
preview: !this.data.preview,
passwordType: !this.data.passwordType,
})
},
// 更改 预览 显示 webvpn
show1() {
this.setData({
preview1: !this.data.preview1,
passwordType1: !this.data.passwordType1,
})
},
// 获取输入的 学号
get_xuehao(e) {
this.setData({
xuehao: e.detail.value
})
},
// 获取输入的 教务系统密码
get_jwxt(e) {
this.setData({
jwxt: e.detail.value
})
},
// 获取输入的 webvpn密码
get_webvpn(e) {
this.setData({
webvpn: e.detail.value
})
},
// 跳转到免责声明
gotoBook() {
wx.navigateTo({
url: '/pages/agreementS/agreementS',
})
},
// 勾选阅读 协议
select() {
this.setData({
check: !this.data.check,
})
console.log(this.data.check)
},
// 返回我的页面
return () {
wx.reLaunch({
url: '/pages/my/my',
})
},
// setTimeout(
// function () {
// wx.hideLoading()
// }, 2000)
})
wxml:
<!-- 顶部left 返回图片 -->
<view class="return">
<image bindtap="return" src="/imgs/return.png" mode="" />
</view>
<!-- 欢迎语 -->
<view class="t1">
<view class="t2">
<text>Hello!</text>
</view>
<view class="t3">
<text>欢迎使用We移通校园~</text>
</view>
</view>
<!-- 仅限 -->
<view class="toast">
<view class="toast_title">
<text>仅限移通学子登录使用</text>
</view>
</view>
<view class="line"></view>
<!-- 用户输入: 学号 + webvpn认证密码 + 教务系统密码 -->
<view class="login_all">
<view class="login_info">
<!-- 学号 -->
<view class="login_item1">
<image src="/imgs/user.png" mode="" />
<input type="text" placeholder="请输入10位数的学号" value="{
{ xuehao }}" bindinput="get_xuehao" />
</view>
<view class="new_line"></view>
<!-- 教务系统 密码 -->
<view class="login_item1">
<image src="/imgs/lock.png" mode="" />
<input name="password" password='{
{passwordType}}' type="text" placeholder="请输入教务系统自定义的密码" value="{
{ jwxt }}" bindinput="get_jwxt" />
<image bindtap="show" wx:if="{
{preview}}" class="preview" src="/imgs/preview_open.png" mode="" />
<image bindtap="show" wx:else="{
{preview}}" class="preview" src="/imgs/preview_close.png" mode="" />
</view>
<view class="new_line"></view>
<!-- webvpn 密码 -->
<view class="login_item1">
<image src="/imgs/lock.png" mode="" />
<input name="password" password='{
{passwordType1}}' placeholder="请输入webvpn认证密码(默认身份证后六位)" value="{
{ webvpn }}" bindinput="get_webvpn" />
<image bindtap="show1" wx:if="{
{preview1}}" class="preview" src="/imgs/preview_open.png" mode="" />
<image bindtap="show1" wx:else="{
{preview1}}" class="preview" src="/imgs/preview_close.png" mode="" />
</view>
<view class="new_line"></view>
</view>
</view>
<!-- 登录区块 -->
<view hover-class="hover-class-1" bindtap="get_Userdata" class="login_button">
<text>登录</text>
</view>
<!-- 登录问题 -->
<view class="login_err">
<text bindtap="show_cover">登录遇到问题?</text>
<text bindtap="xunwen">忘记密码?</text>
</view>
<view class="statement">
<checkbox bindtap="select" value="cb" />
<text>同意并遵守:</text>
<text bindtap="gotoBook">《用户协议》</text>
<!-- <view class="Copyright">Copyright © 2023 yuanxinghua</view> -->
</view>
<!-- <view class="Copyright">
Copyright © 2023 yuanxinghua
</view> -->
<view class="Copyright">
<text>Copyright © 2023 We移通校园</text>
</view>
<!-- 自定义遮罩层 -->
<view bindtap="show_cover" class="mask" wx:if="{
{!showPopover}}"></view>
<!-- 自定义弹窗-->
<view wx:if="{
{!showPopover}}" style="background-color: white;width:90%; position: absolute; top: 40%; left: 0; right: 0; border-radius: 4px; z-index: 999; justify-content: center; margin: 0 auto; ">
<view style="text-align: center;color: black;margin: 15px 0; font-size: 26rpx; opacity: 0.8;">
<text>如果密码确认无误</text>
</view>
<view style="text-align: center;color: black;margin: 15px 0; font-size: 26rpx; opacity: 0.8;">
<text>还是登录失败,可能是触发了验证码</text>
</view>
<view style="text-align: center;color: black;margin: 15px 0; font-size: 26rpx; opacity: 0.8;">
<text>次日登录即可</text>
</view>
</view>
wxss:
.return {
position: relative;
top: 100rpx;
left: 30rpx;
}
.return image {
width: 40rpx;
height: 40rpx;
}
.t1 {
margin-left: 40rpx;
margin-top: 200rpx;
}
.t2 text {
background: -webkit-linear-gradient(left, #ef33b1, #6cc6cb);
/* background: -webkit-linear-gradient(left, #ef33b1, #4c99e8); */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font-size: 52rpx;
}
.t3 text {
color: #ffffff;
font-weight: bold;
font-size: 42rpx;
}
page {
background-color: #FC00FF;
background-image: linear-gradient(135deg, #FC00FF 9%, #00DBDE 26%, #ffffff 72%, #ffffff 100%);
}
.toast {
margin-top: 200rpx;
}
.toast_title {
display: flex;
justify-content: center;
align-items: center;
}
.toast_title text {
font-size: 30rpx;
font-weight: bold;
}
.line {
display: flex;
justify-content: center;
background-color: #d0dbf3;
height: 5rpx;
width: 37%;
margin: 0 auto;
margin-top: 7rpx;
}
/* 用户 学号 密码 样式 */
.login_all {
margin-top: 50rpx;
}
.login_info {
margin: 40rpx;
background-color: #fff;
/* padding: 20rpx; */
padding-top: 5rpx;
padding-bottom: 25rpx;
border-radius: 18rpx;
box-shadow: 0px 0px 0px #ffffff, 1px 1px 11px #95f0f1;
}
.login_item1 {
display: flex;
flex-direction: row;
width: 95%;
margin: 0 auto;
margin-top: 30rpx;
margin-bottom: 25rpx;
}
.login_item1 input {
margin-left: 30rpx;
width: 80%;
font-size: 26rpx;
opacity: 0.6;
}
.preview {
margin-left: 10rpx;
}
.login_item1 image {
width: 40rpx;
height: 40rpx;
}
.new_line {
display: flex;
justify-content: center;
background-color: #d1d1d1;
height: 2rpx;
width: 95%;
margin: 0 auto;
}
/* end */
.login_button {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 79%;
border-radius: 8rpx;
height: 80rpx;
background-color: #9faee0;
margin-top: 100rpx;
}
.login_button text {
/* font-size: 32rpx; */
color: #ffffff;
}
.login_err {
width: 85%;
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-top: 20rpx;
}
.login_err text {
font-size: 26rpx;
color: #9faee0;
}
.statement {
display: flex;
justify-content: center;
text-align: center;
align-content: center;
font-size: 26rpx;
margin-top: 200rpx;
position: absolute;
left: 0;
right: 0;
bottom: 80rpx;
}
.statement text:nth-child(2) {
margin-left: 15rpx;
margin-top: 6rpx;
}
.statement text:nth-child(3) {
margin-left: 15rpx;
margin-top: 6rpx;
color: #366de0;
}
.Copyright {
font-size: 28rpx;
opacity: 0.8;
justify-content: center;
align-items: center;
text-align: center;
/* margin-top: 100rpx */
position: absolute;
left: 0;
right: 0;
bottom: 30rpx;
}
.Copyright text {
opacity: 0.5;
}
/* 按钮的点击效果 */
.hover-class-1 {
background-color: #518267;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 90;
opacity: 0.7;
}
一直想拥有一个自己的课表小程序,今天'圆梦'了~