mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-22 11:04:26 +08:00
整合登录注册页面
This commit is contained in:
GeekMaster
167
web/src/views/Login.vue
Normal file
167
web/src/views/Login.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1 class="login-title">欢迎登录</h1>
|
||||
<p class="login-subtitle">登录您的账户以继续使用服务</p>
|
||||
</div>
|
||||
|
||||
<div class="login-content">
|
||||
<login-dialog
|
||||
:show="true"
|
||||
@hide="handleLoginHide"
|
||||
@success="handleLoginSuccess"
|
||||
ref="loginDialogRef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LoginDialog from '@/components/LoginDialog.vue'
|
||||
import { getCurrentDeviceRedirectPath } from '@/utils/device'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const loginDialogRef = ref(null)
|
||||
|
||||
// 处理登录弹窗隐藏
|
||||
const handleLoginHide = () => {
|
||||
const redirectPath = getCurrentDeviceRedirectPath()
|
||||
router.push(redirectPath)
|
||||
}
|
||||
|
||||
// 处理登录成功
|
||||
const handleLoginSuccess = () => {
|
||||
const redirectPath = getCurrentDeviceRedirectPath()
|
||||
router.push(redirectPath)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 确保默认显示登录状态
|
||||
if (loginDialogRef.value) {
|
||||
loginDialogRef.value.login = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
|
||||
.login-card {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.login-header {
|
||||
background: linear-gradient(135deg, var(--el-color-primary), #8b5cf6);
|
||||
color: white;
|
||||
padding: 40px 30px;
|
||||
text-align: center;
|
||||
|
||||
.login-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-content {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深色主题适配
|
||||
:deep(.van-theme-dark) {
|
||||
.login-page {
|
||||
.login-card {
|
||||
background: var(--el-bg-color-overlay);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.login-page {
|
||||
padding: 16px;
|
||||
background: var(--van-background);
|
||||
|
||||
.login-container {
|
||||
max-width: 100%;
|
||||
|
||||
.login-card {
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.login-header {
|
||||
padding: 30px 20px;
|
||||
background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-content {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 小屏幕移动端优化
|
||||
@media (max-width: 375px) {
|
||||
.login-page {
|
||||
padding: 12px;
|
||||
|
||||
.login-container {
|
||||
.login-card {
|
||||
.login-header {
|
||||
padding: 24px 16px;
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,11 +19,6 @@
|
||||
<i class="iconfont icon-mobile"></i> 绑定手机
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-button class="profile-btn third" @click="showThirdLoginDialog = true">
|
||||
<i class="iconfont icon-login"></i> 第三方登录
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-button class="profile-btn password" @click="showPasswordDialog = true">
|
||||
<i class="iconfont icon-password"></i> 修改密码
|
||||
@@ -40,11 +35,11 @@
|
||||
<div class="profile-bg"></div>
|
||||
|
||||
<div class="product-box">
|
||||
<div class="info" v-if="orderPayInfoText !== ''">
|
||||
<!-- <div class="info" v-if="orderPayInfoText !== ''">
|
||||
<el-alert type="success" show-icon :closable="false" effect="dark">
|
||||
<strong>说明:</strong> {{ vipInfoText }}
|
||||
</el-alert>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<el-row v-if="list.length > 0" :gutter="20" class="list-box">
|
||||
<el-col v-for="item in list" :key="item" :span="6">
|
||||
@@ -124,18 +119,39 @@
|
||||
:show="showPasswordDialog"
|
||||
@hide="showPasswordDialog = false"
|
||||
/>
|
||||
<bind-mobile
|
||||
v-if="isLogin"
|
||||
:show="showBindMobileDialog"
|
||||
@hide="showBindMobileDialog = false"
|
||||
/>
|
||||
<bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false" />
|
||||
<third-login
|
||||
v-if="isLogin"
|
||||
:show="showThirdLoginDialog"
|
||||
@hide="showThirdLoginDialog = false"
|
||||
/>
|
||||
<redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback" />
|
||||
|
||||
<!-- 绑定手机弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showBindMobileDialog"
|
||||
title="绑定手机"
|
||||
width="400px"
|
||||
:close-on-click-modal="true"
|
||||
@close="showBindMobileDialog = false"
|
||||
>
|
||||
<bind-mobile @hide="showBindMobileDialog = false" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定邮箱弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showBindEmailDialog"
|
||||
title="绑定邮箱"
|
||||
width="400px"
|
||||
:close-on-click-modal="true"
|
||||
@close="showBindEmailDialog = false"
|
||||
>
|
||||
<bind-email @hide="showBindEmailDialog = false" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 卡密兑换弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showRedeemVerifyDialog"
|
||||
title="卡密兑换"
|
||||
width="450px"
|
||||
:close-on-click-modal="true"
|
||||
@close="showRedeemVerifyDialog = false"
|
||||
>
|
||||
<redeem-verify @hide="redeemCallback" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
@@ -166,7 +182,6 @@ import BindEmail from '@/components/BindEmail.vue'
|
||||
import BindMobile from '@/components/BindMobile.vue'
|
||||
import PasswordDialog from '@/components/PasswordDialog.vue'
|
||||
import RedeemVerify from '@/components/RedeemVerify.vue'
|
||||
import ThirdLogin from '@/components/ThirdLogin.vue'
|
||||
import UserOrder from '@/components/UserOrder.vue'
|
||||
import { checkSession, getSystemInfo } from '@/store/cache'
|
||||
import { useSharedStore } from '@/store/sharedata'
|
||||
@@ -183,7 +198,6 @@ const showPasswordDialog = ref(false)
|
||||
const showBindMobileDialog = ref(false)
|
||||
const showBindEmailDialog = ref(false)
|
||||
const showRedeemVerifyDialog = ref(false)
|
||||
const showThirdLoginDialog = ref(false)
|
||||
const user = ref(null)
|
||||
const isLogin = ref(false)
|
||||
const orderTimeout = ref(1800)
|
||||
@@ -284,8 +298,12 @@ const pay = (product, payWay) => {
|
||||
})
|
||||
}
|
||||
|
||||
const redeemCallback = () => {
|
||||
const redeemCallback = (success) => {
|
||||
showRedeemVerifyDialog.value = false
|
||||
|
||||
if (success) {
|
||||
userOrderKey.value += 1
|
||||
}
|
||||
}
|
||||
|
||||
const payCallback = (success) => {
|
||||
|
||||
167
web/src/views/Register.vue
Normal file
167
web/src/views/Register.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<div class="register-container">
|
||||
<div class="register-card">
|
||||
<div class="register-header">
|
||||
<h1 class="register-title">用户注册</h1>
|
||||
<p class="register-subtitle">创建您的账户以开始使用服务</p>
|
||||
</div>
|
||||
|
||||
<div class="register-content">
|
||||
<login-dialog
|
||||
:show="true"
|
||||
@hide="handleRegisterHide"
|
||||
@success="handleRegisterSuccess"
|
||||
ref="loginDialogRef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LoginDialog from '@/components/LoginDialog.vue'
|
||||
import { getCurrentDeviceRedirectPath } from '@/utils/device'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const loginDialogRef = ref(null)
|
||||
|
||||
// 处理注册弹窗隐藏
|
||||
const handleRegisterHide = () => {
|
||||
const redirectPath = getCurrentDeviceRedirectPath()
|
||||
router.push(redirectPath)
|
||||
}
|
||||
|
||||
// 处理注册成功
|
||||
const handleRegisterSuccess = () => {
|
||||
const redirectPath = getCurrentDeviceRedirectPath()
|
||||
router.push(redirectPath)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 确保默认显示注册状态
|
||||
if (loginDialogRef.value) {
|
||||
loginDialogRef.value.login = false
|
||||
}
|
||||
})
|
||||
</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;
|
||||
padding: 20px;
|
||||
|
||||
.register-container {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
|
||||
.register-card {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.register-header {
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: white;
|
||||
padding: 40px 30px;
|
||||
text-align: center;
|
||||
|
||||
.register-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.register-content {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深色主题适配
|
||||
:deep(.van-theme-dark) {
|
||||
.register-page {
|
||||
.register-card {
|
||||
background: var(--el-bg-color-overlay);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.register-page {
|
||||
padding: 16px;
|
||||
background: var(--van-background);
|
||||
|
||||
.register-container {
|
||||
max-width: 100%;
|
||||
|
||||
.register-card {
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.register-header {
|
||||
padding: 30px 20px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
|
||||
.register-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-content {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 小屏幕移动端优化
|
||||
@media (max-width: 375px) {
|
||||
.register-page {
|
||||
padding: 12px;
|
||||
|
||||
.register-container {
|
||||
.register-card {
|
||||
.register-header {
|
||||
padding: 24px 16px;
|
||||
|
||||
.register-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -168,11 +168,11 @@ const features = ref([
|
||||
url: '/mobile/create?tab=jimeng',
|
||||
},
|
||||
{
|
||||
key: 'xmind',
|
||||
name: '思维导图',
|
||||
icon: 'icon-xmind',
|
||||
key: 'agent',
|
||||
name: '智能体',
|
||||
icon: 'icon-app',
|
||||
color: '#3B82F6',
|
||||
url: '/mobile/tools?tab=xmind',
|
||||
url: '/mobile/apps',
|
||||
},
|
||||
{
|
||||
key: 'imgWall',
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<!-- 邀请头图 -->
|
||||
<div class="invite-header">
|
||||
<div class="header-bg">
|
||||
<img src="/images/invite-bg.png" alt="邀请背景" @error="onImageError" />
|
||||
<img src="/images/logo.png" alt="邀请背景" @error="onImageError" />
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<h2 class="invite-title">邀请好友获得奖励</h2>
|
||||
@@ -383,7 +383,7 @@ const shareToFriends = () => {
|
||||
|
||||
// 图片加载错误处理
|
||||
const onImageError = (e) => {
|
||||
e.target.src = '/images/default-bg.png'
|
||||
e.target.src = '/images/img-holder.png'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -22,23 +22,23 @@
|
||||
<div class="stat-label">剩余算力</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ vipDays }}</div>
|
||||
<div class="stat-label">VIP天数</div>
|
||||
<div class="stat-value">{{ userInfo.invite_count || 0 }}</div>
|
||||
<div class="stat-label">邀请人数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品套餐 -->
|
||||
<div class="products-section">
|
||||
<h3 class="section-title">会员套餐</h3>
|
||||
<div class="info-alert" v-if="vipInfoText">
|
||||
<h3 class="section-title">充值套餐</h3>
|
||||
<!-- <div class="info-alert" v-if="vipInfoText">
|
||||
<van-notice-bar
|
||||
:text="vipInfoText"
|
||||
color="#1989fa"
|
||||
background="#ecf9ff"
|
||||
:scrollable="false"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="products-grid" v-if="list.length > 0">
|
||||
<div v-for="item in list" :key="item.id" class="product-card">
|
||||
@@ -98,7 +98,7 @@
|
||||
<!-- 卡密兑换 -->
|
||||
<div class="redeem-section" v-if="isLogin">
|
||||
<h3 class="section-title">卡密兑换</h3>
|
||||
<van-cell-group inset>
|
||||
<van-cell-group>
|
||||
<van-cell title="卡密兑换" is-link @click="showRedeemVerifyDialog = true">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-redeem menu-icon"></i>
|
||||
@@ -138,8 +138,19 @@
|
||||
</div>
|
||||
</van-dialog>
|
||||
|
||||
<!-- 组件弹窗 -->
|
||||
<redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback" />
|
||||
<!-- 卡密兑换弹窗 -->
|
||||
<van-dialog
|
||||
v-model:show="showRedeemVerifyDialog"
|
||||
title="卡密兑换"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
width="90%"
|
||||
:close-on-click-overlay="true"
|
||||
>
|
||||
<div class="p-4">
|
||||
<redeem-verify @hide="redeemCallback" />
|
||||
</div>
|
||||
</van-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -224,7 +235,7 @@ const getPayIcon = (payType) => {
|
||||
const getPayButtonText = (payType) => {
|
||||
const texts = {
|
||||
alipay: '支付宝',
|
||||
wechat: '微信支付',
|
||||
wxpay: '微信支付',
|
||||
qqpay: 'QQ钱包',
|
||||
paypal: 'PayPal',
|
||||
jdpay: '京东支付',
|
||||
@@ -340,13 +351,16 @@ const payCallback = (success) => {
|
||||
}
|
||||
|
||||
// 卡密兑换回调
|
||||
const redeemCallback = () => {
|
||||
const redeemCallback = (success) => {
|
||||
showRedeemVerifyDialog.value = false
|
||||
showSuccessToast('卡密兑换成功！')
|
||||
// 刷新用户信息
|
||||
checkSession().then((user) => {
|
||||
userInfo.value = user
|
||||
})
|
||||
|
||||
if (success) {
|
||||
showSuccessToast('卡密兑换成功！')
|
||||
// 刷新用户信息
|
||||
checkSession().then((user) => {
|
||||
userInfo.value = user
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -577,10 +591,8 @@ const redeemCallback = () => {
|
||||
|
||||
.bills-section {
|
||||
.bills-content {
|
||||
background: var(--van-cell-background);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,17 +4,13 @@
|
||||
<div class="header-bg"></div>
|
||||
<div class="header-content">
|
||||
<div class="user-info" v-if="isLogin">
|
||||
<div class="avatar-container" @click="showAvatarOptions = true">
|
||||
<div class="avatar-container">
|
||||
<van-image :src="fileList[0].url" round width="80" height="80" />
|
||||
<div class="avatar-badge">
|
||||
<van-icon name="photograph" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h2 class="username">{{ form.nickname || form.username }}</h2>
|
||||
<div class="user-meta">
|
||||
<van-tag type="primary" v-if="isVip">VIP会员</van-tag>
|
||||
<van-tag type="default" v-else>普通用户</van-tag>
|
||||
<van-tag type="info">剩余算力：{{ form.power || 0 }}</van-tag>
|
||||
<span class="user-id">ID: {{ form.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,35 +24,11 @@
|
||||
</div>
|
||||
|
||||
<div class="profile-content">
|
||||
<!-- 用户状态卡片 -->
|
||||
<div class="status-cards" v-if="isLogin">
|
||||
<van-row :gutter="12">
|
||||
<van-col :span="12">
|
||||
<div class="status-card" @click="router.push('/mobile/power-log')">
|
||||
<div class="card-icon power">
|
||||
<i class="iconfont icon-flash"></i>
|
||||
</div>
|
||||
<div class="card-value">{{ form.power || 0 }}</div>
|
||||
<div class="card-label">剩余算力</div>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col :span="12">
|
||||
<div class="status-card" @click="router.push('/mobile/invite')">
|
||||
<div class="card-icon invite">
|
||||
<i class="iconfont icon-user-plus"></i>
|
||||
</div>
|
||||
<div class="card-value">{{ inviteCount }}</div>
|
||||
<div class="card-label">邀请好友</div>
|
||||
</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<div class="quick-actions" v-if="isLogin">
|
||||
<h3 class="section-title">快捷操作</h3>
|
||||
<van-row :gutter="12">
|
||||
<van-col :span="6">
|
||||
<van-col :span="8">
|
||||
<div class="action-item" @click="router.push('/mobile/member')">
|
||||
<div class="action-icon recharge">
|
||||
<i class="iconfont icon-vip"></i>
|
||||
@@ -64,15 +36,7 @@
|
||||
<div class="action-label">会员中心</div>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col :span="6">
|
||||
<div class="action-item" @click="showPasswordDialog = true">
|
||||
<div class="action-icon password">
|
||||
<i class="iconfont icon-lock"></i>
|
||||
</div>
|
||||
<div class="action-label">改密码</div>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col :span="6">
|
||||
<van-col :span="8">
|
||||
<div class="action-item" @click="router.push('/mobile/invite')">
|
||||
<div class="action-icon share">
|
||||
<i class="iconfont icon-share"></i>
|
||||
@@ -80,10 +44,10 @@
|
||||
<div class="action-label">邀请</div>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col :span="6">
|
||||
<van-col :span="8">
|
||||
<div class="action-item" @click="showSettings = true">
|
||||
<div class="action-icon settings">
|
||||
<i class="iconfont icon-setting"></i>
|
||||
<i class="iconfont icon-config"></i>
|
||||
</div>
|
||||
<div class="action-label">设置</div>
|
||||
</div>
|
||||
@@ -91,10 +55,10 @@
|
||||
</van-row>
|
||||
</div>
|
||||
|
||||
<!-- 账户管理 -->
|
||||
<!-- 我的服务 -->
|
||||
<div class="menu-section" v-if="isLogin">
|
||||
<h3 class="section-title">账户管理</h3>
|
||||
<van-cell-group inset>
|
||||
<h3 class="section-title">我的服务</h3>
|
||||
<van-cell-group>
|
||||
<van-cell title="绑定邮箱" is-link @click="showBindEmailDialog = true">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-email menu-icon"></i>
|
||||
@@ -105,18 +69,11 @@
|
||||
<i class="iconfont icon-mobile menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="第三方登录" is-link @click="showThirdLoginDialog = true">
|
||||
<van-cell title="修改密码" is-link @click="showPasswordDialog = true">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-login menu-icon"></i>
|
||||
<i class="iconfont icon-password menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<div class="menu-section">
|
||||
<h3 class="section-title">我的服务</h3>
|
||||
<van-cell-group inset>
|
||||
<van-cell
|
||||
title="消费记录"
|
||||
icon="notes-o"
|
||||
@@ -124,40 +81,7 @@
|
||||
@click="router.push('/mobile/power-log')"
|
||||
>
|
||||
<template #icon>
|
||||
<i class="iconfont icon-history menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
title="邀请好友"
|
||||
icon="friends-o"
|
||||
is-link
|
||||
@click="router.push('/mobile/invite')"
|
||||
>
|
||||
<template #icon>
|
||||
<i class="iconfont icon-user-plus menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="聊天导出" icon="down" is-link @click="copyChatExportLink">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-download menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group inset>
|
||||
<van-cell title="帮助中心" icon="question-o" is-link @click="router.push('/mobile/help')">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-help menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="意见反馈" icon="chat-o" is-link @click="router.push('/mobile/feedback')">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-message menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="关于我们" icon="info-o" is-link @click="showAbout = true">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-info menu-icon"></i>
|
||||
<i class="iconfont icon-log menu-icon"></i>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
@@ -169,21 +93,11 @@
|
||||
退出登录
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 版本信息 -->
|
||||
<div class="version-info">
|
||||
<p class="app-version">版本 v{{ appVersion }}</p>
|
||||
<p class="copyright">© 2024 {{ title }}. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全间距 -->
|
||||
<div class="bottom-safe-area"></div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码弹窗 -->
|
||||
<van-dialog
|
||||
:model-value="showPasswordDialog"
|
||||
@update:model-value="showPasswordDialog = $event"
|
||||
v-model:show="showPasswordDialog"
|
||||
title="修改密码"
|
||||
show-cancel-button
|
||||
@confirm="updatePass"
|
||||
@@ -223,11 +137,7 @@
|
||||
</van-dialog>
|
||||
|
||||
<!-- 设置弹窗 -->
|
||||
<van-action-sheet
|
||||
:model-value="showSettings"
|
||||
@update:model-value="showSettings = $event"
|
||||
title="设置"
|
||||
>
|
||||
<van-action-sheet v-model:show="showSettings" title="设置">
|
||||
<div class="settings-content">
|
||||
<van-cell-group>
|
||||
<van-cell title="暗黑主题">
|
||||
@@ -243,88 +153,58 @@
|
||||
<van-switch v-model="stream" @change="(val) => store.setChatStream(val)" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="消息通知">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="notifications" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="自动保存">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="autoSave" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<!-- 头像选择弹窗 -->
|
||||
<van-action-sheet
|
||||
:model-value="showAvatarOptions"
|
||||
@update:model-value="showAvatarOptions = $event"
|
||||
title="更换头像"
|
||||
>
|
||||
<div class="avatar-options">
|
||||
<van-cell title="拍照" icon="photograph" @click="selectAvatar('camera')" />
|
||||
<van-cell title="从相册选择" icon="photo-o" @click="selectAvatar('album')" />
|
||||
<van-cell title="默认头像" icon="user-o" @click="selectAvatar('default')" />
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<!-- 关于我们弹窗 -->
|
||||
<!-- 绑定邮箱弹窗 -->
|
||||
<van-dialog
|
||||
:model-value="showAbout"
|
||||
@update:model-value="showAbout = $event"
|
||||
title="关于我们"
|
||||
v-model:show="showBindEmailDialog"
|
||||
title="绑定邮箱"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
width="90%"
|
||||
:close-on-click-overlay="true"
|
||||
>
|
||||
<div class="about-content">
|
||||
<div class="about-logo">
|
||||
<img src="/images/logo.png" alt="Logo" />
|
||||
</div>
|
||||
<h3>{{ title }}</h3>
|
||||
<p class="about-desc">
|
||||
专业的AI创作平台，提供对话、绘画、音乐、视频等多种AI服务，让创作更简单、更高效。
|
||||
</p>
|
||||
<div class="about-info">
|
||||
<p>版本：v{{ appVersion }}</p>
|
||||
<p>更新时间：2024-01-01</p>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<bind-email @hide="showBindEmailDialog = false" />
|
||||
</div>
|
||||
</van-dialog>
|
||||
|
||||
<!-- 组件弹窗 -->
|
||||
<bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false" />
|
||||
<bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false" />
|
||||
<third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false" />
|
||||
<!-- 绑定手机弹窗 -->
|
||||
<van-dialog
|
||||
v-model:show="showBindMobileDialog"
|
||||
title="绑定手机"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
width="90%"
|
||||
:close-on-click-overlay="true"
|
||||
>
|
||||
<div class="p-4">
|
||||
<bind-mobile @hide="showBindMobileDialog = false" />
|
||||
</div>
|
||||
</van-dialog>
|
||||
|
||||
<!-- 退出登录确认 -->
|
||||
<van-dialog
|
||||
:model-value="showLogoutConfirm"
|
||||
@update:model-value="showLogoutConfirm = $event"
|
||||
v-model:show="showLogoutConfirm"
|
||||
title="退出登录"
|
||||
message="确定要退出登录吗？"
|
||||
show-cancel-button
|
||||
@confirm="logout"
|
||||
/>
|
||||
|
||||
<!-- 隐藏的复制链接按钮 -->
|
||||
<button id="copy-chat-export-btn" style="display: none" :data-clipboard-text="chatExportUrl">
|
||||
复制聊天导出链接
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BindEmail from '@/components/BindEmail.vue'
|
||||
import BindMobile from '@/components/BindMobile.vue'
|
||||
import ThirdLogin from '@/components/ThirdLogin.vue'
|
||||
import { checkSession, getSystemInfo } from '@/store/cache'
|
||||
import { removeUserToken } from '@/store/session'
|
||||
import { useSharedStore } from '@/store/sharedata'
|
||||
import { httpGet, httpPost } from '@/utils/http'
|
||||
import { showLoginDialog } from '@/utils/libs'
|
||||
import Clipboard from 'clipboard'
|
||||
import { showFailToast, showLoadingToast, showNotify, showSuccessToast } from 'vant'
|
||||
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
@@ -351,9 +231,6 @@ const showSettings = ref(false)
|
||||
const showPasswordDialog = ref(false)
|
||||
const showBindEmailDialog = ref(false)
|
||||
const showBindMobileDialog = ref(false)
|
||||
const showThirdLoginDialog = ref(false)
|
||||
const showAvatarOptions = ref(false)
|
||||
const showAbout = ref(false)
|
||||
const showLogoutConfirm = ref(false)
|
||||
const store = useSharedStore()
|
||||
const stream = ref(store.chatStream)
|
||||
@@ -361,15 +238,6 @@ const dark = ref(store.theme === 'dark')
|
||||
const title = ref(import.meta.env.VITE_TITLE)
|
||||
const appVersion = ref('2.1.0')
|
||||
|
||||
// 聊天导出链接
|
||||
const chatExportUrl = ref(location.protocol + '//' + location.host + '/chat/export')
|
||||
|
||||
// 新增状态
|
||||
const notifications = ref(true)
|
||||
const autoSave = ref(true)
|
||||
const inviteCount = ref(0)
|
||||
const passwordForm = ref()
|
||||
|
||||
// 密码相关
|
||||
const pass = ref({
|
||||
old: '',
|
||||
@@ -407,21 +275,10 @@ onMounted(() => {
|
||||
|
||||
// 获取用户详细信息
|
||||
fetchUserProfile()
|
||||
fetchUserStats()
|
||||
})
|
||||
.catch(() => {
|
||||
isLogin.value = false
|
||||
})
|
||||
|
||||
// 初始化复制功能
|
||||
const clipboard = new Clipboard('#copy-chat-export-btn')
|
||||
clipboard.on('success', (e) => {
|
||||
e.clearSelection()
|
||||
showNotify({ type: 'success', message: '链接已复制到剪贴板', duration: 2000 })
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
|
||||
})
|
||||
})
|
||||
|
||||
// 获取用户详细信息
|
||||
@@ -436,17 +293,6 @@ const fetchUserProfile = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户统计信息
|
||||
const fetchUserStats = () => {
|
||||
// 模拟数据，实际项目中应调用API
|
||||
inviteCount.value = Math.floor(Math.random() * 20)
|
||||
}
|
||||
|
||||
// 复制聊天导出链接
|
||||
const copyChatExportLink = () => {
|
||||
document.getElementById('copy-chat-export-btn').click()
|
||||
}
|
||||
|
||||
// 确认密码验证
|
||||
const validateConfirmPassword = (value) => {
|
||||
if (value !== pass.value.new) {
|
||||
@@ -462,37 +308,18 @@ const resetPasswordForm = () => {
|
||||
new: '',
|
||||
renew: '',
|
||||
}
|
||||
if (passwordForm.value) {
|
||||
passwordForm.value.resetValidation()
|
||||
}
|
||||
}
|
||||
|
||||
// 提交修改密码
|
||||
const updatePass = () => {
|
||||
if (!passwordForm.value) {
|
||||
updatePasswordAPI()
|
||||
return
|
||||
}
|
||||
|
||||
passwordForm.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
updatePasswordAPI()
|
||||
})
|
||||
.catch((errors) => {
|
||||
console.log('表单验证失败:', errors)
|
||||
})
|
||||
}
|
||||
|
||||
const updatePasswordAPI = () => {
|
||||
if (!pass.value.old) {
|
||||
return showNotify({ type: 'danger', message: '请输入旧密码' })
|
||||
return showFailToast('请输入旧密码')
|
||||
}
|
||||
if (!pass.value.new || pass.value.new.length < 8) {
|
||||
return showNotify({ type: 'danger', message: '密码长度为8-16个字符' })
|
||||
return showFailToast('密码长度为8-16个字符')
|
||||
}
|
||||
if (pass.value.renew !== pass.value.new) {
|
||||
return showNotify({ type: 'danger', message: '两次输入密码不一致' })
|
||||
return showFailToast('两次输入密码不一致')
|
||||
}
|
||||
|
||||
showLoadingToast({
|
||||
@@ -515,46 +342,6 @@ const updatePasswordAPI = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 头像选择
|
||||
const selectAvatar = (type) => {
|
||||
showAvatarOptions.value = false
|
||||
|
||||
switch (type) {
|
||||
case 'camera':
|
||||
// 调用相机
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
showNotify({ type: 'primary', message: '正在启动相机...' })
|
||||
} else {
|
||||
showNotify({ type: 'warning', message: '您的设备不支持相机功能' })
|
||||
}
|
||||
break
|
||||
case 'album':
|
||||
// 从相册选择
|
||||
const input = document.createElement('input')
|
||||
input.type = 'file'
|
||||
input.accept = 'image/*'
|
||||
input.onchange = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (file) {
|
||||
// 这里应该上传到服务器
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
fileList.value[0].url = e.target.result
|
||||
showSuccessToast('头像更新成功')
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
input.click()
|
||||
break
|
||||
case 'default':
|
||||
// 使用默认头像
|
||||
fileList.value[0].url = '/images/avatar/default.jpg'
|
||||
showSuccessToast('已设置为默认头像')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const logout = function () {
|
||||
showLoadingToast({
|
||||
@@ -590,9 +377,8 @@ const logout = function () {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - 60px);
|
||||
background: var(--van-background);
|
||||
padding-bottom: 60px;
|
||||
|
||||
.profile-header {
|
||||
position: relative;
|
||||
@@ -628,22 +414,6 @@ const logout = function () {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.avatar-badge {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--van-primary-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-details {
|
||||
@@ -679,59 +449,6 @@ const logout = function () {
|
||||
z-index: 3;
|
||||
padding: 0 16px 20px;
|
||||
|
||||
.status-cards {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.status-card {
|
||||
background: var(--van-cell-background);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 8px;
|
||||
|
||||
&.power {
|
||||
background: linear-gradient(135deg, #ff9500, #ff6b35);
|
||||
}
|
||||
|
||||
&.invite {
|
||||
background: linear-gradient(135deg, #1989fa, #0d7dff);
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--van-text-color);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 12px;
|
||||
color: var(--van-gray-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions,
|
||||
.menu-section {
|
||||
margin-bottom: 24px;
|
||||
@@ -773,10 +490,6 @@ const logout = function () {
|
||||
background: linear-gradient(135deg, #ffd700, #ffb300);
|
||||
}
|
||||
|
||||
&.password {
|
||||
background: linear-gradient(135deg, #ee0a24, #d60a21);
|
||||
}
|
||||
|
||||
&.share {
|
||||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||
}
|
||||
@@ -826,27 +539,6 @@ const logout = function () {
|
||||
.logout-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.app-version,
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
color: var(--van-gray-6);
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-safe-area {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗样式
|
||||
@@ -864,66 +556,11 @@ const logout = function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-options {
|
||||
padding: 0;
|
||||
|
||||
:deep(.van-cell) {
|
||||
padding: 16px 20px;
|
||||
|
||||
.van-cell__title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-content {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
|
||||
.about-logo {
|
||||
margin-bottom: 16px;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--van-text-color);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.about-desc {
|
||||
font-size: 14px;
|
||||
color: var(--van-gray-6);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.about-info {
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: var(--van-gray-7);
|
||||
margin: 0 0 4px 0;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深色主题优化
|
||||
:deep(.van-theme-dark) {
|
||||
.profile-page {
|
||||
.status-card,
|
||||
.action-item {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -948,14 +585,6 @@ const logout = function () {
|
||||
.profile-content {
|
||||
padding: 0 12px 20px;
|
||||
|
||||
.status-cards .status-card {
|
||||
padding: 12px;
|
||||
|
||||
.card-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions .action-item {
|
||||
padding: 12px 6px;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user