Browse Source

feat(study-tour): 优化游学列表和会员等级展示

- 在游学列表页面添加会员等级配置请求和处理逻辑
- 更新 PageHelper 组件,添加滚动事件监听
- 修改 StudyTourCard 组件,支持显示具体的会员等级名称
EvilDragon 4 months ago
parent
commit
40d51ea08b

+ 5 - 2
packages/app/src/components/page-helper.vue

@@ -50,9 +50,11 @@ onMounted(async () => {
   }
 })
 
+onPageScroll((e) => {
+  paging.value?.updatePageScrollTop(e.scrollTop)
+})
 onReachBottom(() => {
-  //   // console.log(1111)
-  paging.value?.doLoadMore()
+  paging.value?.pageReachBottom()
 })
 const refresh = async () => {
   console.log('Page Helper Refresh')
@@ -68,6 +70,7 @@ defineExpose({
       ref="paging"
       v-model="dataList"
       doLoadMore="toBottom"
+      :refresher-enabled="false"
       :default-page-size="10"
       :default-page-no="1"
       :use-page-scroll="true"

+ 8 - 3
packages/app/src/pages/home/study-tour/components/study-tour-card.vue

@@ -8,7 +8,7 @@ import { NetImages } from '../../../../core/libs/net-images'
 import ActivityCountDown from '../../components/activity-count-down.vue'
 import { getActivityStatusButtonText, getActivityStatusText } from '../../../../core/utils/common'
 
-const props = defineProps<{ customClass?: string; options?: StudyTour }>()
+const props = defineProps<{ customClass?: string; options?: StudyTour & { levelsByMemberLevel } }>()
 
 const router = useRouter()
 const toDetail = () => {
@@ -96,8 +96,13 @@ const toDetail = () => {
         <div
           class="text-justify text-black/40 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
         >
-          黄金会员以上等级可报名
-          {{ options?.memberLevel?.join('、') }}
+          <!-- 黄金会员以上等级 -->
+          {{
+            options?.memberLevel
+              ?.map((it) => options?.levelsByMemberLevel[String(it)]?.memberLevelName)
+              ?.join('、')
+          }}
+          可报名
         </div>
       </div>
     </div>

+ 17 - 3
packages/app/src/pages/home/study-tour/list.vue

@@ -8,13 +8,24 @@
 </route>
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
-import { getContents, getStudyTours } from '../../../core/libs/requests'
+import { getAppMemberLevelConfigs, getStudyTours } from '../../../core/libs/requests'
 import dayjs from 'dayjs'
 import StudyTourCard from './components/study-tour-card.vue'
 import PageHelper from '@/components/page-helper.vue'
 
 const title = computed(() => `${dayjs().year()}年游学计划`)
-onMounted(async () => {})
+const { data: levels, run: setLevels } = useRequest(() => getAppMemberLevelConfigs(), {
+  initialData: [],
+})
+const levelsByMemberLevel = computed(() =>
+  levels.value.reduce((acc, item) => {
+    acc[item.memberLevel] = item
+    return acc
+  }, {}),
+)
+onMounted(async () => {
+  await setLevels()
+})
 </script>
 <template>
   <div class="flex flex-col gap-6 p-3.5">
@@ -29,7 +40,10 @@ onMounted(async () => {})
         <div class="py-4 flex flex-col gap-6">
           <template v-for="(it, index) in source.list" :key="index">
             <div class="mx--2.5 my--2.5">
-              <StudyTourCard custom-class="" :options="it"></StudyTourCard>
+              <StudyTourCard
+                custom-class=""
+                :options="{ ...it, levelsByMemberLevel }"
+              ></StudyTourCard>
             </div>
           </template>
         </div>