hujun
b0ee4f9d7e
1. 新增layout.uts统一管理页面尺寸与安全区计算 2. 修正图片资源路径到static/mobile目录 3. 调整App.vue与AppIcon组件样式适配多端 4. 为微信小程序配置打包忽略规则减少包体积 5. 修复API请求错误抛出类型，完善类型定义 6. 补充README文档说明项目运行与维护规范 7. 优化多个页面的样式与生命周期逻辑
56 lines
5.0 KiB
Plaintext
56 lines
5.0 KiB
Plaintext
<template>
|
||
<view class="page" :style="pageStyle()">
|
||
<AppHeader title="积分中心" />
|
||
<scroll-view scroll-y class="points-scroll" :style="contentStyle(96, false)">
|
||
<view class="points-content">
|
||
<view class="points-hero"><text class="points-label">我的积分</text><text class="points-number">2680</text><button @click="showRules" class="points-hero-button">积分规则</button><view class="points-shine"></view></view>
|
||
<view class="task-grid"><view class="task" v-for="item in tasks" :key="item.name" @click="doTask(item.name)"><view class="task-icon"><AppIcon :name="item.icon" :size="42" /></view><text class="task-name">{{ item.name }}</text><text class="task-score">+{{ item.score }}</text></view></view>
|
||
<view class="invite-panel"><text class="section-title">邀请有礼</text><text class="invite-copy">每邀请1位好友，双方都可获得积分</text><view class="invite-code"><text>我的邀请码</text><text class="code">AI2680</text><text class="copy" @click="copyCode">复制</text></view><button class="primary-button invite-button" @click="invite">立即邀请</button></view>
|
||
<view class="records"><view class="record-head"><text class="section-title">积分明细</text><text class="more">全部 ›</text></view><view class="record" v-for="item in records" :key="item.name"><view><text class="record-name">{{ item.name }}</text><text class="record-date">{{ item.date }}</text></view><text class="record-score">+{{ item.score }}</text></view></view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { usePageLayout } from '@/services/layout.uts'
|
||
const { contentStyle, pageStyle } = usePageLayout()
|
||
import AppHeader from '@/components/AppHeader.uvue'
|
||
import AppIcon from '@/components/AppIcon.uvue'
|
||
type PointsTask = { icon: string, name: string, score: number }
|
||
const tasks: PointsTask[] = [{ icon: 'calendar-check', name: '签到', score: 10 }, { icon: 'share', name: '分享', score: 20 }, { icon: 'edit-file', name: '完善任务', score: 50 }, { icon: 'gift', name: '邀请好友', score: 100 }]
|
||
type PointsRecord = { name: string, date: string, score: number }
|
||
const records: PointsRecord[] = [{ name: '每日签到', date: '今天 09:20', score: 10 }, { name: '完成融资评估', date: '昨天 18:36', score: 50 }, { name: '邀请好友', date: '09-02 14:20', score: 100 }]
|
||
const showRules = () => { uni.showModal({ title: '积分规则', content: '签到、评估、分享和邀请好友均可获得积分。', showCancel: false }) }
|
||
const doTask = (name: string) => { uni.showToast({ title: name + '任务入口', icon: 'none' }) }
|
||
const copyCode = () => { uni.setClipboardData({ data: 'AI2680' }) }
|
||
const invite = () => { uni.showToast({ title: '分享入口已预留', icon: 'none' }) }
|
||
</script>
|
||
|
||
<style>
|
||
.points-scroll { }
|
||
.points-content { padding: 26rpx 28rpx 70rpx; }
|
||
.points-hero { height: 260rpx; padding: 36rpx; border-radius: 20rpx; color: white; background: linear-gradient(125deg, #5140e8, #9c56f6); overflow: hidden; position: relative; }
|
||
.points-label { font-size: 24rpx; color: #e7e1ff; }
|
||
.points-number { font-size: 72rpx; line-height: 90rpx; font-weight: 900; }
|
||
.points-hero-button { position: absolute; right: 28rpx; top: 32rpx; width: 150rpx; height: 58rpx; line-height: 58rpx; padding: 0; margin: 0; border-radius: 29rpx; color: #6348de; background-color: #fff; font-size: 21rpx; }
|
||
.points-shine { position: absolute; width: 260rpx; height: 260rpx; border-radius: 50%; background-color: rgba(255,255,255,.1); right: -60rpx; bottom: -110rpx; }
|
||
.task-grid { height: 180rpx; flex-direction: row; background-color: #fff; border: 1rpx solid #e5ecf5; border-radius: 18rpx; margin-top: 22rpx; }
|
||
.task { flex: 1; align-items: center; justify-content: center; }
|
||
.task-icon { width: 56rpx; height: 56rpx; border-radius: 18rpx; color: #0868f7; background-color: #e9f2ff; align-items: center; justify-content: center; font-size: 22rpx; font-weight: 800; }
|
||
.task-name { margin-top: 10rpx; font-size: 21rpx; color: #3d4b61; }
|
||
.task-score { margin-top: 4rpx; font-size: 18rpx; color: #8e9aab; }
|
||
.invite-panel, .records { margin-top: 24rpx; padding: 28rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e5ecf5; }
|
||
.invite-copy { margin-top: 12rpx; color: #7a8799; font-size: 22rpx; }
|
||
.invite-code { height: 92rpx; padding: 0 22rpx; margin-top: 24rpx; background-color: #f3f6fa; border-radius: 13rpx; flex-direction: row; align-items: center; color: #788599; font-size: 22rpx; }
|
||
.code { flex: 1; margin-left: 22rpx; color: #1b2940; font-size: 30rpx; font-weight: 800; }
|
||
.copy { color: #0868f7; }
|
||
.invite-button { margin-top: 22rpx; }
|
||
.record-head { flex-direction: row; justify-content: space-between; align-items: center; }
|
||
.more { color: #0868f7; font-size: 22rpx; }
|
||
.record { min-height: 100rpx; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #edf1f6; }
|
||
.record-name { font-size: 24rpx; color: #29374d; }
|
||
.record-date { color: #9ba6b6; font-size: 19rpx; margin-top: 8rpx; }
|
||
.record-score { color: #0daa74; font-size: 27rpx; font-weight: 700; }
|
||
</style>
|