cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-12 16:40:40 +08:00
Code Issues Activity

feat: 添加恋爱故事模块功能

Browse Source 
1. 新增uhlove图标字体库与相关样式
2. 新增恋爱故事页面与恋爱主页
3. 修复投票组件多选限制逻辑bug
4. 优化导航栏组件自定义样式能力
5. 更新滚动置顶组件黑名单与样式
6. 开启本地开发调试模式
This commit is contained in:
小莫唐尼
2026-09-08 17:38:56 +08:00
parent d8d08f9689
commit 2541f5a75e
10 changed files with 770 additions and 766 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/uh-article-vote-item/uh-article-vote-item.vue
+24 -10
View File
@@ -104,8 +104,10 @@ function handleSelectCheckboxOption(option: IVoteOption) {
return return
const checkedList = (spec.options || []).filter(x => x.checked && x.id !== option.id) const checkedList = (spec.options || []).filter(x => x.checked && x.id !== option.id)
if (spec.type === 'multiple' && checkedList.length >= (spec.maxVotes || 0)) { // maxVotes 缺失(0/undefined)时不限制多选数量,避免 0 >= 0 恒真导致无法选择
showToast(`最多选择 ${spec.maxVotes} 项`) const maxVotes = spec.maxVotes
if (spec.type === 'multiple' && maxVotes && maxVotes > 0 && checkedList.length >= maxVotes) {
showToast(`最多选择 ${maxVotes} 项`)
return return
} }
@@ -225,7 +227,7 @@ defineExpose({ refresh: handleGetData })
</view> </view>
<text class="shrink-0 text-[22rpx] text-gray-400" @click="handleToVoteDetail">查看投票详情 ></text> <text class="shrink-0 text-[22rpx] text-gray-400" @click="handleToVoteDetail">查看投票详情 ></text>
</view> </view>
<view class="title mt-2 text-[30rpx] font-bold text-gray-900"> <view class="title mt-2 text-[30rpx] text-gray-900 font-bold">
{{ voteData.spec?.title }} {{ voteData.spec?.title }}
</view> </view>
</view> </view>
@@ -247,8 +249,12 @@ defineExpose({ refresh: handleGetData })
> >
<view class="is-voted-item-content relative z-2 box-border min-h-[72rpx] px-6 py-3"> <view class="is-voted-item-content relative z-2 box-border min-h-[72rpx] px-6 py-3">
<view class="flex items-center justify-between"> <view class="flex items-center justify-between">
<view class="flex-1 text-left">{{ option.title }}</view> <view class="flex-1 text-left">
<view class="shrink-0">{{ handleCalcPercent(option) }}%</view> {{ option.title }}
</view>
<view class="shrink-0">
{{ handleCalcPercent(option) }}%
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -278,8 +284,12 @@ defineExpose({ refresh: handleGetData })
> >
<view class="is-voted-item-content relative z-2 box-border min-h-[72rpx] px-6 py-3"> <view class="is-voted-item-content relative z-2 box-border min-h-[72rpx] px-6 py-3">
<view class="flex items-center justify-between"> <view class="flex items-center justify-between">
<view class="flex-1 text-left">{{ option.title }}</view> <view class="flex-1 text-left">
<view class="shrink-0">{{ handleCalcPercent(option) }}%</view> {{ option.title }}
</view>
<view class="shrink-0">
{{ handleCalcPercent(option) }}%
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -300,7 +310,7 @@ defineExpose({ refresh: handleGetData })
<!-- PK --> <!-- PK -->
<view v-else-if="voteData.spec?.type === 'pk'" class="flex flex-col gap-2"> <view v-else-if="voteData.spec?.type === 'pk'" class="flex flex-col gap-2">
<!-- PK 对抗条 --> <!-- PK 对抗条 -->
<view class="pk-container box-border flex w-full"> <view class="pk-container box-border w-full flex">
<view <view
v-for="(option, optionIndex) in voteData.spec?.options || []" v-for="(option, optionIndex) in voteData.spec?.options || []"
:key="optionIndex" :key="optionIndex"
@@ -324,8 +334,12 @@ defineExpose({ refresh: handleGetData })
> >
<view class="is-voted-item-content relative z-2 box-border min-h-[72rpx] px-6 py-3"> <view class="is-voted-item-content relative z-2 box-border min-h-[72rpx] px-6 py-3">
<view class="flex items-center justify-between"> <view class="flex items-center justify-between">
<view class="flex-1 text-left">选项{{ optionIndex + 1 }}：{{ option.title }}</view> <view class="flex-1 text-left">
<view class="shrink-0">{{ handleCalcPercent(option) }}%</view> 选项{{ optionIndex + 1 }}：{{ option.title }}
</view>
<view class="shrink-0">
{{ handleCalcPercent(option) }}%
</view>
</view> </view>
</view> </view>
</view> </view>
src/components/uh-navbar/uh-navbar.vue
+12 -7
View File
@@ -10,12 +10,15 @@
titleColor ?: string; titleColor ?: string;
scrollTitle ?: string; scrollTitle ?: string;
needPlaceholder ?: boolean; needPlaceholder ?: boolean;
backClass ?: string;
backStyle ?: string;
} }
const props = withDefaults(defineProps<IProps>(), { const props = withDefaults(defineProps<IProps>(), {
useBack: true, useBack: true,
useTitle: true, useTitle: true,
needPlaceholder: true, needPlaceholder: true,
backClass: 'text-gray-900'
}) })
const slots = useSlots() const slots = useSlots()
@@ -35,10 +38,6 @@
const customCalss = computed(() => { const customCalss = computed(() => {
const _class = [] const _class = []
if (props.titleColor) {
_class.push(props.titleColor)
return
}
if (scrollThreshold.value) { if (scrollThreshold.value) {
_class.push('text-white') _class.push('text-white')
} }
@@ -48,6 +47,10 @@
return _class; return _class;
}) })
const titleColorClass = computed(() => {
return [props.titleColor]
})
const visibleTitle = computed(() => { const visibleTitle = computed(() => {
if (!props.scrollTitle) { if (!props.scrollTitle) {
return props.defaultTitle; return props.defaultTitle;
@@ -65,7 +68,7 @@
return [ return [
homePage, homePage,
'pages/maintenance/maintenance', 'pages/maintenance/maintenance',
...tabbarList.map(item => item.pagePath), ...tabbarList.map((item : any) => item.pagePath),
] as string[]; ] as string[];
}) })
@@ -92,14 +95,16 @@
<!-- 左边 --> <!-- 左边 -->
<view class="shrink-0 min-w-18" @click="handleBack()"> <view class="shrink-0 min-w-18" @click="handleBack()">
<view v-if="props.useBack" <view v-if="props.useBack"
class="uh-global-card-glass h-7 px-3 rounded-full border flex items-center gap-x-2 text-gray-900 text-sm"> class="uh-global-card-glass h-7 px-3 rounded-full border flex items-center gap-x-2 text-sm"
:class="props.backClass" :style="[props.backStyle]">
<wd-icon name="arrow-left" size="32rpx"></wd-icon> <wd-icon name="arrow-left" size="32rpx"></wd-icon>
<view class="w-[1px] h-4 bg-white/60" /> <view class="w-[1px] h-4 bg-white/60" />
<text class="text-xs font-bold">返回</text> <text class="text-xs font-bold">返回</text>
</view> </view>
</view> </view>
<!-- 中间 --> <!-- 中间 -->
<view class="flex-1 truncate text-center font-bold transition-colors duration-300"> <view class="flex-1 truncate text-center font-bold transition-colors duration-300"
:class="titleColorClass">
<slot> {{visibleTitle}} </slot> <slot> {{visibleTitle}} </slot>
</view> </view>
<!-- 右边 --> <!-- 右边 -->
src/components/uh-scroll-top/uh-scroll-top.vue
+2 -3
View File
@@ -13,7 +13,7 @@
} }
// 获取当前页面，并且设置黑名单模式，因为有的页面可能不需要滚动到顶部 // 获取当前页面，并且设置黑名单模式，因为有的页面可能不需要滚动到顶部
const balckList = ['pages/maintenance/maintenance','pages-blog/setting/setting'] const balckList = ['pages/maintenance/maintenance', 'pages-blog/setting/setting', 'pages-blog/love/love']
const pages = getCurrentPages() const pages = getCurrentPages()
const currentPage = pages[pages.length - 1] const currentPage = pages[pages.length - 1]
const visible = computed(() => { const visible = computed(() => {
@@ -23,8 +23,7 @@
<template> <template>
<view v-if="visible" class="fixed bottom-22 right-3 z-50 pb-safe"> <view v-if="visible" class="fixed bottom-22 right-3 z-50 pb-safe">
<view <view class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full text-primary"
class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full text-primary"
:class="props.customClass" @click="handleScrollTop"> :class="props.customClass" @click="handleScrollTop">
<wd-icon name="arrow-up" size="20px" /> <wd-icon name="arrow-up" size="20px" />
</view> </view>
src/pages-blog/love/love.vue
+272 -326
View File
@@ -1,363 +1,309 @@
<script lang="ts" setup> <script lang="ts" setup>
/** import { computed, onBeforeUnmount, ref } from 'vue'
* 恋爱主页(源自旧项目 pagesA/love/love.vue,新建复刻) import { onLoad, onShow } from '@dcloudio/uni-app'
* 情侣信息 + 恋爱计时 + 功能导航(恋爱故事/相册/清单) import { useAppConfigStore } from '@/store/appConfig'
*/ import { checkAvatarUrl, checkImageUrl } from '@/utils/url'
import { computed, onBeforeUnmount, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useAppConfigStore } from '@/store/appConfig'
import { checkAvatarUrl, checkImageUrl } from '@/utils/url'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '恋爱日记', navigationBarTitleText: '恋爱日记',
}, navigationStyle: 'custom'
}) },
})
const appConfigStore = useAppConfigStore() const appConfigStore = useAppConfigStore()
/* ---------------- 恋爱配置 ---------------- */ /* ---------------- 恋爱配置 ---------------- */
interface ILoveConfigPage { interface ILoveConfigPage {
enabled: boolean enabled : boolean
loveDateTitle: string loveDateTitle : string
loveDate: string loveDate : string
loveInfo: { loveInfo : {
boyNickname: string boyNickname : string
boyAvatar: string boyAvatar : string
girlNickname: string girlNickname : string
girlAvatar: string girlAvatar : string
} }
pageImages: { pageImages : {
bgImageUrl: string bgImageUrl : string
waveImageUrl: string waveImageUrl : string
heartImageUrl: string heartImageUrl : string
} }
ourStory: { enabled: boolean, iconUrl: string } ourStory : { enabled : boolean, iconUrl : string }
lovePhoto: { enabled: boolean, iconUrl: string } lovePhoto : { enabled : boolean, iconUrl : string }
loveDaily: { enabled: boolean, iconUrl: string } loveDaily : { enabled : boolean, iconUrl : string }
[key: string]: unknown [key : string] : unknown
} }
const loveConfig = ref<ILoveConfigPage>({ const loveConfig = ref<ILoveConfigPage>({
enabled: false, enabled: false,
loveDateTitle: '', loveDateTitle: '',
loveDate: '', loveDate: '',
loveInfo: { loveInfo: {
boyNickname: '', boyNickname: '',
boyAvatar: '', boyAvatar: '',
girlNickname: '', girlNickname: '',
girlAvatar: '', girlAvatar: '',
}, },
pageImages: { pageImages: {
bgImageUrl: '', bgImageUrl: '',
waveImageUrl: '', waveImageUrl: '',
heartImageUrl: '', heartImageUrl: '',
}, },
ourStory: { enabled: false, iconUrl: '' }, ourStory: { enabled: false, iconUrl: '' },
lovePhoto: { enabled: false, iconUrl: '' }, lovePhoto: { enabled: false, iconUrl: '' },
loveDaily: { enabled: false, iconUrl: '' }, loveDaily: { enabled: false, iconUrl: '' },
}) })
const loveDayCount = ref({ d: 0, h: 0, m: 0, s: 0 }) const loveDayCount = ref({ d: 0, h: 0, m: 0, s: 0 })
let loveDayTimer: ReturnType<typeof setTimeout> | null = null let loveDayTimer : ReturnType<typeof setTimeout> | null = null
const navList = ref<{ key: string, use: boolean, iconImageUrl: string, title: string, desc: string }[]>([]) const navList = ref<{ key : string, use : boolean, iconPrefix : string, icon : string, title : string, desc : string }[]>([])
/* ---------------- 计算属性 ---------------- */
const loveWrapStyle = computed(() => ({
backgroundImage: `url(${checkImageUrl(loveConfig.value.pageImages.bgImageUrl)})`,
}))
/* ---------------- 数据加载 ---------------- */ /* ---------------- 数据加载 ---------------- */
/** function syncLoveConfigFromStore() {
* 恋爱配置数据统一来自 appConfig store(静态配置一次性拉取,设计见 const storeLove = appConfigStore.loveConfig
* .docs/static-config-unified-fetch-design.md): const appConfigs = appConfigStore.configs
* - loveConfig(公开 /love-config 内容: enabled/纪念日/恋人信息, bootstrap 已拉取)
* - configs.loveConfig(模块开关与页面图片, getConfigs 合成下发)
* 页面不再自行发起 /love-config 请求,也不再需要接口失败降级分支(store 兜底默认)。
*/
function syncLoveConfigFromStore() {
const storeLove = appConfigStore.loveConfig
const appConfigs = appConfigStore.configs
loveConfig.value = { loveConfig.value = {
...loveConfig.value, ...loveConfig.value,
...(storeLove.loveDateTitle ? { loveDateTitle: storeLove.loveDateTitle } : {}), ...(storeLove.loveDateTitle ? { loveDateTitle: storeLove.loveDateTitle } : {}),
...(storeLove.loveDate ? { loveDate: storeLove.loveDate } : {}), ...(storeLove.loveDate ? { loveDate: storeLove.loveDate } : {}),
...(storeLove.enabled !== undefined ? { enabled: storeLove.enabled } : {}), ...(storeLove.enabled !== undefined ? { enabled: storeLove.enabled } : {}),
loveInfo: { loveInfo: {
...loveConfig.value.loveInfo, ...loveConfig.value.loveInfo,
...(storeLove.loveInfo || {}), ...(storeLove.loveInfo || {}),
}, },
} }
// 从 getConfigs.loveConfig 取模块开关与页面图片(缺省保留默认) // 从 getConfigs.loveConfig 取模块开关与页面图片(缺省保留默认)
const loveModuleConfig = appConfigs.loveConfig as Partial<ILoveConfigPage> | undefined const loveModuleConfig = appConfigs.loveConfig as Partial<ILoveConfigPage> | undefined
if (loveModuleConfig) { if (loveModuleConfig) {
loveConfig.value = { loveConfig.value = {
...loveConfig.value, ...loveConfig.value,
pageImages: loveModuleConfig.pageImages || loveConfig.value.pageImages, pageImages: loveModuleConfig.pageImages || loveConfig.value.pageImages,
ourStory: loveModuleConfig.ourStory || loveConfig.value.ourStory, ourStory: loveModuleConfig.ourStory || loveConfig.value.ourStory,
lovePhoto: loveModuleConfig.lovePhoto || loveConfig.value.lovePhoto, lovePhoto: loveModuleConfig.lovePhoto || loveConfig.value.lovePhoto,
loveDaily: loveModuleConfig.loveDaily || loveConfig.value.loveDaily, loveDaily: loveModuleConfig.loveDaily || loveConfig.value.loveDaily,
} }
} }
initList() initList()
// 未配置纪念日(loveDate 为空)不启动倒计时,避免 NaN // 未配置纪念日(loveDate 为空)不启动倒计时,避免 NaN
if (loveConfig.value.loveDate) { if (loveConfig.value.loveDate) {
handleInitLoveDayCount() handleInitLoveDayCount()
} }
} }
function initList() { function initList() {
const configs = loveConfig.value const configs = loveConfig.value
navList.value = [ navList.value = [
{ {
key: 'journey', key: 'story',
use: configs.ourStory.enabled, use: configs.ourStory.enabled,
iconImageUrl: configs.ourStory.iconUrl, title: '恋爱故事',
title: '恋爱故事', desc: '我们一起度过的那些经历',
desc: '我们一起度过的那些经历', iconPrefix: 'uhlove-icon',
}, icon: 'gushi',
{ },
key: 'album', {
use: configs.lovePhoto.enabled, key: 'album',
iconImageUrl: configs.lovePhoto.iconUrl, use: configs.lovePhoto.enabled,
title: '恋爱相册', title: '恋爱相册',
desc: '定格了我们的那些小美好', desc: '定格了我们的那些小美好',
}, iconPrefix: 'uhlove-icon',
{ icon: 'xiangce'
key: 'list', },
use: configs.loveDaily.enabled, {
iconImageUrl: configs.loveDaily.iconUrl, key: 'list',
title: '恋爱清单', use: configs.loveDaily.enabled,
desc: '你我之间的约定我们都在努力实现', title: '恋爱清单',
}, desc: '你我之间的约定我们都在努力实现',
] iconPrefix: 'uhlove-icon',
} icon: 'liebiao'
},
]
}
/* ---------------- 恋爱计时 ---------------- */ /* ---------------- 恋爱计时 ---------------- */
function handleInitLoveDayCount() { function handleInitLoveDayCount() {
if (loveDayTimer) { if (loveDayTimer) {
clearTimeout(loveDayTimer) clearTimeout(loveDayTimer)
} }
const countDownFn = () => { const countDownFn = () => {
loveDayTimer = setTimeout(countDownFn, 1000) loveDayTimer = setTimeout(countDownFn, 1000)
const formatStartDate = loveConfig.value.loveDate.replace(/-/g, '/') const formatStartDate = loveConfig.value.loveDate.replace(/-/g, '/')
const start = new Date(formatStartDate) const start = new Date(formatStartDate)
const now = new Date() const now = new Date()
const T = now.getTime() - start.getTime() const T = now.getTime() - start.getTime()
const i = 24 * 60 * 60 * 1000 const i = 24 * 60 * 60 * 1000
const d = T / i const d = T / i
const D = Math.floor(d) const D = Math.floor(d)
const h = (d - D) * 24 const h = (d - D) * 24
const H = Math.floor(h) const H = Math.floor(h)
const m = (h - H) * 60 const m = (h - H) * 60
const M = Math.floor(m) const M = Math.floor(m)
const s = (m - M) * 60 const s = (m - M) * 60
const S = Math.floor(s) const S = Math.floor(s)
loveDayCount.value = { d: D, h: H, m: M, s: S } loveDayCount.value = { d: D, h: H, m: M, s: S }
} }
countDownFn() countDownFn()
} }
/* ---------------- 跳转 ---------------- */ /* ---------------- 跳转 ---------------- */
function handleToPage(pageName: string) { function handleToPage(pageName : string) {
uni.navigateTo({ uni.navigateTo({
url: `/pages-blog/love/${pageName}`, url: `/pages-blog/love/${pageName}`,
}) })
} }
/* ---------------- 生命周期 ---------------- */ /* ---------------- 生命周期 ---------------- */
onLoad(() => { onLoad(() => {
uni.setNavigationBarTitle({ title: '恋爱日记' }) syncLoveConfigFromStore()
// 先用 store 已有数据立即渲染(index 启动已 bootstrap 或持久化缓存恢复) })
syncLoveConfigFromStore()
})
// 每次进入页面:静态配置 TTL 内不重复请求(bootstrap 内部判定),刷新后重新合成视图 onShow(async () => {
onShow(async () => { await appConfigStore.bootstrap()
await appConfigStore.bootstrap() syncLoveConfigFromStore()
syncLoveConfigFromStore() })
})
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (loveDayTimer) { if (loveDayTimer) {
clearTimeout(loveDayTimer) clearTimeout(loveDayTimer)
} }
}) })
</script> </script>
<template> <template>
<view class="app-page min-h-screen w-screen"> <view class="bg-pink-100 min-h-screen w-screen">
<!-- 情侣信息 --> <uh-navbar default-title="恋爱日记" :need-placeholder="false" back-class="text-love"
<view class="lover-wrap relative h-[50vh] w-screen flex items-center justify-center" :style="[loveWrapStyle]"> title-color="!text-love"></uh-navbar>
<view class="lover-card absolute left-1/2 top-[58%] z-2 w-[90vw] flex items-center justify-around rounded-xl -translate-x-1/2 -translate-y-1/2">
<view class="boy">
<image class="avatar box-border h-[180rpx] w-[180rpx] border-8 rounded-full" :style="{ borderColor: 'rgb(58 184 228 / 70%)' }" :src="checkAvatarUrl(loveConfig.loveInfo.boyAvatar)" mode="aspectFit" />
<view class="name mt-2 text-center text-[32rpx] text-white font-bold tracking-[2rpx]">
{{ loveConfig.loveInfo.boyNickname }}
</view>
</view>
<image class="like h-[120rpx] w-[120rpx]" :src="checkImageUrl(loveConfig.pageImages.heartImageUrl)" mode="scaleToFill" />
<view class="girl">
<image class="avatar box-border h-[180rpx] w-[180rpx] border-8 rounded-full" :style="{ borderColor: 'rgb(245 122 179 / 70%)' }" :src="checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="aspectFit" />
<view class="name mt-2 text-center text-[32rpx] text-white font-bold tracking-[2rpx]">
{{ loveConfig.loveInfo.girlNickname }}
</view>
</view>
</view>
<image class="wave-image absolute bottom-0 left-0 h-[120rpx] w-full" :src="checkImageUrl(loveConfig.pageImages.waveImageUrl)" mode="scaleToFill" />
</view>
<!-- 恋爱记时 --> <!-- 情侣信息 -->
<view class="love-time-wrap mt-20 w-screen flex flex-col items-center justify-center"> <view class="relative z-10 h-92 w-screen flex flex-col items-center justify-center">
<view class="title text-[42rpx] text-[#333] font-bold"> <view class="relative z-10 w-full h-full flex items-center justify-center rounded-xl">
{{ loveConfig.loveDateTitle }} <view class="boy flex flex-col items-center justify-center translate-x-1">
</view> <image class="uh-global-card-glass border-3 box-border border-blue-400 h-26 w-26 rounded-full"
<view class="content mt-6 flex items-center justify-center"> :src="checkAvatarUrl(loveConfig.loveInfo.boyAvatar)" mode="aspectFill" />
<text class="text text-[28rpx]"> <view class="bg-blue-500 mt-2 text-center text-xs text-white font-bold px-2 py-1 rounded-lg">
第 {{ loveConfig.loveInfo.boyNickname }}
<text class="number mx-2 text-[46rpx] text-[#f83856] font-bold">{{ loveDayCount.d }}</text> </view>
天 </view>
</text> <view class="girl flex flex-col items-center justify-center -translate-x-1">
<text class="text text-[28rpx]"> <image class="uh-global-card-glass border-3 box-border border-love h-26 w-26 rounded-full"
<text class="number mx-2 text-[46rpx] text-[#f83856] font-bold">{{ loveDayCount.h }}</text> :src="checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="aspectFill" />
小时 <view class="bg-love mt-2 text-center text-xs text-white font-bold px-2 py-1 rounded-lg">
</text> {{ loveConfig.loveInfo.girlNickname }}
<text class="text text-[28rpx]"> </view>
<text class="number mx-2 text-[46rpx] text-[#f83856] font-bold">{{ loveDayCount.m }}</text> </view>
分钟 </view>
</text> <image :src="checkImageUrl(loveConfig.pageImages.bgImageUrl)" class="absolute z-0 inset-0 w-full h-full"
<text class="text text-[28rpx]"> mode="aspectFill" />
<text class="number mx-2 text-[46rpx] text-[#f83856] font-bold">{{ loveDayCount.s }}</text> <view class="absolute z-2 left-0 bottom-0 w-full h-12 bg-gradient-to-b from-white/0 to-pink-100" />
秒 </view>
</text>
</view>
</view>
<!-- 功能导航 --> <!-- 恋爱记时 -->
<view class="list-wrap mt-[75rpx] box-border flex flex-col items-center justify-center px-9"> <view class="love-time-wrap mt-8 w-screen flex flex-col items-center justify-center">
<block v-for="(nav, index) in navList" :key="index"> <view class="title text-xl text-love font-bold">
<view v-if="nav.use" class="mb-8 box-border list-item w-full flex items-center justify-around rounded-[50rpx] bg-white px-8 py-7 shadow-sm" :class="`list-item-${index + 1}`" @click="handleToPage(nav.key)"> {{ loveConfig.loveDateTitle }}
<view class="left h-[120rpx] w-[120rpx]"> </view>
<image class="icon h-full w-full" :src="checkImageUrl(nav.iconImageUrl)" mode="aspectFit" /> <view class="content mt-6 flex items-center justify-center">
</view> <text class="text text-sm">
<view class="right box-border flex flex-1 flex-col justify-center pl-10"> 第
<view class="name text-[32rpx] text-[#333] font-bold"> <text class="number mx-2 text-2xl text-love font-bold">{{ loveDayCount.d }}</text>
{{ nav.title }} 天
</view> </text>
<view class="desc mt-2 text-[26rpx] text-[#777]"> <text class="text text-sm">
{{ nav.desc }} <text class="number mx-2 text-2xl text-blue-400 font-bold">{{ loveDayCount.h }}</text>
</view> 小时
</view> </text>
</view> <text class="text text-sm">
</block> <text class="number mx-2 text-2xl text-love font-bold">{{ loveDayCount.m }}</text>
</view> 分钟
</view> </text>
<text class="text text-sm">
<text class="number mx-2 text-2xl text-blue-400 font-bold">{{ loveDayCount.s }}</text>
秒
</text>
</view>
</view>
<!-- 功能导航 -->
<view class="mt-6 box-border flex flex-col items-center justify-center gap-y-4 px-4">
<block v-for="(nav, index) in navList" :key="index">
<view v-if="nav.use"
class="box-border list-item uh-global-card-glass bg-white/60 p-3 w-full flex items-center justify-around gap-x-4 rounded-2xl"
:class="`list-item-${index + 1}`" @click="handleToPage(nav.key)">
<view class="flex items-center justify-center h-12 w-12 rounded-xl opacity-70" :class="[index%2===0?'bg-pink-100':'bg-blue-100']">
<wd-icon :class-prefix="nav.iconPrefix" :name="nav.icon" size="66rpx" />
</view>
<view class="box-border flex flex-1 flex-col justify-center gap-y-1">
<view class="name text-md font-bold" :class="[index%2===0?'text-love':'text-blue-400']">
{{ nav.title }}
</view>
<view class="text-xs truncate" :class="[index%2===0?'text-love/60':'text-blue-300']">
{{ nav.desc }}
</view>
</view>
<view class="shrink-0">
<wd-icon name="arrow-right" :class="[index%2===0?'text-love':'text-blue-400']"
size="32rpx"></wd-icon>
</view>
</view>
</block>
</view>
</view>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.app-page { .list-item-1 {
background: linear-gradient( animation: listItemAni1 3s ease-in-out infinite;
-45deg, }
rgb(247 149 51 / 10%),
rgb(243 112 85 / 10%) 15%,
rgb(239 78 123 / 10%) 30%,
rgb(161 102 171 / 10%) 44%,
rgb(80 115 184 / 10%) 58%,
rgb(16 152 173 / 10%) 72%,
rgb(7 179 155 / 10%) 86%,
rgb(109 186 130 / 10%)
);
}
.lover-wrap { .list-item-2 {
background-size: cover; animation: listItemAni1 3s ease-in-out infinite;
background-repeat: no-repeat; animation-delay: 1.5s;
background-position: 50% 50%; }
&::before { .list-item-3 {
position: absolute; animation: listItemAni1 3s ease-in-out infinite;
left: 0; animation-delay: 2s;
top: 0; }
right: 0;
bottom: 0;
content: '';
background-color: rgb(255 255 255 / 10%);
z-index: 0;
backdrop-filter: blur(4rpx);
overflow: hidden;
}
&::after { @keyframes likeani {
content: ''; 0% {
position: absolute; transform: scale(1);
left: 0; }
bottom: -60rpx;
width: 100vw;
height: 60rpx;
background-image: linear-gradient(to bottom, rgb(255 255 255), rgb(255 255 255 / 0%));
}
.like { 25% {
animation: likeani 1s ease-in-out infinite; transform: scale(1.2);
} }
.wave-image { 50% {
mix-blend-mode: screen; transform: scale(1.1);
} }
}
/* 列表项漂浮动画(无法用 UnoCSS 表达;模板已生成 list-item-N 类,避开 WXSS 不支持的 :nth-child) */ 75% {
.list-item-1 { transform: scale(1.3);
animation: listItemAni1 3s ease-in-out infinite; }
}
.list-item-2 { 100% {
animation: listItemAni1 3s ease-in-out infinite; transform: scale(1);
animation-delay: 1.5s; }
} }
.list-item-3 { @keyframes listItemAni1 {
animation: listItemAni1 3s ease-in-out infinite; 0% {
animation-delay: 2s; transform: translateY(0);
} }
@keyframes likeani { 50% {
0% { transform: translateY(-10rpx);
transform: scale(1); }
}
25% { 100% {
transform: scale(1.2); transform: translateY(0);
} }
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
@keyframes listItemAni1 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10rpx);
}
100% {
transform: translateY(0);
}
}
</style> </style>
src/pages-blog/love/journey.vue → src/pages-blog/love/stories.vue
+1 -4
View File
@@ -1,8 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
/**
* 恋爱故事页(源自旧项目 pagesA/love/journey.vue,新建复刻)
* 时间轴展示恋爱故事,点击查看故事详情弹窗
*/
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app' import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { getLoveStories } from '@/api/uni-halo' import { getLoveStories } from '@/api/uni-halo'
@@ -13,6 +9,7 @@ import type { ILoveStory } from '@/api/types/uni-halo'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '恋爱故事', navigationBarTitleText: '恋爱故事',
navigationStyle: 'custom',
enablePullDownRefresh: true, enablePullDownRefresh: true,
}, },
}) })
src/pages-blog/vote-detail/vote-detail.vue
+427 -412
View File
@@ -1,449 +1,464 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { onLoad, onPullDownRefresh, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app' import { onLoad, onPullDownRefresh, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { getVoteDetail, submitVote } from '@/api/uni-halo' import { getVoteDetail, submitVote } from '@/api/uni-halo'
import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus' import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
import { calcVotePercent, calcVoteState, VOTE_TYPES, voteCacheUtil } from '@/utils/vote' import { calcVotePercent, calcVoteState, VOTE_TYPES, voteCacheUtil } from '@/utils/vote'
import { formatTime as formatTimeUtil } from '@/utils/formatTime' import { formatTime as formatTimeUtil } from '@/utils/formatTime'
import type { IVote, IVoteDetail, IVoteOption } from '@/api/types/uni-halo' import type { IVote, IVoteDetail, IVoteOption } from '@/api/types/uni-halo'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '投票详情', navigationBarTitleText: '投票详情',
enablePullDownRefresh: true, enablePullDownRefresh: true,
navigationStyle: 'custom', navigationStyle: 'custom',
}, },
}) })
/* ---------------- 状态 ---------------- */ /* ---------------- 状态 ---------------- */
const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus() const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
const submitLoading = ref(false) const submitLoading = ref(false)
const pageTitle = ref('加载中...') const pageTitle = ref('加载中...')
const safeAreaBottom = ref(24) const safeAreaBottom = ref(24)
const name = ref('') const name = ref('')
const detail = ref<unknown>(null) const detail = ref<unknown>(null)
const vote = ref<(IVote & { const vote = ref<(IVote & {
spec ?: { spec?: {
title ?: string title?: string
remark ?: string remark?: string
type ?: string type?: string
maxVotes ?: number maxVotes?: number
startDate ?: string startDate?: string
endDate ?: string endDate?: string
timeLimit ?: string timeLimit?: string
canAnonymously ?: boolean canAnonymously?: boolean
options ?: (IVoteOption & { options?: (IVoteOption & {
id ?: string id?: string
title ?: string title?: string
count ?: number count?: number
checked ?: boolean checked?: boolean
isVoted ?: boolean isVoted?: boolean
disabled ?: boolean disabled?: boolean
_uh_percent ?: number _uh_percent?: number
})[] })[]
isVoted ?: boolean isVoted?: boolean
hasEnded ?: boolean hasEnded?: boolean
disabled ?: boolean disabled?: boolean
_uh_type ?: string _uh_type?: string
_uh_state ?: { state : string, color : string } _uh_state?: { state: string, color: string }
} }
stats ?: { voteCount ?: number } stats?: { voteCount?: number }
}) | null>(null) }) | null>(null)
const submitForm = ref<{ voteData : string[] }>({ voteData: [] }) const submitForm = ref<{ voteData: string[] }>({ voteData: [] })
/* ---------------- 计算属性 ---------------- */ /* ---------------- 计算属性 ---------------- */
const isVoted = computed(() => voteCacheUtil.has(name.value)) const isVoted = computed(() => voteCacheUtil.has(name.value))
const isEnded = computed(() => vote.value?.spec?.hasEnded || false) const isEnded = computed(() => vote.value?.spec?.hasEnded || false)
/* ---------------- 工具 ---------------- */ /* ---------------- 工具 ---------------- */
function formatTime(date ?: string, fmt = 'yyyy-MM-dd HH:mm') : string { function formatTime(date?: string, fmt = 'yyyy-MM-dd HH:mm'): string {
// 与旧项目一致:yyyy-MM-dd HH:mm // 与旧项目一致:yyyy-MM-dd HH:mm
return date ? formatTimeUtil({ d: date, f: fmt }) : '' return date ? formatTimeUtil({ d: date, f: fmt }) : ''
} }
function showToast(content : string) { function showToast(content: string) {
uni.showToast({ icon: 'none', title: content, mask: true }) uni.showToast({ icon: 'none', title: content, mask: true })
} }
function handleCalcIsChecked(option : { id ?: string }) : boolean { function handleCalcIsChecked(option: { id?: string }): boolean {
const data = voteCacheUtil.get(name.value) const data = voteCacheUtil.get(name.value)
if (!data) if (!data)
return false return false
return data.selected.includes(option.id || '') return data.selected.includes(option.id || '')
} }
/* ---------------- 数据加载 ---------------- */ /* ---------------- 数据加载 ---------------- */
async function handleGetData() { async function handleGetData() {
updateLoadingStatus(DataLoadingStatusEnum.Loading) updateLoadingStatus(DataLoadingStatusEnum.Loading)
pageTitle.value = '加载中...' pageTitle.value = '加载中...'
try { try {
const res = await getVoteDetail(name.value) const res = await getVoteDetail(name.value)
const detailRes = res.data as IVoteDetail const detailRes = res.data as IVoteDetail
const tempVote = detailRes.vote as typeof vote.value const tempVote = detailRes.vote as typeof vote.value
if (tempVote) { if (tempVote) {
const typeKey = ((tempVote.spec?.type || 'single') as string).toLowerCase() const typeKey = ((tempVote.spec?.type || 'single') as string).toLowerCase()
pageTitle.value = `投票详情（${VOTE_TYPES[typeKey] || tempVote.spec?.type}）` pageTitle.value = `投票详情（${VOTE_TYPES[typeKey] || tempVote.spec?.type}）`
tempVote.spec = tempVote.spec || {} tempVote.spec = tempVote.spec || {}
tempVote.spec.isVoted = isVoted.value tempVote.spec.isVoted = isVoted.value
tempVote.spec.disabled = isVoted.value tempVote.spec.disabled = isVoted.value
tempVote.spec._uh_type = VOTE_TYPES[typeKey] || tempVote.spec.type tempVote.spec._uh_type = VOTE_TYPES[typeKey] || tempVote.spec.type
// 计算状态(与旧项目 calcVoteState 一致,含 timeLimit 非 custom 时 hasEnded 兜底) // 计算状态(与旧项目 calcVoteState 一致,含 timeLimit 非 custom 时 hasEnded 兜底)
tempVote.spec._uh_state = calcVoteState(tempVote) tempVote.spec._uh_state = calcVoteState(tempVote)
if (tempVote.spec._uh_state.state === '已结束') if (tempVote.spec._uh_state.state === '已结束')
tempVote.spec.hasEnded = true tempVote.spec.hasEnded = true
// 选项计算 // 选项计算
// 插件选项为 {id,title},票数在 VoteDetail.voteDataList / Vote.stats.voteDataList // 插件选项为 {id,title},票数在 VoteDetail.voteDataList / Vote.stats.voteDataList
const countList = (detailRes.voteDataList || tempVote.stats?.voteDataList || []) as { id ?: string, voteCount ?: number }[] const countList = (detailRes.voteDataList || tempVote.stats?.voteDataList || []) as { id?: string, voteCount?: number }[]
const countMap : Record<string, number> = {} const countMap: Record<string, number> = {}
countList.forEach((item) => { countList.forEach((item) => {
if (item.id) if (item.id)
countMap[item.id] = item.voteCount || 0 countMap[item.id] = item.voteCount || 0
}) })
tempVote.spec.options = (tempVote.spec.options || []).map((option) => { tempVote.spec.options = (tempVote.spec.options || []).map((option) => {
const checked = handleCalcIsChecked(option) const checked = handleCalcIsChecked(option)
const optionWithCount = { const optionWithCount = {
...option, ...option,
value: option.id, value: option.id,
label: option.title, label: option.title,
count: countMap[option.id || ''] || 0, count: countMap[option.id || ''] || 0,
isVoted: isVoted.value, isVoted: isVoted.value,
checked, checked,
disabled: isVoted.value, disabled: isVoted.value,
} }
return { return {
...optionWithCount, ...optionWithCount,
_uh_percent: calcVotePercent(tempVote, optionWithCount), _uh_percent: calcVotePercent(tempVote, optionWithCount),
} }
}) })
} }
vote.value = tempVote vote.value = tempVote
detail.value = res detail.value = res
setTimeout(() => { setTimeout(() => {
updateLoadingStatus( updateLoadingStatus(
tempVote ? DataLoadingStatusEnum.Success : DataLoadingStatusEnum.Empty, tempVote ? DataLoadingStatusEnum.Success : DataLoadingStatusEnum.Empty,
) )
}, 200) }, 200)
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
updateLoadingStatus(DataLoadingStatusEnum.Error) updateLoadingStatus(DataLoadingStatusEnum.Error)
pageTitle.value = '加载失败，请重试...' pageTitle.value = '加载失败，请重试...'
} }
finally { finally {
setTimeout(() => { setTimeout(() => {
uni.hideLoading() uni.hideLoading()
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}, 200) }, 200)
} }
} }
/* ---------------- 交互 ---------------- */ /* ---------------- 交互 ---------------- */
function handleSelectSingleOption(option : { id ?: string }) { function handleSelectSingleOption(option: { id?: string }) {
if (vote.value?.spec?._uh_state?.state === '未开始') { if (vote.value?.spec?._uh_state?.state === '未开始') {
showToast('投票未开始') showToast('投票未开始')
return return
} }
if (vote.value?.spec?.hasEnded) if (vote.value?.spec?.hasEnded)
return return
if (vote.value?.spec?.disabled) if (vote.value?.spec?.disabled)
return return
vote.value!.spec!.options!.forEach((item) => { vote.value!.spec!.options!.forEach((item) => {
item.checked = option.id === item.id item.checked = option.id === item.id
}) })
submitForm.value.voteData = vote.value!.spec!.options!.filter(x => x.checked).map(item => item.id || '') submitForm.value.voteData = vote.value!.spec!.options!.filter(x => x.checked).map(item => item.id || '')
} }
function handleSelectCheckboxOption(option : { id ?: string }) { function handleSelectCheckboxOption(option: { id?: string }) {
if (vote.value?.spec?._uh_state?.state === '未开始') { if (vote.value?.spec?._uh_state?.state === '未开始') {
showToast('投票未开始') showToast('投票未开始')
return return
} }
if (vote.value?.spec?.hasEnded) if (vote.value?.spec?.hasEnded)
return return
if (vote.value?.spec?.disabled) if (vote.value?.spec?.disabled)
return return
const checkedList = vote.value!.spec!.options!.filter(x => x.checked && x.id !== option.id) const checkedList = vote.value!.spec!.options!.filter(x => x.checked && x.id !== option.id)
if (vote.value?.spec?.type === 'multiple' && checkedList.length >= (vote.value.spec.maxVotes || 0)) { // maxVotes 缺失(0/undefined)时不限制多选数量,避免 0 >= 0 恒真导致无法选择
showToast(`最多选择 ${vote.value.spec.maxVotes} 项`) const maxVotes = vote.value?.spec?.maxVotes
return if (vote.value?.spec?.type === 'multiple' && maxVotes && maxVotes > 0 && checkedList.length >= maxVotes) {
} showToast(`最多选择 ${maxVotes} 项`)
return
}
vote.value!.spec!.options!.forEach((item) => { vote.value!.spec!.options!.forEach((item) => {
if (option.id === item.id) { if (option.id === item.id) {
item.checked = !item.checked item.checked = !item.checked
} }
}) })
submitForm.value.voteData = vote.value!.spec!.options!.filter(x => x.checked).map(item => item.id || '') submitForm.value.voteData = vote.value!.spec!.options!.filter(x => x.checked).map(item => item.id || '')
} }
function handleSubmitTip(text : string) { function handleSubmitTip(text: string) {
showToast(text) showToast(text)
} }
async function handleSubmit() { async function handleSubmit() {
if (!vote.value?.spec?.canAnonymously) { if (!vote.value?.spec?.canAnonymously) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '该投票不支持匿名，请到博主的 网站端 进行投票！', content: '该投票不支持匿名，请到博主的 网站端 进行投票！',
cancelColor: '#666666', cancelColor: '#666666',
cancelText: '关闭', cancelText: '关闭',
confirmText: '复制地址', confirmText: '复制地址',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
uni.setClipboardData({ uni.setClipboardData({
data: import.meta.env.VITE_SERVER_BASEURL || '', data: import.meta.env.VITE_SERVER_BASEURL || '',
showToast: false, showToast: false,
success: () => { success: () => {
showToast('复制成功') showToast('复制成功')
}, },
}) })
} }
}, },
}) })
return return
} }
submitLoading.value = true submitLoading.value = true
uni.showLoading({ title: '正在保存...' }) uni.showLoading({ title: '正在保存...' })
try { try {
await submitVote(name.value, submitForm.value, vote.value.spec.canAnonymously) await submitVote(name.value, submitForm.value, vote.value.spec.canAnonymously)
showToast('提交成功') showToast('提交成功')
voteCacheUtil.set(name.value, { voteCacheUtil.set(name.value, {
selected: [...submitForm.value.voteData], selected: [...submitForm.value.voteData],
data: vote.value, data: vote.value,
}) })
setTimeout(() => { setTimeout(() => {
uni.startPullDownRefresh() uni.startPullDownRefresh()
submitLoading.value = false submitLoading.value = false
}, 1500) }, 1500)
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
showToast('提交失败，请重试') showToast('提交失败，请重试')
submitLoading.value = false submitLoading.value = false
} }
finally { finally {
uni.hideLoading() uni.hideLoading()
} }
} }
/* ---------------- 生命周期 ---------------- */ /* ---------------- 生命周期 ---------------- */
onLoad((options) => { onLoad((options) => {
name.value = options?.name || '' name.value = options?.name || ''
// #ifndef H5 // #ifndef H5
const systemInfo = uni.getSystemInfoSync() const systemInfo = uni.getSystemInfoSync()
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom ? systemInfo.safeAreaInsets.bottom + 12 : 24 safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom ? systemInfo.safeAreaInsets.bottom + 12 : 24
// #endif // #endif
handleGetData() handleGetData()
}) })
onPullDownRefresh(() => { onPullDownRefresh(() => {
handleGetData() handleGetData()
}) })
onShareAppMessage(() => ({ onShareAppMessage(() => ({
path: `/pages-blog/vote-detail/vote-detail?name=${name.value}`, path: `/pages-blog/vote-detail/vote-detail?name=${name.value}`,
title: vote.value?.spec?.title || '来投个票吧', title: vote.value?.spec?.title || '来投个票吧',
imageUrl: '', imageUrl: '',
})) }))
onShareTimeline(() => ({ onShareTimeline(() => ({
title: vote.value?.spec?.title || '来投个票吧', title: vote.value?.spec?.title || '来投个票吧',
query: name.value ? `name=${name.value}` : '', query: name.value ? `name=${name.value}` : '',
imageUrl: '', imageUrl: '',
})) }))
</script> </script>
<template> <template>
<view class="box-border min-h-screen w-screen flex flex-col bg-page pb-safe"> <view class="box-border min-h-screen w-screen flex flex-col bg-page pb-safe">
<!-- 自定义导航 --> <!-- 自定义导航 -->
<uh-navbar :default-title="pageTitle" title-color="text-gray-900" /> <uh-navbar :default-title="pageTitle" title-color="text-gray-900" />
<!-- 加载/错误/空占位(状态机) --> <!-- 加载/错误/空占位(状态机) -->
<uh-data-loading v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus" <uh-data-loading
empty-text="未查询到数据" @refresh="handleGetData" /> v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
empty-text="未查询到数据" @refresh="handleGetData"
/>
<view v-else class="box-border px-3 pt-2 pb-16 flex flex-col gap-y-3"> <view v-else class="box-border flex flex-col gap-y-3 px-3 pb-16 pt-2">
<!-- 投票信息 --> <!-- 投票信息 -->
<view class="uh-global-card-glass box-border flex flex-col gap-y-3 rounded-2xl p-3"> <view class="uh-global-card-glass box-border flex flex-col gap-y-3 rounded-2xl p-3">
<uh-section-title> 投票信息 </uh-section-title> <uh-section-title> 投票信息 </uh-section-title>
<view class="flex flex-col gap-3 rounded-xl bg-gray-100 p-4 text-sm text-gray-600"> <view class="flex flex-col gap-3 rounded-xl bg-gray-100 p-4 text-sm text-gray-600">
<view class="info-row"> <view class="info-row">
<text>投票类型：</text> <text>投票类型：</text>
<text class="tag">{{ vote.spec?._uh_type }}</text> <text class="tag">{{ vote.spec?._uh_type }}</text>
</view> </view>
<view class="info-row"> <view class="info-row">
<text>投票状态：</text> <text>投票状态：</text>
<text class="tag" <text
:style="{ color: vote.spec?._uh_state?.color }">{{ vote.spec?._uh_state?.state }}</text> class="tag"
</view> :style="{ color: vote.spec?._uh_state?.color }"
<view class="info-row"> >
<text>投票方式：</text> {{ vote.spec?._uh_state?.state }}
<text class="tag" :class="vote.spec?.canAnonymously ? 'text-primary' : 'text-[#f44336]'"> </text>
{{ vote.spec?.canAnonymously ? '匿名' : '不匿名' }} </view>
</text> <view class="info-row">
</view> <text>投票方式：</text>
<view class="info-row"> <text class="tag" :class="vote.spec?.canAnonymously ? 'text-primary' : 'text-[#f44336]'">
<text>开始时间：{{ formatTime(vote.spec?.startDate) }}</text> {{ vote.spec?.canAnonymously ? '匿名' : '不匿名' }}
</view> </text>
<view class="info-row"> </view>
<text v-if="vote.spec?.timeLimit === 'permanent'">结束时间：永久有效</text> <view class="info-row">
<text v-else>结束时间：{{ formatTime(vote.spec?.endDate) }}</text> <text>开始时间：{{ formatTime(vote.spec?.startDate) }}</text>
</view> </view>
</view> <view class="info-row">
</view> <text v-if="vote.spec?.timeLimit === 'permanent'">结束时间：永久有效</text>
<text v-else>结束时间：{{ formatTime(vote.spec?.endDate) }}</text>
</view>
</view>
</view>
<!-- 投票内容 --> <!-- 投票内容 -->
<view class="uh-global-card-glass box-border flex flex-col rounded-2xl p-3 gap-3"> <view class="uh-global-card-glass box-border flex flex-col gap-3 rounded-2xl p-3">
<uh-section-title> 投票内容 </uh-section-title> <uh-section-title> 投票内容 </uh-section-title>
<view class="box-border flex flex-col gap-y-2 p-4 rounded-xl bg-gray-100"> <view class="box-border flex flex-col gap-y-2 rounded-xl bg-gray-100 p-4">
<view class="text-sm text-gray-900 font-bold"> <view class="text-sm text-gray-900 font-bold">
{{ vote.spec?.title }} {{ vote.spec?.title }}
</view> </view>
<view v-if="vote.spec?.remark" class="text-xs text-gray-500"> <view v-if="vote.spec?.remark" class="text-xs text-gray-500">
{{ vote.spec.remark }} {{ vote.spec.remark }}
</view> </view>
</view> </view>
<view class="w-full flex flex-col gap-y-2"> <view class="w-full flex flex-col gap-y-2">
<view class="relative box-border text-sm flex items-center gap-x-2"> <view class="relative box-border flex items-center gap-x-2 text-sm">
投票选项 投票选项
<text v-if="vote.spec?.type === 'multiple'" <text
class="text-xs font-normal">（最多选择 v-if="vote.spec?.type === 'multiple'"
{{ vote.spec?.maxVotes }} 项） class="text-xs font-normal"
</text> >
</view> （最多选择
<view class="options flex flex-col gap-3"> {{ vote.spec?.maxVotes }} 项）
<!-- PK 对抗条(与旧项目 pk-container 一致) --> </text>
<view v-if="vote.spec?.type === 'pk'" class="pk-container box-border flex w-full"> </view>
<view v-for="(option, optionIndex) in vote.spec?.options" :key="optionIndex" <view class="options flex flex-col gap-3">
class="radio-item flex-grow" :class="optionIndex === 0 ? 'radio-left' : 'radio-right'" <!-- PK 对抗条(与旧项目 pk-container 一致;样式需顶层定义,勿嵌套在 .vote-card 下) -->
:style="{ width: `${option._uh_percent}%` }"> <view v-if="vote.spec?.type === 'pk'" class="pk-container box-border w-full flex">
<view class="option-item box-border w-full rounded-xl py-3 px-3" <view
:class="optionIndex === 0 ? 'option-item-left' : 'option-item-right'"> v-for="(option, optionIndex) in vote.spec?.options" :key="optionIndex"
{{ option._uh_percent }}% class="radio-item" :class="optionIndex === 0 ? 'radio-left' : 'radio-right'"
</view> :style="{ width: `${option._uh_percent}%` }"
</view> >
</view> <view
class="option-item box-border w-full rounded-xl px-3 py-3"
:class="optionIndex === 0 ? 'option-item-left' : 'option-item-right'"
>
{{ option._uh_percent }}%
</view>
</view>
</view>
<template v-if="isVoted || isEnded"> <template v-if="isVoted || isEnded">
<view v-for="(option, optionIndex) in vote.spec?.options" :key="optionIndex" <view
class="is-voted-item relative box-border overflow-hidden rounded-xl text-xs" v-for="(option, optionIndex) in vote.spec?.options" :key="optionIndex"
:class="option.checked ? 'bg-primary text-gray-900 font-bold' : 'bg-gray-100'" class="is-voted-item relative box-border overflow-hidden rounded-xl text-xs"
:style="{ '--percent': `${option._uh_percent}%` }"> :class="option.checked ? 'bg-primary text-gray-900 font-bold' : 'bg-gray-100'"
<view class="is-voted-item-content relative z-2 box-border px-4 py-3"> :style="{ '--percent': `${option._uh_percent}%` }"
<view class="flex items-center justify-between"> >
<view class="flex-1 text-left"> <view class="is-voted-item-content relative z-2 box-border px-4 py-3">
{{ vote.spec?.type === 'pk' ? `选项${optionIndex + 1}：` : '' }}{{ option.title }} <view class="flex items-center justify-between">
</view> <view class="flex-1 text-left">
<view class="shrink-0"> {{ vote.spec?.type === 'pk' ? `选项${optionIndex + 1}：` : '' }}{{ option.title }}
{{ option._uh_percent }}% </view>
</view> <view class="shrink-0">
</view> {{ option._uh_percent }}%
</view> </view>
</view> </view>
</template> </view>
<template v-else> </view>
<view v-for="(option, optionIndex) in vote.spec?.options" :key="optionIndex" </template>
class="vote-select-option box-border rounded-xl bg-gray-100 px-6 py-5 text-xs" <template v-else>
:class="option.checked ? 'border-2 border-primary bg-primary/15 text-primary font-bold' : ''" <view
@click="vote.spec?.type === 'multiple' ? handleSelectCheckboxOption(option) : handleSelectSingleOption(option)"> v-for="(option, optionIndex) in vote.spec?.options" :key="optionIndex"
{{ vote.spec?.type === 'pk' ? `选项${optionIndex + 1}：` : '' }}{{ option.title }} class="vote-select-option box-border rounded-xl bg-gray-100 px-6 py-5 text-xs"
</view> :class="option.checked ? 'border-2 border-primary bg-primary/15 text-primary font-bold' : ''"
</template> @click="vote.spec?.type === 'multiple' ? handleSelectCheckboxOption(option) : handleSelectSingleOption(option)"
</view> >
</view> {{ vote.spec?.type === 'pk' ? `选项${optionIndex + 1}：` : '' }}{{ option.title }}
</view> </view>
</template>
</view>
</view>
</view>
<!-- 投票统计 --> <!-- 投票统计 -->
<view class="uh-global-card-glass box-border flex flex-col rounded-2xl p-3"> <view class="uh-global-card-glass box-border flex flex-col rounded-2xl p-3">
<uh-section-title> 投票统计 </uh-section-title> <uh-section-title> 投票统计 </uh-section-title>
<view class="stat-text mt-3 text-xs text-gray-600"> <view class="stat-text mt-3 text-xs text-gray-600">
{{ vote.stats?.voteCount || 0 }} 人已参与 {{ vote.stats?.voteCount || 0 }} 人已参与
</view> </view>
</view> </view>
<!-- 提交按钮 --> <!-- 提交按钮 -->
<view class="fixed bottom-0 left-0 z-99 box-border w-screen pb-safe px-3"> <view class="fixed bottom-0 left-0 z-99 box-border w-screen px-3 pb-safe">
<view <view
class="uh-global-card-glass border rounded-xl w-full flex items-center justify-center gap-x-2 mb-2"> class="uh-global-card-glass mb-2 w-full flex items-center justify-center gap-x-2 border rounded-xl"
<uh-button v-if="isVoted" custom-class="flex-1 py-2 !rounded-xl"> >
您已参与投票 <uh-button v-if="isVoted" custom-class="flex-1 py-2 !rounded-xl">
</uh-button> 您已参与投票
<uh-button v-else-if="vote.spec?._uh_state?.state === '未开始'" custom-class="flex-1 py-2 !rounded-xl" </uh-button>
@click="handleSubmitTip('投票未开始')"> <uh-button
投票未开始 v-else-if="vote.spec?._uh_state?.state === '未开始'" custom-class="flex-1 py-2 !rounded-xl"
</uh-button> @click="handleSubmitTip('投票未开始')"
<uh-button v-else-if="vote.spec?._uh_state?.state === '已结束'" custom-class="flex-1 py-2 !rounded-xl" >
@click="handleSubmitTip('投票已结束')"> 投票未开始
投票已结束 </uh-button>
</uh-button> <uh-button
<uh-button v-else-if="!vote.spec?.canAnonymously" custom-class="flex-1 py-2 !rounded-xl" v-else-if="vote.spec?._uh_state?.state === '已结束'" custom-class="flex-1 py-2 !rounded-xl"
@click="handleSubmit()"> @click="handleSubmitTip('投票已结束')"
不支持匿名投票 >
</uh-button> 投票已结束
<uh-button v-else-if="submitForm.voteData.length === 0" custom-class="flex-1 py-2 !rounded-xl" </uh-button>
@click="handleSubmitTip('请选择选项')"> <uh-button
提交投票（请选择选项） v-else-if="!vote.spec?.canAnonymously" custom-class="flex-1 py-2 !rounded-xl"
</uh-button> @click="handleSubmit()"
<uh-button v-else custom-class="flex-1 py-2 !rounded-xl" @click="handleSubmit()"> >
提交投票 不支持匿名投票
</uh-button> </uh-button>
</view> <uh-button
</view> v-else-if="submitForm.voteData.length === 0" custom-class="flex-1 py-2 !rounded-xl"
</view> @click="handleSubmitTip('请选择选项')"
</view> >
提交投票（请选择选项）
</uh-button>
<uh-button v-else custom-class="flex-1 py-2 !rounded-xl" @click="handleSubmit()">
提交投票
</uh-button>
</view>
</view>
</view>
</view>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.vote-card { /* 已投票结果项:百分比进度条(此前嵌套在 .vote-card 下导致失效,现顶层定义) */
.sub-title { .is-voted-item {
&::before { &::before {
content: ''; content: '';
width: 8rpx; width: var(--percent);
height: 28rpx; position: absolute;
position: absolute; left: 0;
left: 0; top: 0;
top: 6rpx; bottom: 0;
background: var(--wot-color-theme, #b9e424); background-color: #d0d0d0;
border-radius: 6rpx; z-index: 0;
} border-radius: 6rpx;
} }
}
.is-voted-item { /* PK 对抗条:宽度按选项票数占比,两侧斜切渐变(顶层定义,勿嵌套) */
&::before { .pk-container {
content: ''; .radio-item {
width: var(--percent); min-width: 30%;
position: absolute; max-width: 70%;
left: 0; }
top: 0;
bottom: 0;
background-color: #d0d0d0;
z-index: 0;
border-radius: 6rpx;
}
}
.pk-container { .option-item-left {
.radio-item { background: linear-gradient(90deg, #3b82f6, #60a5fa);
min-width: 30%; color: white;
max-width: 70%; clip-path: polygon(0 0, calc(100% - 40rpx) 0, 100% 100%, 0 100%);
} }
.option-item-left { .option-item-right {
background: linear-gradient(90deg, #3b82f6, #60a5fa); background: linear-gradient(90deg, #f87171, #ef4444);
color: white; color: white;
clip-path: polygon(0 0, calc(100% - 40rpx) 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 40rpx 100%);
} text-align: right;
}
.option-item-right { }
background: linear-gradient(90deg, #f87171, #ef4444);
color: white;
clip-path: polygon(0 0, 100% 0, 100% 100%, 40rpx 100%);
text-align: right;
}
}
}
</style> </style>
src/pages/index/index.vue
+2 -2
View File
@@ -20,9 +20,9 @@
const articleDetailPath = '/pages-blog/article-detail/article-detail' const articleDetailPath = '/pages-blog/article-detail/article-detail'
// 本地开发快速跳转页面,发布请置为 false // 本地开发快速跳转页面,发布请置为 false
const DEV_MODE = false const DEV_MODE = true
const DEV_TO_TYPE = 'page' as 'page' | 'tabbar' const DEV_TO_TYPE = 'page' as 'page' | 'tabbar'
const DEV_TO_PATH = `/pages-blog/test/test` const DEV_TO_PATH = `/pages-blog/love/love`
/* ---------------- 状态 ---------------- */ /* ---------------- 状态 ---------------- */
const appConfigStore = useAppConfigStore() const appConfigStore = useAppConfigStore()
src/style/index.scss
+1
View File
@@ -2,6 +2,7 @@
@import './iconfont.css'; @import './iconfont.css';
@import './uhemoji-iconfont.css'; @import './uhemoji-iconfont.css';
@import './uhemoji2-iconfont.css'; @import './uhemoji2-iconfont.css';
@import './uhlove-iconfont.css';
:root, :root,
page { page {
src/style/uhlove-iconfont.css
+26
View File
@@ -0,0 +1,26 @@
@font-face {
font-family: "uhlove-icon"; /* Project id 5231616 */
/* Color fonts */
src:
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARwAAwAAAAACOgAAAQiAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIlgjHgZgAEwKiXSHFgE2AiQDKgsoAAQgBYIUByAbjwYRFZs62eNDeNa/mSSLTIoFyGwPTI9MD/C3mOv3W5kQKcEiIRMSrf7vy3uoZXFL0JhOSKLN/CwRj3Sl3gN2Wy23sREAB0APwBeiKQABHAm8KbSFYKOwIi9bA7ABhS0AEQSM8EsAdC03cTAAMAKwI7z2AMADoeh+MwFNu1CsbTjvagueo3TgS5S7Riigh+gwgCpvHDKMBJIAQ4EY8ZXqmuoiPAjfz905RVMATgHsAAEACvrcGugYvSpwpBHxHDxS502uAGjrZdLnzp+7axoQFWifP3L73e07t6/7qjSQA3UnGIATQGYA8ijIDn6O9UzE0ZgCYchIohcLlxz0W/Ilo9FZ8NMvX0L/Yot5P9tqgaKKW/b1tOw/7zRlOejYunyrS8fha8HT5550bVQPOlnOu7TsL9Q7tsa+IBPOvE/Ub1FBF2+9D7xyL+G8n5BesqAww1YimLMG0C6JusMPsOVjbO0wUPWMc/O5wMYzwRCtnnNevHU/6VAgjapYWF8iaulWl/MeAk8w+bzq2Hx3aqPqDF6yhVmbB1aiDoG3EfP9E4i+F1YHg86GzN3edDED+i2Lp2Gb2frK1OBlzIYXQZWXmGDYetGHCym4lKu7vLwPsgqLAyOm+CzL2xub90d6/2Hn9kPiGWvzoUDArbv0z46mg2yrS0ubpXvOf5+5tihVNiNFzon+REHGzx+nfPwocvewHxjTGPufse/xSUHd413PvBb8yWv3dM9IiDVO2s8cX3sgZ2nwJ0u5/cVRafLevSllnmdv8Cd7y5Q3pMt78/BXEATxezbBvhcFvNLtUeTu4VHo0eDe6BHHvu90UxxjDRLzYFIDi3QaG21DnHuTOxL9O8QfVL3I4CWcwt1Mf/UOU0FF2cqc8oyprPL0LcVPXNfjekApgcLdrL7raJfwfZxyB7uOkYVINObob7+mZ92+JAILxdS4MkeWp7IotpSAUCLZ2izY2JZOixctb6lbgtuCHStJO49f3VKCQT9jE0zFt2P543OlFrETP3pF3BOuht8TUR7u8eFsvtOzjqrjs07ljmQW0mvfETW2IR+PtoBR5dIGpiG+t+Hj0IkDR7563hS9M812YVFQy+uuDzrl3igfk699dmL34/e3lDWq64va7qpdescNJ8cHKqeelZa+K4/q/IEFHA/70ih7j26sZ32PIfM3G+4Ruj9/bMPzXn6edhf3JFcE/F5MC/rPWJsH8pDKPfnKKQzVjy0Pm+3IPHyKJ9FB/oDLx2mSis10BfLoG5hAdbuwA/LBzaam8cgK1eBAeFsQOAORjULP06SIQyYCRTyC0SsS4I4NX7VCME7AhFFMYgaLMIQojGGAsE2jnrw1AhMm0Yd5xCEasaY3A9WosaEoaKBVryi+AYQ8X1szhsAlY6yiYrQWjEDv00TQbkECDAA=') format('woff2');
}
.uhlove-icon {
font-family: "uhlove-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.uhlove-icon-gushi:before {
content: "\e60c";
}
.uhlove-icon-liebiao:before {
content: "\e616";
}
.uhlove-icon-xiangce:before {
content: "\e61a";
}
uno.config.ts
+1
View File
@@ -97,6 +97,7 @@ export default defineConfig({
primary: 'var(--wot-color-theme,#B9E424)', primary: 'var(--wot-color-theme,#B9E424)',
secondary: 'var(--wot-color-secondary,#D7F94C)', secondary: 'var(--wot-color-secondary,#D7F94C)',
page: 'var(--wot-color-page,#f6f3ee)', page: 'var(--wot-color-page,#f6f3ee)',
love: '#f83856'
}, },
fontSize: { fontSize: {
/** 提供更小号的字体，用法如：text-2xs */ /** 提供更小号的字体，用法如：text-2xs */