修改部分页面
This commit is contained in:
@@ -1,453 +0,0 @@
|
||||
<template>
|
||||
<div class="about-page">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-left">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.go(-1)"
|
||||
class="back-btn"
|
||||
>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">关于我们</h1>
|
||||
</div>
|
||||
<div class="nav-right"></div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="about-content">
|
||||
<!-- 网站介绍 -->
|
||||
<section class="intro-section">
|
||||
<div class="intro-header">
|
||||
<div class="logo">
|
||||
<el-icon size="60"><Platform /></el-icon>
|
||||
</div>
|
||||
<h2>融互通</h2>
|
||||
<p class="tagline">专业的积分兑换与商品管理平台</p>
|
||||
</div>
|
||||
|
||||
<div class="intro-content">
|
||||
<p>
|
||||
积分商城系统是一个现代化的积分兑换与商品管理平台，致力于为用户提供丰富的商品选择和便捷的积分兑换体验。
|
||||
我们相信积分的价值在于为用户带来实际的收益和满足感，通过技术的力量让积分兑换变得更加简单高效。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能特色 -->
|
||||
<section class="features-section">
|
||||
<h3>功能特色</h3>
|
||||
<div class="features-grid">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<el-icon><ShoppingBag /></el-icon>
|
||||
</div>
|
||||
<h4>丰富商品</h4>
|
||||
<p>精选优质商品，涵盖生活用品、数码产品、虚拟服务等多个品类</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<el-icon><Coin /></el-icon>
|
||||
</div>
|
||||
<h4>积分兑换</h4>
|
||||
<p>灵活的积分兑换机制，让您的积分发挥最大价值，享受购物乐趣</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
</div>
|
||||
<h4>积分管理</h4>
|
||||
<p>完整的积分获取和消费记录，让您清楚了解每一分积分的来源和去向</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<el-icon><User /></el-icon>
|
||||
</div>
|
||||
<h4>个人中心</h4>
|
||||
<p>完善的个人资料管理，记录您的兑换历程和积分成长轨迹</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技术栈 -->
|
||||
<section class="tech-section">
|
||||
<h3>技术栈</h3>
|
||||
<div class="tech-grid">
|
||||
<div class="tech-category">
|
||||
<h4>前端技术</h4>
|
||||
<ul>
|
||||
<li>Vue 3 + Composition API</li>
|
||||
<li>Element Plus UI 组件库</li>
|
||||
<li>Vue Router 路由管理</li>
|
||||
<li>Pinia 状态管理</li>
|
||||
<li>Vite 构建工具</li>
|
||||
<li>响应式设计</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tech-category">
|
||||
<h4>后端技术</h4>
|
||||
<ul>
|
||||
<li>Node.js + Express</li>
|
||||
<li>MySQL 数据库</li>
|
||||
<li>JWT 身份认证</li>
|
||||
<li>RESTful API 设计</li>
|
||||
<li>积分系统管理</li>
|
||||
<li>订单处理系统</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<section class="contact-section">
|
||||
<h3>联系我们</h3>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<el-icon><Message /></el-icon>
|
||||
<div>
|
||||
<h4>邮箱</h4>
|
||||
<p>contact@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<el-icon><Phone /></el-icon>
|
||||
<div>
|
||||
<h4>电话</h4>
|
||||
<p>400-123-4567</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<el-icon><Location /></el-icon>
|
||||
<div>
|
||||
<h4>地址</h4>
|
||||
<p>北京市朝阳区科技园区</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 版本信息 -->
|
||||
<section class="version-section">
|
||||
<div class="version-info">
|
||||
<p><strong>版本：</strong>v1.0.0</p>
|
||||
<p><strong>更新时间：</strong>{{ updateTime }}</p>
|
||||
<p><strong>开发团队：</strong>积分商城系统开发团队</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="about-footer">
|
||||
<p>© 2024 积分商城系统. All rights reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Platform,
|
||||
ShoppingBag,
|
||||
Coin,
|
||||
TrendCharts,
|
||||
User,
|
||||
Message,
|
||||
Phone,
|
||||
Location
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
// 响应式数据
|
||||
const updateTime = ref('2024-01-15')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.about-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-left,
|
||||
.nav-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
padding: 20px 16px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px 30px;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.intro-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: #409eff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.intro-header h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.intro-content p {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #555;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.features-section,
|
||||
.tech-section,
|
||||
.contact-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.features-section h3,
|
||||
.tech-section h3,
|
||||
.contact-section h3 {
|
||||
margin: 0 0 24px 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: #f8f9fa;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
color: #409eff;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-item h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-item p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tech-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.tech-category h4 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
}
|
||||
|
||||
.tech-category ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tech-category li {
|
||||
padding: 8px 0;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.tech-category li::before {
|
||||
content: '•';
|
||||
color: #409eff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.contact-item .el-icon {
|
||||
color: #409eff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.contact-item h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px 30px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.version-info p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.about-footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.about-content {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.intro-section,
|
||||
.features-section,
|
||||
.tech-section,
|
||||
.contact-section {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.intro-header h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tech-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.intro-section,
|
||||
.features-section,
|
||||
.tech-section,
|
||||
.contact-section,
|
||||
.version-section {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.intro-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.features-section h3,
|
||||
.tech-section h3,
|
||||
.contact-section h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -320,7 +320,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #ff6b35;
|
||||
background: #72c9ff;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,381 +0,0 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- 导航栏 -->
|
||||
<el-header class="header">
|
||||
<div class="header-content">
|
||||
<div class="logo">
|
||||
<h2>前端H5系统</h2>
|
||||
</div>
|
||||
<div class="nav-menu">
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
:default-active="activeIndex"
|
||||
class="nav-menu-items"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<el-menu-item index="home">首页</el-menu-item>
|
||||
<el-menu-item index="shop">积分商城</el-menu-item>
|
||||
<el-menu-item index="about">关于</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="user-actions">
|
||||
<template v-if="userStore.isAuthenticated">
|
||||
<el-dropdown @command="handleUserCommand">
|
||||
<span class="user-info">
|
||||
<div class="user-avatar">
|
||||
{{ userStore.user?.username?.charAt(0)?.toUpperCase() }}
|
||||
</div>
|
||||
<span class="username">{{ userStore.user?.username }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="profile">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item command="orders">我的订单</el-dropdown-item>
|
||||
<el-dropdown-item command="points-history">积分记录</el-dropdown-item>
|
||||
<el-dropdown-item command="transfers">货款管理</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 移除登录注册按钮 -->
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<el-main class="main-content">
|
||||
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="main-section">
|
||||
<div class="container">
|
||||
<div class="welcome-content">
|
||||
<h2 class="welcome-title">欢迎使用前端H5系统</h2>
|
||||
<p class="welcome-description">您的智能管理助手</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-section" v-if="userStore.isAuthenticated">
|
||||
<div class="container">
|
||||
<h2 class="section-title">系统概览</h2>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="12" :sm="6" v-for="stat in stats" :key="stat.key">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<el-icon :size="32"><component :is="stat.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
|
||||
|
||||
<!-- 页脚 -->
|
||||
<el-footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2024 前端H5系统. All rights reserved.</p>
|
||||
</div>
|
||||
</el-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
import { ArrowDown, User, View, Clock, Document, Edit, Setting, DataAnalysis, Star } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const activeIndex = ref('home')
|
||||
const stats = ref([
|
||||
{ key: 'users', label: '用户数量', value: 0, icon: 'User' },
|
||||
{ key: 'orders', label: '订单总数', value: 0, icon: 'Document' },
|
||||
{ key: 'products', label: '商品数量', value: 0, icon: 'Star' },
|
||||
{ key: 'transfers', label: '转账记录', value: 0, icon: 'Clock' }
|
||||
])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 方法
|
||||
const handleMenuSelect = (index) => {
|
||||
activeIndex.value = index
|
||||
switch (index) {
|
||||
case 'home':
|
||||
router.push('/transfers')
|
||||
break
|
||||
case 'shop':
|
||||
router.push('/shop')
|
||||
break
|
||||
case 'about':
|
||||
router.push('/about')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleUserCommand = (command) => {
|
||||
switch (command) {
|
||||
case 'profile':
|
||||
router.push('/profile')
|
||||
break
|
||||
case 'orders':
|
||||
router.push('/orders')
|
||||
break
|
||||
case 'points-history':
|
||||
router.push('/points-history')
|
||||
break
|
||||
case 'transfers':
|
||||
router.push('/transfers')
|
||||
break
|
||||
case 'logout':
|
||||
userStore.logout()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取统计数据
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
// 这里可以调用相关API获取统计数据
|
||||
// 暂时使用模拟数据
|
||||
stats.value = [
|
||||
{ key: 'users', label: '用户数量', value: 156, icon: 'User' },
|
||||
{ key: 'orders', label: '订单总数', value: 89, icon: 'Document' },
|
||||
{ key: 'products', label: '商品数量', value: 45, icon: 'Star' },
|
||||
{ key: 'transfers', label: '转账记录', value: 23, icon: 'Clock' }
|
||||
]
|
||||
} catch (error) {
|
||||
console.error('获取统计数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
if (userStore.isAuthenticated) {
|
||||
fetchStats()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.logo h2 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-menu-items {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-menu-items .el-menu-item {
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-menu-items .el-menu-item:hover,
|
||||
.nav-menu-items .el-menu-item.is-active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 0 0 80px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.main-section,
|
||||
.stats-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
background-color: #f8f9fa;
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin-bottom: 40px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 32px;
|
||||
margin-bottom: 16px;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.welcome-description {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #303133;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer .container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -249,9 +249,9 @@ export default {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
max-width: 375px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 欢迎文字 */
|
||||
@@ -267,7 +267,8 @@ export default {
|
||||
|
||||
/* 轮播图样式 */
|
||||
.carousel {
|
||||
width: 343px;
|
||||
width: 100%;
|
||||
max-width: 343px;
|
||||
height: 148px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
@@ -299,7 +300,8 @@ export default {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between; /* 保持元素均匀分布 */
|
||||
width: 343px;
|
||||
width: 100%;
|
||||
max-width: 343px;
|
||||
height: 50px;
|
||||
padding: 0; /* 移除内边距 */
|
||||
background-color: transparent;
|
||||
@@ -339,7 +341,8 @@ export default {
|
||||
|
||||
/* 操作区域样式 */
|
||||
.action-area {
|
||||
width: 343px;
|
||||
width: 100%;
|
||||
max-width: 343px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -394,7 +397,8 @@ export default {
|
||||
|
||||
/* 热门资讯 */
|
||||
.hot-news {
|
||||
width: 343px;
|
||||
width: 100%;
|
||||
max-width: 343px;
|
||||
padding: 16px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
|
||||
@@ -207,7 +207,7 @@ const handleLogin = async () => {
|
||||
|
||||
if (result.success) {
|
||||
// 登录成功，跳转到目标页面或转账管理
|
||||
const redirectPath = route.query.redirect || '/transfers'
|
||||
const redirectPath = route.query.redirect || '/mainpage'
|
||||
router.push(redirectPath)
|
||||
} else if (result.needPayment) {
|
||||
// 用户需要支付激活，直接跳转到支付页面
|
||||
|
||||
@@ -1,645 +0,0 @@
|
||||
<template>
|
||||
<div class="task-center">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-left">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.go(-1)"
|
||||
class="back-btn"
|
||||
>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">任务中心</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.push('/points-history')"
|
||||
class="points-btn"
|
||||
>
|
||||
<el-icon><Coin /></el-icon>
|
||||
{{ userPoints }}
|
||||
</el-button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 任务统计 -->
|
||||
<div class="task-stats">
|
||||
<div class="stats-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<el-icon><Trophy /></el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ completedTasks }}</div>
|
||||
<div class="stat-label">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<el-icon><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ pendingTasks }}</div>
|
||||
<div class="stat-label">进行中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<el-icon><Star /></el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ totalRewards }}</div>
|
||||
<div class="stat-label">总积分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务分类 -->
|
||||
<div class="task-categories">
|
||||
<div class="category-tabs">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.key"
|
||||
:class="['category-tab', { active: activeCategory === category.key }]"
|
||||
@click="activeCategory = category.key"
|
||||
>
|
||||
<el-icon>{{ category.icon }}</el-icon>
|
||||
<span>{{ category.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务列表 -->
|
||||
<div class="task-list">
|
||||
<div
|
||||
v-for="task in filteredTasks"
|
||||
:key="task.id"
|
||||
:class="['task-item', {
|
||||
completed: task.status === 'completed',
|
||||
claimed: task.status === 'claimed'
|
||||
}]"
|
||||
>
|
||||
<div class="task-icon">
|
||||
<el-icon :size="24">{{ getTaskIcon(task.type) }}</el-icon>
|
||||
</div>
|
||||
<div class="task-content">
|
||||
<div class="task-title">{{ task.title }}</div>
|
||||
<div class="task-desc">{{ task.description }}</div>
|
||||
<div class="task-progress" v-if="task.progress !== undefined">
|
||||
<el-progress
|
||||
:percentage="(task.progress / task.target) * 100"
|
||||
:show-text="false"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<span class="progress-text">{{ task.progress }}/{{ task.target }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-reward">
|
||||
<div class="reward-points">+{{ task.points }}</div>
|
||||
<el-button
|
||||
v-if="task.status === 'pending'"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="doTask(task)"
|
||||
:loading="task.loading"
|
||||
>
|
||||
{{ getTaskButtonText(task) }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else-if="task.status === 'completed'"
|
||||
type="success"
|
||||
size="small"
|
||||
@click="claimReward(task)"
|
||||
:loading="task.loading"
|
||||
>
|
||||
领取奖励
|
||||
</el-button>
|
||||
<el-tag
|
||||
v-else-if="task.status === 'claimed'"
|
||||
type="success"
|
||||
size="small"
|
||||
>
|
||||
已领取
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="filteredTasks.length === 0" class="empty-state">
|
||||
<el-icon :size="60" color="#c0c4cc"><DocumentRemove /></el-icon>
|
||||
<p>暂无任务</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Coin,
|
||||
Trophy,
|
||||
Clock,
|
||||
Star,
|
||||
Calendar,
|
||||
ShoppingCart,
|
||||
Share,
|
||||
User,
|
||||
CreditCard,
|
||||
Present,
|
||||
DocumentRemove
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const userPoints = ref(0)
|
||||
const activeCategory = ref('daily')
|
||||
const tasks = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 任务分类
|
||||
const categories = ref([
|
||||
{ key: 'daily', name: '每日任务', icon: Calendar },
|
||||
{ key: 'shopping', name: '购物任务', icon: ShoppingCart },
|
||||
{ key: 'social', name: '社交任务', icon: Share },
|
||||
{ key: 'profile', name: '完善资料', icon: User },
|
||||
{ key: 'special', name: '特殊任务', icon: Present }
|
||||
])
|
||||
|
||||
// 计算属性
|
||||
const filteredTasks = computed(() => {
|
||||
return tasks.value.filter(task => task.category === activeCategory.value)
|
||||
})
|
||||
|
||||
const completedTasks = computed(() => {
|
||||
return tasks.value.filter(task => task.status === 'claimed').length
|
||||
})
|
||||
|
||||
const pendingTasks = computed(() => {
|
||||
return tasks.value.filter(task => task.status === 'pending' || task.status === 'completed').length
|
||||
})
|
||||
|
||||
const totalRewards = computed(() => {
|
||||
return tasks.value
|
||||
.filter(task => task.status === 'claimed')
|
||||
.reduce((total, task) => total + task.points, 0)
|
||||
})
|
||||
|
||||
// 方法
|
||||
/**
|
||||
* 获取任务图标
|
||||
*/
|
||||
const getTaskIcon = (type) => {
|
||||
const iconMap = {
|
||||
purchase: ShoppingCart,
|
||||
share: Share,
|
||||
profile: User,
|
||||
transfer: CreditCard,
|
||||
invite: User,
|
||||
review: Star
|
||||
}
|
||||
return iconMap[type] || Present
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取任务按钮文本
|
||||
*/
|
||||
const getTaskButtonText = (task) => {
|
||||
const textMap = {
|
||||
purchase: '去购买',
|
||||
share: '去分享',
|
||||
profile: '去完善',
|
||||
transfer: '去转账',
|
||||
invite: '去邀请',
|
||||
review: '去评价'
|
||||
}
|
||||
return textMap[task.type] || '去完成'
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行任务
|
||||
*/
|
||||
const doTask = async (task) => {
|
||||
task.loading = true
|
||||
|
||||
try {
|
||||
switch (task.type) {
|
||||
case 'purchase':
|
||||
router.push('/shop')
|
||||
break
|
||||
case 'share':
|
||||
await shareApp()
|
||||
break
|
||||
case 'profile':
|
||||
router.push('/profile')
|
||||
break
|
||||
case 'transfer':
|
||||
router.push('/transfers')
|
||||
break
|
||||
case 'invite':
|
||||
await showInviteDialog()
|
||||
break
|
||||
case 'review':
|
||||
router.push('/orders')
|
||||
break
|
||||
default:
|
||||
// 直接完成任务
|
||||
await completeTask(task.id)
|
||||
break
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('操作失败，请重试')
|
||||
} finally {
|
||||
task.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分享应用
|
||||
*/
|
||||
const shareApp = async () => {
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: '融互通 - 资金互助平台',
|
||||
text: '发现一个很棒的资金互助平台，快来看看吧！',
|
||||
url: window.location.origin
|
||||
})
|
||||
|
||||
// 完成分享任务
|
||||
await completeTask('share_app')
|
||||
ElMessage.success('分享成功！')
|
||||
} catch (error) {
|
||||
if (error.name !== 'AbortError') {
|
||||
ElMessage.error('分享失败')
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 复制链接到剪贴板
|
||||
try {
|
||||
await navigator.clipboard.writeText(window.location.origin)
|
||||
await completeTask('share_app')
|
||||
ElMessage.success('链接已复制到剪贴板！')
|
||||
} catch (error) {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示邀请对话框
|
||||
*/
|
||||
const showInviteDialog = async () => {
|
||||
// 这里可以实现邀请功能
|
||||
ElMessage.info('邀请功能开发中...')
|
||||
}
|
||||
|
||||
/**
|
||||
* 完成任务
|
||||
*/
|
||||
const completeTask = async (taskId) => {
|
||||
try {
|
||||
const response = await api.post(`/tasks/${taskId}/complete`)
|
||||
|
||||
// 更新任务状态
|
||||
const task = tasks.value.find(t => t.id === taskId)
|
||||
if (task) {
|
||||
task.status = 'completed'
|
||||
}
|
||||
|
||||
ElMessage.success('任务完成！')
|
||||
} catch (error) {
|
||||
ElMessage.error('任务完成失败')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 领取奖励
|
||||
*/
|
||||
const claimReward = async (task) => {
|
||||
task.loading = true
|
||||
|
||||
try {
|
||||
const response = await api.post(`/tasks/${task.id}/claim`)
|
||||
|
||||
// 更新任务状态和用户积分
|
||||
task.status = 'claimed'
|
||||
userPoints.value += task.points
|
||||
|
||||
ElMessage.success(`获得 ${task.points} 积分！`)
|
||||
} catch (error) {
|
||||
ElMessage.error('领取失败，请重试')
|
||||
} finally {
|
||||
task.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取任务列表
|
||||
*/
|
||||
const getTasks = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const response = await api.get('/tasks')
|
||||
tasks.value = response.data.map(task => ({
|
||||
...task,
|
||||
loading: false
|
||||
}))
|
||||
} catch (error) {
|
||||
// 如果API不存在，使用模拟数据
|
||||
tasks.value = [
|
||||
{
|
||||
id: 'first_purchase',
|
||||
category: 'shopping',
|
||||
type: 'purchase',
|
||||
title: '首次购买',
|
||||
description: '在积分商城完成首次购买',
|
||||
points: 50,
|
||||
status: 'pending',
|
||||
loading: false
|
||||
},
|
||||
{
|
||||
id: 'share_app',
|
||||
category: 'social',
|
||||
type: 'share',
|
||||
title: '分享应用',
|
||||
description: '分享应用给朋友',
|
||||
points: 20,
|
||||
status: 'pending',
|
||||
loading: false
|
||||
},
|
||||
{
|
||||
id: 'complete_profile',
|
||||
category: 'profile',
|
||||
type: 'profile',
|
||||
title: '完善个人资料',
|
||||
description: '完善头像、姓名等个人信息',
|
||||
points: 30,
|
||||
status: 'pending',
|
||||
progress: 2,
|
||||
target: 5,
|
||||
loading: false
|
||||
},
|
||||
{
|
||||
id: 'first_transfer',
|
||||
category: 'special',
|
||||
type: 'transfer',
|
||||
title: '首次转账',
|
||||
description: '完成首次转账操作',
|
||||
points: 100,
|
||||
status: 'completed',
|
||||
loading: false
|
||||
}
|
||||
]
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户积分
|
||||
*/
|
||||
const getUserPoints = async () => {
|
||||
try {
|
||||
const response = await api.get('/user/points')
|
||||
userPoints.value = response.data.points
|
||||
} catch (error) {
|
||||
console.error('获取用户积分失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getTasks()
|
||||
getUserPoints()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-center {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-left,
|
||||
.nav-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.points-btn {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.points-btn {
|
||||
color: #ff6b35;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.task-categories {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.category-tab.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category-tab .el-icon {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.task-item.completed {
|
||||
border-left: 4px solid #67c23a;
|
||||
}
|
||||
|
||||
.task-item.claimed {
|
||||
opacity: 0.6;
|
||||
border-left: 4px solid #909399;
|
||||
}
|
||||
|
||||
.task-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.task-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.task-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-progress .el-progress {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-reward {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.reward-points {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #ff6b35;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user