plan - add buttons

src/pagesOther/pages/university/detail/components/plan-enroll-list.vue

@@ -47,6 +47,10 @@
                                                     :value="item[d.prop]" :title-only="d.titleOnly"
                                                     @click="handleRuleClick(d, item)"/>
                         </view>
+                        <view v-if="mode=='plan'" class="mt-20 flex justify-between items-center">
+                            <ie-button>加入志愿表</ie-button>
+                            <ie-button>测录取概率</ie-button>
+                        </view>
                     </view>
                 </view>
             </view>
@@ -113,7 +117,6 @@ const handleGroupChange = () => {
 }
 
 const handleQuery = () => {
-    console.log('plan enroll list: query', queryParams.value)
     // 到这里时listOfLevel应该已经动态计算完毕了
     // onSearch, results结构都是多余的，这里只是为了实验z-paging的虚拟列表
     paging.value?.completeByNoMore(listOfGroup.value, true)
@@ -129,7 +132,8 @@ watch(props.list, async (list) => {
         queryParams.value.year = years.value[0].value
         queryParams.value.level = levels.value[0].value
     }
-    setTimeout(() => paging.value?.reload(), 500) // paging还没有初始化好
+    // paging还没有初始化好. NOTE: nextTick在小程序端不好使
+    setTimeout(() => paging.value?.reload(), 500)
 }, {immediate: true})
 </script>
 

src/pagesOther/pages/university/detail/detail.vue

@@ -1,58 +1,58 @@
 <template>
-  <ie-page>
-    <ie-navbar :title="prevData.name" transparent bg-color="#FFFFFF" title-color="black" keep-title-color />
-    <ie-image :src="baseInfo.bannerUrl || baseInfo.logo" custom-class="w-full h-360" />
-    <view class="-mt-60 z-1 rounded-t-3xl p-30 bg-white">
-      <college-info :info="baseInfo" :loading="loading" />
-    </view>
-    <uv-gap height="10" bg-color="#F6F8FA" />
-    <uv-sticky :offset-top="appStore.isH5 ? 0 : baseStickyTop">
-      <view :style="{ height: tabHeight + 'px' }">
-        <ie-tabs-swiper v-model="current" :list="tabs" :scrollable="false">
-          <!-- #ifdef WEB -->
-          <template v-for="item in tabs" #[item.slot]>
-            <college-profile v-if="item.slot === 'profile' && item.visited" :loading="loading" />
-            <college-brochure v-if="item.slot === 'brochure' && item.visited" />
-            <college-plan v-if="item.slot === 'plan' && item.visited" />
-            <college-enroll v-if="item.slot === 'enroll' && item.visited" />
-            <college-exam v-if="item.slot === 'exam' && item.visited" />
-          </template>
-          <!-- #endif -->
-          <!-- #ifdef MP-WEIXIN -->
-          <block v-for="item in tabs">
-            <template #[item.slot]>
-              <college-profile v-if="item.slot === 'profile' && item.visited" :loading="loading" />
-              <college-brochure v-if="item.slot === 'brochure' && item.visited" />
-              <college-plan v-if="item.slot === 'plan' && item.visited" />
-              <college-enroll v-if="item.slot === 'enroll' && item.visited" />
-              <college-exam v-if="item.slot === 'exam' && item.visited" />
-            </template>
-          </block>
-          <!-- #endif -->
-        </ie-tabs-swiper>
-      </view>
-    </uv-sticky>
-  </ie-page>
+    <ie-page>
+        <ie-navbar :title="prevData.name" transparent bg-color="#FFFFFF" title-color="black" keep-title-color/>
+        <ie-image :src="baseInfo.bannerUrl || baseInfo.logo" custom-class="w-full h-360"/>
+        <view class="-mt-60 z-1 rounded-t-3xl p-30 bg-white">
+            <college-info :info="baseInfo" :loading="loading"/>
+        </view>
+        <uv-gap height="10" bg-color="#F6F8FA"/>
+        <uv-sticky :offset-top="appStore.isH5 ? 0 : baseStickyTop">
+            <view :style="{ height: tabHeight + 'px' }">
+                <ie-tabs-swiper v-model="current" :list="tabs" :scrollable="false">
+                    <!-- #ifdef WEB -->
+                    <template v-for="item in tabs" #[item.slot]>
+                        <college-profile v-if="item.slot === 'profile' && item.visited" :loading="loading"/>
+                        <college-brochure v-if="item.slot === 'brochure' && item.visited"/>
+                        <plan-enroll-list v-if="item.slot === 'plan' && item.visited" mode="plan" :list="planList"/>
+                        <plan-enroll-list v-if="item.slot === 'plan' && item.visited" mode="enroll" :list="enrollList"/>
+                        <college-exam v-if="item.slot === 'enroll' && item.visited"/>
+                    </template>
+                    <!-- #endif -->
+                    <!-- #ifdef MP-WEIXIN -->
+                    <block v-for="item in tabs">
+                        <template #[item.slot]>
+                            <college-profile v-if="item.slot === 'profile' && item.visited" :loading="loading"/>
+                            <college-brochure v-if="item.slot === 'brochure' && item.visited"/>
+                            <plan-enroll-list v-if="item.slot === 'plan' && item.visited" mode="plan" :list="planList"/>
+                            <plan-enroll-list v-if="item.slot === 'plan' && item.visited" mode="enroll" :list="enrollList"/>
+                            <college-exam v-if="item.slot === 'exam' && item.visited"/>
+                        </template>
+                    </block>
+                    <!-- #endif -->
+                </ie-tabs-swiper>
+            </view>
+        </uv-sticky>
+    </ie-page>
 </template>
 <script lang="ts" setup>
 
