登录和首页调整
This commit is contained in:
ywyonui
parent
72eebf7697
commit
3762f9232d
@ -2,21 +2,26 @@
|
||||
<view class="home-page">
|
||||
<view class="content-container">
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-info-card" v-if="currentStudent">
|
||||
<view class="user-info-card" v-if="curXs">
|
||||
<view class="banner-content">
|
||||
<image src="/static/base/home/2211.png" class="banner-img"></image>
|
||||
<view class="banner-overlay">
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-content">
|
||||
<view class="user-avatar">
|
||||
<image :src="currentStudent.xstx || '/static/base/home/11222.png'" class="avatar-img"></image>
|
||||
<image :src="xsTx || '/static/base/home/11222.png'" class="avatar-img"></image>
|
||||
<view class="avatar-ring"></view>
|
||||
</view>
|
||||
<view class="user-details">
|
||||
<text class="user-name">{{ currentStudent.xm }}</text>
|
||||
<text class="user-name">{{ curXs.xm }}</text>
|
||||
<view class="user-class-container">
|
||||
<view class="class-tag">
|
||||
<text class="user-class">{{ currentStudent.njmc }} {{ currentStudent.bjmc }}</text>
|
||||
<text class="user-class">{{ curXs.njmc }} {{ curXs.bjmc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="switch-btn" @click="showStudentSelector" v-if="studentList && studentList.length > 1">
|
||||
<view class="switch-btn" @click="showXsSelector" v-if="xsList && xsList.length > 1">
|
||||
<u-icon name="arrow-down" size="12" color="#fff"></u-icon>
|
||||
<text>切换</text>
|
||||
</view>
|
||||
@ -24,17 +29,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 学校横幅 -->
|
||||
<view class="school-banner">
|
||||
<view class="banner-content">
|
||||
<image src="/static/base/home/2211.png" class="banner-img"></image>
|
||||
<view class="banner-overlay">
|
||||
<view class="banner-text">
|
||||
<text class="banner-title">智慧校园</text>
|
||||
<text class="banner-subtitle">让教育更智能，让成长更精彩</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- -->
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="menu-section">
|
||||
@ -106,20 +101,20 @@
|
||||
</view>
|
||||
<view class="student-list">
|
||||
<view
|
||||
v-for="(student, index) in studentList"
|
||||
v-for="(xs, index) in xsList"
|
||||
:key="index"
|
||||
class="student-item"
|
||||
:class="{ 'student-item-active': currentStudent.id === student.id }"
|
||||
@click="switchStudent(student)"
|
||||
:class="{ 'student-item-active': curXs.id === xs.id }"
|
||||
@click="switchXs(xs)"
|
||||
>
|
||||
<view class="student-avatar">
|
||||
<image :src="student.xstx || '/static/base/home/11222.png'" class="avatar-img"></image>
|
||||
<image :src="xsTx || '/static/base/home/11222.png'" class="avatar-img"></image>
|
||||
</view>
|
||||
<view class="student-info">
|
||||
<text class="student-name">{{ student.xm }}</text>
|
||||
<text class="student-class">{{ student.njmc }} {{ student.bjmc }}</text>
|
||||
<text class="student-name">{{ xs.xm }}</text>
|
||||
<text class="student-class">{{ xs.njmc }} {{ xs.bjmc }}</text>
|
||||
</view>
|
||||
<view class="check-icon" v-if="currentStudent.id === student.id">
|
||||
<view class="check-icon" v-if="curXs.id === xs.id">
|
||||
<u-icon name="checkmark" color="#4A90E2" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
@ -132,10 +127,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { cmsArticlePageApi } from "@/api/base/server";
|
||||
import { imagUrl } from "@/utils";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { get } from "lodash";
|
||||
const { getUser, setCurXs, getCurXs } = useUserStore();
|
||||
const { setData } = useDataStore();
|
||||
const { setData, getAppCode } = useDataStore();
|
||||
|
||||
// 菜单项数据
|
||||
const menuItems = ref([
|
||||
@ -199,25 +196,28 @@ const announcements = ref<any>([
|
||||
])
|
||||
|
||||
// 学生列表数据
|
||||
const studentList = ref([
|
||||
const xsList = ref([
|
||||
{
|
||||
id: "1",
|
||||
xm: "陶亦菲",
|
||||
njmc: "2年级",
|
||||
bjmc: "01班",
|
||||
njmcId: "",
|
||||
xstx: "/static/base/home/11222.png",
|
||||
}
|
||||
]);
|
||||
|
||||
// 当前选中的学生
|
||||
let currentStudent = ref(studentList.value[0]);
|
||||
let curXs = ref(xsList.value[0]);
|
||||
const xsTx = ref(imagUrl(curXs.value.xstx));
|
||||
|
||||
// 控制选择器显示状态
|
||||
const showSelector = ref(false);
|
||||
|
||||
let pageParams = ref({
|
||||
page: 1,
|
||||
rows: 10
|
||||
rows: 10,
|
||||
appCode: getAppCode
|
||||
})
|
||||
|
||||
// 处理菜单点击
|
||||
@ -231,20 +231,21 @@ function handleMenuClick(item: any) {
|
||||
}
|
||||
|
||||
// 显示学生选择器
|
||||
function showStudentSelector() {
|
||||
function showXsSelector() {
|
||||
showSelector.value = true;
|
||||
}
|
||||
|
||||
// 切换学生
|
||||
function switchStudent(student: any) {
|
||||
currentStudent.value = student;
|
||||
function switchXs(xs: any) {
|
||||
curXs.value = xs;
|
||||
xsTx.value = imagUrl(xs.xstx);
|
||||
showSelector.value = false;
|
||||
getArticleList();
|
||||
// 记录存储切换
|
||||
setCurXs(student);
|
||||
|
||||
setCurXs(xs);
|
||||
// 这里可以添加切换学生后的其他操作，如刷新页面数据等
|
||||
uni.showToast({
|
||||
title: `已切换到${student.xm}`,
|
||||
title: `已切换到${xs.xm}`,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
@ -257,9 +258,8 @@ function goToDetail(notice: any) {
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
studentList.value = getUser.xsList;
|
||||
currentStudent = getCurXs;
|
||||
const getArticleList = async () => {
|
||||
const params = Object.assign({}, pageParams.value, { njmcId: curXs.value.njmcId });
|
||||
cmsArticlePageApi(pageParams.value).then(res => {
|
||||
announcements.value = res.rows;
|
||||
})
|
||||
@ -267,6 +267,14 @@ onMounted(async () => {
|
||||
// 接口调用失败
|
||||
console.error("调用检查通知公告接口失败:", error);
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
xsList.value = getUser.xsList;
|
||||
curXs.value = getCurXs;
|
||||
xsTx.value = imagUrl(getCurXs.xstx);
|
||||
console.log(xsTx.value, getCurXs.xstx)
|
||||
getArticleList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -295,6 +303,33 @@ onMounted(async () => {
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
overflow: hidden;
|
||||
|
||||
.banner-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(74, 144, 226, 0.8) 0%, rgba(53, 122, 189, 0.9) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.user-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -339,7 +374,7 @@ onMounted(async () => {
|
||||
.user-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: white;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@ -392,56 +427,6 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 学校横幅 */
|
||||
.school-banner {
|
||||
margin-bottom: 25px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(74, 144, 226, 0.8) 0%, rgba(53, 122, 189, 0.9) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.banner-text {
|
||||
text-align: center;
|
||||
|
||||
.banner-title {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能菜单 */
|
||||
.menu-section {
|
||||
margin-bottom: 25px;
|
||||
|
||||
@ -275,7 +275,7 @@ function toHome() {
|
||||
}
|
||||
}
|
||||
|
||||
const { getGlobal } = useDataStore();
|
||||
const { getGlobal, getAppCode } = useDataStore();
|
||||
const { afterLoginAction } = useUserStore();
|
||||
async function submit() {
|
||||
for (const student of students.value) {
|
||||
@ -299,7 +299,7 @@ async function submit() {
|
||||
xsList: students.value,
|
||||
...formData,
|
||||
openId: getGlobal.openId,
|
||||
appCode: "JZ",
|
||||
appCode: getAppCode,
|
||||
});
|
||||
hideLoading();
|
||||
if (res.resultCode == 1) {
|
||||
|
||||
@ -7,6 +7,7 @@ export const useDataStore = defineStore({
|
||||
kcData: {},
|
||||
global: {},
|
||||
file: {},
|
||||
appCode: "JZ"
|
||||
}),
|
||||
getters: {
|
||||
getData(): any {
|
||||
@ -21,6 +22,9 @@ export const useDataStore = defineStore({
|
||||
getKcData(): any {
|
||||
return this.kcData;
|
||||
},
|
||||
getAppCode(): string {
|
||||
return this.appCode;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
setData(data: any) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user