feat: 完善后续细节
parent
cfcc351c85
commit
da24d5ce15
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<Overlay :show="show">
|
||||
<div class="bg-white wrapper flex flex-col rounded-[16rpx]" :style="{ width: defaultWidth }">
|
||||
<div
|
||||
class="relative flex items-center w-full justify-center py-[26rpx] title"
|
||||
v-show="title"
|
||||
>
|
||||
<span class="text-[36rpx] text-[#303030] font-bold text-center">
|
||||
{{ title }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="i-carbon-close absolute right-[40rpx] text-[40rpx]"
|
||||
@click="emits('update:show', false)"
|
||||
v-if="showClose"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="min-h-[200rpx] h-max-content overflow-y-auto flex flex-col"
|
||||
:class="{ 'px-[32rpx]': defaultPadding }"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</Overlay>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Overlay from '../overlay/Overlay.vue'
|
||||
|
||||
defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '提示',
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
defaultPadding: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
defaultWidth: {
|
||||
type: String,
|
||||
default: '90%',
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:show'])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: max-content;
|
||||
|
||||
.title {
|
||||
border-bottom: 2rpx solid #f7f7f7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div
|
||||
class="overlay"
|
||||
:class="{ 'overlay-show': show }"
|
||||
:style="{
|
||||
'background-color': backgroundColor,
|
||||
'z-index': zIndex,
|
||||
}"
|
||||
@click="handleClick"
|
||||
@touchmove.prevent
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
show: boolean
|
||||
backgroundColor?: string
|
||||
zIndex?: number
|
||||
lockScroll?: boolean
|
||||
}>(),
|
||||
{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
zIndex: 10,
|
||||
lockScroll: true,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click'): void
|
||||
}>()
|
||||
|
||||
const handleClick = (event: Event) => {
|
||||
emit('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&-show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -20,20 +20,21 @@
|
|||
<div class="flex flex-col justify-between flex-1">
|
||||
<div class="flex justify-between mb-[14rpx]">
|
||||
<div class="flex justify-between flex-col gap-[6rpx]">
|
||||
<span class="text-[32rpx] font-semibold">{{ college.name }}</span>
|
||||
<span class="text-[32rpx] font-semibold">{{ college.unName }}</span>
|
||||
<span class="text-[22rpx] text-[#505050]">{{ college.ownership }}·{{ college.educationCategory }}</span>
|
||||
<div class="text-[22rpx] text-[#8F959E] flex items-center">
|
||||
<span class="truncate max-w-[300rpx]" v-show="college.features.length > 0">{{ college.features.slice(0, 3).join("/") }}/</span>
|
||||
<span>排名{{ college.rank }}</span>
|
||||
</div>
|
||||
<div class="text-[22rpx] text-[#1F2329] mt-[8rpx] flex gap-[10rpx]">
|
||||
<span class="">代码{{ college.collegeCode }}</span>
|
||||
<div class="text-[22rpx] text-[#1F2329] mt-[8rpx] flex gap-[10rpx] gap-[36rpx]">
|
||||
<span class="">代码{{ college.unCode }}</span>
|
||||
<span>{{ college.year }}计划{{ college.vItems.reduce((a:number, b:any) => a + b.planCount, 0) }}人</span>
|
||||
<span>{{ college.subjectType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[40rpx]">
|
||||
<div class="i-carbon-move"></div>
|
||||
<div class="i-carbon-trash-can"></div>
|
||||
<div class="i-carbon-move handle"></div>
|
||||
<div class="i-carbon-trash-can" @click="handleDelete"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -42,9 +43,9 @@
|
|||
</div>
|
||||
<div class="h-[2rpx] bg-[#EDEDED] w-full"></div>
|
||||
<div class="overflow-auto transition-all duration-300 w-full" :style="{ maxHeight: isCollapsed ? '100vh' : '0' }" v-if="isCollapsed">
|
||||
<virtual-list v-model="college.vItems" data-key="sort" lock-axis="x">
|
||||
<virtual-list v-model="college.vItems" data-key="sort" lock-axis="x" handle=".handle-major">
|
||||
<template v-slot:item="{ record, index }">
|
||||
<MajorItem :major="record" :major-index="index" :score="score" :year="2024" />
|
||||
<MajorItem :collegeIndex="collegeIndex" :major="record" :major-index="index" :score="score" :year="2024" v-bind="$attrs" />
|
||||
</template>
|
||||
</virtual-list>
|
||||
</div>
|
||||
|
|
@ -59,7 +60,7 @@ import VirtualList from "vue-virtual-draglist";
|
|||
import MajorItem from './MajorItem.vue'
|
||||
import DataTable from './DataTable.vue';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
college: any
|
||||
score: number
|
||||
collegeIndex: number
|
||||
|
|
@ -72,28 +73,12 @@ const toggleCollapse = () => {
|
|||
isCollapsed.value = !isCollapsed.value
|
||||
}
|
||||
|
||||
// const handleMove = () => {
|
||||
// emit('move')
|
||||
// }
|
||||
// const handleDelete = () => {
|
||||
// emit('delete')
|
||||
// }
|
||||
const {removeCollege} = inject<{removeCollege: (collegeIndex: any) => void}>("sort")!
|
||||
|
||||
// const majorDrop = ref()
|
||||
const handleDelete = () => {
|
||||
removeCollege(props.collegeIndex)
|
||||
}
|
||||
|
||||
// const handleMajorMove = (index:number) => {
|
||||
// majorDrop.value.handleLongpress(index)
|
||||
// }
|
||||
|
||||
// const getMajorList = (list:any[]) => {
|
||||
|
||||
// }
|
||||
|
||||
// const handleMajorDelete = (index:number) => {
|
||||
// majorDrop.value.initList(props.college.vItems, true).then(() => {
|
||||
// emit('deleteMajor', index)
|
||||
// })
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@
|
|||
{{ major.major.replace(/(\r\n|\n|\r)/g, "") }}
|
||||
</span>
|
||||
<span class="text-[22rpx] text-[#1F2329] mt-[14rpx]">{{ major.remark }}</span>
|
||||
<div class="flex justify-between text-[22rpx] text-[#1F2329] mt-[14rpx]">
|
||||
<div class="flex flex-col gap-[6rpx]">
|
||||
<div class="flex justify-between text-[22rpx] text-[#1F2329] mt-[14rpx] gap-[16rpx]">
|
||||
<div class="flex flex-col gap-[16rpx]">
|
||||
<span>代码{{ major.majorCode }}</span>
|
||||
<span>{{ year }}计划{{ major.planCount }}人</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[6rpx]">
|
||||
<div class="flex flex-col gap-[16rpx]">
|
||||
<span>选科:{{ major.subjectClam }}</span>
|
||||
<span>学费/学制:{{ major.fee }}/{{ major.academic }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[40rpx]">
|
||||
<div class="i-carbon-move" @touchstart="handleMove"></div>
|
||||
<div class="i-carbon-move handle-major"></div>
|
||||
<div class="i-carbon-trash-can" @click="handleDelete"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,21 +34,23 @@
|
|||
<script setup lang="ts">
|
||||
import DataTable from './DataTable.vue';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
major: any;
|
||||
score: number;
|
||||
year: number;
|
||||
majorIndex: number;
|
||||
collegeIndex: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(["move", "delete"]);
|
||||
const emit = defineEmits([ "delete"]);
|
||||
|
||||
const {removeMajor} = inject<{removeMajor:(index:number,mIndex:number) => void}>('sort') || {}
|
||||
|
||||
const handleMove = () => {
|
||||
emit("move");
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
emit("delete");
|
||||
if(removeMajor){
|
||||
removeMajor(props.collegeIndex,props.majorIndex)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,19 @@
|
|||
<div class="h-screen flex flex-col">
|
||||
<HeaderTip :score="score" :batch-name="batchName" :subject-group="subjectGroup" :wishList="wishList" />
|
||||
<div class="flex-1 h-0 overflow-y-auto">
|
||||
<virtual-list v-model="wishList" data-key="sort" lock-axis="x">
|
||||
<virtual-list v-model="wishList" data-key="sort" lock-axis="x" handle=".handle">
|
||||
<template v-slot:item="{ record, index }">
|
||||
<CollegeItem :college="record" :college-index="index" :score="score" />
|
||||
</template>
|
||||
</virtual-list>
|
||||
</div>
|
||||
<div class="flex items-center pb-safe button-group px-[32rpx] pt-[32rpx] pb-[52rpx]">
|
||||
<button class="border-[#1580FF] flex-auto bg-[#1580FF] rounded-[8rpx] text-[#fff]! text-[32rpx] font-normal py-[20rpx]" @click="handleSave">
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,7 +22,8 @@
|
|||
import HeaderTip from "@/components/sort-college/HeaderTip.vue";
|
||||
import { useUserStore } from "@/store/user";
|
||||
import VirtualList from "vue-virtual-draglist";
|
||||
import CollegeItem from "@/components/sort-college/CollegeItem.vue"
|
||||
import CollegeItem from "@/components/sort-college/CollegeItem.vue";
|
||||
|
||||
import api from "@/api/customAxios";
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
|
@ -26,16 +34,47 @@
|
|||
const subjectGroup = ref("");
|
||||
const locationCode = ref("");
|
||||
const wishList = ref([]);
|
||||
// const handleClick = () => {
|
||||
// alert(localStorage.getItem("userInfo"));
|
||||
// uni.postMessage({
|
||||
// data: {
|
||||
// action: "message",
|
||||
// message: location.search,
|
||||
// },
|
||||
// });
|
||||
// getWishList();
|
||||
// };
|
||||
|
||||
|
||||
const handleSave = () => {
|
||||
|
||||
// uni.navigateTo({url:'/pages-sub/home/wishesList/temp'})
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: "message",
|
||||
message: JSON.stringify(wishList.value),
|
||||
},
|
||||
});
|
||||
uni.navigateBack({ delta: 1 })
|
||||
};
|
||||
|
||||
const removeCollege = (index:number) => {
|
||||
wishList.value.splice(index,1)
|
||||
}
|
||||
const removeMajor = (index:number,mIndex:number) => {
|
||||
(wishList.value[index] as {vItems:any[]}).vItems.splice(mIndex,1)
|
||||
}
|
||||
|
||||
provide("sort",{
|
||||
removeCollege,
|
||||
removeMajor
|
||||
})
|
||||
|
||||
|
||||
const getWishList = () => {
|
||||
api.get(
|
||||
`https://api.v3.ycymedu.com/api/volunTb/get/${locationCode.value}`,
|
||||
{ id: vId.value },
|
||||
(resp: any) => {
|
||||
if (resp.code == 200) {
|
||||
wishList.value = resp.result.tbDetails;
|
||||
}
|
||||
},
|
||||
(error: any) => {
|
||||
console.log(error);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
let _mapParams: { [key: string]: any } = {};
|
||||
|
|
@ -55,19 +94,4 @@
|
|||
|
||||
getWishList();
|
||||
});
|
||||
|
||||
const getWishList = () => {
|
||||
api.get(
|
||||
`https://api.v3.ycymedu.com/api/volunTb/get/${locationCode.value}`,
|
||||
{ id: vId.value },
|
||||
(resp: any) => {
|
||||
if (resp.code == 200) {
|
||||
wishList.value = resp.result.tbDetails;
|
||||
}
|
||||
},
|
||||
(error: any) => {
|
||||
console.log(error);
|
||||
},
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue