123 lines
2.6 KiB
Vue
123 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<view class="interest-course">
|
||
|
|
<!-- 选课信息头部 - 固定部分 -->
|
||
|
|
<view class="selection-header">
|
||
|
|
<view class="header-content">
|
||
|
|
<!-- 选课类型选择部分 -->
|
||
|
|
<XkPicker :title="title" :is-qk="false" :xklx-id="xklxId" :xs-id="curXs.id" @change="switchXk" />
|
||
|
|
<!-- 学生选择部分 -->
|
||
|
|
<XsPicker :is-bar="true" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 可滚动的内容区域 -->
|
||
|
|
<view class="scrollable-content">
|
||
|
|
<XkkcList :xk="curXk" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onLoad } from "@dcloudio/uni-app";
|
||
|
|
import XsPicker from "@/pages/base/components/XsPicker/index.vue"
|
||
|
|
import XkPicker from "@/pages/base/xk/components/XkPicker/index.vue"
|
||
|
|
import XkkcList from "@/pages/base/xk/components/XkkcList/index.vue"
|
||
|
|
import { useUserStore } from "@/store/modules/user";
|
||
|
|
import { useDataStore } from "@/store/modules/data";
|
||
|
|
|
||
|
|
const { getCurXs } = useUserStore();
|
||
|
|
const { getGlobal } = useDataStore();
|
||
|
|
|
||
|
|
const curXs = computed(() => getCurXs);
|
||
|
|
|
||
|
|
const curXk = ref<any>({});
|
||
|
|
|
||
|
|
const title = ref("");
|
||
|
|
|
||
|
|
const xklxId = ref("");
|
||
|
|
|
||
|
|
// 切换选课
|
||
|
|
const switchXk = (xk: any) => {
|
||
|
|
curXk.value = xk;
|
||
|
|
}
|
||
|
|
|
||
|
|
onLoad((options:any) => {
|
||
|
|
xklxId.value = options.xklxId || '';
|
||
|
|
switch(xklxId.value) {
|
||
|
|
case '962488654': { title.value = '兴趣课信息'; } break;
|
||
|
|
case '816059832': { title.value = '俱乐部信息'; } break;
|
||
|
|
default: {
|
||
|
|
uni.reLaunch({ url: '/pages/base/home/index' });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.interest-course {
|
||
|
|
min-height: 100%;
|
||
|
|
background-color: #f5f7fa;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 15px;
|
||
|
|
height: 44px;
|
||
|
|
background-color: #fff;
|
||
|
|
|
||
|
|
.nav-left {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-right {
|
||
|
|
width: 40px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.selection-header {
|
||
|
|
background: linear-gradient(135deg, #4a90e2, #2879ff);
|
||
|
|
padding: 20px 15px;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 0 0 15px 15px;
|
||
|
|
box-shadow: 0 4px 12px rgba(40, 121, 255, 0.2);
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 10;
|
||
|
|
|
||
|
|
.header-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 15px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 可滚动内容区域样式
|
||
|
|
.scrollable-content {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
-webkit-overflow-scrolling: touch; // 增强iOS滚动体验
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|