'完成教员认证详情页面'

app.json

@@ -1,7 +1,9 @@
 
 {
     "pages": [
+        "pages/authenticationDetail/authenticationDetail",
         "pages/myInfo/myInfo",
+        "pages/mask/mask",
         "pages/handleSuggest/handleSuggest",
         "pages/manageSuggestDetail/manageSuggestDetail",
         "pages/manageSuggest/manageSuggest",

pages/authenticationDetail/authenticationDetail.js

@@ -0,0 +1,66 @@
+// pages/authenticationDetail/authenticationDetail.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/authenticationDetail/authenticationDetail.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "我的教员认证详情"
+}

pages/authenticationDetail/authenticationDetail.wxml

@@ -0,0 +1,91 @@
+<!--pages/authenticationDetail/authenticationDetail.wxml-->
+
+<!-- 顶部信息 -->
+<view class="userInfo">
+    <view>
+        <text>用户ID</text>
+        <text class="userDetail">20230105</text>
+    </view>
+    <view class="userName">
+        <text>贵姓</text>
+        <text class="userDetail">赵</text>
+    </view>
+</view>
+<view class="userInfo">
+    <view>
+        <text>手机号</text>
+        <text class="userDetail">13440010000</text>
+    </view>
+    <view class="userName">
+        <text>英文名</text>
+        <text class="userDetail">zhao</text>
+    </view>
+</view>
+<view class="userInfo">
+    <text>微信号</text>
+    <text class="userDetail">13440010000</text>
+</view>
+<view class="userInfo">
+    <text>身份证号</text>
+    <text class="userDetail">123456789123456789</text>
+</view>
+<!-- 照片信息 -->
+<view class="userImg">
+    <view class="userImgDetail">
+        <image class="userImage" src="../../images/zly.jpeg"></image>
+    </view>
+    <view class="userImgDetail">
+        <image class="userImage" src="../../images/zly.jpeg"></image>
+    </view>
+    <view class="userImgDetail">
+        <image class="userImage" src="../../images/zly.jpeg"></image>
+    </view>
+    <view class="userImgDetail">
+        <image class="userImage" src="../../images/zly.jpeg"></image>
+    </view>
+</view>
+<!-- 高校信息 -->
+<view class="school">
+    <text>高校全名</text>
+    <text class="schoolName">四川大学</text>
+</view>
+<!-- 教员性别和专业 -->
+<view class="teacherSexMajor">
+    <view>
+        <text>教员性别</text>
+        <text class="userDetail">女</text>
+    </view>
+    <view class="teacherMajor">
+        <text>专业</text>
+        <text class="userDetail">计算机科学与技术</text>
+    </view>
+</view>
+<!-- 籍贯 -->
+<view class="userInfo">
+    <text>籍贯</text>
+    <text class="userDetail">四川省成都市高新区</text>
+</view>
+<!-- 当前学历 -->
+<view class="userInfo">
+    <text>当前学历</text>
+    <text class="userDetail">本科</text>
+</view>
+<!-- 审核状态 -->
+<view class="audit">
+    <text>审核状态</text>
+    <text class="auditDetail">不通过</text>
+</view>
+<!-- 审核不通过原因 -->
+<view class="auditResult">
+    <text>审核不通过原因</text>
+    <text class="auditDetail">没传照片</text>
+</view>
+<!-- 申请日期 -->
+<view class="applyDate">
+    <text>申请日期</text>
+    <text class="userDetail">2023-01-05</text>
+</view>
+<!-- 修改认证按钮 -->
+<view class="modify">
+    <text class="modifyBtn">修改认证</text>
+</view>

pages/authenticationDetail/authenticationDetail.wxss

@@ -0,0 +1,86 @@
+/* pages/authenticationDetail/authenticationDetail.wxss */
+
+/* 设置页面样式 */
+page{
+    padding: 20rpx;
+    background-color: #FFF2CC;
+    font-size: 28rpx;
+}
+/* 顶部用户信息、性别和专业 */
+.userInfo,
+.teacherSexMajor{
+    display: flex;
+    margin-top: 16rpx;    
+}
+/* 姓、英文名、专业 */
+.userName,
+.teacherMajor{
+    position: absolute;
+    left: 50%;
+}
+.school{
+    margin-top: 30rpx;
+}
+/* 用户详情、高校名称、审核状态即原因 */
+.userDetail,
+.schoolName,
+.auditDetail{
+    margin-left: 20rpx;
+    font-weight: bold;
+}
+/* 照片信息 */
+.userImg{
+    margin-top: 30rpx;
+    display: flex;
+    flex-wrap: wrap;
+}
+/* 设置边框 */
+.userImgDetail{
+    width: 45%;
+    padding: 10rpx;
+    height: 200rpx;
+    display: flex;
+    border-left: 1rpx solid gray;
+    border-top: 1rpx solid gray;
+}
+/* 偶数照片添加右边框 */
+.userImg :nth-child(even){
+    border-right: 1rpx solid gray;
+}
+/* 第三张照片添加下边框 */
+.userImg :nth-child(3){
+    border-bottom: 1rpx solid gray;
+}
+/* 第四张照片添加下边框 */
+.userImg :nth-child(4){
+    border-bottom: 1rpx solid gray;
+}
+/* 设置照片 */
+.userImage{
+    width: 100%;
+    height: 100%;
+}
+/* 审核状态 */
+.audit{
+    margin-top: 40rpx;
+}
+/* 审核不通过原因、申请日期 */
+.auditResult,
+.applyDate{
+    margin-top: 20rpx;
+}
+
+/* 修改认证按钮 */
+.modify{
+    margin-top: 120rpx;
+    margin-bottom: 60rpx;
+    display: flex;
+    justify-content: center;
+}
+.modifyBtn{
+    font-size: 38rpx;
+    padding: 10rpx 30rpx;
+    border-radius: 40rpx;
+    background-color: #8FAADC;
+    color: white;
+}

pages/mask/mask.js

@@ -0,0 +1,80 @@
+// pages/mask/mask.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        status:false
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    // 点击邀请按钮
+    toInvitation(){
+        this.setData({
+            status:true
+        })
+    },
+
+    // 取消功能
+    cancelChosed(){
+        this.setData({
+            status:false
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/mask/mask.json

@@ -0,0 +1,3 @@
+{
+    "usingComponents": {}
+}

pages/mask/mask.wxml

@@ -0,0 +1,110 @@
+<!--pages/mask/mask.wxml-->
+<view class="invitation" bindtap="toInvitation">
+    <text class="invitationTitle">邀请</text>
+</view>
+
+<!-- 蒙层 -->
+<view class="maskWrapper" wx:if="{{status}}">
+    <view>
+        <text>请您从下方列表中，选中一条课程或需求信息，作为邀请的具体内容，发给对方！</text>
+    </view>
+    <scroll-view class="scrollVertical" scroll-y>
+        <radio-group class="chooseList">
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+            <radio class="chooseDetail">
+                <view class="courseTitle">
+                    <text>课程号</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+                <view class="courseTitle">
+                    <text>辅导科目</text>
+                    <text class="courseDetail">xxx</text>
+                </view>
+            </radio>
+
+        </radio-group>
+    </scroll-view>
+    <view class="commitAndCancel">
+        <view class="cancel" bindtap="cancelChosed">取消</view>
+        <view class="commit">发送</view>
+    </view>
+</view>

pages/mask/mask.wxss

@@ -0,0 +1,70 @@
+/* pages/mask/mask.wxss */
+page{
+    padding: 20rpx 20rpx 0 20rpx;
+}
+.invitation{
+    display: flex;
+}
+.invitationTitle{
+    border: 1rpx solid gray;
+    padding: 10rpx 20rpx;
+    border-radius: 30rpx;
+}
+/* 以下是蒙层样式 */
+
+.maskWrapper{
+    z-index: 3;    
+    margin-left: -20rpx;
+    padding: 20rpx;
+    position: absolute;
+    height: 70%;
+    bottom: 0;
+    background-color: #D1D1D1;
+    border-top-left-radius: 30rpx;
+    border-top-right-radius: 30rpx;
+}
+/* 可滚动区域 */
+.scrollVertical{
+    height: 76%;
+}
+
+/* 选项区 */
+.chooseList{
+    display: flex;
+    flex-direction: column;
+}
+/* 单个选项样式 */
+.chooseDetail{
+    width: 94%;
+    padding: 10rpx;
+    margin: 10rpx 0;
+    border: 1rpx solid gray;
+    border-radius: 20rpx;
+    background-color: #DEEBF7;
+}
+/* 设置选项与圆圈的距离 */
+.courseTitle{
+    margin-left: 30rpx;
+}
+/* 课程号、辅导科目详情 */
+.courseDetail{
+    margin-left: 20rpx;
+    font-weight: bold;
+}
+/* 底部按钮 */
+.commitAndCancel{
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    position: fixed;
+    bottom: 40rpx;
+}
+.cancel,
+.commit{
+    font-size: 40rpx;
+    border: 1rpx solid gray;
+    padding: 10rpx 60rpx;
+    border-radius: 40rpx;
+    background-color: #8FAADC;
+    color: white;
+}