周锐 / zk-teach-applet · Commits

Go to a project

Authored by Rickie
Commit b024d3e3dfa0caf1620d5abd9db0d9e112daa6ba 1 parent 00131b77

完善

Inline Side-by-side
Showing 7 changed files with 159 additions and 101 deletions
1 import { request } from '../utils/request.js'; 1 import { request } from '../utils/request.js';
2 2
3 -export const getDeviceList = () => {  
4 - return request({  
5 - url: '/device/list',  
6 - method: 'GET',  
7 - });  
8 -};  
9 -  
10 // 登录 3 // 登录
11 export const loginApi = (data) => { 4 export const loginApi = (data) => {
12 return request({ 5 return request({
@@ -60,3 +53,21 @@ export const signUpApi = (data) => { @@ -60,3 +53,21 @@ export const signUpApi = (data) => {
60 data, 53 data,
61 }); 54 });
62 }; 55 };
  56 +
  57 +// 获取用户信息
  58 +export const userInfoApi = (data) => {
  59 + return request({
  60 + url: '/api/get-info',
  61 + method: 'GET',
  62 + data,
  63 + });
  64 +};
  65 +
  66 +// 获取我的报名列表
  67 +export const userSignUpListApi = (data) => {
  68 + return request({
  69 + url: '/api/course/get-my-signup',
  70 + method: 'GET',
  71 + data,
  72 + });
  73 +};
@@ -10,7 +10,8 @@ @@ -10,7 +10,8 @@
10 { 10 {
11 "path": "pages/my/my", 11 "path": "pages/my/my",
12 "style": { 12 "style": {
13 - "navigationBarTitleText": "我的" 13 + "navigationBarTitleText": "",
  14 + "navigationStyle": "custom"
14 } 15 }
15 }, 16 },
16 { 17 {
@@ -92,14 +92,22 @@ @@ -92,14 +92,22 @@
92 try { 92 try {
93 await formRef.value.validate() 93 await formRef.value.validate()
94 94
  95 + uni.showLoading({
  96 + title: "提交中",
  97 + mask: true
  98 + })
  99 +
95 const res = await addStudentsApi(state.studentInfo) 100 const res = await addStudentsApi(state.studentInfo)
  101 + uni.hideLoading()
96 uni.showToast({ 102 uni.showToast({
97 icon: 'success', 103 icon: 'success',
98 title: '添加成功' 104 title: '添加成功'
99 }) 105 })
100 formRef.value.resetFields() 106 formRef.value.resetFields()
101 uni.navigateBack() 107 uni.navigateBack()
102 - } catch {} 108 + } finally {
  109 + uni.hideLoading()
  110 + }
103 } 111 }
104 </script> 112 </script>
105 113
@@ -122,12 +122,15 @@ @@ -122,12 +122,15 @@
122 122
123 const getCourseList = async () => { 123 const getCourseList = async () => {
124 try { 124 try {
  125 + uni.showLoading({ title: "加载中" })
125 const { data } = await courseListApi({ 126 const { data } = await courseListApi({
126 grade: state.grade === "全部年级" ? "" : state.grade, 127 grade: state.grade === "全部年级" ? "" : state.grade,
127 subject: state.accounts === "全部科目" ? "" : state.accounts 128 subject: state.accounts === "全部科目" ? "" : state.accounts
128 }) 129 })
129 state.courses = data.courses 130 state.courses = data.courses
130 - } catch {} 131 + } finally {
  132 + uni.hideLoading()
  133 + }
131 } 134 }
132 135
133 const showGradesPop = () => { 136 const showGradesPop = () => {
@@ -64,16 +64,24 @@ @@ -64,16 +64,24 @@
64 try { 64 try {
65 await formRef.value.validate() 65 await formRef.value.validate()
66 66
  67 + uni.showLoading({
  68 + title: "登录中",
  69 + mask: true
  70 + })
  71 +
67 const { 72 const {
68 token 73 token
69 } = await loginApi(state.userInfo) 74 } = await loginApi(state.userInfo)
  75 + uni.hideLoading()
70 uni.showToast({ 76 uni.showToast({
71 icon: 'success', 77 icon: 'success',
72 title: '登录成功' 78 title: '登录成功'
73 }) 79 })
74 uni.setStorageSync('token', token) 80 uni.setStorageSync('token', token)
75 uni.navigateBack() 81 uni.navigateBack()
76 - } catch {} 82 + } finally {
  83 + uni.hideLoading()
  84 + }
77 } 85 }
78 </script> 86 </script>
79 87
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 - <!-- 自定义标题栏 -->  
4 - <uv-navbar leftIcon="" placeholder bgColor="/static/topBg.png">  
5 - <template v-slot:center>  
6 - <view class="uv-nav-slot">  
7 - <image src="/static/my/myTitle.png" mode="heightFix" style="height: 44rpx;"></image>  
8 - </view>  
9 - </template>  
10 - </uv-navbar> 3 +  <uv-navbar leftIcon="" placeholder bgColor="rgba(255, 255, 255, 0)" />
11 4
12 <view class="content-box"> 5 <view class="content-box">
13 - <div class="content-padding">  
14 - <!-- 用户信息 -->  
15 - <view class="user-info">  
16 - <view class="center-avatar">  
17 - <view class="center-inner">  
18 - <image src="/static/my/avatar.png" style="width: 100%;height: 100%;"></image> 6 + <view class="header">
  7 + <view class="avatar">
  8 + <image v-if="state.userInfo?.avatar" :src="state.userInfo.avatar" style="width: 100%;height: 100%;"></image>
  9 + </view>
  10 + <view class="fm-box">
  11 + <view style="font-size: 36rpx;">
  12 + {{ state.userInfo?.nickName || "未知" }}
  13 + </view>
  14 + <view class="">
  15 + {{ state.userInfo?.phonenumber ? state.userInfo?.phonenumber.slice(0, 8) + '****' : "" }}
  16 + </view>
  17 + </view>
  18 + </view>
  19 +
  20 + <view style="background-color: #fff;padding: 20rpx 30rpx;margin-top: 60rpx;border-radius: 20rpx;font-size: 28rpx;">
  21 + <view style="display: flex;justify-content: space-between;">
  22 + <view class="">
  23 + 我的孩子
  24 + </view>
  25 + <view style="display: flex;justify-content: space-between;align-items: center;color: #7175f0;">
  26 + 添加<uv-icon name="arrow-right" color="#7175f0" size="14"></uv-icon>
  27 + </view>
  28 + </view>
  29 + <view style="display: grid;grid-template-columns: repeat(2, 1fr);gap: 20rpx;margin-top: 30rpx;">
  30 + <view v-for="item in state.students" style="display: flex;border: 2rpx solid #e4e9ff;padding: 10rpx;border-radius: 20rpx;">
  31 + <view style="flex-shrink: 0;width: 90rpx;height: 90rpx;border-radius: 50%;background-color: #bdceff;">
  32 + <image v-if="item.avatar" :src="item.avatar" style="width: 100%;height: 100%;"></image>
  33 + </view>
  34 + <view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
  35 + <view class="">
  36 + {{ item.name || "未知" }}
  37 + </view>
  38 + <view style="font-size: 28rpx;">
  39 + {{ item.grade || "-" }}
  40 + </view>
19 </view> 41 </view>
20 </view> 42 </view>
21 - <view class="loginTo-btn">  
22 - 登录/注册  
23 </view> 43 </view>
24 </view> 44 </view>
25 45
26 - <view class="nav-list">  
27 - <view class="nav-item">  
28 - <view style="display: flex;align-items: center;">  
29 - <uv-icon name="/static/my/student.png" :size="22"></uv-icon>  
30 - <view style="margin-left: 26rpx;color: #6a6a6a;">绑定学生</view> 46 + <view style="background-color: #fff;padding: 20rpx 30rpx;border-radius: 20rpx;font-size: 28rpx;margin-top: 40rpx;">
  47 + <view style="margin-bottom: 30rpx;">
  48 + 我的报名
31 </view> 49 </view>
32 - <uv-icon name="arrow-right" :size="16"></uv-icon> 50 + <template v-if="state.signupList.length">
  51 + <view v-for="item in state.signupList" style="display: flex;justify-content: space-between;border-radius: 20rpx;border: 2rpx solid #bdceff;padding: 10rpx;">
  52 + <view style="background-color: #b8cfff;border-radius: 16rpx;flex-shrink: 0;width: 100rpx;height: 100rpx;">
  53 + <image v-if="item.avatar" :src="item.avatar" style="width: 100%;height: 100%;"></image>
33 </view> 54 </view>
34 - <view class="nav-item">  
35 - <view style="display: flex;align-items: center;">  
36 - <uv-icon name="/static/my/print.png" :size="24"></uv-icon>  
37 - <view style="margin-left: 26rpx;color: #6a6a6a;">打印记录</view> 55 + <view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
  56 + <view class="">
  57 + 华地校区-四年级-数学-A+班
38 </view> 58 </view>
39 - <uv-icon name="arrow-right" :size="16"></uv-icon> 59 + <view class="">
  60 + 10-01至10-31 19:00-21：00
  61 + </view>
  62 + </view>
  63 + </view>
  64 + </template>
  65 + <view v-else style="text-align: center;color: #666;padding: 30rpx 0;">
  66 + 暂无报名数据
40 </view> 67 </view>
41 </view> 68 </view>
42 - </div>  
43 </view> 69 </view>
44 </view> 70 </view>
45 </template> 71 </template>
46 72
47 <script setup> 73 <script setup>
  74 + import {
  75 + reactive,
  76 + onMounted
  77 + } from 'vue';
  78 + import { userInfoApi, myStudentsApi, userSignUpListApi } from "@/api/index.js"
  79 +
  80 + const state = reactive({
  81 + userInfo: {},
  82 + signupList: [],
  83 + students: []
  84 + })
  85 +
  86 + onMounted(() => {
  87 + getUserInfo()
  88 + getMyStudents()
  89 + getuserSignUpList()
  90 + })
  91 +
  92 + const getUserInfo = async () => {
  93 + const { data } = await userInfoApi()
  94 + state.userInfo = data.user
  95 + }
48 96
  97 + const getMyStudents = async () => {
  98 + const { data } = await myStudentsApi()
  99 + state.students = data.students
  100 + }
  101 +
  102 + const getuserSignUpList = async () => {
  103 + const { data } = await userSignUpListApi()
  104 + console.log(data)
  105 + state.signupList = data.signupList
  106 + }
49 </script> 107 </script>
50 108
51 <style lang="scss" scoped> 109 <style lang="scss" scoped>
52 .container { 110 .container {
53 - background-color: #f7f8fa;  
54 - height: 100vh;  
55 - overflow-y: auto; 111 + background: linear-gradient(135deg, #d4d6fe 10%, #f6f7fb 90%);
  112 + background-color: red;
  113 + height: calc(100vh - var(--tab-bar-height));
56 display: flex; 114 display: flex;
57 flex-direction: column; 115 flex-direction: column;
58 } 116 }
@@ -60,70 +118,31 @@ @@ -60,70 +118,31 @@
60 .content-box { 118 .content-box {
61 flex: 1; 119 flex: 1;
62 overflow-y: auto; 120 overflow-y: auto;
63 - background-image: url('~@/static/bottomBg.png');  
64 - background-repeat: no-repeat;  
65 - background-size: 100% auto; 121 + padding: 0 30rpx;
  122 + display: flex;
  123 + flex-direction: column;
66 } 124 }
67 125
68 - .content-padding {  
69 - padding: 0 28rpx; 126 + .header {
  127 + display: flex;
  128 + justify-content: space-between;
  129 + padding: 0 20rpx;
70 } 130 }
71 131
72 - .user-info {  
73 - width: 100%;  
74 - height: 440rpx;  
75 - background-image: url('~@/static/my/information.png');  
76 - background-repeat: no-repeat;  
77 - background-size: 100% auto;  
78 - background-position: bottom;  
79 - background-color: transparent;  
80 - position: relative;  
81 -  
82 - .center-avatar {  
83 - position: absolute;  
84 - top: 20rpx;  
85 - left: 50%;  
86 - transform: translateX(-50%);  
87 - width: 34%;  
88 - aspect-ratio: 1/1;  
89 - background-color: #fff;  
90 - border-radius: 50%;  
91 -  
92 - .center-inner {  
93 - width: 100%;  
94 - height: 100%; 132 + .avatar {
  133 + flex-shrink: 0;
  134 + width: 120rpx;
  135 + height: 120rpx;
95 border-radius: 50%; 136 border-radius: 50%;
96 - overflow: hidden; 137 + background-color: #c1cdff;
97 } 138 }
98 - }  
99 -  
100 - .loginTo-btn {  
101 - position: absolute;  
102 - left: 50%;  
103 - bottom: 60rpx;  
104 - transform: translateX(-50%);  
105 - color: #fff;  
106 - font-size: 44rpx;  
107 - }  
108 - }  
109 -  
110 - .nav-list {  
111 - background-color: #fff;  
112 - border-radius: 12rpx;  
113 - box-shadow: 0 0 20rpx #eee;  
114 - padding: 10rpx 20rpx;  
115 - box-sizing: border-box;  
116 - margin-top: 40rpx;  
117 139
118 - .nav-item { 140 + .fm-box {
  141 + margin-left: 30rpx;
  142 + flex: 1;
119 display: flex; 143 display: flex;
  144 + flex-direction: column;
120 justify-content: space-between; 145 justify-content: space-between;
121 - border-bottom: 2rpx dashed #d8d8d8;  
122 - padding: 30rpx 0;  
123 -  
124 - &:last-child {  
125 - border: none;  
126 - }  
127 - } 146 + padding: 6rpx 0;
128 } 147 }
129 </style> 148 </style>
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 20
21 <view class="student-box" style="margin-top: 30rpx;display: block;"> 21 <view class="student-box" style="margin-top: 30rpx;display: block;">
22 <view class="title" style="margin-bottom: 30rpx;"> 22 <view class="title" style="margin-bottom: 30rpx;">
23 - 选择地区 23 + 选择校区
24 </view> 24 </view>
25 <view style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 20rpx;"> 25 <view style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 20rpx;">
26 <view v-for="item in state.selectData.schoolArr" @click="select1(item)" 26 <view v-for="item in state.selectData.schoolArr" @click="select1(item)"
@@ -166,7 +166,7 @@ @@ -166,7 +166,7 @@
166 }) 166 })
167 if (!state.schoolName) return uni.showToast({ 167 if (!state.schoolName) return uni.showToast({
168 icon: 'error', 168 icon: 'error',
169 - title: '请选择地区' 169 + title: '请选择校区'
170 }) 170 })
171 if (!state.className) return uni.showToast({ 171 if (!state.className) return uni.showToast({
172 icon: 'error', 172 icon: 'error',
@@ -180,6 +180,7 @@ @@ -180,6 +180,7 @@
180 icon: 'error', 180 icon: 'error',
181 title: '请选择时段' 181 title: '请选择时段'
182 }) 182 })
  183 + uni.showLoading({ title: "提交中", mask: true })
