first commit
This commit is contained in:
zzc
263
pages/index/index.vue
Normal file
263
pages/index/index.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<!-- 顶部 Banner -->
|
||||
<view class="hero">
|
||||
<view class="hero-badge">
|
||||
<text class="badge-dot">•</text>
|
||||
<text class="badge-text">距春节还有 25 天</text>
|
||||
</view>
|
||||
<view class="hero-title">
|
||||
<text class="year">2026</text>
|
||||
<text class="main">新春祝福</text>
|
||||
</view>
|
||||
<text class="hero-sub">新年快乐，万事如意!</text>
|
||||
<image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<!-- 功能入口宫格 -->
|
||||
<view class="feature-grid">
|
||||
<view
|
||||
v-for="(item, idx) in features"
|
||||
:key="idx"
|
||||
class="feature-item"
|
||||
@tap="onFeatureTap(item)"
|
||||
>
|
||||
<image class="feature-icon" :src="item.icon" mode="aspectFill" :style="{
|
||||
backgroundColor: idx < 2 ? '#FEF2F2' : '#FFFBEC'
|
||||
}"/>
|
||||
<view class="feature-texts">
|
||||
<text class="feature-title">{{ item.title }}</text>
|
||||
<text class="feature-sub">{{ item.subtitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 大家都在用（竖向列表：左图右文） -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">大家都在用</text>
|
||||
<text class="section-more" @tap="onMore('use')">查看更多 ></text>
|
||||
</view>
|
||||
<view class="use-list">
|
||||
<view
|
||||
v-for="(card, i) in popularCards"
|
||||
:key="i"
|
||||
class="use-row"
|
||||
@tap="previewCard(card)"
|
||||
>
|
||||
<view class="thumb-wrap">
|
||||
<image :src="card.cover" class="thumb" mode="aspectFill" />
|
||||
<view v-if="card.type === 'video'" class="thumb-play">▶</view>
|
||||
</view>
|
||||
<view class="use-right">
|
||||
<view class="title-line">
|
||||
<text class="use-title">{{ card.title }}</text>
|
||||
<text v-if="card.tag" class="tag" :class="`tag--${card.tagType || 'default'}`">{{ card.tag }}</text>
|
||||
</view>
|
||||
<text class="use-desc">{{ card.desc }}</text>
|
||||
<text class="use-cta" @tap.stop="onCta(card)">{{ card.cta }} ></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { getBavBarHeight } from '@/utils/system'
|
||||
|
||||
const features = ref([
|
||||
{ title: '新春祝福卡片', subtitle: '定制专属贺卡', icon:'/static/icon/celebrate.png', type: 'card' },
|
||||
{ title: '红包封面', subtitle: '获取新年红包封面', icon: '/static/icon/hongbao.png', type: 'video' },
|
||||
{ title: '新春头像挂饰', subtitle: '焕上节日新饰', icon: '/static/icon/guashi.png', type: 'avatar_decor' },
|
||||
{ title: '新年运势', subtitle: '抽取新年关键词', icon: '/static/icon/yunshi.png', type: 'avatar_frame' },
|
||||
])
|
||||
|
||||
const popularCards = ref([
|
||||
{
|
||||
title: '招财进宝金框',
|
||||
tag: '热门',
|
||||
tagType: 'hot',
|
||||
desc: '2026马年限定汉字金框，金光闪烁，财运亨通。适合送亲友的新春祝福。',
|
||||
cta: '立即制作',
|
||||
cover: 'https://file.lihailezzc.com/9a929a32-439f-453b-b603-fda7b04cbe08.png'
|
||||
},
|
||||
{
|
||||
title: '大吉大利卡片',
|
||||
tag: '精选',
|
||||
tagType: 'featured',
|
||||
desc: '经典红色大拜年卡片，适合送长辈、老师、同学，传递满满的新春喜气。',
|
||||
cta: '去写祝福',
|
||||
cover: 'https://file.lihailezzc.com/b5fe8ffb-5901-48d2-94fb-48191e36cbf5.png'
|
||||
},
|
||||
{
|
||||
title: '合家团圆模板',
|
||||
tag: '爆款',
|
||||
tagType: 'hot2',
|
||||
desc: '一键生成合家福贺图，支持换装、特效装饰、朋友圈海报等。',
|
||||
cta: '开始创作',
|
||||
cover: 'https://file.lihailezzc.com/91cd1611-bb87-442b-a338-24e9d79e4ee9.png',
|
||||
type: 'video'
|
||||
}
|
||||
])
|
||||
|
||||
const onFeatureTap = (item) => {
|
||||
uni.showToast({ title: `进入：${item.title}`, icon: 'none' })
|
||||
// uni.navigateTo({ url: `/pages/${item.type}/index` })
|
||||
}
|
||||
|
||||
const previewCard = (card) => {
|
||||
uni.previewImage({ urls: [card.cover] })
|
||||
}
|
||||
|
||||
const onMore = () => {
|
||||
uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
|
||||
}
|
||||
|
||||
const onCta = (card) => {
|
||||
uni.showToast({ title: `${card.cta} · ${card.title}`, icon: 'none' })
|
||||
}
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
uni.showToast({ title: '已为你更新内容', icon: 'success' })
|
||||
}, 600)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spring-page {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #F8F6F6;
|
||||
}
|
||||
|
||||
/* 顶部 Banner */
|
||||
.hero {
|
||||
position: relative;
|
||||
margin: 24rpx auto;
|
||||
padding: 32rpx;
|
||||
height: 324rpx;
|
||||
width: 92vw;
|
||||
border-radius: 24rpx;
|
||||
color: #fff;
|
||||
background: url("http://file.lihailezzc.com/77ea2597-569c-4f13-b5af-22606742adcfssss.jpg");
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
.badge-dot { margin-right: 8rpx; }
|
||||
}
|
||||
.hero-title {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.year { font-size: 44rpx; font-weight: 700; margin-right: 12rpx; }
|
||||
.main { font-size: 44rpx; font-weight: 700; }
|
||||
}
|
||||
.hero-sub { margin-top: 8rpx; font-size: 24rpx; opacity: 0.9; }
|
||||
.hero-decor {
|
||||
position: absolute; right: 12rpx; bottom: 12rpx;
|
||||
width: 160rpx; height: 160rpx; opacity: 0.3; border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能入口宫格 - 2x2 */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.feature-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: left;
|
||||
flex-direction: column;
|
||||
padding: 20rpx; border-radius: 18rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
.feature-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.feature-item:nth-child(1)::after,
|
||||
.feature-item:nth-child(2)::after {
|
||||
background: #FEF2F2; /* 可换成你的主题粉 */
|
||||
}
|
||||
.feature-item:nth-child(3)::after,
|
||||
.feature-item:nth-child(4)::after {
|
||||
background: #FFFBEC; /* 温柔一点的黄 */
|
||||
}
|
||||
.feature-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
padding: 5rpx;
|
||||
}
|
||||
.feature-texts {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.feature-title { font-size: 28rpx; color: #222; font-weight: 600; }
|
||||
.feature-sub { font-size: 22rpx; color: #888; margin-top: 4rpx; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用区块标题 */
|
||||
.section { margin-top: 28rpx; }
|
||||
.section-header {
|
||||
display: flex; align-items: center; padding: 0 24rpx;
|
||||
.section-bar { width: 10rpx; height: 30rpx; border-radius: 6rpx; background: #ff3b30; margin-right: 12rpx; }
|
||||
.section-title { font-size: 28rpx; color: #222; flex: 1; font-weight: 600; }
|
||||
.section-more { font-size: 24rpx; color: #ff3b30; }
|
||||
}
|
||||
|
||||
/* 大家都在用 - 竖向列表 */
|
||||
.use-list { padding: 0 24rpx; margin-top: 16rpx; }
|
||||
.use-row {
|
||||
display: flex; align-items: center; background: #fff;
|
||||
border-radius: 18rpx; box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||||
padding: 16rpx; margin-bottom: 18rpx;
|
||||
}
|
||||
.thumb-wrap {
|
||||
position: relative; width: 120rpx; height: 120rpx;
|
||||
border-radius: 16rpx; overflow: hidden; margin-right: 16rpx;
|
||||
}
|
||||
.thumb { width: 100%; height: 100%; }
|
||||
.thumb-play {
|
||||
position: absolute; right: 8rpx; bottom: 8rpx;
|
||||
width: 40rpx; height: 40rpx; border-radius: 50%;
|
||||
background: rgba(0,0,0,0.55); color: #fff; font-size: 22rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.use-right { flex: 1; display: flex; flex-direction: column; }
|
||||
.title-line { display: flex; align-items: center; }
|
||||
.use-title { font-size: 28rpx; color: #222; font-weight: 600; margin-right: 12rpx; }
|
||||
.tag {
|
||||
font-size: 22rpx; border-radius: 999rpx; padding: 4rpx 10rpx; margin-left: 4rpx;
|
||||
&.tag--hot { color: #ff6a00; background: #fff4eb; }
|
||||
&.tag--featured { color: #ff4d6d; background: #fff0f3; }
|
||||
&.tag--hot2 { color: #7c4dff; background: #f3efff; }
|
||||
}
|
||||
.use-desc { margin-top: 6rpx; font-size: 24rpx; color: #777; line-height: 1.5; }
|
||||
.use-cta { margin-top: 10rpx; font-size: 24rpx; color: #ff3b30; }
|
||||
</style>
|
||||
599
pages/make/index.vue
Normal file
599
pages/make/index.vue
Normal file
@@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<!-- 预览卡片 -->
|
||||
<view class="card-preview">
|
||||
<image class="card-bg" :src="currentTemplate.cover" mode="aspectFill" />
|
||||
<view class="card-overlay">
|
||||
<view class="title">
|
||||
<text class="main">新春快乐</text>
|
||||
<text class="sub">2026 YEAR OF THE HORSE</text>
|
||||
</view>
|
||||
<view class="bubble" @tap="editBlessing">
|
||||
<text class="bubble-text">{{ blessingText }}</text>
|
||||
</view>
|
||||
<view class="user">
|
||||
<image class="avatar" src="https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg" mode="aspectFill" />
|
||||
<view class="user-info">
|
||||
<text class="user-name">陈小明</text>
|
||||
<text class="user-desc">送上祝福</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip-line">
|
||||
<text>点击卡片内容即可编辑</text>
|
||||
</view>
|
||||
|
||||
<!-- 编辑工具区 -->
|
||||
<view class="editor-panel">
|
||||
<view class="drag-handle"></view>
|
||||
|
||||
<!-- 功能入口 -->
|
||||
<view class="tools">
|
||||
<view
|
||||
v-for="(tool, idx) in tools"
|
||||
:key="idx"
|
||||
class="tool-item"
|
||||
:class="{ active: activeTool === tool.type }"
|
||||
@tap="activeTool = tool.type"
|
||||
>
|
||||
<view class="tool-icon">{{ tool.icon }}</view>
|
||||
<text class="tool-text">{{ tool.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 模板区 -->
|
||||
<view v-if="activeTool === 'template'" class="section">
|
||||
<view class="section-title">
|
||||
<text>热门模板</text>
|
||||
<text class="more" @tap="showMore">查看更多 ></text>
|
||||
</view>
|
||||
<scroll-view scroll-x class="tpl-scroll" show-scrollbar="false">
|
||||
<view class="tpl-wrap">
|
||||
<view
|
||||
v-for="(tpl, i) in templates"
|
||||
:key="i"
|
||||
class="tpl-card"
|
||||
:class="{ selected: tpl.id === currentTemplate.id }"
|
||||
@tap="applyTemplate(tpl)"
|
||||
>
|
||||
<image :src="tpl.cover" class="tpl-cover" mode="aspectFill" />
|
||||
<view class="tpl-name">{{ tpl.name }}</view>
|
||||
<view v-if="tpl.id === currentTemplate.id" class="tpl-check">✔</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 文字编辑 -->
|
||||
<view v-if="activeTool === 'text'" class="section">
|
||||
<view class="section-title"><text>编辑祝福语</text></view>
|
||||
<textarea
|
||||
class="text-area"
|
||||
v-model="blessingText"
|
||||
placeholder="请输入你的新春祝福语～"
|
||||
:maxlength="100"
|
||||
auto-height
|
||||
show-confirm-bar="false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 图片/背景 -->
|
||||
<view v-if="activeTool === 'image'" class="section">
|
||||
<view class="section-title"><text>替换背景</text></view>
|
||||
<view class="row">
|
||||
<button class="btn" @tap="pickImage">从相册选择</button>
|
||||
<button class="btn" @tap="resetBackground">重置为模板背景</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 头像挂饰 -->
|
||||
<view v-if="activeTool === 'avatar'" class="section">
|
||||
<view class="section-title"><text>头像挂饰</text></view>
|
||||
<view class="row">
|
||||
<button class="btn" @tap="toggleAvatarDecor">切换挂饰</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<view class="bottom-actions">
|
||||
<button class="btn secondary" @tap="preview">预览</button>
|
||||
<button class="btn primary" @tap="shareOrSave">分享 / 保存</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<canvas
|
||||
canvas-id="cardCanvas"
|
||||
class="hidden-canvas"
|
||||
style="width: 540px; height: 960px;"
|
||||
/>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { getBavBarHeight } from '@/utils/system'
|
||||
|
||||
const blessingText = ref('祝您在新的一年里：\n身体健康，万事如意！\n马到成功，财源广进！\n一马当先，前程似锦！\n龙马精神，阖家安康！\n骏马奔腾，福运常在！\n策马扬鞭，步步高升!')
|
||||
|
||||
const tools = [
|
||||
{ type: 'template', text: '模板', icon: '▦' },
|
||||
{ type: 'text', text: '文字', icon: '文' },
|
||||
{ type: 'image', text: '图片/背景', icon: '图' },
|
||||
{ type: 'avatar', text: '头像挂饰', icon: '饰' }
|
||||
]
|
||||
const activeTool = ref('template')
|
||||
|
||||
const templates = ref([
|
||||
{ id: 1, name: '金典红金', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' },
|
||||
{ id: 2, name: '富贵花开', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
|
||||
{ id: 3, name: '大气字法', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
|
||||
{ id: 4, name: '萌趣马年', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' }
|
||||
])
|
||||
|
||||
const currentTemplate = ref(templates.value[0])
|
||||
|
||||
const applyTemplate = (tpl) => {
|
||||
currentTemplate.value = tpl
|
||||
}
|
||||
|
||||
const editBlessing = () => {
|
||||
uni.showModal({
|
||||
title: '编辑祝福语',
|
||||
editable: true,
|
||||
content: blessingText.value,
|
||||
success: ({ confirm, content }) => {
|
||||
if (confirm && content !== undefined) blessingText.value = content
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const pickImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const path = res.tempFilePaths?.[0]
|
||||
if (path) currentTemplate.value = { ...currentTemplate.value, cover: path }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetBackground = () => {
|
||||
currentTemplate.value = templates.value[0]
|
||||
}
|
||||
|
||||
const toggleAvatarDecor = () => {
|
||||
uni.showToast({ title: '挂饰功能即将上线～', icon: 'none' })
|
||||
}
|
||||
|
||||
const preview = () => {
|
||||
uni.showToast({ title: '预览生成中…', icon: 'none' })
|
||||
}
|
||||
|
||||
const shareOrSave = () => {
|
||||
saveByCanvas()
|
||||
uni.showToast({ title: '已保存到相册并可分享', icon: 'none' })
|
||||
}
|
||||
|
||||
const showMore = () => {
|
||||
uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
|
||||
}
|
||||
|
||||
const saveByCanvas = async () => {
|
||||
const ctx = uni.createCanvasContext('cardCanvas')
|
||||
|
||||
// 画布尺寸（rpx 转 px）
|
||||
const W = 540
|
||||
const H = 960
|
||||
|
||||
// 1️⃣ 画背景
|
||||
// ⭐ 先加载背景图
|
||||
const bgPath = await loadImage(currentTemplate.value.cover)
|
||||
const avatarPath = await loadImage('https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg')
|
||||
console.log(111111, bgPath)
|
||||
|
||||
ctx.drawImage(
|
||||
bgPath,
|
||||
0,
|
||||
0,
|
||||
W,
|
||||
H
|
||||
)
|
||||
|
||||
// 2️⃣ 半透明遮罩（和你 UI 一致）
|
||||
ctx.setFillStyle('rgba(0,0,0,0.08)')
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
|
||||
// 3️⃣ 标题
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.setFontSize(42)
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText('新春快乐', W / 2, 120)
|
||||
|
||||
ctx.setFontSize(22)
|
||||
ctx.setGlobalAlpha(0.9)
|
||||
ctx.fillText('2026 YEAR OF THE HORSE', W / 2, 165)
|
||||
ctx.setGlobalAlpha(1)
|
||||
|
||||
// 4️⃣ 祝福语气泡
|
||||
drawBubbleText(ctx, {
|
||||
text: blessingText.value,
|
||||
x: 70,
|
||||
y: 260,
|
||||
maxWidth: 400,
|
||||
fontSize: 32,
|
||||
lineHeight: 46,
|
||||
backgroundColor: 'rgba(255,255,255,0.85)'
|
||||
})
|
||||
|
||||
// 5️⃣ 用户信息
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.arc(80, H - 80, 32, 0, Math.PI * 2)
|
||||
ctx.clip()
|
||||
ctx.drawImage(
|
||||
avatarPath,
|
||||
48,
|
||||
H - 112,
|
||||
64,
|
||||
64
|
||||
)
|
||||
ctx.restore()
|
||||
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.setFontSize(24)
|
||||
ctx.fillText('zzc', 150, H - 85)
|
||||
|
||||
ctx.setFontSize(20)
|
||||
ctx.setGlobalAlpha(0.6)
|
||||
ctx.fillText('送上祝福', 150, H - 55)
|
||||
ctx.setGlobalAlpha(1)
|
||||
|
||||
// 6️⃣ 输出
|
||||
ctx.draw(false, () => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'cardCanvas',
|
||||
success: res => {
|
||||
saveImage(res.tempFilePath)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const loadImage = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: res => {
|
||||
resolve(res.path) // 本地路径
|
||||
},
|
||||
fail: err => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getImageInfo = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const drawImageCover = (ctx, imgPath, canvasW, canvasH, imgW, imgH) => {
|
||||
const scale = Math.max(canvasW / imgW, canvasH / imgH)
|
||||
|
||||
const drawW = imgW * scale
|
||||
const drawH = imgH * scale
|
||||
|
||||
const dx = (canvasW - drawW) / 2
|
||||
const dy = (canvasH - drawH) / 2
|
||||
|
||||
ctx.drawImage(imgPath, dx, dy, drawW, drawH)
|
||||
}
|
||||
|
||||
const saveImage = (path) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: path,
|
||||
success() {
|
||||
uni.showToast({ title: '已保存到相册' })
|
||||
},
|
||||
fail() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请授权保存到相册'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function drawBubbleText(ctx, options) {
|
||||
const {
|
||||
text,
|
||||
x,
|
||||
y,
|
||||
maxWidth = 400,
|
||||
padding = 84,
|
||||
lineHeight = 42,
|
||||
radius = 24,
|
||||
backgroundColor = 'rgba(255,255,255,0.9)',
|
||||
textColor = '#fff',
|
||||
fontSize = 32,
|
||||
fontFamily = 'PingFang SC'
|
||||
} = options
|
||||
|
||||
if (!text) return
|
||||
|
||||
ctx.setFontSize(fontSize)
|
||||
ctx.setFillStyle(textColor)
|
||||
ctx.font = `${fontSize}px ${fontFamily}`
|
||||
|
||||
// 1️⃣ 文本自动换行
|
||||
const lines = []
|
||||
let currentLine = ''
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const testLine = currentLine + text[i]
|
||||
const metrics = ctx.measureText(testLine)
|
||||
if (metrics.width > maxWidth - padding * 2) {
|
||||
lines.push(currentLine)
|
||||
currentLine = text[i]
|
||||
} else {
|
||||
currentLine = testLine
|
||||
}
|
||||
}
|
||||
lines.push(currentLine)
|
||||
|
||||
// 2️⃣ 计算气泡尺寸
|
||||
const bubbleWidth =
|
||||
Math.min(
|
||||
maxWidth,
|
||||
Math.max(
|
||||
...lines.map(line => ctx.measureText(line).width)
|
||||
) + padding * 2
|
||||
)
|
||||
|
||||
const bubbleHeight = lines.length * lineHeight + padding * 2
|
||||
|
||||
// 3️⃣ 绘制气泡（圆角矩形）
|
||||
drawRoundRect(
|
||||
ctx,
|
||||
x,
|
||||
y,
|
||||
bubbleWidth,
|
||||
bubbleHeight,
|
||||
radius,
|
||||
backgroundColor
|
||||
)
|
||||
|
||||
// 4️⃣ 绘制文字
|
||||
ctx.setFillStyle(textColor)
|
||||
lines.forEach((line, index) => {
|
||||
ctx.fillText(
|
||||
line,
|
||||
x + padding,
|
||||
y + padding + (index + 1) * lineHeight - 10
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
function drawRoundRect(ctx, x, y, w, h, r, color) {
|
||||
ctx.beginPath()
|
||||
// ctx.setFillStyle(color)
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.18)'
|
||||
ctx.fill()
|
||||
|
||||
// 描边（非常关键）
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.35)'
|
||||
ctx.lineWidth = 1
|
||||
ctx.stroke()
|
||||
|
||||
ctx.moveTo(x + r, y)
|
||||
ctx.lineTo(x + w - r, y)
|
||||
ctx.arcTo(x + w, y, x + w, y + r, r)
|
||||
ctx.lineTo(x + w, y + h - r)
|
||||
ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
|
||||
ctx.lineTo(x + r, y + h)
|
||||
ctx.arcTo(x, y + h, x, y + h - r, r)
|
||||
ctx.lineTo(x, y + r)
|
||||
ctx.arcTo(x, y, x + r, y, r)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.make-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 卡片预览 */
|
||||
.card-preview {
|
||||
margin: 24rpx auto;
|
||||
height: 960rpx;
|
||||
width: 540rpx;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.12);
|
||||
}
|
||||
.card-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 30rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.card-overlay .title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
.title .main {
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.title .sub {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.bubble {
|
||||
margin-top: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 26rpx;
|
||||
padding: 40rpx;
|
||||
max-width: 560rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
.bubble-text {
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.user {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 9999rpx;
|
||||
padding: 15rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 14rpx;
|
||||
border: 2rpx solid rgba(255,255,255,0.6);
|
||||
}
|
||||
.user .user-info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.user-name { font-size: 24rpx; font-weight: 600; }
|
||||
.user-desc { font-size: 20rpx; opacity: 0.6; }
|
||||
|
||||
/* 顶部提示 */
|
||||
.tip-line {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
/* 编辑工具区 */
|
||||
.editor-panel {
|
||||
margin: 20rpx 24rpx 40rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.06);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.drag-handle {
|
||||
width: 120rpx; height: 8rpx; border-radius: 999rpx;
|
||||
background: #eee; margin: 12rpx auto;
|
||||
}
|
||||
|
||||
/* 工具入口 */
|
||||
.tools {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 16rpx 24rpx 8rpx;
|
||||
}
|
||||
.tool-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 14rpx 0;
|
||||
border-radius: 18rpx;
|
||||
color: #666;
|
||||
}
|
||||
.tool-item.active {
|
||||
background: #fff6f5;
|
||||
color: #ff3b30;
|
||||
}
|
||||
.tool-icon {
|
||||
width: 64rpx; height: 64rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #fafafa;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.tool-text { font-size: 22rpx; }
|
||||
|
||||
/* 模板区 */
|
||||
.section { padding: 12rpx 24rpx 0; }
|
||||
.section-title {
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
.section-title .more {
|
||||
margin-left: auto;
|
||||
color: #ff3b30;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.tpl-scroll { margin-top: 12rpx; }
|
||||
.tpl-wrap { display: flex; }
|
||||
.tpl-card {
|
||||
width: 180rpx; height: 240rpx;
|
||||
border-radius: 18rpx; overflow: hidden;
|
||||
background: #fff; margin-right: 16rpx;
|
||||
position: relative;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.tpl-card.selected { outline: 4rpx solid #ff3b30; }
|
||||
.tpl-cover { width: 100%; height: 160rpx; }
|
||||
.tpl-name {
|
||||
font-size: 22rpx; color: #333;
|
||||
padding: 8rpx 12rpx;
|
||||
}
|
||||
.tpl-check {
|
||||
position: absolute; right: 10rpx; top: 10rpx;
|
||||
width: 36rpx; height: 36rpx; border-radius: 50%;
|
||||
background: #ff3b30; color: #fff; font-size: 22rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
||||
/* 按钮区 */
|
||||
.bottom-actions {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 20rpx 24rpx 30rpx;
|
||||
}
|
||||
.btn {
|
||||
height: 88rpx; border-radius: 999rpx; padding: 0 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn.secondary {
|
||||
background: #f5f5f5; color: #333;
|
||||
}
|
||||
.btn.primary {
|
||||
background: #ff3b30; color: #fff;
|
||||
box-shadow: 0 12rpx 24rpx rgba(255,59,48,0.35);
|
||||
}
|
||||
.hidden-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
}
|
||||
</style>
|
||||
20
pages/message/message.vue
Normal file
20
pages/message/message.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<view class="message-content">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to bottom, #D6EDD8 0%, #F4E2D8 100%);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
303
pages/mine/mine.vue
Normal file
303
pages/mine/mine.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<view class="mine-content">
|
||||
<!-- 顶部区域 -->
|
||||
<view class="mine-top-panel" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<view class="user-info">
|
||||
<!-- 根据登录状态显示不同内容 -->
|
||||
<view v-if="isLoggedIn" class="user-logged-in">
|
||||
<image :src="userInfo.avatarUrl" class="avatar" mode="aspectFill" />
|
||||
<view class="user-logged-in-info">
|
||||
<text class="nickname">{{ userInfo.nickName }}</text>
|
||||
<text class="phone">19969024553</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="user-not-logged-in">
|
||||
<image :src="defaultAvatarUrl" class="avatar" mode="aspectFill" />
|
||||
<button class="login-button" @tap="openPopup">点击登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-middle-panel">
|
||||
<view class="mine-info-panel">
|
||||
<view>0.00</view>
|
||||
<view>我的余额</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-info-panel">
|
||||
<view>0</view>
|
||||
<view>优惠卷</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-info-panel">
|
||||
<view>0</view>
|
||||
<view>积分</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-info-panel">
|
||||
<view>0</view>
|
||||
<view>我的收藏</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录弹窗 -->
|
||||
<uni-popup ref="popupRef" type="bottom" :safe-area="false">
|
||||
<view class="popup-container">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">登录授权</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-nickname">
|
||||
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-selector">
|
||||
<image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
|
||||
<text v-else>获取头像</text>
|
||||
</button>
|
||||
<input
|
||||
class="nickname-input"
|
||||
type="nickname"
|
||||
v-model="nickname"
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<button class="confirm-btn" @tap="confirmLogin">确认登录</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { wxLogin } from '@/utils/login.js'
|
||||
import { getPlatformProvider, getBavBarHeight } from '@/utils/system'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { apiLogin } from '@/api/auth.js'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const popupRef = ref(null)
|
||||
|
||||
// 用户输入的临时信息
|
||||
const avatarUrl = ref('')
|
||||
const nickname = ref('')
|
||||
|
||||
// 从store获取用户信息（改为计算属性）
|
||||
const userInfo = computed(() => ({
|
||||
nickName: userStore.userInfo.nickName || '未登录',
|
||||
avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl
|
||||
}))
|
||||
|
||||
// 判断用户是否已登录
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName)
|
||||
|
||||
// 默认头像
|
||||
const defaultAvatarUrl = 'https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png'
|
||||
|
||||
// 获取状态栏高度
|
||||
const bavBarHeight = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
// 确保高度值在组件挂载后获取
|
||||
bavBarHeight.value = getBavBarHeight()
|
||||
})
|
||||
|
||||
const openPopup = () => {
|
||||
popupRef.value.open()
|
||||
}
|
||||
|
||||
const onChooseAvatar = (e) => {
|
||||
avatarUrl.value = e.detail.avatarUrl
|
||||
}
|
||||
|
||||
const confirmLogin = async () => {
|
||||
if (!nickname.value || !avatarUrl.value) {
|
||||
return uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||||
}
|
||||
|
||||
try {
|
||||
const platform = getPlatformProvider()
|
||||
if (platform === 'mp-weixin') {
|
||||
const code = await wxLogin()
|
||||
console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: avatarUrl.value })
|
||||
// console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: 'http://tmp/HXhtcEwQ5A3B58476c91ba545ab67c6bf9c67d9c2559.jpeg' })
|
||||
|
||||
const fileKeyRes = await uni.uploadFile({
|
||||
url: 'https://apis.lihailezzc.com/api/common/upload',
|
||||
filePath: avatarUrl.value,
|
||||
name: 'file', // 和后端接收文件字段名一致
|
||||
header: {
|
||||
'x-app-id': '6846f093fdf841f6189ef0b5',
|
||||
},
|
||||
})
|
||||
if(fileKeyRes.statusCode < 400) {
|
||||
const keyJson = JSON.parse(fileKeyRes.data)
|
||||
const url = `https://file.lihailezzc.com/${keyJson?.data.key}`
|
||||
const loginRes = await apiLogin({ code, nickname: nickname.value, avatarUrl: url })
|
||||
// 保存用户信息到store
|
||||
userStore.setUserInfo({
|
||||
nickName: nickname.value,
|
||||
avatarUrl: avatarUrl.value,
|
||||
})
|
||||
|
||||
userStore.setToken(loginRes.token)
|
||||
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
popupRef.value.close()
|
||||
|
||||
// 重置临时变量
|
||||
avatarUrl.value = ''
|
||||
nickname.value = ''
|
||||
} else {
|
||||
throw Error('获取失败')
|
||||
}
|
||||
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({ title: '登录失败', icon: 'none' })
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mine-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #F9F6F2;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mine-top-panel{
|
||||
width: 100vw;
|
||||
height: 500rpx;
|
||||
background-color: #beecd8;
|
||||
border-bottom-left-radius: 50% 50rpx;
|
||||
border-bottom-right-radius: 50% 50rpx;
|
||||
overflow: hidden;
|
||||
.user-info{
|
||||
padding-left: 40rpx;
|
||||
image {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.user-logged-in{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-logged-in-info{
|
||||
padding-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.nickname{
|
||||
color: #1a1a1a;
|
||||
font-weight: 800;
|
||||
}
|
||||
.phone{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-not-logged-in{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.login-button{
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mine-middle-panel{
|
||||
width: 90vw;
|
||||
height: 200rpx;
|
||||
background-color: #fff;
|
||||
margin-top: -100rpx;
|
||||
border-radius: 20rpx; /* 四角小圆角 */
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05); /* 柔和阴影 */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
.mine-info-panel{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 弹窗样式 */
|
||||
.popup-container {
|
||||
background-color: #fff;
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
|
||||
.popup-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.popup-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-nickname {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.avatar-selector {
|
||||
width: 145rpx;
|
||||
height: 145rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
width: 80%;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #07c160;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
360
pages/spring/index.vue
Normal file
360
pages/spring/index.vue
Normal file
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<!-- 顶部 Banner -->
|
||||
<view class="hero">
|
||||
<view class="hero-badge">
|
||||
<text class="badge-dot">•</text>
|
||||
<text class="badge-text">距春节还有 15 天</text>
|
||||
</view>
|
||||
<view class="hero-title">
|
||||
<text class="year">2026</text>
|
||||
<text class="main">新春祝福</text>
|
||||
</view>
|
||||
<text class="hero-sub">新年快乐，万事如意</text>
|
||||
<image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<!-- 功能入口宫格 -->
|
||||
<view class="feature-grid">
|
||||
<view
|
||||
v-for="(item, idx) in features"
|
||||
:key="idx"
|
||||
class="feature-item"
|
||||
@tap="onFeatureTap(item)"
|
||||
>
|
||||
<image class="feature-icon" :src="item.icon" mode="aspectFill" />
|
||||
<view class="feature-texts">
|
||||
<text class="feature-title">{{ item.title }}</text>
|
||||
<text class="feature-sub">{{ item.subtitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 大家都在用 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">大家都在用</text>
|
||||
<text class="section-more" @tap="onMore('use')">更多</text>
|
||||
</view>
|
||||
<scroll-view scroll-x class="cards-scroll" show-scrollbar="false">
|
||||
<view class="cards-wrap">
|
||||
<view v-for="(card, i) in popularCards" :key="i" class="use-card" @tap="previewCard(card)">
|
||||
<image :src="card.cover" class="use-cover" mode="aspectFill" />
|
||||
<view class="use-info">
|
||||
<text class="use-title">{{ card.title }}</text>
|
||||
<text class="use-sub">{{ card.sub }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 最新祝福 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">最新祝福</text>
|
||||
</view>
|
||||
|
||||
<view class="feed-list">
|
||||
<view v-for="(post, i) in feeds" :key="i" class="feed-item">
|
||||
<view class="feed-header">
|
||||
<image :src="post.avatar" class="feed-avatar" mode="aspectFill" />
|
||||
<view class="feed-user">
|
||||
<text class="feed-name">{{ post.name }}</text>
|
||||
<text class="feed-time">{{ post.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="feed-content">
|
||||
<text class="feed-text">{{ post.text }}</text>
|
||||
<image v-if="post.image" :src="post.image" class="feed-image" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="feed-actions">
|
||||
<view class="action" @tap="like(i)">
|
||||
<text class="icon">❤</text>
|
||||
<text>{{ post.likes }}</text>
|
||||
</view>
|
||||
<view class="action" @tap="comment(i)">
|
||||
<text class="icon">💬</text>
|
||||
<text>{{ post.comments }}</text>
|
||||
</view>
|
||||
<view class="action" @tap="share(i)">
|
||||
<text class="icon">↗</text>
|
||||
<text>分享</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="see-more" @tap="onMore('feed')">查看更多祝福…</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部中间发布按钮 -->
|
||||
<view class="fab" @tap="createGreeting">
|
||||
<text class="fab-plus">＋</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { getBavBarHeight } from '@/utils/system'
|
||||
|
||||
const features = ref([
|
||||
{ title: '新春祝福卡片', subtitle: '龙年贺卡', icon: 'https://file.lihailezzc.com/resource/6b6cb83abf3a9c9b78a4744238b5b851.png', type: 'card' },
|
||||
{ title: '视频拜年', subtitle: 'AI合成短视频', icon: 'https://file.lihailezzc.com/resource/1a7b4b9d2b9b4bcb88f14c9f1ef4413a.png', type: 'video' },
|
||||
{ title: '新春头像装饰', subtitle: '锦上添花', icon: 'https://file.lihailezzc.com/resource/5e7d2b8d1c34c22f9c4f4f4cb4cba70d.png', type: 'avatar_decor' },
|
||||
{ title: '马年主题头像框', subtitle: '2026限定', icon: 'https://file.lihailezzc.com/resource/9f80ab295b7e0a7a5f62c3b0f2d7a11c.png', type: 'avatar_frame' },
|
||||
])
|
||||
|
||||
const popularCards = ref([
|
||||
{ title: '极简祝福金框', sub: '极简风格', cover: 'https://file.lihailezzc.com/resource/7a5b2f2f5d6c42b5b21b8b1c9b28a3a1.jpg' },
|
||||
{ title: '红包封面', sub: '新春限定', cover: 'https://file.lihailezzc.com/resource/9b3d2a1a4c7b4a4a9e3b94c4a2b9c3e2.jpg' },
|
||||
{ title: '新春大拜年卡', sub: '全家福', cover: 'https://file.lihailezzc.com/resource/3a2b1c9d7e6f5a4b3c2d1e0f9a8b7c6d.jpg' }
|
||||
])
|
||||
|
||||
const feeds = ref([
|
||||
{
|
||||
name: '陈小明',
|
||||
time: '刚刚',
|
||||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||||
text: '祝大家新的一年万事如意，阖家幸福！龙年行大运，喜气满满～✨',
|
||||
image: 'https://file.lihailezzc.com/resource/02b7d1f8a9c34f2b8a2a7d4e9b1a5c8d.jpg',
|
||||
likes: 12,
|
||||
comments: 3
|
||||
},
|
||||
{
|
||||
name: '李华',
|
||||
time: '5分钟前',
|
||||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||||
text: '新年快乐！祝朋友们身体健康、工作顺利，2026马到成功～',
|
||||
image: '',
|
||||
likes: 8,
|
||||
comments: 2
|
||||
},
|
||||
{
|
||||
name: '王伟',
|
||||
time: '10分钟前',
|
||||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||||
text: '给你们拜年啦！',
|
||||
image: 'https://file.lihailezzc.com/resource/1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f.jpg',
|
||||
likes: 6,
|
||||
comments: 1
|
||||
}
|
||||
])
|
||||
|
||||
const onFeatureTap = (item) => {
|
||||
uni.showToast({ title: `进入：${item.title}`, icon: 'none' })
|
||||
// 可跳转到对应功能页面
|
||||
// uni.navigateTo({ url: `/pages/${item.type}/index` })
|
||||
}
|
||||
|
||||
const previewCard = (card) => {
|
||||
uni.previewImage({ urls: [card.cover] })
|
||||
}
|
||||
|
||||
const onMore = (type) => {
|
||||
uni.showToast({ title: '即将开放～', icon: 'none' })
|
||||
}
|
||||
|
||||
const like = (index) => {
|
||||
feeds.value[index].likes += 1
|
||||
}
|
||||
|
||||
const comment = (index) => {
|
||||
uni.showToast({ title: '评论功能开发中～', icon: 'none' })
|
||||
}
|
||||
|
||||
const share = () => {
|
||||
uni.showShareMenu && uni.showShareMenu()
|
||||
}
|
||||
|
||||
const createGreeting = () => {
|
||||
uni.showToast({ title: '去发布祝福～', icon: 'none' })
|
||||
}
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
uni.showToast({ title: '已为你更新内容', icon: 'success' })
|
||||
}, 600)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spring-page {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 顶部 Banner */
|
||||
.hero {
|
||||
position: relative;
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #e52e2e 0%, #c61a1a 100%);
|
||||
overflow: hidden;
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
.badge-dot { margin-right: 8rpx; }
|
||||
}
|
||||
.hero-title {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.year {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.main {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.hero-sub {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.hero-decor {
|
||||
position: absolute;
|
||||
right: 12rpx;
|
||||
bottom: 12rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
opacity: 0.3;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能入口宫格 - 2x2 */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f9f5f0;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
.feature-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.feature-texts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.feature-title {
|
||||
font-size: 28rpx; color: #222; font-weight: 600;
|
||||
}
|
||||
.feature-sub {
|
||||
font-size: 22rpx; color: #888; margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用区块标题 */
|
||||
.section {
|
||||
margin-top: 28rpx;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
.section-bar {
|
||||
width: 10rpx; height: 30rpx; border-radius: 6rpx; background: #ff3b30; margin-right: 12rpx;
|
||||
}
|
||||
.section-title { font-size: 28rpx; color: #222; flex: 1; font-weight: 600; }
|
||||
.section-more { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 大家都在用 - 横滑卡片 */
|
||||
.cards-scroll {
|
||||
margin-top: 16rpx;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
.cards-wrap { display: flex; }
|
||||
.use-card {
|
||||
width: 260rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
|
||||
.use-cover { width: 100%; height: 200rpx; }
|
||||
.use-info { padding: 16rpx; }
|
||||
.use-title { font-size: 26rpx; color: #333; font-weight: 600; }
|
||||
.use-sub { font-size: 22rpx; color: #999; margin-top: 6rpx; }
|
||||
}
|
||||
|
||||
/* 已移除：.cards-scroll、feed-list、feed-item、feed-header、feed-avatar、feed-user、feed-name、feed-time、feed-content、feed-text、feed-image、feed-actions、.see-more */
|
||||
.feed-list { padding: 0 24rpx; }
|
||||
.feed-item {
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.feed-header { display: flex; align-items: center; }
|
||||
.feed-avatar {
|
||||
width: 64rpx; height: 64rpx; border-radius: 50%; margin-right: 16rpx;
|
||||
}
|
||||
.feed-user { display: flex; flex-direction: column; }
|
||||
.feed-name { font-size: 26rpx; color: #333; font-weight: 600; }
|
||||
.feed-time { font-size: 22rpx; color: #999; margin-top: 6rpx; }
|
||||
.feed-content { margin-top: 12rpx; }
|
||||
.feed-text { font-size: 26rpx; color: #333; line-height: 1.6; }
|
||||
.feed-image { width: 100%; height: 280rpx; border-radius: 12rpx; margin-top: 12rpx; background: #f6f6f6; }
|
||||
.feed-actions {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
.action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
color: #666;
|
||||
.icon { margin-right: 8rpx; }
|
||||
}
|
||||
}
|
||||
|
||||
.see-more {
|
||||
margin: 24rpx; padding: 18rpx 0; text-align: center;
|
||||
color: #999; font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 发布悬浮按钮 */
|
||||
.fab {
|
||||
position: fixed;
|
||||
left: 50%; transform: translateX(-50%);
|
||||
bottom: 60rpx;
|
||||
width: 100rpx; height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 12rpx 24rpx rgba(255,59,48,0.4);
|
||||
.fab-plus { font-size: 48rpx; line-height: 1; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user