mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-18 17:26:38 +08:00
feat: adjust layout for user profile page
This commit is contained in:
RockYang
parent
2ebff2623f
commit
c84e912dd8
@ -230,6 +230,8 @@ type userProfile struct {
|
||||
Calls int `json:"calls"`
|
||||
ImgCalls int `json:"img_calls"`
|
||||
TotalTokens int64 `json:"total_tokens"`
|
||||
Tokens int64 `json:"tokens"`
|
||||
ExpiredTime int64 `json:"expired_time"`
|
||||
}
|
||||
|
||||
func (h *UserHandler) Profile(c *gin.Context) {
|
||||
|
||||
105
web/src/components/UserProfile.vue
Normal file
105
web/src/components/UserProfile.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="user-info" id="user-info">
|
||||
<el-form v-if="user.id" :model="user" label-width="150px">
|
||||
<el-row>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="afterRead"
|
||||
>
|
||||
<el-avatar v-if="user.avatar" :src="user.avatar" shape="circle" :size="100"/>
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-row>
|
||||
<el-form-item label="账户">
|
||||
<span>{{ user.mobile }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="剩余对话次数">
|
||||
<el-tag>{{ user['calls'] }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="剩余绘图次数">
|
||||
<el-tag>{{ user['img_calls'] }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="本月消耗电量">
|
||||
<el-tag type="info">{{ user['tokens'] }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="累计消耗电量">
|
||||
<el-tag type="info">{{ user['total_tokens'] }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="会员到期时间" v-if="user['expired_time'] > 0">
|
||||
<el-tag type="danger">{{ dateFormat(user['expired_time']) }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue"
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {Plus} from "@element-plus/icons-vue";
|
||||
import Compressor from "compressorjs";
|
||||
import {dateFormat} from "@/utils/libs";
|
||||
|
||||
const user = ref({
|
||||
username: '',
|
||||
nickname: '',
|
||||
avatar: '',
|
||||
mobile: '',
|
||||
calls: 0,
|
||||
tokens: 0,
|
||||
chat_config: {api_keys: {OpenAI: "", Azure: "", ChatGLM: ""}}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 获取最新用户信息
|
||||
httpGet('/api/user/profile').then(res => {
|
||||
user.value = res.data
|
||||
user.value.chat_config.api_keys = res.data.chat_config.api_keys ?? {OpenAI: "", Azure: "", ChatGLM: ""}
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取用户信息失败：" + e.message)
|
||||
});
|
||||
})
|
||||
|
||||
const afterRead = (file) => {
|
||||
// 压缩图片并上传
|
||||
new Compressor(file.file, {
|
||||
quality: 0.6,
|
||||
success(result) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', result, result.name);
|
||||
// 执行上传操作
|
||||
httpPost('/api/upload', formData).then((res) => {
|
||||
user.value.avatar = res.data
|
||||
httpPost('/api/user/profile/update', user.value).then(() => {
|
||||
ElMessage.success({
|
||||
message: '更新成功',
|
||||
duration: 500,
|
||||
})
|
||||
}).catch((e) => {
|
||||
ElMessage.error('更新失败：' + e.message)
|
||||
})
|
||||
}).catch((e) => {
|
||||
ElMessage.error('图片上传失败:' + e.message)
|
||||
})
|
||||
},
|
||||
error(err) {
|
||||
console.log(err.message);
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.user-info {
|
||||
padding 20px
|
||||
|
||||
.el-row {
|
||||
justify-content center
|
||||
margin-bottom 10px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -5,40 +5,46 @@
|
||||
</div>
|
||||
<div class="inner" :style="{height: listBoxHeight + 'px'}">
|
||||
|
||||
<div class="info">
|
||||
<el-alert type="info" show-icon :closable="false" effect="dark">
|
||||
<strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
|
||||
当月充值的点卡有效期可以延期到下个月底。
|
||||
</el-alert>
|
||||
<div class="user-profile">
|
||||
<user-profile/>
|
||||
</div>
|
||||
|
||||
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="250">
|
||||
<template #default="scope">
|
||||
<div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
|
||||
<div class="image-container">
|
||||
<el-image :src="vipImg" fit="cover"/>
|
||||
</div>
|
||||
<div class="product-title">
|
||||
<span class="name">{{ scope.item.name }}</span>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="info-line">
|
||||
<span class="label">商品原价：</span>
|
||||
<span class="price">￥{{ scope.item.price }}</span>
|
||||
<div class="product-box">
|
||||
<div class="info">
|
||||
<el-alert type="info" show-icon :closable="false" effect="dark">
|
||||
<strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
|
||||
当月充值的点卡有效期可以延期到下个月底。
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="200">
|
||||
<template #default="scope">
|
||||
<div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
|
||||
<div class="image-container">
|
||||
<el-image :src="vipImg" fit="cover"/>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">促销立减：</span>
|
||||
<span class="price">￥{{ scope.item.discount }}</span>
|
||||
<div class="product-title">
|
||||
<span class="name">{{ scope.item.name }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">有效期：</span>
|
||||
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
||||
<span class="expire" v-else>当月有效</span>
|
||||
<div class="product-info">
|
||||
<div class="info-line">
|
||||
<span class="label">商品原价：</span>
|
||||
<span class="price">￥{{ scope.item.price }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">促销立减：</span>
|
||||
<span class="price">￥{{ scope.item.discount }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="label">有效期：</span>
|
||||
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
||||
<span class="expire" v-else>当月有效</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ItemList>
|
||||
</template>
|
||||
</ItemList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
|
||||
@ -81,6 +87,7 @@ import LoginDialog from "@/components/LoginDialog.vue";
|
||||
import {checkSession} from "@/action/session";
|
||||
import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
|
||||
import router from "@/router";
|
||||
import UserProfile from "@/components/UserProfile.vue";
|
||||
|
||||
const listBoxHeight = window.innerHeight - 97
|
||||
const list = ref([])
|
||||
@ -187,88 +194,105 @@ const queryOrder = (orderNo) => {
|
||||
}
|
||||
|
||||
.inner {
|
||||
display flex
|
||||
color #ffffff
|
||||
padding 15px;
|
||||
overflow-y visible
|
||||
overflow-x hidden
|
||||
|
||||
.info {
|
||||
.el-alert__description {
|
||||
font-size 14px !important
|
||||
margin 0
|
||||
}
|
||||
.user-profile {
|
||||
padding 10px 20px
|
||||
background-color #393F4A
|
||||
color #ffffff
|
||||
border-radius 10px
|
||||
|
||||
.el-form-item__label {
|
||||
color #ffffff
|
||||
justify-content start
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
.product-item {
|
||||
border 1px solid #666666
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
transition: all 0.3s ease; /* 添加过渡效果 */
|
||||
.product-box {
|
||||
padding 0 10px
|
||||
|
||||
.image-container {
|
||||
display flex
|
||||
justify-content center
|
||||
.info {
|
||||
.el-alert__description {
|
||||
font-size 14px !important
|
||||
margin 0
|
||||
}
|
||||
padding 10px 20px
|
||||
}
|
||||
|
||||
.el-image {
|
||||
padding 6px
|
||||
.list-box {
|
||||
.product-item {
|
||||
border 1px solid #666666
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
transition: all 0.3s ease; /* 添加过渡效果 */
|
||||
|
||||
.el-image__inner {
|
||||
border-radius 10px
|
||||
.image-container {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.el-image {
|
||||
padding 6px
|
||||
|
||||
.el-image__inner {
|
||||
border-radius 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-title {
|
||||
display flex
|
||||
padding 10px
|
||||
|
||||
.name {
|
||||
width 100%
|
||||
text-align center
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
color #47fff1
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding 10px 20px
|
||||
font-size 14px
|
||||
color #999999
|
||||
|
||||
.info-line {
|
||||
.product-title {
|
||||
display flex
|
||||
width 100%
|
||||
padding 5px 0
|
||||
padding 10px
|
||||
|
||||
.label {
|
||||
.name {
|
||||
width 100%
|
||||
text-align center
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
color #47fff1
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding 10px 20px
|
||||
font-size 14px
|
||||
color #999999
|
||||
|
||||
.info-line {
|
||||
display flex
|
||||
width 100%
|
||||
padding 5px 0
|
||||
|
||||
.label {
|
||||
display flex
|
||||
width 100%
|
||||
}
|
||||
|
||||
.price, .expire {
|
||||
display flex
|
||||
width 90px
|
||||
justify-content right
|
||||
}
|
||||
|
||||
.price {
|
||||
color #f56c6c
|
||||
}
|
||||
|
||||
.expire {
|
||||
color #409eff
|
||||
}
|
||||
}
|
||||
|
||||
.price, .expire {
|
||||
display flex
|
||||
width 80px
|
||||
justify-content right
|
||||
}
|
||||
|
||||
.price {
|
||||
color #f56c6c
|
||||
}
|
||||
|
||||
.expire {
|
||||
color #409eff
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user