|
|
@@ -12,7 +12,7 @@ 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 { useRouter } from '../../../../core/utils/router'
|
|
|
+import { back, 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'
|
|
|
@@ -21,7 +21,10 @@ import { calendar, clock, funnel, location, user } from '@designer-hub/assets/sr
|
|
|
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 } from '../../../../core/utils/common'
|
|
|
+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'
|
|
|
|
|
|
const themeVars = ref<ConfigProviderThemeVars>({
|
|
|
tableBorderColor: 'white',
|
|
|
@@ -40,6 +43,8 @@ const { data: signups, run: setSignups } = useRequest(
|
|
|
const show = ref(false)
|
|
|
const successShow = ref(false)
|
|
|
const listShow = ref(false)
|
|
|
+const dominantColor = ref()
|
|
|
+const palette = ref()
|
|
|
const isActivity = computed(() => type.value === 'activity')
|
|
|
const isStudyTour = computed(() => type.value === 'studyTour')
|
|
|
const infos = computed(() => [
|
|
|
@@ -76,7 +81,7 @@ const infos = computed(() => [
|
|
|
{
|
|
|
icon: funnel,
|
|
|
title: `等级限制`,
|
|
|
- content: [data.value.memberLevel.join('、')],
|
|
|
+ content: [data.value.memberLevel?.join('、')],
|
|
|
visable: true,
|
|
|
},
|
|
|
])
|
|
|
@@ -94,18 +99,59 @@ onLoad(async (query: { id: string; type: 'activity' }) => {
|
|
|
id.value = query.id
|
|
|
type.value = query.type
|
|
|
await setData()
|
|
|
- console.log(data.value)
|
|
|
+ const { path } = await uni.getImageInfo({ src: data.value.backgroundUrl })
|
|
|
+ const ctx = uni.createCanvasContext('firstCanvas')
|
|
|
+ uni
|
|
|
+ .createSelectorQuery()
|
|
|
+ .select('#firstCanvas')
|
|
|
+ .fields({ size: true }, async ({ width, height }: any) => {
|
|
|
+ // ctx.setFillStyle('#ffffff')
|
|
|
+ ctx.drawImage(path, 0, 0, width, height)
|
|
|
+ ctx.draw(true, async () => {
|
|
|
+ const res1 = await uni.canvasGetImageData({
|
|
|
+ canvasId: 'firstCanvas',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: width.toFixed(0),
|
|
|
+ height: height.toFixed(0),
|
|
|
+ })
|
|
|
+ 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(a)
|
|
|
+ const colors = sort(a, (it: any) => it.intensity, true)
|
|
|
+ dominantColor.value = a[0].hex
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
await setSignups()
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
<div
|
|
|
class="flex-grow bg-white px-3.5 bg-[length:100%_100%]"
|
|
|
- :style="{ backgroundImage: `url(${data.backgroundUrl})` }"
|
|
|
+ :style="{
|
|
|
+ backgroundColor: `${dominantColor}`,
|
|
|
+ }"
|
|
|
>
|
|
|
<NavbarEvo transparent dark></NavbarEvo>
|
|
|
<div class="aspect-[1.26/1] relative mx--3.5">
|
|
|
- <wd-img width="100%" height="100%" :src="data.bannerUrl?.at(0)"></wd-img>
|
|
|
+ <!-- <wd-img width="100%" height="100%" :src="data.bannerUrl?.at(0)"></wd-img> -->
|
|
|
+ <canvas class="w-full h-full" canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
|
|
<div class="absolute left-3.5 bottom-3" @click="listShow = true">
|
|
|
<div
|
|
|
v-if="isStudyTour"
|
