feat: 完善后续细节

src/components/messageBox/MessageBox.vue

@@ -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>

src/components/overlay/Overlay.vue

@@ -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>

src/components/sort-college/CollegeItem.vue

@@ -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]">
+              <div class="text-[22rpx] text-[#1F2329] mt-[8rpx] flex gap-[10rpx] gap-[36rpx]">
-                <span class="">代码{{ college.collegeCode }}</span>
+                <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-move handle"></div>
-              <div class="i-carbon-trash-can"></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 = () => {
+const {removeCollege} = inject<{removeCollege: (collegeIndex: any) => void}>("sort")!
-//   emit('move')
-// }
-// const handleDelete = () => {
-//   emit('delete')
-// }
 
-// 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>
 

src/components/sort-college/MajorItem.vue

@@ -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 justify-between text-[22rpx] text-[#1F2329] mt-[14rpx] gap-[16rpx]">
-            <div class="flex flex-col gap-[6rpx]">
+            <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>
 

src/views/sort-college.vue

@@ -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({
+  const handleSave = () => {
-  //     data: {
+   
-  //       action: "message",
+    // uni.navigateTo({url:'/pages-sub/home/wishesList/temp'})
-  //       message: location.search,
+    uni.postMessage({
-  //     },
+      data: {
-  //   });
+        action: "message",
-  //   getWishList();
+        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>