删除了多余文件，完善了/mypoints-history
This commit is contained in:
@@ -19,8 +19,7 @@ const routesWithBottomNav = [
|
|||||||
'/',
|
'/',
|
||||||
'/transfers',
|
'/transfers',
|
||||||
'/matching',
|
'/matching',
|
||||||
'/points-history',
|
'/mypoints-history',
|
||||||
'/profile',
|
|
||||||
'/shop',
|
'/shop',
|
||||||
'/orders',
|
'/orders',
|
||||||
'/mainpage',
|
'/mainpage',
|
||||||
|
|||||||
@@ -104,15 +104,6 @@ const routes = [
|
|||||||
title: '商品详情'
|
title: '商品详情'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/login',
|
|
||||||
name: 'Login',
|
|
||||||
component: () => import('@/views/Login.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '登录',
|
|
||||||
hideForAuth: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/register',
|
path: '/register',
|
||||||
name: 'Register',
|
name: 'Register',
|
||||||
@@ -131,15 +122,6 @@ const routes = [
|
|||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/profile',
|
|
||||||
name: 'Profile',
|
|
||||||
component: () => import('@/views/Profile.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '个人中心',
|
|
||||||
requiresAuth: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/orders',
|
path: '/orders',
|
||||||
name: 'Orders',
|
name: 'Orders',
|
||||||
@@ -149,16 +131,6 @@ const routes = [
|
|||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/points-history',
|
|
||||||
name: 'PointsHistory',
|
|
||||||
component: () => import('@/views/PointsHistory.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '积分记录',
|
|
||||||
requiresAuth: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/task-center',
|
path: '/task-center',
|
||||||
name: 'TaskCenter',
|
name: 'TaskCenter',
|
||||||
|
|||||||
@@ -1,502 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="login-page">
|
|
||||||
<div class="login-container">
|
|
||||||
<div class="login-card">
|
|
||||||
<div class="login-header">
|
|
||||||
<h2>用户登录</h2>
|
|
||||||
<p>欢迎回到炬融圈</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="icp-info">
|
|
||||||
<div class="icp-item">
|
|
||||||
<svg class="icp-icon" viewBox="0 0 1024 1024" width="16" height="16">
|
|
||||||
<path d="M512 85.333333c-23.466667 0-42.666667 19.2-42.666667 42.666667v85.333333c0 23.466667 19.2 42.666667 42.666667 42.666667s42.666667-19.2 42.666667-42.666667V128c0-23.466667-19.2-42.666667-42.666667-42.666667z" fill="#909399"/>
|
|
||||||
<path d="M512 256c-141.226667 0-256 114.773333-256 256 0 70.613333 28.586667 134.4 74.666667 180.48L512 874.666667l181.333333-182.186667C739.413333 646.4 768 582.613333 768 512c0-141.226667-114.773333-256-256-256z m0 341.333333c-47.146667 0-85.333333-38.186667-85.333333-85.333333s38.186667-85.333333 85.333333-85.333333 85.333333 38.186667 85.333333 85.333333-38.186667 85.333333-85.333333 85.333333z" fill="#909399"/>
|
|
||||||
<path d="M170.666667 298.666667c-11.733333-20.48-37.546667-27.306667-58.026667-15.573334-20.48 11.733333-27.306667 37.546667-15.573333 58.026667l42.666666 74.24c11.733333 20.48 37.546667 27.306667 58.026667 15.573333 20.48-11.733333 27.306667-37.546667 15.573333-58.026666l-42.666666-74.24z" fill="#909399"/>
|
|
||||||
<path d="M853.333333 298.666667l-42.666666 74.24c-11.733333 20.48-4.906667 46.293333 15.573333 58.026666 20.48 11.733333 46.293333 4.906667 58.026667-15.573333l42.666666-74.24c11.733333-20.48 4.906667-46.293333-15.573333-58.026667-20.48-11.733333-46.293333-4.906667-58.026667 15.573334z" fill="#909399"/>
|
|
||||||
</svg>
|
|
||||||
<a href="https://beian.miit.gov.cn/" target="_blank" class="icp-link">
|
|
||||||
浙ICP备2025186895号
|
|
||||||
</a>
|
|
||||||
</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
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('开始调用登录接口');
|
|
||||||
try {
|
|
||||||
const result = await userStore.login(loginData)
|
|
||||||
console.log('登录接口调用完成');
|
|
||||||
console.log(result,'result');
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
// 登录成功，跳转到目标页面或转账管理
|
|
||||||
const redirectPath = route.query.redirect || '/transfers'
|
|
||||||
router.push(redirectPath)
|
|
||||||
} else if (result.needPayment) {
|
|
||||||
// 用户需要支付激活，直接跳转到支付页面
|
|
||||||
ElMessage.info('账户尚未激活，正在跳转到支付页面...')
|
|
||||||
router.push({
|
|
||||||
path: '/payment',
|
|
||||||
query: {
|
|
||||||
userId: result.userId,
|
|
||||||
from: 'login'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch (loginError) {
|
|
||||||
console.error('登录调用异常:', loginError)
|
|
||||||
// 如果是支付相关的错误，也要处理
|
|
||||||
if (loginError.needPayment) {
|
|
||||||
ElMessage.info('账户尚未激活，正在跳转到支付页面...')
|
|
||||||
router.push({
|
|
||||||
path: '/payment',
|
|
||||||
query: {
|
|
||||||
userId: loginError.userId,
|
|
||||||
from: 'login'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('登录失败:', error)
|
|
||||||
// 登录失败后刷新验证码
|
|
||||||
if (captchaRef.value) {
|
|
||||||
await captchaRef.value.refreshCaptcha()
|
|
||||||
}
|
|
||||||
loginForm.captcha = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 忘记密码
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icp-info {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-top: 1px solid rgba(224, 224, 230, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icp-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icp-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icp-link {
|
|
||||||
color: #909399;
|
|
||||||
font-size: 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icp-link:hover {
|
|
||||||
color: #409eff;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icp-info {
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icp-link {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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>
|
|
||||||
@@ -272,6 +272,29 @@ const getPointsText = (type, points) => {
|
|||||||
return isNegative ? `-${points}` : `+${points}`
|
return isNegative ? `-${points}` : `+${points}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getRecordTitle = (type, description) => {
|
||||||
|
const titleMap = {
|
||||||
|
earn: '积分获得',
|
||||||
|
spend: '积分消费',
|
||||||
|
task: '任务奖励',
|
||||||
|
exchange: '商品兑换',
|
||||||
|
review: '评价奖励',
|
||||||
|
share: '分享奖励',
|
||||||
|
refund: '积分退还'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果有特定的描述，可以根据描述生成更具体的标题
|
||||||
|
if (description.includes('订单支付')) {
|
||||||
|
return '订单支付'
|
||||||
|
} else if (description.includes('转账确认收款')) {
|
||||||
|
return '转账收款奖励'
|
||||||
|
} else if (description.includes('订单取消')) {
|
||||||
|
return '订单取消退款'
|
||||||
|
}
|
||||||
|
|
||||||
|
return titleMap[type] || '积分变动'
|
||||||
|
}
|
||||||
|
|
||||||
const formatDateTime = (date) => {
|
const formatDateTime = (date) => {
|
||||||
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
|
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
|
||||||
}
|
}
|
||||||
@@ -314,7 +337,18 @@ const getHistory = async (isLoadMore = false) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const response = await api.get('/user/points/history', { params })
|
const response = await api.get('/user/points/history', { params })
|
||||||
const historyData = response.data.history || []
|
const records = response.data.data?.records || []
|
||||||
|
|
||||||
|
// 转换数据格式以匹配模板需求
|
||||||
|
const historyData = records.map(record => ({
|
||||||
|
id: record.id,
|
||||||
|
type: record.type,
|
||||||
|
points: record.amount,
|
||||||
|
title: getRecordTitle(record.type, record.description),
|
||||||
|
description: record.description,
|
||||||
|
createdAt: record.created_at,
|
||||||
|
orderId: record.order_id
|
||||||
|
}))
|
||||||
|
|
||||||
if (isLoadMore) {
|
if (isLoadMore) {
|
||||||
history.value.push(...historyData)
|
history.value.push(...historyData)
|
||||||
@@ -322,8 +356,15 @@ const getHistory = async (isLoadMore = false) => {
|
|||||||
history.value = historyData
|
history.value = historyData
|
||||||
}
|
}
|
||||||
|
|
||||||
hasMore.value = response.data.hasMore || false
|
// 使用pagination对象判断是否还有更多数据
|
||||||
page.value++
|
const pagination = response.data.data?.pagination
|
||||||
|
if (pagination) {
|
||||||
|
hasMore.value = pagination.page < pagination.totalPages
|
||||||
|
page.value = pagination.page + 1
|
||||||
|
} else {
|
||||||
|
hasMore.value = false
|
||||||
|
page.value++
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取积分记录失败:', error)
|
console.error('获取积分记录失败:', error)
|
||||||
ElMessage.error('获取积分记录失败')
|
ElMessage.error('获取积分记录失败')
|
||||||
@@ -585,6 +626,7 @@ onMounted(() => {
|
|||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
transition: var(--transition);
|
transition: var(--transition);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item:hover {
|
.history-item:hover {
|
||||||
|
|||||||
@@ -539,9 +539,10 @@ const shouldShowPaymentMethod = (method) => {
|
|||||||
// 当用户积分足够支付时显示积分支付选项
|
// 当用户积分足够支付时显示积分支付选项
|
||||||
return totalPointsPrice > 0 && userBalance.value.points >= totalPointsPrice
|
return totalPointsPrice > 0 && userBalance.value.points >= totalPointsPrice
|
||||||
case 'mixed':
|
case 'mixed':
|
||||||
// 当用户积分不够但积分+融豆换算足够时显示混合支付选项
|
// 当用户积分不够但积分+融豆换算足够时显示混合支付选项，且用户积分必须大于等于10000
|
||||||
const pointsNotEnough = totalPointsPrice > 0 && userBalance.value.points < totalPointsPrice
|
const pointsNotEnough = totalPointsPrice > 0 && userBalance.value.points < totalPointsPrice
|
||||||
return pointsNotEnough && isPaymentMethodAvailable('mixed')
|
const hasEnoughPoints = userBalance.value.points >= 10000
|
||||||
|
return pointsNotEnough && hasEnoughPoints && isPaymentMethodAvailable('mixed')
|
||||||
default:
|
default:
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,725 +0,0 @@
|
|||||||
<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>1</span>
|
|
||||||
</div>
|
|
||||||
<div class="rule-item">
|
|
||||||
<el-icon><Calendar /></el-icon>
|
|
||||||
<span>2</span>
|
|
||||||
</div>
|
|
||||||
<div class="rule-item">
|
|
||||||
<el-icon><Share /></el-icon>
|
|
||||||
<span>3</span>
|
|
||||||
</div>
|
|
||||||
<div class="rule-item">
|
|
||||||
<el-icon><Star /></el-icon>
|
|
||||||
<span>4</span>
|
|
||||||
</div>
|
|
||||||
<div class="rule-item">
|
|
||||||
<el-icon><Trophy /></el-icon>
|
|
||||||
<span>5</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 dayjs from 'dayjs'
|
|
||||||
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 dayjs(date).format('YYYY-MM-DD HH:mm:ss')
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user