323 lines
6.2 KiB
Plaintext
323 lines
6.2 KiB
Plaintext
<template>
|
|
<view class="page-container">
|
|
<scroll-view class="content-scroll" direction="vertical">
|
|
<!-- 步骤进度 -->
|
|
<view class="step-indicator">
|
|
<view class="step-item">
|
|
<view class="step-dot step-dot-completed"></view>
|
|
<text class="step-text">扫码绑定孩子</text>
|
|
</view>
|
|
<view class="step-line step-line-completed"></view>
|
|
<view class="step-item">
|
|
<view class="step-dot step-dot-completed"></view>
|
|
<text class="step-text">家长账号与密码</text>
|
|
</view>
|
|
<view class="step-line step-line-completed"></view>
|
|
<view class="step-item step-active">
|
|
<view class="step-dot step-dot-active"></view>
|
|
<text class="step-text step-text-active">注册完成</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 成功图标 -->
|
|
<view class="success-section">
|
|
<view class="success-icon-wrap">
|
|
<view class="success-mark"></view>
|
|
</view>
|
|
<text class="success-title">注册完成</text>
|
|
<text class="success-desc">已绑定 {{ students.length }} 名学生</text>
|
|
<text class="success-tip">使用手机号即可登录家长端查看孩子学情</text>
|
|
</view>
|
|
|
|
<!-- 已绑定学生列表 -->
|
|
<view class="student-list-section">
|
|
<view class="section-header">
|
|
<text class="section-title">已绑定学生</text>
|
|
<text class="section-count">共 {{ students.length }} 名</text>
|
|
</view>
|
|
<view class="student-item" v-for="(student, index) in students" :key="student.id">
|
|
<text class="student-index">{{ index + 1 }}</text>
|
|
<image class="student-avatar" :src="student.avatar || '/static/avatar-default.png'" mode="aspectFill"></image>
|
|
<view class="student-info">
|
|
<text class="student-name">{{ student.name }}</text>
|
|
<text class="student-account">账号 {{ student.account }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="button-group">
|
|
<view class="btn-primary" @tap="handleGoHome">
|
|
<text class="btn-primary-text">去登录</text>
|
|
</view>
|
|
<view class="btn-secondary" @tap="handleGoLogin">
|
|
<text class="btn-secondary-text">返回首页</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { registrationStudents } from '../../store/registration'
|
|
|
|
const students = registrationStudents
|
|
|
|
function handleGoHome() {
|
|
uni.reLaunch({
|
|
url: '/pages/login/index'
|
|
})
|
|
}
|
|
|
|
function handleGoLogin() {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.content-scroll {
|
|
flex: 1;
|
|
padding: 16px;
|
|
padding-bottom: calc(16px + var(--uni-safe-area-inset-bottom));
|
|
}
|
|
|
|
/* 步骤指示器 */
|
|
.step-indicator {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
background-color: #FFFFFF;
|
|
border-radius: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.step-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.step-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
background-color: #E5E5E5;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.step-dot-completed {
|
|
background-color: #10B981;
|
|
}
|
|
|
|
.step-dot-active {
|
|
background-color: #6C63FF;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.step-text {
|
|
font-size: 11px;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
.step-text-active {
|
|
color: #6C63FF;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.step-line {
|
|
flex: 1;
|
|
height: 2px;
|
|
background-color: #E5E5E5;
|
|
margin: 0 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.step-line-completed {
|
|
background-color: #10B981;
|
|
}
|
|
|
|
/* 成功区域 */
|
|
.success-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 32px 16px;
|
|
background-color: #FFFFFF;
|
|
border-radius: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.success-icon-wrap {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: #ECFDF5;
|
|
border-radius: 40px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.success-check {
|
|
font-size: 0;
|
|
}
|
|
|
|
.success-mark {
|
|
width: 28px;
|
|
height: 14px;
|
|
border-left: 4px solid #10B981;
|
|
border-bottom: 4px solid #10B981;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1F2937;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.success-desc {
|
|
font-size: 16px;
|
|
color: #6B7280;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.success-tip {
|
|
font-size: 13px;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
/* 学生列表 */
|
|
.student-list-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
background-color: #FFFFFF;
|
|
border-radius: 12px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.section-count {
|
|
font-size: 13px;
|
|
color: #999999;
|
|
}
|
|
|
|
.student-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #F3F4F6;
|
|
}
|
|
|
|
.student-index {
|
|
width: 28px;
|
|
height: 28px;
|
|
background-color: #EEF2FF;
|
|
border-radius: 14px;
|
|
color: #6C63FF;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.student-avatar {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 22px;
|
|
margin-right: 12px;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.student-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.student-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.student-account {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn-primary {
|
|
height: 52px;
|
|
background-color: #6C63FF;
|
|
border-radius: 26px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.btn-primary-text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-secondary {
|
|
height: 52px;
|
|
background-color: #FFFFFF;
|
|
border-radius: 26px;
|
|
border: 1px solid #E5E5E5;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-secondary-text {
|
|
font-size: 16px;
|
|
color: #6B7280;
|
|
}
|
|
</style>
|