|
@@ -7,12 +7,19 @@
|
|
|
</route>
|
|
|
<script setup lang="ts">
|
|
|
import NavbarEvo from '@/components/navbar-evo.vue'
|
|
|
-import { activitySignup, getActivity, getActivitySignups } from '../../../../core/libs/requests'
|
|
|
+import {
|
|
|
+ activitySignup,
|
|
|
+ getActivity,
|
|
|
+ getActivitySignups,
|
|
|
+ getStudyTour,
|
|
|
+ getStudyTourSignups,
|
|
|
+ studyTourSignup,
|
|
|
+} from '../../../../core/libs/requests'
|
|
|
import { bell, map, rightFill } from '@designer-hub/assets/src/assets/svgs'
|
|
|
import TiltedButton from '@/components/tilted-button.vue'
|
|
|
import dayjs from 'dayjs'
|
|
|
import BottomAppBar from '@/components/bottom-app-bar.vue'
|
|
|
-import { back, useRouter } from '../../../../core/utils/router'
|
|
|
+import { useRouter } from '../../../../core/utils/router'
|
|
|
import PageHelper from '@/components/page-helper.vue'
|
|
|
import { ConfigProviderThemeVars } from 'wot-design-uni'
|
|
|
import SectionHeading from '@/components/section-heading.vue'
|
|
@@ -22,9 +29,9 @@ import { signupSuccessDialogBg } from '@designer-hub/assets/src/bgs'
|
|
|
import { NetImages } from '../../../../core/libs/net-images'
|
|
|
import signupListDialogBg from '@designer-hub/assets/src/libs/assets/signupListDialogBg'
|
|
|
import { getActivityStatusText, getCountsArr } from '../../../../core/utils/common'
|
|
|
-import colorThief from 'miniapp-color-thief'
|
|
|
-import { extractColors, extractColorsFromImageData } from 'extract-colors/lib/extract-colors.mjs'
|
|
|
-import { sort, orderBy } from 'radash'
|
|
|
+import { extractColorsFromImageData } from 'extract-colors/lib/extract-colors.mjs'
|
|
|
+import { sort } from 'radash'
|
|
|
+import { Activity, StudyTour } from '../../../../core/models/moment'
|
|
|
|
|
|
const themeVars = ref<ConfigProviderThemeVars>({
|
|
|
tableBorderColor: 'white',
|
|
@@ -35,7 +42,8 @@ const router = useRouter()
|
|
|
const id = ref()
|
|
|
const type = ref<'activity' | 'studyTour'>()
|
|
|
const activityTypes = ref({ activity: '活动', studyTour: '游学' })
|
|
|
-const { data, run: setData } = useRequest(() => getActivity(id.value), { initialData: {} })
|
|
|
+const request = ref<() => Promise<IResData<Partial<Activity | StudyTour>>>>()
|
|
|
+const { data, run: setData } = useRequest(() => request.value(), { initialData: {} })
|
|
|
const { data: signups, run: setSignups } = useRequest(
|
|
|
() => getActivitySignups({ activityId: id.value }),
|
|
|
{ initialData: { list: [], total: 0 } },
|
|
@@ -87,7 +95,9 @@ const infos = computed(() => [
|
|
|
])
|
|
|
|
|
|
const handleConfirm = async () => {
|
|
|
- const { data, code, msg } = await activitySignup({ id: id.value })
|
|
|
+ const { data, code, msg } = await (isActivity.value ? activitySignup : studyTourSignup)({
|
|
|
+ id: id.value,
|
|
|
+ })
|
|
|
console.log(msg)
|
|
|
if (code === 0) {
|
|
|
// todo: 报名成功弹框
|
|
@@ -95,9 +105,15 @@ const handleConfirm = async () => {
|
|
|
successShow.value = true
|
|
|
}
|
|
|
}
|
|
|
-onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
+onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
|
|
|
id.value = query.id
|
|
|
type.value = query.type
|
|
|
+ if (type.value === 'activity') {
|
|
|
+ request.value = () => getActivity(id.value)
|
|
|
+ }
|
|
|
+ if (type.value === 'studyTour') {
|
|
|
+ request.value = () => getStudyTour(id.value)
|
|
|
+ }
|
|
|
await setData()
|
|
|
const { path } = await uni.getImageInfo({ src: data.value.backgroundUrl })
|
|
|
const ctx = uni.createCanvasContext('firstCanvas')
|
|
@@ -117,21 +133,16 @@ onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
})
|
|
|
const { data: imageData } = res1
|
|
|
dominantColor.value = `rgb(${getCountsArr(imageData, width, height)})`
|
|
|
- const a = await extractColorsFromImageData(
|
|
|
- {
|
|
|
- data: [...imageData],
|
|
|
- width: width.toFixed(0),
|
|
|
- height: height.toFixed(0),
|
|
|
- },
|
|
|
- {
|
|
|
- pixels: 64000,
|
|
|
- distance: 0.22,
|
|
|
- colorValidator: (red, green, blue, alpha = 255) => alpha > 250,
|
|
|
- saturationDistance: 0.2,
|
|
|
- lightnessDistance: 0.2,
|
|
|
- hueDistance: 0.083333333,
|
|
|
- },
|
|
|
- )
|
|
|
+ console.log(res1)
|
|
|
+
|
|
|
+ const a = await extractColorsFromImageData(res1, {
|
|
|
+ pixels: 1000000,
|
|
|
+ distance: 0.22,
|
|
|
+ colorValidator: (red, green, blue, alpha = 255) => alpha > 250,
|
|
|
+ saturationDistance: 0.2,
|
|
|
+ lightnessDistance: 0.2,
|
|
|
+ hueDistance: 0.083333333,
|
|
|
+ })
|
|
|
console.log(a)
|
|
|
const colors = sort(a, (it: any) => it.intensity, true)
|
|
|
dominantColor.value = a[0].hex
|
|
@@ -167,7 +178,7 @@ onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
</div>
|
|
|
<div v-if="isActivity" class="flex items-center gap-1.25">
|
|
|
<AvatarGroupCasual
|
|
|
- :urls="signups.list.map(() => NetImages.DefaultAvatar)"
|
|
|
+ :urls="signups.list.map((it) => it.headImgUrl || NetImages.DefaultAvatar)"
|
|
|
:width="40"
|
|
|
:height="40"
|
|
|
></AvatarGroupCasual>
|
|
@@ -216,7 +227,7 @@ onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
class="flex items-center text-white text-base font-normal font-['PingFang_SC'] leading-[34px]"
|
|
|
>
|
|
|
<template v-if="it.content.length === 2">
|
|
|
- <div class="w-22 text-center">{{ it.content[0] }}</div>
|
|
|
+ <div class="w-22 text-start">{{ it.content[0] }}</div>
|
|
|
<wd-icon name="play" size="22px"></wd-icon>
|
|
|
<div class="w-22 text-center">{{ it.content[0] }}</div>
|
|
|
</template>
|
|
@@ -239,7 +250,7 @@ onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
<div
|
|
|
class="text-justify text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-relaxed"
|
|
|
>
|
|
|
- {{ data.activityDesc }}
|
|
|
+ {{ data['activityDesc'] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<BottomAppBar fixed placeholder transparent>
|
|
@@ -274,7 +285,7 @@ onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
</div>
|
|
|
<div class="text-black/40 text-sm font-normal font-['PingFang_SC']">积分</div>
|
|
|
<div class="ml-1 text-black/40 text-xs font-normal font-['PingFang_SC']">
|
|
|
- 剩余:{{ data.activityAllowCount }}
|
|
|
+ 剩余:{{ data['activityAllowCount'] }}
|
|
|
</div>
|
|
|
<div class="flex-1"></div>
|
|
|
</div>
|
|
@@ -297,8 +308,8 @@ onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
</div>
|
|
|
<div class="flex flex-col justify-center aspect-[0.7/1] gap-5 p-6.5">
|
|
|
<PageHelper
|
|
|
- :request="getActivitySignups"
|
|
|
- :query="{ activityId: id }"
|
|
|
+ :request="isActivity ? getActivitySignups : getStudyTourSignups"
|
|
|
+ :query="isActivity ? { activityId: id } : { studyId: id }"
|
|
|
class="flex-grow flex flex-col"
|
|
|
>
|
|
|
<template #default="{ source }">
|