|
|
@@ -11,6 +11,8 @@ import Card from '@/components/card.vue'
|
|
|
import MomentItem from '@/components/moment-item.vue'
|
|
|
import SectionHeading from '@/components/section-heading.vue'
|
|
|
import ClassItem from '../components/class-item.vue'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { useUserStore } from '@/store'
|
|
|
import {
|
|
|
getAppMemberLevelConfigs,
|
|
|
getBanners,
|
|
|
@@ -18,15 +20,21 @@ import {
|
|
|
getContents,
|
|
|
getStudyTours,
|
|
|
} from '../../../core/libs/requests'
|
|
|
+import { handleUpvoteClick } from '@/core/libs/actions'
|
|
|
import { NetImages } from '../../../core/libs/net-images'
|
|
|
import { BannerMode } from '../../../core/libs/models'
|
|
|
import { useRouter } from '../../../core/utils/router'
|
|
|
import PageHelper from '@/components/page-helper.vue'
|
|
|
import RegisterCard from './components/register-card.vue'
|
|
|
+import { ComponentExposed } from 'vue-component-type-helpers'
|
|
|
+const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
|
|
|
const currentBanner = ref(0)
|
|
|
const handleSwiperChange = ({ detail: { current } }) => {
|
|
|
- currentBanner.value = current
|
|
|
+ currentBanner.value = current
|
|
|
}
|
|
|
+const userStore = useUserStore()
|
|
|
+const { userInfo } = storeToRefs(userStore)
|
|
|
+const shareOptions = ref()
|
|
|
const router = useRouter()
|
|
|
const { data: studyTours, run: setStudyTours } = useRequest(() =>
|
|
|
getStudyTours({ headRecommend: 1 }),
|
|
|
@@ -42,6 +50,14 @@ const { data: banners, run: setBanners } = useRequest(
|
|
|
const { data: levels, run: setLevels } = useRequest(() => getAppMemberLevelConfigs(), {
|
|
|
initialData: [],
|
|
|
})
|
|
|
+const handleLike = async (options) => {
|
|
|
+ await handleUpvoteClick({
|
|
|
+ ...options,
|
|
|
+ userId: userInfo.value.userId,
|
|
|
+ userName: userInfo.value.nickname,
|
|
|
+ })
|
|
|
+ await pageHelperRef.value?.refresh()
|
|
|
+}
|
|
|
const levelsByMemberLevel = computed(() =>
|
|
|
levels.value.reduce((acc, item) => {
|
|
|
acc[item.memberLevel] = item
|
|
|
@@ -51,6 +67,9 @@ const levelsByMemberLevel = computed(() =>
|
|
|
onMounted(async () => {
|
|
|
await Promise.all([setLevels(), setStudyTours(), setClassmates(), setBanners()])
|
|
|
})
|
|
|
+onShow(async () => {
|
|
|
+ await pageHelperRef.value?.reload()
|
|
|
+})
|
|
|
</script>
|
|
|
<template>
|
|
|
<view class="flex-grow flex flex-col gap-6 p-3.5">
|
|
|
@@ -74,24 +93,24 @@ onMounted(async () => {
|
|
|
</div>
|
|
|
|
|
|
<div class="relative">
|
|
|
- <template v-if="studyTours?.list.length">
|
|
|
- <swiper class="aspect-[0.75/1] rounded-[20px] overflow-hidden" @change="handleSwiperChange">
|
|
|
- <template v-for="(it, i) in studyTours?.list" :key="i">
|
|
|
- <swiper-item>
|
|
|
- <RegisterCard :options="{ ...it, levelsByMemberLevel }"></RegisterCard>
|
|
|
- </swiper-item>
|
|
|
- </template>
|
|
|
- </swiper>
|
|
|
- </template>
|
|
|
- <div class="absolute flex gap-1 dots">
|
|
|
- <template v-for="(it, i) in studyTours?.list" :key="i">
|
|
|
- <div
|
|
|
- class="w-1 h-1 rounded-full"
|
|
|
- :class="`${currentBanner === i ? 'bg-white bg-active' : 'bg-white/40'}`"
|
|
|
- ></div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <template v-if="studyTours?.list.length">
|
|
|
+ <swiper class="aspect-[0.75/1] rounded-[20px] overflow-hidden" @change="handleSwiperChange">
|
|
|
+ <template v-for="(it, i) in studyTours?.list" :key="i">
|
|
|
+ <swiper-item>
|
|
|
+ <RegisterCard :options="{ ...it, levelsByMemberLevel }"></RegisterCard>
|
|
|
+ </swiper-item>
|
|
|
+ </template>
|
|
|
+ </swiper>
|
|
|
+ </template>
|
|
|
+ <div class="absolute flex gap-1 dots">
|
|
|
+ <template v-for="(it, i) in studyTours?.list" :key="i">
|
|
|
+ <div
|
|
|
+ class="w-1 h-1 rounded-full"
|
|
|
+ :class="`${currentBanner === i ? 'bg-white bg-active' : 'bg-white/40'}`"
|
|
|
+ ></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- </template>
|
|
|
</PageHelper> -->
|
|
|
<!-- <card custom-class="p-0!">
|
|
|
@@ -179,11 +198,16 @@ onMounted(async () => {
|
|
|
tip="暂无内容"
|
|
|
></wd-status-tip>
|
|
|
<section-heading custom-class="" title="设计圈"></section-heading>
|
|
|
- <PageHelper :request="getCircles" :query="{tagName: '设计游学'}" class="flex-grow flex flex-col">
|
|
|
+ <PageHelper
|
|
|
+ ref="pageHelperRef"
|
|
|
+ :request="getCircles"
|
|
|
+ :query="{ tagName: '设计游学' }"
|
|
|
+ class="flex-grow flex flex-col"
|
|
|
+ >
|
|
|
<template #default="{ source }">
|
|
|
<div class="flex-grow flex flex-col gap-6">
|
|
|
<template v-for="(it, i) in source.list" :key="i">
|
|
|
- <MomentItem :options="it"></MomentItem>
|
|
|
+ <MomentItem :options="it" @like="handleLike"></MomentItem>
|
|
|
</template>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -191,16 +215,16 @@ onMounted(async () => {
|
|
|
</view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
- .dots{
|
|
|
- bottom: 20rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- .bg-active{
|
|
|
- width:40rpx;
|
|
|
- }
|
|
|
- :deep(.level-circle){
|
|
|
- top: -10rpx;
|
|
|
- left:-5rpx;
|
|
|
- }
|
|
|
-</style>
|
|
|
+.dots {
|
|
|
+ bottom: 20rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+.bg-active {
|
|
|
+ width: 40rpx;
|
|
|
+}
|
|
|
+:deep(.level-circle) {
|
|
|
+ top: -10rpx;
|
|
|
+ left: -5rpx;
|
|
|
+}
|
|
|
+</style>
|
