Browse Source

fix(index): 重命名和优化ScheduleCard组件的数据处理

EvilDragon 6 months ago
parent
commit
33ef80462b
1 changed files with 15 additions and 4 deletions
  1. 15 4
      src/pages/home/components/schedule-card.vue

+ 15 - 4
src/pages/home/components/schedule-card.vue

@@ -2,7 +2,7 @@
 import SectionHeading from '@/components/section-heading.vue'
 import { scheduleCardBg } from '@/core/libs/pngs'
 
-defineProps({
+const props = defineProps({
   customClass: {
     type: String,
     default: () => '',
@@ -18,6 +18,16 @@ defineProps({
     }),
   },
 })
+const data = ref()
+const pull = () => {
+  data.value = props.options.items.slice(0, 3)
+}
+const push = () => {
+  data.value = props.options.items.slice(0, 2)
+}
+onMounted(() => {
+  push()
+})
 </script>
 <template>
   <view class="flex flex-col items-center" :class="[customClass]">
@@ -30,7 +40,7 @@ defineProps({
     <div
       class="w-80 bg-gradient-to-r from-[#141414] to-[#4b4949] rounded-tl-2xl rounded-tr-2xl p-6 box-border"
     >
-      <template v-for="(it, index) in options.items" :key="index">
+      <template v-for="(it, index) in data" :key="index">
         <view class="relative mb-4">
           <view class="flex items-center">
             <div class="w-2 h-2 left-0 top-0 rounded-full border-2 border-solid border-white"></div>
@@ -48,7 +58,7 @@ defineProps({
             学习灯光设计师课程
           </div>
           <div
-            v-if="index !== options.items.length - 1"
+            v-if="index !== data.length - 1"
             class="absolute left-1.25 top-6 bottom--4 border border-dashed border-gray bg-gray-500"
           ></div>
         </view>
@@ -59,9 +69,10 @@ defineProps({
       <view class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center">
         <wd-icon
           custom-class="relative bottom-6"
-          :name="options.items.length > 2 ? 'arrow-up' : 'arrow-down'"
+          :name="data.length > 2 ? 'arrow-up' : 'arrow-down'"
           size="22px"
           color="#4f4f4f"
+          @click="data.length > 2 ? push() : pull()"
         ></wd-icon>
         <view class="w-full">
           <wd-button block size="large">查看全部行程</wd-button>