183 await signUpApi({ 184 await signUpApi({
184 studentWorkNo: state.students[state.activeIndex]?.workNo, 185 studentWorkNo: state.students[state.activeIndex]?.workNo,
185 courseId: state.courseId, 186 courseId: state.courseId,
@@ -194,7 +195,9 @@ @@ -194,7 +195,9 @@
194 title: '报名成功' 195 title: '报名成功'
195 }) 196 })
196 resetSelect() 197 resetSelect()
197 - } catch {} 198 + } finally {
  199 + uni.hideLoading();
  200 + }
198 } 201 }
199 202
200 const resetSelect = () => { 203 const resetSelect = () => {
@@ -257,6 +260,8 @@ @@ -257,6 +260,8 @@
257 const getSelectCourseData = async () => { 260 const getSelectCourseData = async () => {
258 if (state.courseId === null) return 261 if (state.courseId === null) return
259 262
  263 + try {
  264 + uni.showLoading({ title: "加载中", mask: true })
260 const { 265 const {
261 data 266 data
262 } = await getSelectApi({ 267 } = await getSelectApi({
@@ -268,6 +273,9 @@ @@ -268,6 +273,9 @@
268 courseTime: state.courseTime 273 courseTime: state.courseTime
269 }) 274 })
270 state.selectData = data 275 state.selectData = data
  276 + } finally {
  277 + uni.hideLoading()
  278 + }
271 } 279 }
272 280
273 const getMyStudents = async () => { 281 const getMyStudents = async () => {