初次提交
This commit is contained in:
453
src/views/About.vue
Normal file
453
src/views/About.vue
Normal file
@@ -0,0 +1,453 @@
|
||||
<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>
|
||||
381
src/views/Home.vue
Normal file
381
src/views/Home.vue
Normal file
@@ -0,0 +1,381 @@
|
||||
<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>
|
||||
455
src/views/Login.vue
Normal file
455
src/views/Login.vue
Normal file
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h2>用户登录</h2>
|
||||
<p>欢迎回到前端H5系统</p>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="请输入用户名或邮箱"
|
||||
size="large"
|
||||
:prefix-icon="User"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
:prefix-icon="Lock"
|
||||
show-password
|
||||
clearable
|
||||
@keyup.enter="handleLogin"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="captcha">
|
||||
<Captcha
|
||||
ref="captchaRef"
|
||||
v-model="loginForm.captcha"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<div class="form-options">
|
||||
<el-checkbox v-model="rememberMe">记住我</el-checkbox>
|
||||
<el-link type="primary" @click="showForgotPassword">
|
||||
忘记密码？
|
||||
</el-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="login-button"
|
||||
:loading="userStore.loading"
|
||||
@click="handleLogin"
|
||||
>
|
||||
{{ userStore.loading ? '登录中...' : '登录' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="login-footer">
|
||||
<p>
|
||||
还没有账号？
|
||||
<el-link type="primary" @click="$router.push('/register')">
|
||||
立即注册
|
||||
</el-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="quick-login">
|
||||
<el-divider>快速登录</el-divider>
|
||||
<div class="demo-accounts">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
size="small"
|
||||
@click="quickLogin('admin')"
|
||||
>
|
||||
管理员账号
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
size="small"
|
||||
@click="quickLogin('user')"
|
||||
>
|
||||
普通用户
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
<div class="background-decoration">
|
||||
<div class="decoration-circle circle-1"></div>
|
||||
<div class="decoration-circle circle-2"></div>
|
||||
<div class="decoration-circle circle-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import Captcha from '@/components/Captcha.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 表单引用
|
||||
const loginFormRef = ref()
|
||||
const captchaRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
captcha: ''
|
||||
})
|
||||
|
||||
// 其他状态
|
||||
const rememberMe = ref(false)
|
||||
|
||||
// 表单验证规则
|
||||
const loginRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名或邮箱', trigger: 'blur' },
|
||||
{ min: 3, message: '用户名至少3个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码至少6个字符', trigger: 'blur' }
|
||||
],
|
||||
captcha: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
{ min: 4, max: 4, message: '验证码为4位字符', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 处理登录
|
||||
const handleLogin = async () => {
|
||||
if (!loginFormRef.value || !captchaRef.value) return
|
||||
|
||||
try {
|
||||
// 先验证表单
|
||||
const valid = await loginFormRef.value.validate()
|
||||
if (!valid) return
|
||||
|
||||
// 验证验证码
|
||||
const captchaValid = await captchaRef.value.verifyCaptcha(loginForm.captcha)
|
||||
if (!captchaValid) {
|
||||
loginForm.captcha = ''
|
||||
return
|
||||
}
|
||||
|
||||
// 获取验证码信息
|
||||
const captchaInfo = captchaRef.value.getCaptchaInfo()
|
||||
|
||||
// 提交登录请求（包含验证码信息）
|
||||
const loginData = {
|
||||
username: loginForm.username,
|
||||
password: loginForm.password,
|
||||
captchaId: captchaInfo.captchaId,
|
||||
captchaText: captchaInfo.captchaText
|
||||
}
|
||||
|
||||
const result = await userStore.login(loginData)
|
||||
|
||||
if (result.success) {
|
||||
// 登录成功，跳转到目标页面或转账管理
|
||||
const redirectPath = route.query.redirect || '/transfers'
|
||||
router.push(redirectPath)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error)
|
||||
// 登录失败后刷新验证码
|
||||
if (captchaRef.value) {
|
||||
await captchaRef.value.refreshCaptcha()
|
||||
}
|
||||
loginForm.captcha = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 快速登录（演示用）
|
||||
const quickLogin = async (type) => {
|
||||
if (type === 'admin') {
|
||||
loginForm.username = 'admin'
|
||||
loginForm.password = 'admin123'
|
||||
} else {
|
||||
loginForm.username = 'user'
|
||||
loginForm.password = 'user123'
|
||||
}
|
||||
|
||||
// 清空验证码，让用户手动输入
|
||||
loginForm.captcha = ''
|
||||
ElMessage.info('请输入验证码后登录')
|
||||
}
|
||||
|
||||
// 忘记密码
|
||||
const showForgotPassword = () => {
|
||||
ElMessageBox.alert(
|
||||
'请联系管理员重置密码，或使用演示账号进行体验。',
|
||||
'忘记密码',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
type: 'info'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 组件挂载时的处理
|
||||
onMounted(() => {
|
||||
// 如果已经登录，直接跳转
|
||||
if (userStore.isAuthenticated) {
|
||||
const redirectPath = route.query.redirect || '/transfers'
|
||||
router.push(redirectPath)
|
||||
}
|
||||
|
||||
// 从localStorage恢复记住我状态
|
||||
const savedUsername = localStorage.getItem('rememberedUsername')
|
||||
if (savedUsername) {
|
||||
loginForm.username = savedUsername
|
||||
rememberMe.value = true
|
||||
}
|
||||
})
|
||||
|
||||
// 监听记住我状态变化
|
||||
const handleRememberMe = () => {
|
||||
if (rememberMe.value && loginForm.username) {
|
||||
localStorage.setItem('rememberedUsername', loginForm.username)
|
||||
} else {
|
||||
localStorage.removeItem('rememberedUsername')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
padding: 40px 30px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-footer p {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quick-login {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.demo-accounts {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.background-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.decoration-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 60%;
|
||||
right: 10%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.demo-accounts {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-options {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Element Plus 组件样式覆盖 */
|
||||
:deep(.el-input__wrapper) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 输入框聚焦效果 */
|
||||
:deep(.el-input__wrapper:hover),
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.login-button.is-loading {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.login-card {
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 错误状态样式 */
|
||||
:deep(.el-form-item.is-error .el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px #f56c6c inset;
|
||||
}
|
||||
|
||||
/* 成功状态样式 */
|
||||
:deep(.el-form-item.is-success .el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px #67c23a inset;
|
||||
}
|
||||
</style>
|
||||
1660
src/views/Matching.vue
Normal file
1660
src/views/Matching.vue
Normal file
File diff suppressed because it is too large
Load Diff
160
src/views/NotFound.vue
Normal file
160
src/views/NotFound.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="not-found-page">
|
||||
<div class="not-found-container">
|
||||
<div class="error-illustration">
|
||||
<div class="error-code">404</div>
|
||||
<div class="error-message">页面不存在</div>
|
||||
</div>
|
||||
|
||||
<div class="error-description">
|
||||
<p>抱歉，您访问的页面不存在或已被删除。</p>
|
||||
<p>请检查网址是否正确，或返回首页继续浏览。</p>
|
||||
</div>
|
||||
|
||||
<div class="error-actions">
|
||||
<el-button type="primary" @click="goHome">
|
||||
<el-icon><House /></el-icon>
|
||||
返回首页
|
||||
</el-button>
|
||||
<el-button @click="goBack">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回上页
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
House,
|
||||
ArrowLeft
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 方法
|
||||
const goHome = () => {
|
||||
router.push('/transfers')
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
if (window.history.length > 1) {
|
||||
router.go(-1)
|
||||
} else {
|
||||
router.push('/transfers')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.not-found-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.not-found-container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.error-illustration {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 120px;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.error-description p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.not-found-page {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.not-found-container {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-actions .el-button {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.error-code {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.error-description p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
904
src/views/Orders.vue
Normal file
904
src/views/Orders.vue
Normal file
@@ -0,0 +1,904 @@
|
||||
<template>
|
||||
<div class="orders-page">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">我的订单</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.push('/shop')"
|
||||
class="shop-btn"
|
||||
>
|
||||
<el-icon><ShoppingBag /></el-icon>
|
||||
商城
|
||||
</el-button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 订单状态筛选 -->
|
||||
<div class="filter-tabs">
|
||||
<div class="tabs-container">
|
||||
<div
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
:class="['tab-item', { active: selectedStatus === tab.value }]"
|
||||
@click="selectStatus(tab.value)"
|
||||
>
|
||||
<span>{{ tab.label }}</span>
|
||||
<el-badge
|
||||
v-if="tab.count > 0"
|
||||
:value="tab.count"
|
||||
class="tab-badge"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<div class="orders-content">
|
||||
<div v-loading="loading" class="orders-list">
|
||||
<div v-if="filteredOrders.length === 0" class="empty-state">
|
||||
<el-icon size="60"><Box /></el-icon>
|
||||
<p>{{ getEmptyText() }}</p>
|
||||
<el-button type="primary" @click="$router.push('/shop')">
|
||||
去购物
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-for="order in filteredOrders" :key="order.id" class="order-card">
|
||||
<!-- 订单头部 -->
|
||||
<div class="order-header">
|
||||
<div class="order-info">
|
||||
<span class="order-number">订单号：{{ order.orderNumber }}</span>
|
||||
<span class="order-date">{{ formatDate(order.createdAt) }}</span>
|
||||
</div>
|
||||
<div class="order-status">
|
||||
<el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单商品 -->
|
||||
<div class="order-items">
|
||||
<div
|
||||
v-for="item in order.items"
|
||||
:key="item.id"
|
||||
class="order-item"
|
||||
@click="goToProduct(item.productId)"
|
||||
>
|
||||
<img :src="item.product.image" :alt="item.product.name" class="item-image" />
|
||||
<div class="item-info">
|
||||
<h4 class="item-name">{{ item.product.name }}</h4>
|
||||
<p class="item-desc">{{ truncateText(item.product.description, 40) }}</p>
|
||||
<div class="item-price">
|
||||
<span class="price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
{{ item.points }}
|
||||
</span>
|
||||
<span class="quantity">x{{ item.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单总计 -->
|
||||
<div class="order-total">
|
||||
<div class="total-info">
|
||||
<span>共{{ order.totalQuantity }}件商品</span>
|
||||
<span class="total-points">
|
||||
总计：<el-icon><Coin /></el-icon>{{ order.totalPoints }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单操作 -->
|
||||
<div class="order-actions">
|
||||
<el-button
|
||||
v-if="order.status === 'pending'"
|
||||
size="small"
|
||||
@click="cancelOrder(order.id)"
|
||||
>
|
||||
取消订单
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="order.status === 'shipped'"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="confirmReceive(order.id)"
|
||||
>
|
||||
确认收货
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="order.status === 'completed'"
|
||||
size="small"
|
||||
@click="showReviewDialog(order)"
|
||||
>
|
||||
评价
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="viewOrderDetail(order.id)"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<div v-if="hasMore" class="load-more">
|
||||
<el-button @click="loadMore" :loading="loadingMore">
|
||||
加载更多
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价对话框 -->
|
||||
<el-dialog
|
||||
v-model="showReview"
|
||||
title="商品评价"
|
||||
width="90%"
|
||||
:before-close="handleReviewClose"
|
||||
>
|
||||
<div v-if="reviewOrder" class="review-form">
|
||||
<div v-for="item in reviewOrder.items" :key="item.id" class="review-item">
|
||||
<div class="review-product">
|
||||
<img :src="item.product.image" :alt="item.product.name" class="product-image" />
|
||||
<div class="product-info">
|
||||
<h4>{{ item.product.name }}</h4>
|
||||
<p>{{ item.product.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-rating">
|
||||
<span class="rating-label">评分：</span>
|
||||
<el-rate v-model="item.rating" size="large" />
|
||||
</div>
|
||||
<div class="review-content">
|
||||
<el-input
|
||||
v-model="item.reviewContent"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请分享您的使用体验..."
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</div>
|
||||
<div class="review-images">
|
||||
<el-upload
|
||||
v-model:file-list="item.reviewImages"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
:limit="3"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showReview = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitReview" :loading="submittingReview">
|
||||
提交评价
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 订单详情对话框 -->
|
||||
<el-dialog
|
||||
v-model="showOrderDetail"
|
||||
title="订单详情"
|
||||
width="90%"
|
||||
>
|
||||
<div v-if="orderDetail" class="order-detail">
|
||||
<div class="detail-section">
|
||||
<h4>订单信息</h4>
|
||||
<div class="detail-item">
|
||||
<span class="label">订单号：</span>
|
||||
<span class="value">{{ orderDetail.orderNumber }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">下单时间：</span>
|
||||
<span class="value">{{ formatDateTime(orderDetail.createdAt) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">订单状态：</span>
|
||||
<span class="value">
|
||||
<el-tag :type="getStatusType(orderDetail.status)">
|
||||
{{ getStatusText(orderDetail.status) }}
|
||||
</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>商品信息</h4>
|
||||
<div v-for="item in orderDetail.items" :key="item.id" class="detail-product">
|
||||
<img :src="item.product.image" :alt="item.product.name" />
|
||||
<div class="product-info">
|
||||
<h5>{{ item.product.name }}</h5>
|
||||
<p>{{ item.product.description }}</p>
|
||||
<div class="product-price">
|
||||
<span><el-icon><Coin /></el-icon>{{ item.points }} x {{ item.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>配送信息</h4>
|
||||
<div class="detail-item">
|
||||
<span class="label">收货地址：</span>
|
||||
<span class="value">{{ orderDetail.shippingAddress || '虚拟商品，无需配送' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">物流信息：</span>
|
||||
<span class="value">{{ orderDetail.trackingNumber || '暂无' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>费用明细</h4>
|
||||
<div class="detail-item">
|
||||
<span class="label">商品总计：</span>
|
||||
<span class="value"><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
|
||||
</div>
|
||||
<div class="detail-item total">
|
||||
<span class="label">实付积分：</span>
|
||||
<span class="value"><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ShoppingBag,
|
||||
Box,
|
||||
Coin,
|
||||
Plus
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const selectedStatus = ref('all')
|
||||
const orders = ref([])
|
||||
const page = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const showReview = ref(false)
|
||||
const showOrderDetail = ref(false)
|
||||
const reviewOrder = ref(null)
|
||||
const orderDetail = ref(null)
|
||||
const submittingReview = ref(false)
|
||||
|
||||
// 状态标签
|
||||
const statusTabs = ref([
|
||||
{ label: '全部', value: 'all', count: 0 },
|
||||
{ label: '待发货', value: 'pending', count: 0 },
|
||||
{ label: '已发货', value: 'shipped', count: 0 },
|
||||
{ label: '已完成', value: 'completed', count: 0 },
|
||||
{ label: '已取消', value: 'cancelled', count: 0 }
|
||||
])
|
||||
|
||||
// 计算属性
|
||||
const filteredOrders = computed(() => {
|
||||
if (selectedStatus.value === 'all') {
|
||||
return orders.value
|
||||
}
|
||||
return orders.value.filter(order => order.status === selectedStatus.value)
|
||||
})
|
||||
|
||||
// 方法
|
||||
const selectStatus = (status) => {
|
||||
selectedStatus.value = status
|
||||
}
|
||||
|
||||
const getEmptyText = () => {
|
||||
const textMap = {
|
||||
all: '暂无订单',
|
||||
pending: '暂无待发货订单',
|
||||
shipped: '暂无已发货订单',
|
||||
completed: '暂无已完成订单',
|
||||
cancelled: '暂无已取消订单'
|
||||
}
|
||||
return textMap[selectedStatus.value]
|
||||
}
|
||||
|
||||
const getStatusType = (status) => {
|
||||
const typeMap = {
|
||||
pending: 'warning',
|
||||
shipped: 'primary',
|
||||
completed: 'success',
|
||||
cancelled: 'danger'
|
||||
}
|
||||
return typeMap[status] || 'info'
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const textMap = {
|
||||
pending: '待发货',
|
||||
shipped: '已发货',
|
||||
completed: '已完成',
|
||||
cancelled: '已取消'
|
||||
}
|
||||
return textMap[status] || '未知状态'
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
const formatDateTime = (date) => {
|
||||
return new Date(date).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
const truncateText = (text, maxLength) => {
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
|
||||
const goToProduct = (productId) => {
|
||||
router.push(`/product/${productId}`)
|
||||
}
|
||||
|
||||
const cancelOrder = async (orderId) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要取消这个订单吗？', '确认取消', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
await api.put(`/orders/${orderId}/cancel`)
|
||||
|
||||
// 更新订单状态
|
||||
const order = orders.value.find(o => o.id === orderId)
|
||||
if (order) {
|
||||
order.status = 'cancelled'
|
||||
}
|
||||
|
||||
updateStatusCounts()
|
||||
ElMessage.success('订单已取消')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('取消订单失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const confirmReceive = async (orderId) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确认已收到商品吗？', '确认收货', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info'
|
||||
})
|
||||
|
||||
await api.put(`/orders/${orderId}/receive`)
|
||||
|
||||
// 更新订单状态
|
||||
const order = orders.value.find(o => o.id === orderId)
|
||||
if (order) {
|
||||
order.status = 'completed'
|
||||
}
|
||||
|
||||
updateStatusCounts()
|
||||
ElMessage.success('确认收货成功')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('确认收货失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const showReviewDialog = (order) => {
|
||||
reviewOrder.value = {
|
||||
...order,
|
||||
items: order.items.map(item => ({
|
||||
...item,
|
||||
rating: 5,
|
||||
reviewContent: '',
|
||||
reviewImages: []
|
||||
}))
|
||||
}
|
||||
showReview.value = true
|
||||
}
|
||||
|
||||
const handleReviewClose = () => {
|
||||
reviewOrder.value = null
|
||||
showReview.value = false
|
||||
}
|
||||
|
||||
const submitReview = async () => {
|
||||
try {
|
||||
submittingReview.value = true
|
||||
|
||||
const reviewData = {
|
||||
orderId: reviewOrder.value.id,
|
||||
reviews: reviewOrder.value.items.map(item => ({
|
||||
productId: item.productId,
|
||||
rating: item.rating,
|
||||
content: item.reviewContent,
|
||||
images: item.reviewImages.map(img => img.url)
|
||||
}))
|
||||
}
|
||||
|
||||
await api.post('/reviews', reviewData)
|
||||
|
||||
showReview.value = false
|
||||
ElMessage.success('评价提交成功')
|
||||
} catch (error) {
|
||||
ElMessage.error('评价提交失败')
|
||||
} finally {
|
||||
submittingReview.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const viewOrderDetail = async (orderId) => {
|
||||
try {
|
||||
const response = await api.get(`/orders/${orderId}`)
|
||||
orderDetail.value = response.data
|
||||
showOrderDetail.value = true
|
||||
} catch (error) {
|
||||
ElMessage.error('获取订单详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
const getOrders = async (isLoadMore = false) => {
|
||||
try {
|
||||
if (!isLoadMore) {
|
||||
loading.value = true
|
||||
page.value = 1
|
||||
} else {
|
||||
loadingMore.value = true
|
||||
}
|
||||
|
||||
const response = await api.get('/orders', {
|
||||
params: {
|
||||
page: page.value,
|
||||
limit: 10
|
||||
}
|
||||
})
|
||||
|
||||
if (isLoadMore) {
|
||||
orders.value.push(...response.data.orders)
|
||||
} else {
|
||||
orders.value = response.data.orders
|
||||
}
|
||||
|
||||
hasMore.value = response.data.hasMore
|
||||
page.value++
|
||||
|
||||
updateStatusCounts()
|
||||
} catch (error) {
|
||||
ElMessage.error('获取订单列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
getOrders(true)
|
||||
}
|
||||
|
||||
const updateStatusCounts = () => {
|
||||
const counts = {
|
||||
all: orders.value.length,
|
||||
pending: 0,
|
||||
shipped: 0,
|
||||
completed: 0,
|
||||
cancelled: 0
|
||||
}
|
||||
|
||||
orders.value.forEach(order => {
|
||||
counts[order.status]++
|
||||
})
|
||||
|
||||
statusTabs.value.forEach(tab => {
|
||||
tab.count = counts[tab.value]
|
||||
})
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getOrders()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.orders-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;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.shop-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
padding: 16px 20px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #409eff;
|
||||
border-bottom-color: #409eff;
|
||||
}
|
||||
|
||||
.tab-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.orders-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.orders-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.order-items {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.order-item:hover {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.order-total {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.total-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.review-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.review-product {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.review-product .product-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.review-product .product-info h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.review-product .product-info p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.review-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.review-images {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.order-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.detail-section h4 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-item.total {
|
||||
font-weight: 600;
|
||||
color: #ff6b35;
|
||||
border-bottom: none;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.detail-item .label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-item .value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-product {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-product img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-product .product-info h5 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-product .product-info p {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-product .product-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.order-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
730
src/views/PointsHistory.vue
Normal file
730
src/views/PointsHistory.vue
Normal file
@@ -0,0 +1,730 @@
|
||||
<template>
|
||||
<div class="points-history-page">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">积分记录</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.push('/shop')"
|
||||
class="shop-btn"
|
||||
>
|
||||
<el-icon><ShoppingBag /></el-icon>
|
||||
商城
|
||||
</el-button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 积分概览 -->
|
||||
<div class="points-overview">
|
||||
<div class="overview-card">
|
||||
<div class="current-points">
|
||||
<div class="points-icon">
|
||||
<el-icon size="24"><Coin /></el-icon>
|
||||
</div>
|
||||
<div class="points-info">
|
||||
<div class="points-value">{{ userPoints }}</div>
|
||||
<div class="points-label">当前积分</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="points-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ totalEarned }}</div>
|
||||
<div class="stat-label">累计获得</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ totalSpent }}</div>
|
||||
<div class="stat-label">累计消费</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-tabs">
|
||||
<div
|
||||
v-for="tab in filterTabs"
|
||||
:key="tab.value"
|
||||
:class="['tab-item', { active: selectedFilter === tab.value }]"
|
||||
@click="selectFilter(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="date-filter">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 积分记录列表 -->
|
||||
<div class="history-content">
|
||||
<div v-loading="loading" class="history-list">
|
||||
<div v-if="filteredHistory.length === 0" class="empty-state">
|
||||
<el-icon size="60"><DocumentRemove /></el-icon>
|
||||
<p>{{ getEmptyText() }}</p>
|
||||
<el-button type="primary" @click="$router.push('/shop')">
|
||||
去赚积分
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-for="record in filteredHistory" :key="record.id" class="history-item">
|
||||
<div class="item-icon">
|
||||
<el-icon
|
||||
:size="20"
|
||||
:class="getIconClass(record.type)"
|
||||
>
|
||||
<component :is="getIcon(record.type)" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<h4 class="item-title">{{ record.title }}</h4>
|
||||
<div :class="['item-points', getPointsClass(record.type)]">
|
||||
{{ getPointsText(record.type, record.points) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-details">
|
||||
<p class="item-description">{{ record.description }}</p>
|
||||
<div class="item-meta">
|
||||
<span class="item-date">{{ formatDateTime(record.createdAt) }}</span>
|
||||
<span v-if="record.orderId" class="item-order">
|
||||
订单号：{{ record.orderId }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<el-button
|
||||
v-if="record.orderId"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="viewOrder(record.orderId)"
|
||||
>
|
||||
查看订单
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<div v-if="hasMore" class="load-more">
|
||||
<el-button @click="loadMore" :loading="loadingMore">
|
||||
加载更多
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 积分规则说明 -->
|
||||
<div class="points-rules">
|
||||
<el-collapse v-model="activeRules">
|
||||
<el-collapse-item title="积分获取规则" name="earn">
|
||||
<div class="rules-content">
|
||||
<div class="rule-item">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span>注册账户：+100积分</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<span>每日签到：+10积分</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<el-icon><Share /></el-icon>
|
||||
<span>分享商品：+5积分</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<el-icon><Star /></el-icon>
|
||||
<span>商品评价：+20积分</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<el-icon><Trophy /></el-icon>
|
||||
<span>完成任务：+50积分</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="积分使用规则" name="spend">
|
||||
<div class="rules-content">
|
||||
<div class="rule-item">
|
||||
<el-icon><ShoppingBag /></el-icon>
|
||||
<span>商品兑换：按商品标价扣除</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span>积分有效期：永久有效</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<el-icon><Warning /></el-icon>
|
||||
<span>积分不可转让，不可提现</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</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,
|
||||
ShoppingBag,
|
||||
Coin,
|
||||
DocumentRemove,
|
||||
Plus,
|
||||
Minus,
|
||||
Present,
|
||||
ShoppingCart,
|
||||
Star,
|
||||
Calendar,
|
||||
Share,
|
||||
Trophy,
|
||||
UserFilled,
|
||||
Clock,
|
||||
Warning
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const selectedFilter = ref('all')
|
||||
const dateRange = ref([])
|
||||
const history = ref([])
|
||||
const page = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const userPoints = ref(0)
|
||||
const totalEarned = ref(0)
|
||||
const totalSpent = ref(0)
|
||||
const activeRules = ref([])
|
||||
|
||||
// 筛选标签
|
||||
const filterTabs = ref([
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '获得', value: 'earn' },
|
||||
{ label: '消费', value: 'spend' },
|
||||
{ label: '任务', value: 'task' },
|
||||
{ label: '兑换', value: 'exchange' }
|
||||
])
|
||||
|
||||
// 计算属性
|
||||
const filteredHistory = computed(() => {
|
||||
// 确保history.value是数组，避免undefined错误
|
||||
let filtered = history.value || []
|
||||
|
||||
// 按类型筛选
|
||||
if (selectedFilter.value !== 'all') {
|
||||
filtered = filtered.filter(record => record.type === selectedFilter.value)
|
||||
}
|
||||
|
||||
// 按日期筛选
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
const [startDate, endDate] = dateRange.value
|
||||
filtered = filtered.filter(record => {
|
||||
const recordDate = new Date(record.createdAt)
|
||||
return recordDate >= startDate && recordDate <= endDate
|
||||
})
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
// 方法
|
||||
const selectFilter = (filter) => {
|
||||
selectedFilter.value = filter
|
||||
}
|
||||
|
||||
const onDateChange = () => {
|
||||
// 日期变化时重新加载数据
|
||||
getHistory()
|
||||
}
|
||||
|
||||
const getEmptyText = () => {
|
||||
const textMap = {
|
||||
all: '暂无积分记录',
|
||||
earn: '暂无获得记录',
|
||||
spend: '暂无消费记录',
|
||||
task: '暂无任务记录',
|
||||
exchange: '暂无兑换记录'
|
||||
}
|
||||
return textMap[selectedFilter.value]
|
||||
}
|
||||
|
||||
const getIcon = (type) => {
|
||||
const iconMap = {
|
||||
earn: Plus,
|
||||
spend: Minus,
|
||||
task: Trophy,
|
||||
exchange: ShoppingCart,
|
||||
gift: Present,
|
||||
review: Star,
|
||||
share: Share
|
||||
}
|
||||
return iconMap[type] || Plus
|
||||
}
|
||||
|
||||
const getIconClass = (type) => {
|
||||
const classMap = {
|
||||
earn: 'icon-earn',
|
||||
spend: 'icon-spend',
|
||||
task: 'icon-task',
|
||||
exchange: 'icon-exchange',
|
||||
gift: 'icon-present',
|
||||
review: 'icon-review',
|
||||
share: 'icon-share'
|
||||
}
|
||||
return classMap[type] || 'icon-default'
|
||||
}
|
||||
|
||||
const getPointsClass = (type) => {
|
||||
return type === 'spend' || type === 'exchange' ? 'points-negative' : 'points-positive'
|
||||
}
|
||||
|
||||
const getPointsText = (type, points) => {
|
||||
const isNegative = type === 'spend' || type === 'exchange'
|
||||
return isNegative ? `-${points}` : `+${points}`
|
||||
}
|
||||
|
||||
const formatDateTime = (date) => {
|
||||
return new Date(date).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const viewOrder = (orderId) => {
|
||||
router.push(`/orders?orderId=${orderId}`)
|
||||
}
|
||||
|
||||
const getUserPoints = async () => {
|
||||
try {
|
||||
const response = await api.get('/user/points')
|
||||
userPoints.value = response.data.currentPoints
|
||||
totalEarned.value = response.data.totalEarned
|
||||
totalSpent.value = response.data.totalSpent
|
||||
} catch (error) {
|
||||
ElMessage.error('获取积分信息失败')
|
||||
}
|
||||
}
|
||||
|
||||
const getHistory = async (isLoadMore = false) => {
|
||||
try {
|
||||
if (!isLoadMore) {
|
||||
loading.value = true
|
||||
page.value = 1
|
||||
} else {
|
||||
loadingMore.value = true
|
||||
}
|
||||
|
||||
const params = {
|
||||
page: page.value,
|
||||
limit: 20
|
||||
}
|
||||
|
||||
// 添加日期筛选参数
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
params.startDate = dateRange.value[0].toISOString()
|
||||
params.endDate = dateRange.value[1].toISOString()
|
||||
}
|
||||
|
||||
const response = await api.get('/user/points/history', { params })
|
||||
|
||||
// 确保响应数据是数组
|
||||
const historyData = response.data.history || []
|
||||
|
||||
if (isLoadMore) {
|
||||
history.value.push(...historyData)
|
||||
} else {
|
||||
history.value = historyData
|
||||
}
|
||||
|
||||
hasMore.value = response.data.hasMore || false
|
||||
page.value++
|
||||
} catch (error) {
|
||||
console.error('获取积分记录失败:', error)
|
||||
ElMessage.error('获取积分记录失败')
|
||||
// 确保在错误情况下history仍然是数组
|
||||
if (!isLoadMore) {
|
||||
history.value = []
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
getHistory(true)
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getUserPoints()
|
||||
getHistory()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.points-history-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;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.shop-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.points-overview {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
color: white;
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.current-points {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.points-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.points-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.points-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.points-stats {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.date-filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-earn {
|
||||
background: #e8f5e8;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.icon-spend {
|
||||
background: #fff2e8;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon-task {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.icon-exchange {
|
||||
background: #fff0f6;
|
||||
color: #eb2f96;
|
||||
}
|
||||
|
||||
.icon-present {
|
||||
background: #f9f0ff;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.icon-review {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.icon-share {
|
||||
background: #e6fffb;
|
||||
color: #13c2c2;
|
||||
}
|
||||
|
||||
.icon-default {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-points {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.points-positive {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.points-negative {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-date {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-order {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.item-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.points-rules {
|
||||
margin: 16px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.rule-item .el-icon {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.points-stats {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.current-points {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
739
src/views/ProductDetail.vue
Normal file
739
src/views/ProductDetail.vue
Normal file
@@ -0,0 +1,739 @@
|
||||
<template>
|
||||
<div class="product-detail-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">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="showCart = true"
|
||||
class="cart-btn"
|
||||
>
|
||||
<el-badge :value="cartCount" :hidden="cartCount === 0">
|
||||
<el-icon><ShoppingCart /></el-icon>
|
||||
</el-badge>
|
||||
</el-button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div v-loading="loading" class="product-content">
|
||||
<div v-if="product" class="product-detail">
|
||||
<!-- 商品图片 -->
|
||||
<div class="product-images">
|
||||
<el-carousel
|
||||
:interval="4000"
|
||||
type="card"
|
||||
height="300px"
|
||||
indicator-position="outside"
|
||||
>
|
||||
<el-carousel-item v-for="(image, index) in product.images" :key="index">
|
||||
<img :src="image" :alt="product.name" class="product-image" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<div class="product-info">
|
||||
<div class="product-header">
|
||||
<h1 class="product-title">{{ product.name }}</h1>
|
||||
<div class="product-tags">
|
||||
<el-tag
|
||||
v-for="tag in product.tags"
|
||||
:key="tag"
|
||||
size="small"
|
||||
class="product-tag"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-price">
|
||||
<div class="current-price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
<span class="price-number">{{ product.points }}</span>
|
||||
<span class="price-unit">积分</span>
|
||||
</div>
|
||||
<div v-if="product.originalPoints" class="original-price">
|
||||
原价：{{ product.originalPoints }}积分
|
||||
</div>
|
||||
<div v-if="product.discount" class="discount-info">
|
||||
<el-tag type="danger" size="small">{{ product.discount }}折优惠</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">销量</span>
|
||||
<span class="stat-value">{{ product.sales }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">库存</span>
|
||||
<span class="stat-value">{{ product.stock }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">评分</span>
|
||||
<span class="stat-value">
|
||||
<el-rate
|
||||
v-model="product.rating"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
score-template="{value}"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品描述 -->
|
||||
<div class="product-description">
|
||||
<h3>商品描述</h3>
|
||||
<p>{{ product.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 商品详情 -->
|
||||
<div class="product-details">
|
||||
<h3>商品详情</h3>
|
||||
<div class="detail-item" v-for="(value, key) in product.details" :key="key">
|
||||
<span class="detail-label">{{ key }}：</span>
|
||||
<span class="detail-value">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购买选项 -->
|
||||
<div class="purchase-options">
|
||||
<div class="quantity-selector">
|
||||
<span class="option-label">数量：</span>
|
||||
<el-input-number
|
||||
v-model="quantity"
|
||||
:min="1"
|
||||
:max="product.stock"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
size="large"
|
||||
@click="addToCart"
|
||||
:disabled="product.stock === 0"
|
||||
>
|
||||
加入购物车
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="buyNow"
|
||||
:disabled="product.stock === 0 || totalPoints > userPoints"
|
||||
>
|
||||
{{ product.stock === 0 ? '缺货' : totalPoints > userPoints ? '积分不足' : '立即兑换' }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 商品评价 -->
|
||||
<div class="product-reviews">
|
||||
<div class="reviews-header">
|
||||
<h3>用户评价</h3>
|
||||
<span class="review-count">({{ reviews.length }}条评价)</span>
|
||||
</div>
|
||||
|
||||
<div v-if="reviews.length === 0" class="no-reviews">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<p>暂无评价</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="reviews-list">
|
||||
<div v-for="review in reviews" :key="review.id" class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="reviewer-info">
|
||||
<el-avatar :size="32" :src="review.user.avatar">
|
||||
<el-icon><User /></el-icon>
|
||||
</el-avatar>
|
||||
<span class="reviewer-name">{{ review.user.name }}</span>
|
||||
</div>
|
||||
<div class="review-meta">
|
||||
<el-rate v-model="review.rating" disabled size="small" />
|
||||
<span class="review-date">{{ formatDate(review.createdAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-content">
|
||||
<p>{{ review.content }}</p>
|
||||
<div v-if="review.images" class="review-images">
|
||||
<img
|
||||
v-for="(image, index) in review.images"
|
||||
:key="index"
|
||||
:src="image"
|
||||
class="review-image"
|
||||
@click="previewImage(image)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 推荐商品 -->
|
||||
<div class="recommended-products">
|
||||
<h3>推荐商品</h3>
|
||||
<div class="recommended-grid">
|
||||
<div
|
||||
v-for="item in recommendedProducts"
|
||||
:key="item.id"
|
||||
class="recommended-item"
|
||||
@click="goToProduct(item.id)"
|
||||
>
|
||||
<img :src="item.image" :alt="item.name" />
|
||||
<div class="item-info">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<p class="item-price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
{{ item.points }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车抽屉 -->
|
||||
<el-drawer
|
||||
v-model="showCart"
|
||||
title="购物车"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
>
|
||||
<!-- 购物车内容复用Shop.vue的逻辑 -->
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ShoppingCart,
|
||||
Coin,
|
||||
ChatDotRound,
|
||||
User
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const product = ref(null)
|
||||
const quantity = ref(1)
|
||||
const reviews = ref([])
|
||||
const recommendedProducts = ref([])
|
||||
const showCart = ref(false)
|
||||
const userPoints = ref(0)
|
||||
const cartCount = ref(0)
|
||||
|
||||
// 计算属性
|
||||
const totalPoints = computed(() => {
|
||||
return product.value ? product.value.points * quantity.value : 0
|
||||
})
|
||||
|
||||
// 方法
|
||||
const getProductDetail = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const productId = route.params.id
|
||||
|
||||
const [productRes, reviewsRes, recommendedRes] = await Promise.all([
|
||||
api.get(`/products/${productId}`),
|
||||
api.get(`/products/${productId}/reviews`),
|
||||
api.get(`/products/${productId}/recommended`)
|
||||
])
|
||||
|
||||
product.value = productRes.data
|
||||
reviews.value = reviewsRes.data
|
||||
recommendedProducts.value = recommendedRes.data
|
||||
} catch (error) {
|
||||
ElMessage.error('获取商品详情失败')
|
||||
router.go(-1)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const addToCart = () => {
|
||||
// 添加到购物车逻辑
|
||||
ElMessage.success('已添加到购物车')
|
||||
cartCount.value++
|
||||
}
|
||||
|
||||
const buyNow = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要花费 ${totalPoints.value} 积分兑换 ${quantity.value} 个 ${product.value.name} 吗？`,
|
||||
'确认兑换',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
const orderData = {
|
||||
items: [{
|
||||
productId: product.value.id,
|
||||
quantity: quantity.value,
|
||||
points: product.value.points
|
||||
}],
|
||||
totalPoints: totalPoints.value
|
||||
}
|
||||
|
||||
await api.post('/orders', orderData)
|
||||
|
||||
ElMessage.success('兑换成功！')
|
||||
router.push('/orders')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('兑换失败，请重试')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const goToProduct = (productId) => {
|
||||
router.push(`/product/${productId}`)
|
||||
}
|
||||
|
||||
const previewImage = (image) => {
|
||||
// 图片预览逻辑
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
const getUserPoints = async () => {
|
||||
try {
|
||||
const response = await api.get('/user/points')
|
||||
userPoints.value = response.data.points
|
||||
} catch (error) {
|
||||
console.error('获取用户积分失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getProductDetail()
|
||||
getUserPoints()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-detail-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;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.cart-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.product-images {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-bottom: 8px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.product-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.product-tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.current-price .el-icon {
|
||||
color: #ff6b35;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.price-number {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #ff6b35;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 16px;
|
||||
color: #ff6b35;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
text-decoration: line-through;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.discount-info {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-description,
|
||||
.product-details {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-description h3,
|
||||
.product-details h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-description p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 80px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.purchase-options {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.quantity-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-top: 1px solid #eee;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.action-buttons .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-reviews {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-bottom: 8px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.reviews-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.reviews-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.review-count {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.no-reviews {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.reviews-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.review-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reviewer-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.reviewer-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.review-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.review-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.review-content p {
|
||||
margin: 0 0 8px 0;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.review-images {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.review-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recommended-products {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.recommended-products h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.recommended-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.recommended-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.recommended-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.recommended-item img {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.recommended-item .item-info {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.recommended-item h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.recommended-item .item-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.product-stats {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.recommended-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.action-buttons {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.recommended-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1180
src/views/Profile.vue
Normal file
1180
src/views/Profile.vue
Normal file
File diff suppressed because it is too large
Load Diff
738
src/views/Register.vue
Normal file
738
src/views/Register.vue
Normal file
@@ -0,0 +1,738 @@
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<div class="register-container">
|
||||
<div class="register-card">
|
||||
<div class="register-header">
|
||||
<h2>用户注册</h2>
|
||||
<p>创建你的账号，开始使用前端H5系统</p>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="registerFormRef"
|
||||
:model="registerForm"
|
||||
:rules="registerRules"
|
||||
class="register-form"
|
||||
@submit.prevent="handleRegister"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="registerForm.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
:prefix-icon="User"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="registerForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
size="large"
|
||||
:prefix-icon="Message"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="smsCode">
|
||||
<div class="sms-code-group">
|
||||
<el-input
|
||||
v-model="registerForm.smsCode"
|
||||
placeholder="请输入短信验证码"
|
||||
size="large"
|
||||
:prefix-icon="ChatDotRound"
|
||||
clearable
|
||||
class="sms-input"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:disabled="!canSendSMS || smsCountdown > 0"
|
||||
:loading="sendingSMS"
|
||||
@click="sendSMSCode"
|
||||
class="sms-button"
|
||||
>
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}s后重发` : '发送验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="registrationCode">
|
||||
<el-input
|
||||
v-model="registerForm.registrationCode"
|
||||
placeholder="请输入激活码"
|
||||
size="large"
|
||||
:prefix-icon="Ticket"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="registerForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
:prefix-icon="Lock"
|
||||
show-password
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="registerForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请确认密码"
|
||||
size="large"
|
||||
:prefix-icon="Lock"
|
||||
show-password
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="captcha">
|
||||
<Captcha
|
||||
ref="captchaRef"
|
||||
v-model="registerForm.captcha"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="agreement">
|
||||
<el-checkbox v-model="registerForm.agreement">
|
||||
我已阅读并同意
|
||||
<el-link type="primary" @click="showAgreement">
|
||||
《用户协议》
|
||||
</el-link>
|
||||
和
|
||||
<el-link type="primary" @click="showPrivacy">
|
||||
《隐私政策》
|
||||
</el-link>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="register-button"
|
||||
:loading="userStore.loading"
|
||||
@click="handleRegister"
|
||||
>
|
||||
{{ userStore.loading ? '注册中...' : '立即注册' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="register-footer">
|
||||
<p>
|
||||
已有账号？
|
||||
<el-link type="primary" @click="$router.push('/login')">
|
||||
立即登录
|
||||
</el-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-preview">
|
||||
<el-divider>注册后你可以</el-divider>
|
||||
<div class="features-list">
|
||||
<div class="feature-item">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>个性化用户中心</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<el-icon><CreditCard /></el-icon>
|
||||
<span>积分商城购物</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<span>积分转账功能</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
<div class="background-decoration">
|
||||
<div class="decoration-shape shape-1"></div>
|
||||
<div class="decoration-shape shape-2"></div>
|
||||
<div class="decoration-shape shape-3"></div>
|
||||
<div class="decoration-shape shape-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Ticket } from '@element-plus/icons-vue'
|
||||
import Captcha from '@/components/Captcha.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 表单引用
|
||||
const registerFormRef = ref()
|
||||
const captchaRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const registerForm = reactive({
|
||||
username: '',
|
||||
phone: '',
|
||||
registrationCode: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
captcha: '',
|
||||
smsCode: '',
|
||||
agreement: false
|
||||
})
|
||||
|
||||
// 短信验证码相关状态
|
||||
const sendingSMS = ref(false)
|
||||
const smsCountdown = ref(0)
|
||||
const canSendSMS = computed(() => {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/
|
||||
return phoneRegex.test(registerForm.phone)
|
||||
})
|
||||
|
||||
// 自定义验证函数
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入用户名'))
|
||||
} else if (value.length < 3) {
|
||||
callback(new Error('用户名至少3个字符'))
|
||||
} else if (value.length > 20) {
|
||||
callback(new Error('用户名不能超过20个字符'))
|
||||
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
|
||||
callback(new Error('用户名只能包含字母、数字、下划线和中文'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入密码'))
|
||||
} else if (value.length < 6) {
|
||||
callback(new Error('密码至少6个字符'))
|
||||
} else if (value.length > 20) {
|
||||
callback(new Error('密码不能超过20个字符'))
|
||||
} else if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(value)) {
|
||||
callback(new Error('密码必须包含字母和数字'))
|
||||
} else {
|
||||
// 如果确认密码已输入，重新验证确认密码
|
||||
if (registerForm.confirmPassword) {
|
||||
registerFormRef.value?.validateField('confirmPassword')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const validateConfirmPassword = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请确认密码'))
|
||||
} else if (value !== registerForm.password) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const validateAgreement = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请阅读并同意用户协议和隐私政策'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证规则
|
||||
const registerRules = {
|
||||
username: [{ validator: validateUsername, trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
||||
],
|
||||
registrationCode: [
|
||||
{ required: true, message: '请输入激活码', trigger: 'blur' },
|
||||
{ min: 6, message: '激活码长度不能少于6位', trigger: 'blur' }
|
||||
],
|
||||
smsCode: [
|
||||
{ required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||||
{ pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' }
|
||||
],
|
||||
|
||||
password: [{ validator: validatePassword, trigger: 'blur' }],
|
||||
confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
|
||||
captcha: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
{ min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' }
|
||||
],
|
||||
agreement: [{ validator: validateAgreement, trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 发送短信验证码
|
||||
const sendSMSCode = async () => {
|
||||
if (!canSendSMS.value || sendingSMS.value || smsCountdown.value > 0) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
sendingSMS.value = true
|
||||
|
||||
const response = await fetch('/api/sms/send', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
phone: registerForm.phone
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
ElMessage.success('验证码发送成功，请查收短信')
|
||||
// 开始倒计时
|
||||
startCountdown()
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送失败，请重试')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('发送短信验证码失败:', error)
|
||||
ElMessage.error('发送失败，请检查网络连接')
|
||||
} finally {
|
||||
sendingSMS.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
smsCountdown.value = 60
|
||||
const timer = setInterval(() => {
|
||||
smsCountdown.value--
|
||||
if (smsCountdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 处理注册
|
||||
const handleRegister = async () => {
|
||||
if (!registerFormRef.value || !captchaRef.value) return
|
||||
|
||||
try {
|
||||
// 先验证表单
|
||||
const valid = await registerFormRef.value.validate()
|
||||
if (!valid) return
|
||||
|
||||
// 验证验证码
|
||||
const captchaValid = await captchaRef.value.verifyCaptcha(registerForm.captcha)
|
||||
if (!captchaValid) {
|
||||
registerForm.captcha = ''
|
||||
return
|
||||
}
|
||||
|
||||
// 获取验证码信息
|
||||
const captchaInfo = captchaRef.value.getCaptchaInfo()
|
||||
|
||||
// 提交注册请求（包含验证码信息）
|
||||
const registerData = {
|
||||
username: registerForm.username,
|
||||
phone: registerForm.phone,
|
||||
registrationCode: registerForm.registrationCode,
|
||||
password: registerForm.password,
|
||||
smsCode: registerForm.smsCode,
|
||||
captchaId: captchaInfo.captchaId,
|
||||
captchaText: captchaInfo.captchaText
|
||||
}
|
||||
|
||||
const result = await userStore.register(registerData)
|
||||
|
||||
if (result.success) {
|
||||
ElMessage.success('注册成功！请登录')
|
||||
router.push('/login')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('注册失败:', error)
|
||||
// 注册失败后刷新验证码
|
||||
if (captchaRef.value) {
|
||||
await captchaRef.value.refreshCaptcha()
|
||||
}
|
||||
registerForm.captcha = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 显示用户协议
|
||||
const showAgreement = () => {
|
||||
ElMessageBox.alert(
|
||||
`<div style="text-align: left; line-height: 1.6;">
|
||||
<h3>用户协议</h3>
|
||||
<p>1. 用户应当遵守法律法规，不得发布违法违规内容。</p>
|
||||
<p>2. 用户对自己发布的内容承担全部责任。</p>
|
||||
<p>3. 平台有权对违规内容进行删除或限制。</p>
|
||||
<p>4. 用户应当保护好自己的账号安全。</p>
|
||||
<p>5. 平台保留修改本协议的权利。</p>
|
||||
</div>`,
|
||||
'用户协议',
|
||||
{
|
||||
confirmButtonText: '我已了解',
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'agreement-dialog'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 显示隐私政策
|
||||
const showPrivacy = () => {
|
||||
ElMessageBox.alert(
|
||||
`<div style="text-align: left; line-height: 1.6;">
|
||||
<h3>隐私政策</h3>
|
||||
<p>1. 我们重视用户隐私保护。</p>
|
||||
<p>2. 我们只收集必要的用户信息。</p>
|
||||
<p>3. 用户信息仅用于提供服务。</p>
|
||||
<p>4. 我们不会向第三方泄露用户信息。</p>
|
||||
<p>5. 用户有权查看、修改或删除个人信息。</p>
|
||||
</div>`,
|
||||
'隐私政策',
|
||||
{
|
||||
confirmButtonText: '我已了解',
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'privacy-dialog'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 图片上传成功处理
|
||||
const handleUploadSuccess = (response, field) => {
|
||||
ElMessage.success('图片上传成功')
|
||||
}
|
||||
|
||||
// 图片上传失败处理
|
||||
const handleUploadError = (error) => {
|
||||
ElMessage.error('图片上传失败，请重试')
|
||||
}
|
||||
|
||||
// 组件挂载时的处理
|
||||
onMounted(() => {
|
||||
// 如果已经登录，直接跳转
|
||||
if (userStore.isAuthenticated) {
|
||||
const redirectPath = route.query.redirect || '/'
|
||||
router.push(redirectPath)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
padding: 40px 30px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.register-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.register-header p {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.register-footer {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.register-footer p {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.document-upload-section {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.document-upload-section .el-divider {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.document-upload-section .el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.document-upload-section .el-form-item .el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.features-preview {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.feature-item .el-icon {
|
||||
color: #409eff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.upload-preview {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.upload-preview img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.upload-demo {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.background-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.decoration-shape {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
top: 15%;
|
||||
left: 15%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
top: 70%;
|
||||
right: 20%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
bottom: 25%;
|
||||
left: 25%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
top: 40%;
|
||||
right: 10%;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(180deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.register-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Element Plus 组件样式覆盖 */
|
||||
:deep(.el-input__wrapper) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 输入框聚焦效果 */
|
||||
:deep(.el-input__wrapper:hover),
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.register-button.is-loading {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.register-card {
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 错误状态样式 */
|
||||
:deep(.el-form-item.is-error .el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px #f56c6c inset;
|
||||
}
|
||||
|
||||
/* 成功状态样式 */
|
||||
:deep(.el-form-item.is-success .el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px #67c23a inset;
|
||||
}
|
||||
|
||||
/* 协议对话框样式 */
|
||||
:deep(.agreement-dialog),
|
||||
:deep(.privacy-dialog) {
|
||||
.el-message-box__content {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 密码强度指示器 */
|
||||
.password-strength {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.strength-weak {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.strength-medium {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.strength-strong {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
/* 短信验证码样式 */
|
||||
.sms-code-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sms-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sms-button {
|
||||
flex-shrink: 0;
|
||||
min-width: 120px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.sms-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
774
src/views/Shop.vue
Normal file
774
src/views/Shop.vue
Normal file
@@ -0,0 +1,774 @@
|
||||
<template>
|
||||
<div class="shop-page">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">积分商城</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.push('/points')"
|
||||
class="points-btn"
|
||||
>
|
||||
<el-icon><Coin /></el-icon>
|
||||
{{ userPoints }}
|
||||
</el-button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-section">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索商品"
|
||||
class="search-input"
|
||||
@input="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<!-- 分类筛选 -->
|
||||
<div class="category-section">
|
||||
<el-scrollbar>
|
||||
<div class="category-list">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
:class="['category-item', { active: selectedCategory === category.id }]"
|
||||
@click="selectCategory(category.id)"
|
||||
>
|
||||
<el-icon>{{ category.icon }}</el-icon>
|
||||
<span>{{ category.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<div class="products-section">
|
||||
<div class="section-header">
|
||||
<h3>热门商品</h3>
|
||||
<el-dropdown @command="handleSort">
|
||||
<span class="sort-btn">
|
||||
{{ sortText }}
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="default">默认排序</el-dropdown-item>
|
||||
<el-dropdown-item command="price_asc">价格从低到高</el-dropdown-item>
|
||||
<el-dropdown-item command="price_desc">价格从高到低</el-dropdown-item>
|
||||
<el-dropdown-item command="sales">销量优先</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div v-loading="loading" class="products-grid">
|
||||
<div
|
||||
v-for="product in filteredProducts"
|
||||
:key="product.id"
|
||||
class="product-card"
|
||||
@click="goToProduct(product.id)"
|
||||
>
|
||||
<div class="product-image">
|
||||
<img :src="product.image" :alt="product.name" />
|
||||
<div v-if="product.discount" class="discount-badge">
|
||||
{{ product.discount }}折
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h4 class="product-name">{{ product.name }}</h4>
|
||||
<p class="product-desc">{{ truncateText(product.description, 50) }}</p>
|
||||
<div class="product-price">
|
||||
<span class="current-price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
{{ product.points }}
|
||||
</span>
|
||||
<span v-if="product.originalPoints" class="original-price">
|
||||
{{ product.originalPoints }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-stats">
|
||||
<span class="sales">已售 {{ product.sales }}</span>
|
||||
<span class="stock">库存 {{ product.stock }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.stop="addToCart(product)"
|
||||
:disabled="product.stock === 0"
|
||||
>
|
||||
{{ product.stock === 0 ? '缺货' : '兑换' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!loading && filteredProducts.length === 0" class="empty-state">
|
||||
<el-icon size="60"><Box /></el-icon>
|
||||
<p>暂无商品</p>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<div v-if="hasMore" class="load-more">
|
||||
<el-button @click="loadMore" :loading="loadingMore">
|
||||
加载更多
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车悬浮按钮 -->
|
||||
<div class="cart-fab" @click="showCart = true">
|
||||
<el-badge :value="cartCount" :hidden="cartCount === 0">
|
||||
<el-icon size="24"><ShoppingCart /></el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<!-- 购物车抽屉 -->
|
||||
<el-drawer
|
||||
v-model="showCart"
|
||||
title="购物车"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
>
|
||||
<div class="cart-content">
|
||||
<div v-if="cartItems.length === 0" class="empty-cart">
|
||||
<el-icon size="60"><ShoppingCart /></el-icon>
|
||||
<p>购物车是空的</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="item in cartItems" :key="item.id" class="cart-item">
|
||||
<img :src="item.image" :alt="item.name" class="item-image" />
|
||||
<div class="item-info">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<p class="item-price">
|
||||
<el-icon><Coin /></el-icon>
|
||||
{{ item.points }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<el-input-number
|
||||
v-model="item.quantity"
|
||||
:min="1"
|
||||
:max="item.stock"
|
||||
size="small"
|
||||
@change="updateCartItem(item)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="removeFromCart(item.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-footer">
|
||||
<div class="total-points">
|
||||
总计：<el-icon><Coin /></el-icon>{{ totalPoints }}
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="checkout"
|
||||
:disabled="totalPoints > userPoints"
|
||||
>
|
||||
{{ totalPoints > userPoints ? '积分不足' : '立即兑换' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Coin,
|
||||
Search,
|
||||
ArrowDown,
|
||||
Box,
|
||||
ShoppingCart
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
import { debounce } from 'lodash-es'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
const selectedCategory = ref('all')
|
||||
const sortBy = ref('default')
|
||||
const products = ref([])
|
||||
const page = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const showCart = ref(false)
|
||||
const cartItems = ref([])
|
||||
|
||||
// 用户积分
|
||||
const userPoints = ref(0)
|
||||
|
||||
// 分类数据
|
||||
const categories = ref([
|
||||
{ id: 'all', name: '全部', icon: '🛍️' },
|
||||
{ id: 'electronics', name: '数码', icon: '📱' },
|
||||
{ id: 'books', name: '图书', icon: '📚' },
|
||||
{ id: 'lifestyle', name: '生活', icon: '🏠' },
|
||||
{ id: 'food', name: '美食', icon: '🍔' },
|
||||
{ id: 'sports', name: '运动', icon: '⚽' },
|
||||
{ id: 'beauty', name: '美妆', icon: '💄' }
|
||||
])
|
||||
|
||||
// 计算属性
|
||||
const filteredProducts = computed(() => {
|
||||
let result = products.value
|
||||
|
||||
// 分类筛选
|
||||
if (selectedCategory.value !== 'all') {
|
||||
result = result.filter(p => p.category === selectedCategory.value)
|
||||
}
|
||||
|
||||
// 搜索筛选
|
||||
if (searchKeyword.value) {
|
||||
result = result.filter(p =>
|
||||
p.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
|
||||
p.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
// 排序
|
||||
switch (sortBy.value) {
|
||||
case 'price_asc':
|
||||
result.sort((a, b) => a.points - b.points)
|
||||
break
|
||||
case 'price_desc':
|
||||
result.sort((a, b) => b.points - a.points)
|
||||
break
|
||||
case 'sales':
|
||||
result.sort((a, b) => b.sales - a.sales)
|
||||
break
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
const sortText = computed(() => {
|
||||
const sortMap = {
|
||||
default: '默认排序',
|
||||
price_asc: '价格从低到高',
|
||||
price_desc: '价格从高到低',
|
||||
sales: '销量优先'
|
||||
}
|
||||
return sortMap[sortBy.value]
|
||||
})
|
||||
|
||||
const cartCount = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
|
||||
})
|
||||
|
||||
const totalPoints = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + (item.points * item.quantity), 0)
|
||||
})
|
||||
|
||||
// 方法
|
||||
const selectCategory = (categoryId) => {
|
||||
selectedCategory.value = categoryId
|
||||
}
|
||||
|
||||
const handleSort = (command) => {
|
||||
sortBy.value = command
|
||||
}
|
||||
|
||||
const handleSearch = debounce(() => {
|
||||
// 搜索逻辑已在计算属性中处理
|
||||
}, 300)
|
||||
|
||||
const goToProduct = (productId) => {
|
||||
router.push(`/product/${productId}`)
|
||||
}
|
||||
|
||||
const addToCart = (product) => {
|
||||
const existingItem = cartItems.value.find(item => item.id === product.id)
|
||||
|
||||
if (existingItem) {
|
||||
if (existingItem.quantity < product.stock) {
|
||||
existingItem.quantity++
|
||||
ElMessage.success('已添加到购物车')
|
||||
} else {
|
||||
ElMessage.warning('库存不足')
|
||||
}
|
||||
} else {
|
||||
cartItems.value.push({
|
||||
...product,
|
||||
quantity: 1
|
||||
})
|
||||
ElMessage.success('已添加到购物车')
|
||||
}
|
||||
}
|
||||
|
||||
const updateCartItem = (item) => {
|
||||
// 数量更新逻辑
|
||||
}
|
||||
|
||||
const removeFromCart = (productId) => {
|
||||
const index = cartItems.value.findIndex(item => item.id === productId)
|
||||
if (index > -1) {
|
||||
cartItems.value.splice(index, 1)
|
||||
ElMessage.success('已从购物车移除')
|
||||
}
|
||||
}
|
||||
|
||||
const checkout = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要花费 ${totalPoints.value} 积分兑换这些商品吗？`,
|
||||
'确认兑换',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
const orderData = {
|
||||
items: cartItems.value.map(item => ({
|
||||
productId: item.id,
|
||||
quantity: item.quantity,
|
||||
points: item.points
|
||||
})),
|
||||
totalPoints: totalPoints.value
|
||||
}
|
||||
|
||||
await api.post('/orders', orderData)
|
||||
|
||||
// 清空购物车
|
||||
cartItems.value = []
|
||||
showCart.value = false
|
||||
|
||||
// 更新用户积分
|
||||
userPoints.value -= totalPoints.value
|
||||
|
||||
ElMessage.success('兑换成功！')
|
||||
router.push('/orders')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('兑换失败，请重试')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getProducts = async (isLoadMore = false) => {
|
||||
try {
|
||||
if (!isLoadMore) {
|
||||
loading.value = true
|
||||
page.value = 1
|
||||
} else {
|
||||
loadingMore.value = true
|
||||
}
|
||||
|
||||
const response = await api.get('/products', {
|
||||
params: {
|
||||
page: page.value,
|
||||
limit: 20,
|
||||
category: selectedCategory.value === 'all' ? '' : selectedCategory.value,
|
||||
keyword: searchKeyword.value,
|
||||
sort: sortBy.value
|
||||
}
|
||||
})
|
||||
|
||||
if (isLoadMore) {
|
||||
products.value.push(...response.data.products)
|
||||
} else {
|
||||
products.value = response.data.products
|
||||
}
|
||||
|
||||
hasMore.value = response.data.hasMore
|
||||
page.value++
|
||||
} catch (error) {
|
||||
ElMessage.error('获取商品列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
getProducts(true)
|
||||
}
|
||||
|
||||
const getUserPoints = async () => {
|
||||
try {
|
||||
const response = await api.get('/user/points')
|
||||
userPoints.value = response.data.points
|
||||
} catch (error) {
|
||||
console.error('获取用户积分失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const truncateText = (text, maxLength) => {
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getProducts()
|
||||
getUserPoints()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shop-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;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.points-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.category-section {
|
||||
background: white;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: #ff4757;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.product-actions .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #409eff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.empty-cart {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-info h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cart-footer {
|
||||
margin-top: auto;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ff6b35;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.products-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
645
src/views/TaskCenter.vue
Normal file
645
src/views/TaskCenter.vue
Normal file
@@ -0,0 +1,645 @@
|
||||
<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>
|
||||
1433
src/views/Transfers.vue
Normal file
1433
src/views/Transfers.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user