-import { useTransferPage } from "@/hooks/useTransferPage";
-import { UniversityDetail, University } from "@/types/university";
-import { MajorItem } from "@/types/major";
-import { universityDetail } from "@/api/modules/university";
-import { getMajorTree } from "@/api/modules/major";
+import {useTransferPage} from "@/hooks/useTransferPage";
+import {UniversityDetail, University} from "@/types/university";
+import {MajorItem} from "@/types/major";
+import {universityDetail} from "@/api/modules/university";
+import {getMajorTree} from "@/api/modules/major";
 import CollegeInfo from "@/pagesOther/pages/university/detail/components/college-info.vue";
-import { SwiperTabItem } from "@/types";
-import { useNavbar } from "@/hooks/useNavbar";
-import { useAppStore } from "@/store/appStore";
-import { MAJOR_TREE, UNIVERSITY_DETAIL } from "@/types/injectionSymbols";
+import {SwiperTabItem} from "@/types";
+import {useNavbar} from "@/hooks/useNavbar";
+import {useAppStore} from "@/store/appStore";
+import {MAJOR_TREE, UNIVERSITY_DETAIL} from "@/types/injectionSymbols";
 import CollegeProfile from "@/pagesOther/pages/university/detail/components/college-profile.vue";
 import CollegeBrochure from "@/pagesOther/pages/university/detail/components/college-brochure.vue";
 import CollegeExam from "@/pagesOther/pages/university/detail/components/college-exam.vue";
 import PlanEnrollList from "@/pagesOther/pages/university/detail/components/plan-enroll-list.vue";
 
-const { prevData } = useTransferPage()
-const { baseStickyTop } = useNavbar()
+const {prevData} = useTransferPage()
+const {baseStickyTop} = useNavbar()
 const detail = ref<UniversityDetail>({} as UniversityDetail)
 const baseInfo = computed<University>(() => detail.value.baseInfo || {} as University)
 const planList = computed(() => detail.value.planHistories || [])
@@ -64,47 +64,47 @@ const appStore = useAppStore()
 const current = ref(0)
 const tabHeight = computed(() => appStore.sysInfo.screenHeight - baseStickyTop.value)
 const tabs = ref<SwiperTabItem[]>([{
-  name: '概况',
-  slot: 'profile',
-  visited: true
+    name: '概况',
+    slot: 'profile',
+    visited: true
 }, {
-  name: '简章',
-  slot: 'brochure',
-  visited: false
+    name: '简章',
+    slot: 'brochure',
+    visited: false
 }, {
-  name: '计划',
-  slot: 'plan',
-  visited: false
+    name: '计划',
+    slot: 'plan',
+    visited: false
 }, {
-  name: '录取',
-  slot: 'enroll',
-  visited: false
+    name: '录取',
+    slot: 'enroll',
+    visited: false
 }, {
-  name: '考试大纲',
-  slot: 'exam',
-  visited: false
+    name: '考试大纲',
+    slot: 'exam',
+    visited: false
 }])
 
 const handleChangeSwiper = function (e: any) {
-  current.value = e.detail.current
-  tabs.value[current.value].visited = true
+    current.value = e.detail.current
+    tabs.value[current.value].visited = true
 }
 
 provide(UNIVERSITY_DETAIL, detail)
 provide(MAJOR_TREE, majorTree)
 onMounted(() => {
-  uni.$ie.showLoading()
-  loading.value = true
-  universityDetail({ code: prevData.value.code })
-    .then(res => {
-      detail.value = res.data
-      return getMajorTree({})
-    })
-    .then(res => majorTree.value = res.data)
-    .finally(() => {
-      uni.$ie.hideLoading()
-      loading.value = false
-    })
+    uni.$ie.showLoading()
+    loading.value = true
+    universityDetail({code: prevData.value.code})
+        .then(res => {
+            detail.value = res.data
+            return getMajorTree({})
+        })
+        .then(res => majorTree.value = res.data)
+        .finally(() => {
+            uni.$ie.hideLoading()
+            loading.value = false
+        })
 })
 // 必须手动触发才能保证 navbar.transparent 正常工作
 onPageScroll(() => {
@@ -113,6 +113,6 @@ onPageScroll(() => {
 
 <style lang="scss" scoped>
 ::v-deep .uv-tabs__wrapper__nav__item__text {
-  white-space: nowrap;
+    white-space: nowrap;
 }
 </style>