|
|
@@ -4,47 +4,62 @@
|
|
|
<view class="p-32 bg-white flex items-center justify-between">
|
|
|
<view class="">
|
|
|
<text class="text-32 text-fore-title font-bold">添加定向院校</text>
|
|
|
- <text class="ml-10 text-32 text-fore-light">({{ collegeList.length }}/3)</text>
|
|
|
+ <text class="ml-10 text-32 text-fore-light">({{ directedSchoolList.length }}/3)</text>
|
|
|
</view>
|
|
|
<view class="text-24 text-primary">添加后无法更改</view>
|
|
|
</view>
|
|
|
<view class="px-48 pt-52 pb-32 flex items-center justify-between">
|
|
|
<view class="text-32 text-fore-title font-bold">我的定向院校</view>
|
|
|
- <view v-if="hasSetting" class="flex items-center gap-x-4">
|
|
|
+ <!-- <view v-if="hasDirectedSchool" class="flex items-center gap-x-4">
|
|
|
<text class="text-28 text-[#F59E0B]">设置</text>
|
|
|
<ie-image src="/pagesStudy/static/image/icon-edit-pen.png" custom-class="w-24 h-24" mode="aspectFill" />
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
- <view v-if="hasSetting" class="px-30">
|
|
|
- <view class="bg-white rounded-10 py-28 pl-32 pr-20 relative flex items-center gap-x-20 mb-20"
|
|
|
- v-for="(item, index) in collegeList" :key="item.code">
|
|
|
- <view class="w-44 text-64 text-primary font-bold absolute top-6 left-14 italic leading-[1] opacity-30 z-1">
|
|
|
- {{ index + 1 }}
|
|
|
- </view>
|
|
|
- <view class="w-40 h-40 bg-back"></view>
|
|
|
- <view class="flex-1 min-w-1 flex items-center gap-x-20">
|
|
|
- <ie-image :src="item.logo" custom-class="w-96 h-96" mode="aspectFill" />
|
|
|
- <view class="flex-1 min-w-1">
|
|
|
- <view class="text-28 text-fore-title font-bold">{{ item.name }}</view>
|
|
|
- <view class="mt-8 w-fit text-20 text-primary border border-solid border-primary rounded-4 px-10 py-4">大数据与会计
|
|
|
+ <view v-if="hasDirectedSchool || loading" class="px-30">
|
|
|
+ <l-drag ref="dragRef" :list="directedSchoolList" :column="1" :gridHeight="104" :touchHandle="touchHandle" ghost handle
|
|
|
+ @change="changeSort">
|
|
|
+ <!-- // 每一项的插槽 grid 的 content 您传入的数据 -->
|
|
|
+ <template #grid="{ active, content, index }">
|
|
|
+ <!-- // grid.active 是否为当前拖拽项目 根据自己需要写样式 -->
|
|
|
+ <view class="bg-white rounded-10 py-28 pl-30 pr-20 relative flex items-center gap-x-16 mb-20"
|
|
|
+ :class="{ 'border border-solid border-primary': active }">
|
|
|
+ <view class="w-44 text-64 text-primary font-bold absolute top-6 left-14 italic leading-[1] opacity-30 z-1">
|
|
|
+ {{ index + 1 }}
|
|
|
+ </view>
|
|
|
+ <view slot="handle" @touchstart="touchHandle = true" @touchend="touchHandle = false">
|
|
|
+ <ie-image src="/pagesStudy/static/image/icon-drag.png" custom-class="w-46 h-46" mode="aspectFill" />
|
|
|
</view>
|
|
|
- <view class="flex items-center justify-between text-20">
|
|
|
- <view class="mt-8 text-fore-light">财经商贸大类>财务会计类</view>
|
|
|
- <view
|
|
|
- class="flex items-center gap-x-4 text-white bg-gradient-to-r from-[#FED448] to-[#F9942F] rounded-full px-12 py-4">
|
|
|
- <ie-image src="/pagesStudy/static/image/icon-check-white.png" custom-class="w-24 h-24" />
|
|
|
- <text>定向学习中</text>
|
|
|
+ <view class="flex-1 min-w-1 flex items-center gap-x-20">
|
|
|
+ <ie-image :src="content.universityLogo" custom-class="w-96 h-96" mode="aspectFill" />
|
|
|
+ <view class="flex-1 min-w-1">
|
|
|
+ <view class="text-28 text-fore-title font-bold">{{ content.universityName }}</view>
|
|
|
+ <view class="mt-8 w-fit text-20 text-primary border border-solid border-primary rounded-4 px-10 py-4">
|
|
|
+ {{ content.majorName }}
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center justify-between text-20">
|
|
|
+ <view class="mt-8 text-fore-light">{{ content.ancestors }}</view>
|
|
|
+ <view v-if="index === 0"
|
|
|
+ class="flex items-center gap-x-4 text-white bg-gradient-to-r from-[#FED448] to-[#F9942F] rounded-full px-12 py-4">
|
|
|
+ <ie-image src="/pagesStudy/static/image/icon-check-white.png" custom-class="w-24 h-24" />
|
|
|
+ <text>定向学习中</text>
|
|
|
+ </view>
|
|
|
+ <view v-else class="flex items-center gap-x-4 text-22 text-primary px-12 py-4"
|
|
|
+ @click="handleSetDirectedSchool(content, index)">
|
|
|
+ <text>设置定向</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
+ <template #ghots></template>
|
|
|
+ </l-drag>
|
|
|
</view>
|
|
|
<view v-else class="flex-1 flex flex-col items-center justify-center gap-y-50">
|
|
|
<ie-image src="/pagesStudy/static/image/icon-empty.png" custom-class="w-364 h-252 mx-auto" mode="aspectFill" />
|
|
|
<text class="text-30 text-fore-light text-center">目前暂无定向院校~</text>
|
|
|
</view>
|
|
|
- <ie-safe-toolbar v-if="collegeList.length < 3" :height="84" :shadow="false">
|
|
|
+ <ie-safe-toolbar v-if="directedSchoolList.length < 3 && !loading" :height="84" :shadow="false">
|
|
|
<view class="px-46 pt-24">
|
|
|
<ie-button type="primary" @click="handleAdd">添加</ie-button>
|
|
|
</view>
|
|
|
@@ -54,19 +69,47 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { useTransferPage } from '@/hooks/useTransferPage';
|
|
|
+import { DirectedSchool } from '@/types/study';
|
|
|
+import { getDirectedSchool, saveDirectedSchool } from '@/api/modules/study';
|
|
|
const { transferTo } = useTransferPage();
|
|
|
-const hasSetting = ref(false);
|
|
|
-const collegeList = ref<any[]>([]);
|
|
|
+const loading = ref(true);
|
|
|
+const directedSchoolList = ref<DirectedSchool[]>([]);
|
|
|
+const touchHandle = ref(false)
|
|
|
+const hasDirectedSchool = computed(() => directedSchoolList.value.length > 0);
|
|
|
+const handleSetDirectedSchool = async (item: DirectedSchool, index: number) => {
|
|
|
+ // 将该院校设置为第一个
|
|
|
+ directedSchoolList.value.splice(index, 1);
|
|
|
+ directedSchoolList.value.unshift(item);
|
|
|
+ save(directedSchoolList.value);
|
|
|
+}
|
|
|
const handleAdd = () => {
|
|
|
- transferTo('/pagesOther/pages/college-library/picker/picker', {
|
|
|
- data: {
|
|
|
- transferType: 'v2'
|
|
|
+ transferTo('/pagesStudy/pages/targeted-add/targeted-add', {
|
|
|
+ data: {}
|
|
|
+ }).then(async res => {
|
|
|
+ if (res) {
|
|
|
+ directedSchoolList.value.push(res as DirectedSchool);
|
|
|
+ save(directedSchoolList.value);
|
|
|
}
|
|
|
- }).then(res => {
|
|
|
- collegeList.value.push(res);
|
|
|
- hasSetting.value = true;
|
|
|
});
|
|
|
}
|
|
|
+const dragRef = ref();
|
|
|
+const changeSort = (e: any) => {
|
|
|
+ const list = e.map((item: any) => item.content);
|
|
|
+ save(list);
|
|
|
+}
|
|
|
+const save = async (list: DirectedSchool[]) => {
|
|
|
+ uni.$ie.showLoading();
|
|
|
+ await saveDirectedSchool(list);
|
|
|
+ await loadData();
|
|
|
+ uni.$ie.hideLoading();
|
|
|
+ uni.$ie.showSuccess('设置成功');
|
|
|
+ loading.value = false;
|
|
|
+}
|
|
|
+const loadData = async () => {
|
|
|
+ const { data } = await getDirectedSchool();
|
|
|
+ directedSchoolList.value = data;
|
|
|
+}
|
|
|
+loadData();
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|