mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-21 10:34:26 +08:00
整合登录注册页面
This commit is contained in:
GeekMaster
@@ -1,37 +1,26 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
style="max-width: 400px"
|
||||
@close="close"
|
||||
:title="title"
|
||||
>
|
||||
<div class="form">
|
||||
<div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
|
||||
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="邮箱地址">
|
||||
<el-input v-model="form.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding-left: 10px">
|
||||
<send-msg :receiver="form.email" type="email" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="form">
|
||||
<div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="邮箱地址">
|
||||
<el-input v-model="form.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding-left: 10px">
|
||||
<send-msg :receiver="form.email" type="email" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer text-center">
|
||||
<el-button type="primary" @click="save"> 保存 </el-button>
|
||||
<el-button @click="emits('hide')"> 取消 </el-button>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="save"> 提交绑定 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -39,31 +28,18 @@ import SendMsg from '@/components/SendMsg.vue'
|
||||
import { checkSession } from '@/store/cache'
|
||||
import { httpPost } from '@/utils/http'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
})
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
|
||||
const title = ref('绑定邮箱')
|
||||
const email = ref('')
|
||||
const form = ref({
|
||||
email: '',
|
||||
code: '',
|
||||
})
|
||||
|
||||
watch(showDialog, (val) => {
|
||||
if (val) {
|
||||
form.value.code = ''
|
||||
form.value.email = ''
|
||||
checkSession().then((user) => {
|
||||
email.value = user.email
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
checkSession().then((user) => {
|
||||
email.value = user.email
|
||||
})
|
||||
})
|
||||
|
||||
const emits = defineEmits(['hide'])
|
||||
@@ -82,10 +58,6 @@ const save = () => {
|
||||
ElMessage.error('绑定失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const close = function () {
|
||||
emits('hide')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,37 +1,26 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
style="max-width: 400px"
|
||||
@close="close"
|
||||
:title="title"
|
||||
>
|
||||
<div class="form">
|
||||
<div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
|
||||
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="form.mobile" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding-left: 10px">
|
||||
<send-msg :receiver="form.mobile" size="default" type="mobile" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="form">
|
||||
<div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="form.mobile" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding-left: 10px">
|
||||
<send-msg :receiver="form.mobile" size="default" type="mobile" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer text-center">
|
||||
<el-button type="primary" @click="save"> 保存 </el-button>
|
||||
<el-button @click="emits('hide')"> 取消 </el-button>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="save"> 提交绑定 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -39,34 +28,18 @@ import SendMsg from '@/components/SendMsg.vue'
|
||||
import { checkSession } from '@/store/cache'
|
||||
import { httpPost } from '@/utils/http'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
})
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
|
||||
const title = ref('绑定手机')
|
||||
const mobile = ref('')
|
||||
const form = ref({
|
||||
mobile: '',
|
||||
code: '',
|
||||
})
|
||||
|
||||
watch(showDialog, (val) => {
|
||||
if (val) {
|
||||
form.value = {
|
||||
mobile: '',
|
||||
code: '',
|
||||
}
|
||||
|
||||
checkSession().then((user) => {
|
||||
mobile.value = user.mobile
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
checkSession().then((user) => {
|
||||
mobile.value = user.mobile
|
||||
})
|
||||
})
|
||||
|
||||
const emits = defineEmits(['hide'])
|
||||
@@ -85,10 +58,6 @@ const save = () => {
|
||||
ElMessage.error('绑定失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const close = function () {
|
||||
emits('hide')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,42 +1,22 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
:before-close="close"
|
||||
:width="450"
|
||||
:title="title"
|
||||
>
|
||||
<div class="form" id="bind-mobile-form">
|
||||
<el-form :model="form">
|
||||
<el-form-item>
|
||||
<el-input v-model="form.code" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="form" id="redeem-form">
|
||||
<el-form :model="form">
|
||||
<el-form-item>
|
||||
<el-input v-model="form.code" placeholder="请输入兑换码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="save">兑换</el-button>
|
||||
<el-button @click="emits('hide')">取消</el-button>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="save"> 立即兑换 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { showMessageError, showMessageOK } from '@/utils/dialog'
|
||||
import { showMessageError, showMessageInfo, showMessageOK } from '@/utils/dialog'
|
||||
import { httpPost } from '@/utils/http'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
})
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
|
||||
const title = ref('兑换码核销')
|
||||
const form = ref({
|
||||
code: '',
|
||||
})
|
||||
@@ -45,7 +25,7 @@ const emits = defineEmits(['hide'])
|
||||
|
||||
const save = () => {
|
||||
if (form.value.code === '') {
|
||||
return ElMessage.error({ message: '请输入兑换码' })
|
||||
return showMessageInfo('请输入兑换码')
|
||||
}
|
||||
|
||||
httpPost('/api/redeem/verify', form.value)
|
||||
@@ -57,10 +37,23 @@ const save = () => {
|
||||
showMessageError('兑换失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const close = function () {
|
||||
emits('hide', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.form {
|
||||
padding: 20px;
|
||||
|
||||
.form-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
style="max-width: 400px"
|
||||
@close="close"
|
||||
:title="title"
|
||||
>
|
||||
<div class="third-login" v-loading="loading">
|
||||
<div class="item" v-if="wechatBindURL !== ''">
|
||||
<a class="link" :href="wechatBindURL"><i class="iconfont icon-wechat"></i></a>
|
||||
<span class="text ok" v-if="openid !== ''">已绑定</span>
|
||||
<span class="text" v-else>未绑定</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { checkSession } from '@/store/cache'
|
||||
import { showMessageError } from '@/utils/dialog'
|
||||
import { httpGet } from '@/utils/http'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
})
|
||||
const emits = defineEmits(['hide'])
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
|
||||
const title = ref('绑定第三方登录')
|
||||
const openid = ref('')
|
||||
const wechatBindURL = ref('')
|
||||
const loading = ref(true)
|
||||
|
||||
watch(showDialog, (val) => {
|
||||
if (val) {
|
||||
checkSession().then((user) => {
|
||||
openid.value = user.openid
|
||||
})
|
||||
const returnURL = `${location.protocol}//${location.host}/login/callback?action=bind`
|
||||
httpGet('/api/user/clogin?return_url=' + returnURL)
|
||||
.then((res) => {
|
||||
wechatBindURL.value = res.data.url
|
||||
loading.value = false
|
||||
})
|
||||
.catch((e) => {
|
||||
showMessageError(e.message)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const close = function () {
|
||||
emits('hide')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.third-login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
.iconfont {
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
background: #e9f1f6;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-wechat,
|
||||
.ok {
|
||||
color: #0bc15f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="user-bill" v-loading="loading" element-loading-background="rgba(255,255,255,.3)">
|
||||
<el-row v-if="items.length > 0">
|
||||
<!-- PC端表格 -->
|
||||
<div class="desktop-table" v-if="items.length > 0">
|
||||
<el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border>
|
||||
<el-table-column prop="order_no" label="订单号">
|
||||
<template #default="scope">
|
||||
@@ -14,7 +15,7 @@
|
||||
<el-table-column prop="amount" label="订单金额" />
|
||||
<el-table-column label="订单算力">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.remark?.power }}</span>
|
||||
<span>{{ scope.row.remark && scope.row.remark.power }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="pay_method" label="支付渠道" />
|
||||
@@ -26,17 +27,61 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 移动端卡片列表 -->
|
||||
<div class="mobile-cards" v-if="items.length > 0">
|
||||
<div v-for="item in items" :key="item.id" class="order-card">
|
||||
<div class="card-header">
|
||||
<div class="order-no">
|
||||
<span class="label">订单号：</span>
|
||||
<span class="value">{{ item.order_no }}</span>
|
||||
<el-icon class="copy-icon" :data-clipboard-text="item.order_no">
|
||||
<DocumentCopy />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="info-row">
|
||||
<span class="label">产品名称：</span>
|
||||
<span class="value">{{ item.subject }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">订单金额：</span>
|
||||
<span class="value amount">￥{{ item.amount }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">订单算力：</span>
|
||||
<span class="value">{{ (item.remark && item.remark.power) || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">支付渠道：</span>
|
||||
<span class="value">{{ item.pay_method }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">支付名称：</span>
|
||||
<span class="value">{{ item.pay_name }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">支付时间：</span>
|
||||
<span class="value">{{ item['pay_time'] ? dateFormat(item['pay_time']) : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty :image-size="100" v-else :image="nodata" description="暂无数据" />
|
||||
|
||||
<div class="pagination pb-5">
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
background
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
@current-change="fetchData()"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
@current-change="handlePageChange"
|
||||
style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
|
||||
:total="total"
|
||||
/>
|
||||
@@ -46,7 +91,6 @@
|
||||
|
||||
<script setup>
|
||||
import nodata from '@/assets/img/no-data.png'
|
||||
|
||||
import { httpGet } from '@/utils/http'
|
||||
import { dateFormat } from '@/utils/libs'
|
||||
import { DocumentCopy } from '@element-plus/icons-vue'
|
||||
@@ -62,7 +106,7 @@ const loading = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
const clipboard = new Clipboard('.copy-order-no')
|
||||
const clipboard = new Clipboard('.copy-order-no, .copy-icon')
|
||||
clipboard.on('success', () => {
|
||||
ElMessage.success('复制成功！')
|
||||
})
|
||||
@@ -88,11 +132,17 @@ const fetchData = () => {
|
||||
ElMessage.error('获取数据失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 处理分页变化
|
||||
const handlePageChange = (newPage) => {
|
||||
page.value = newPage
|
||||
fetchData()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-bill {
|
||||
background-color: var(--chat-bg);
|
||||
// background-color: var(--el-bg-color);
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0 0 0;
|
||||
@@ -108,5 +158,132 @@ const fetchData = () => {
|
||||
top: 2px;
|
||||
color: #20a0ff;
|
||||
}
|
||||
|
||||
// 移动端卡片样式
|
||||
.mobile-cards {
|
||||
display: none;
|
||||
|
||||
.order-card {
|
||||
background: transparent;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
background: var(--van-cell-background);
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
|
||||
.order-no {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
margin-right: 12px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
cursor: pointer;
|
||||
color: #20a0ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-status {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
|
||||
&.amount {
|
||||
font-weight: 600;
|
||||
color: #ff6b35;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.user-bill {
|
||||
.desktop-table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-cards {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
:deep(.el-pagination) {
|
||||
.el-pagination__total {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-pager {
|
||||
li {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深色主题适配
|
||||
:deep(.van-theme-dark) {
|
||||
.user-bill {
|
||||
.mobile-cards .order-card {
|
||||
background: transparent;
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -129,6 +129,18 @@ const routes = [
|
||||
meta: { title: '用户登录' },
|
||||
component: () => import('@/views/LoginCallback.vue'),
|
||||
},
|
||||
{
|
||||
name: 'login',
|
||||
path: '/login',
|
||||
meta: { title: '用户登录' },
|
||||
component: () => import('@/views/Login.vue'),
|
||||
},
|
||||
{
|
||||
name: 'register',
|
||||
path: '/register',
|
||||
meta: { title: '用户注册' },
|
||||
component: () => import('@/views/Register.vue'),
|
||||
},
|
||||
{
|
||||
name: 'resetpassword',
|
||||
path: '/resetpassword',
|
||||
@@ -271,12 +283,6 @@ const routes = [
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
name: 'mobile-login',
|
||||
path: '/mobile/login',
|
||||
meta: { title: '用户登录' },
|
||||
component: () => import('@/views/mobile/Login.vue'),
|
||||
},
|
||||
{
|
||||
name: 'mobile',
|
||||
path: '/mobile',
|
||||
|
||||
133
web/src/utils/device.js
Normal file
133
web/src/utils/device.js
Normal file
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* 设备检测工具函数
|
||||
* 用于判断当前设备类型，支持PC端和移动端的智能识别
|
||||
*/
|
||||
|
||||
/**
|
||||
* 检测设备类型
|
||||
* @returns {string} 'mobile' | 'desktop'
|
||||
*/
|
||||
export const detectDevice = () => {
|
||||
const userAgent = navigator.userAgent.toLowerCase()
|
||||
|
||||
// 移动设备关键词检测
|
||||
const mobileKeywords = [
|
||||
'mobile',
|
||||
'android',
|
||||
'iphone',
|
||||
'ipad',
|
||||
'phone',
|
||||
'blackberry',
|
||||
'opera mini',
|
||||
'windows phone',
|
||||
'iemobile',
|
||||
]
|
||||
|
||||
// 平板设备关键词检测
|
||||
const tabletKeywords = ['tablet', 'ipad', 'playbook', 'silk', 'kindle']
|
||||
|
||||
// 检查是否为移动设备
|
||||
const isMobile = mobileKeywords.some((keyword) => userAgent.includes(keyword))
|
||||
|
||||
// 检查是否为平板设备
|
||||
const isTablet = tabletKeywords.some((keyword) => userAgent.includes(keyword))
|
||||
|
||||
// 检查屏幕尺寸
|
||||
const screenWidth = window.innerWidth
|
||||
const screenHeight = window.innerHeight
|
||||
|
||||
// 移动设备判断逻辑
|
||||
if (isMobile || isTablet || screenWidth <= 768) {
|
||||
return 'mobile'
|
||||
}
|
||||
|
||||
return 'desktop'
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否为移动设备
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export const isMobileDevice = () => {
|
||||
return detectDevice() === 'mobile'
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否为桌面设备
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export const isDesktopDevice = () => {
|
||||
return detectDevice() === 'desktop'
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取设备跳转路径
|
||||
* @param {string} deviceType - 设备类型
|
||||
* @param {string} defaultPath - 默认路径
|
||||
* @returns {string} 跳转路径
|
||||
*/
|
||||
export const getDeviceRedirectPath = (deviceType, defaultPath = '/') => {
|
||||
if (deviceType === 'mobile') {
|
||||
return '/mobile'
|
||||
}
|
||||
return defaultPath
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据当前设备获取跳转路径
|
||||
* @param {string} defaultPath - 默认路径
|
||||
* @returns {string} 跳转路径
|
||||
*/
|
||||
export const getCurrentDeviceRedirectPath = (defaultPath = '/') => {
|
||||
const deviceType = detectDevice()
|
||||
return getDeviceRedirectPath(deviceType, defaultPath)
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测屏幕尺寸
|
||||
* @returns {object} { width, height, isSmall, isMedium, isLarge }
|
||||
*/
|
||||
export const getScreenInfo = () => {
|
||||
const width = window.innerWidth
|
||||
const height = window.innerHeight
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
isSmall: width <= 768,
|
||||
isMedium: width > 768 && width <= 1024,
|
||||
isLarge: width > 1024,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测浏览器类型
|
||||
* @returns {string} 浏览器类型
|
||||
*/
|
||||
export const detectBrowser = () => {
|
||||
const userAgent = navigator.userAgent.toLowerCase()
|
||||
|
||||
if (userAgent.includes('chrome')) return 'chrome'
|
||||
if (userAgent.includes('firefox')) return 'firefox'
|
||||
if (userAgent.includes('safari') && !userAgent.includes('chrome')) return 'safari'
|
||||
if (userAgent.includes('edge')) return 'edge'
|
||||
if (userAgent.includes('opera')) return 'opera'
|
||||
|
||||
return 'unknown'
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测操作系统
|
||||
* @returns {string} 操作系统类型
|
||||
*/
|
||||
export const detectOS = () => {
|
||||
const userAgent = navigator.userAgent.toLowerCase()
|
||||
|
||||
if (userAgent.includes('windows')) return 'windows'
|
||||
if (userAgent.includes('mac')) return 'macos'
|
||||
if (userAgent.includes('linux')) return 'linux'
|
||||
if (userAgent.includes('android')) return 'android'
|
||||
if (userAgent.includes('ios')) return 'ios'
|
||||
|
||||
return 'unknown'
|
||||
}
|
||||
@@ -1,51 +1,58 @@
|
||||
/**
|
||||
* Util lib functions
|
||||
*/
|
||||
import {closeToast, showConfirmDialog, showFailToast, showLoadingToast, showSuccessToast, showToast} from "vant";
|
||||
import {isMobile} from "@/utils/libs";
|
||||
import {ElMessage} from "element-plus";
|
||||
import { isMobile } from '@/utils/libs'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
closeToast,
|
||||
showConfirmDialog,
|
||||
showFailToast,
|
||||
showLoadingToast,
|
||||
showSuccessToast,
|
||||
showToast,
|
||||
} from 'vant'
|
||||
|
||||
export function showLoginDialog(router) {
|
||||
showConfirmDialog({
|
||||
title: "登录",
|
||||
message: "此操作需要登录才能进行，前往登录？",
|
||||
title: '登录',
|
||||
message: '此操作需要登录才能进行，前往登录？',
|
||||
})
|
||||
.then(() => {
|
||||
router.push("/login");
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
.then(() => {
|
||||
router.push('/login')
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
})
|
||||
}
|
||||
|
||||
export function showMessageOK(message) {
|
||||
if (isMobile()) {
|
||||
showSuccessToast(message);
|
||||
showSuccessToast(message)
|
||||
} else {
|
||||
ElMessage.success(message);
|
||||
ElMessage.success(message)
|
||||
}
|
||||
}
|
||||
|
||||
export function showMessageInfo(message) {
|
||||
if (isMobile()) {
|
||||
showToast(message);
|
||||
showToast(message)
|
||||
} else {
|
||||
ElMessage.info(message);
|
||||
ElMessage.info(message)
|
||||
}
|
||||
}
|
||||
|
||||
export function showMessageError(message) {
|
||||
if (isMobile()) {
|
||||
showFailToast({message: message, duration: 0});
|
||||
showFailToast({ message: message })
|
||||
} else {
|
||||
ElMessage.error(message);
|
||||
ElMessage.error(message)
|
||||
}
|
||||
}
|
||||
|
||||
export function showLoading(message = "正在处理...") {
|
||||
showLoadingToast({message: message, forbidClick: true, duration: 0});
|
||||
export function showLoading(message = '正在处理...') {
|
||||
showLoadingToast({ message: message, forbidClick: true, duration: 0 })
|
||||
}
|
||||
|
||||
export function closeLoading() {
|
||||
closeToast();
|
||||
closeToast()
|
||||
}
|
||||
|
||||
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