校园课表小程序--完工啦

记录：写的课表小程序终于完成啦，今天发布审核通过了，实现了基本的课表、等级考试、成绩、考试安排等信息查询。

部分页面如下：

 更多功能后面完善：

登录页面：

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;
  }

一直想拥有一个自己的课表小程序，今天'圆梦'了~