xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-04 16:23:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor login dialog for front page

Browse Source
This commit is contained in:
RockYang
2024-05-18 00:27:32 +08:00
parent cac3194d5b
commit bcadee7290
16 changed files with 277 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.vue
View File

@@ -41,6 +41,8 @@ html, body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
--primary-color: #21aa93
}
.el-overlay-dialog {

97
web/src/assets/css/chat-app.styl
View File

@@ -2,15 +2,6 @@
background-color: #282c34;
height 100%
.title {
text-align center
background-color #25272d
font-size 24px
color #ffffff
padding 10px
border-bottom 1px solid #3c3c3c
}
.inner {
display flex
color #ffffff
@@ -19,51 +10,71 @@
overflow-x hidden
.list-box {
.app-item {
border 1px solid #666666
border-radius 6px
overflow hidden
transition: all 0.3s ease; /* 添加过渡效果 */
.item {
display flex
flex-flow row
border 1px solid #3c3c3c
padding 10px
.el-image {
padding 6px
.el-image__inner {
border-radius 10px
}
.image {
width 80px
height 80px
min-width 80px
border-radius 5px
overflow hidden
}
.title {
.inner {
display flex
padding 10px
flex-flow column
padding 0 0 0 10px
width 100%
.name {
width 100%
.info {
text-align left
font-size 16px
font-weight bold
color #47fff1
.info-title {
color var(--el-text-color)
font-size 1.25rem
line-height 1.75rem
letter-spacing: .025em;
font-weight: 600;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.info-text {
padding 8px 0
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
height 34px
font-size: .875rem;
color #999999
}
}
.opt {
position: relative;
width 100%
top -5px
.btn {
margin-top 10px
display flex
justify-content right
.el-button {
margin-left 10px
.el-icon {
margin-right 5px
}
}
}
}
.hello-msg {
height 60px
padding 10px
font-size 14px
color #999999
}
&:hover {
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
}
}
}
}

1
web/src/assets/css/home.styl
View File

@@ -140,6 +140,7 @@
.content {
width: 100%
overflow auto
box-sizing: border-box
background-color #282c34
}

8
web/src/assets/css/member.styl
View File

@@ -65,9 +65,12 @@
padding 15px 0 15px 15px;
overflow-x hidden
overflow-y visible
display flex
flex-flow row
.user-profile {
padding 10px 20px 20px 20px
width 300px
background-color #393F4A
color #ffffff
border-radius 10px
@@ -91,12 +94,15 @@
.product-box {
padding 0 20px
width 100%
.info {
.el-alert__description {
font-size 14px !important
margin 0
}
padding 10px 20px 20px 0
padding 0 0 20px 0
}
.list-box {

71
web/src/components/ItemList.vue
View File

@@ -1,19 +1,10 @@
<template>
<div class="list-box" ref="container">
<div class="list-inner">
<div
class="list-item"
v-for="(item, index) in items"
:key="index"
:style="{width:itemWidth + 'px'}"
>
<div class="item-inner" :style="{padding: gap/2+'px'}">
<div class="item-wrapper">
<slot :item="item" :index="index" :width="itemWidth"></slot>
</div>
</div>
</div>
</div>
<div class="list-box" ref="containerRef">
<el-row :gutter="gap">
<el-col v-for="item in items" :key="item.id" :span="span" :style="{marginBottom:gap+'px'} ">
<slot :item="item"></slot>
</el-col>
</el-row>
</div>
</template>
@@ -29,7 +20,7 @@ const props = defineProps({
},
gap: {
type: Number,
default: 12
default: 10
},
width: {
type: Number,
@@ -37,45 +28,35 @@ const props = defineProps({
}
});
const container = ref(null)
const itemWidth = ref(props.width)
const containerRef = ref(null)
const span = ref(12)
onMounted(() => {
computeSize()
calcSpan()
})
const computeSize = () => {
const w = container.value.offsetWidth - 10 // 减去滚动条的宽度
let cols = Math.floor(w / props.width)
itemWidth.value = Math.floor(w / cols)
}
window.onresize = () => {
computeSize()
const calcSpan = () => {
let cols = Math.floor(containerRef.value.offsetWidth / props.width)
if (cols >= 12) {
span.value = 1
return
}
console.log(cols)
while (cols > 1) {
if (24 % cols === 0) {
span.value = 24 / cols
return
}
cols -= 1
}
span.value = 12
}
window.onresize = () => calcSpan()
</script>
<style scoped lang="stylus">
.list-box {
.list-inner {
display flex
flex-wrap wrap
.list-item {
.item-inner {
display flex
.item-wrapper {
height 100%
width 100%
display flex
justify-content center
}
}
}
}
}
</style>

62
web/src/views/ChatApps.vue
View File

@@ -2,15 +2,21 @@
<div>
<div class="page-apps custom-scroll">
<div class="inner" :style="{height: listBoxHeight + 'px'}">
<ItemList :items="list" v-if="list.length > 0" :gap="20" :width="250">
<ItemList :items="list" v-if="list.length > 0" :gap="15" :width="300">
<template #default="scope">
<div class="app-item" :style="{width: scope.width+'px'}">
<el-image :src="scope.item.icon" fit="cover" :style="{height: scope.width+'px'}"/>
<div class="title">
<span class="name">{{ scope.item.name }}</span>
<div class="opt">
<div class="item">
<div class="image">
<el-image :src="scope.item.icon" fit="cover"/>
</div>
<div class="inner">
<div class="info">
<div class="info-title">{{ scope.item.name }}</div>
<div class="info-text">{{ scope.item.hello_msg }}</div>
</div>
<div class="btn">
<div v-if="hasRole(scope.item.key)">
<el-button size="small" type="success" @click="useRole(scope.item)">使用</el-button>
<el-button size="small" color="#21aa93" @click="useRole(scope.item)">使用</el-button>
<el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>
</div>
<el-button v-else size="small"
@@ -23,15 +29,34 @@
</el-button>
</div>
</div>
<div class="hello-msg" ref="elements">{{ scope.item.intro }}</div>
</div>
<!-- <div class="app-item">-->
<!-- <el-image :src="scope.item.icon" fit="cover"/>-->
<!-- <div class="title">-->
<!-- <span class="name">{{ scope.item.name }}</span>-->
<!-- <div class="opt">-->
<!-- <div v-if="hasRole(scope.item.key)">-->
<!-- <el-button size="small" type="success" @click="useRole(scope.item)">使用</el-button>-->
<!-- <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>-->
<!-- </div>-->
<!-- <el-button v-else size="small"-->
<!-- style="&#45;&#45;el-color-primary:#009999"-->
<!-- @click="updateRole(scope.item, 'add')">-->
<!-- <el-icon>-->
<!-- <Plus/>-->
<!-- </el-icon>-->
<!-- <span>添加应用</span>-->
<!-- </el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="hello-msg" ref="elements">{{ scope.item.intro }}</div>-->
<!-- </div>-->
</template>
</ItemList>
</div>
</div>
<login-dialog :show="showLoginDialog" @hide="getRoles" @success=""/>
</div>
</template>
@@ -39,18 +64,18 @@
import {onMounted, ref} from "vue"
import {ElMessage} from "element-plus";
import {httpGet, httpPost} from "@/utils/http";
import ItemList from "@/components/ItemList.vue";
import {Plus} from "@element-plus/icons-vue";
import LoginDialog from "@/components/LoginDialog.vue";
import {checkSession} from "@/action/session";
import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
import {useRouter} from "vue-router";
import {useSharedStore} from "@/store/sharedata";
import ItemList from "@/components/ItemList.vue";
import {Plus} from "@element-plus/icons-vue";
const listBoxHeight = window.innerHeight - 147
const listBoxHeight = window.innerHeight - 87
const list = ref([])
const showLoginDialog = ref(false)
const roles = ref([])
const elements = ref(null)
const store = useSharedStore();
onMounted(() => {
httpGet("/api/role/list?all=true").then((res) => {
const items = res.data
@@ -67,7 +92,6 @@ onMounted(() => {
})
const getRoles = () => {
showLoginDialog.value = false
checkSession().then(user => {
roles.value = user.chat_roles
}).catch(() => {
@@ -98,7 +122,7 @@ const updateRole = (row, opt) => {
ElMessage.error(title.value + "失败：" + e.message)
})
}).catch(() => {
showLoginDialog.value = true
store.setShowLoginDialog(true)
})
}

11
web/src/views/ChatPlus.vue
View File

@@ -99,7 +99,7 @@
<template #default>
<div class="chat-config">
<el-select v-model="roleId" filterable placeholder="角色" @change="newChat"
<el-select v-model="roleId" filterable placeholder="角色" @change="_newChat"
class="role-select"
style="width:150px">
<el-option
@@ -115,7 +115,7 @@
</el-option>
</el-select>
<el-select v-model="modelID" filterable placeholder="模型" @change="newChat"
<el-select v-model="modelID" filterable placeholder="模型" @change="_newChat"
:disabled="disableModel"
style="width:150px">
<el-option
@@ -144,7 +144,7 @@
</el-tooltip>
</span>
<span class="tool-item">
<span class="tool-item" v-if="isLogin">
<el-tooltip class="box-item" effect="dark" content="上传附件">
<file-select v-if="isLogin" :user-id="loginUser.id" @selected="insertURL"/>
</el-tooltip>
@@ -378,6 +378,11 @@ const resizeElement = function () {
leftBoxHeight.value = window.innerHeight - 90 - 45 - 82;
};
const _newChat = () => {
if (isLogin.value) {
newChat()
}
}
const disableModel = ref(false)
// 新建会话
const newChat = () => {

9
web/src/views/Dalle.vue
View File

@@ -221,7 +221,6 @@
</div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
<el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
</div>
</template>
@@ -233,16 +232,16 @@ import {httpGet, httpPost} from "@/utils/http";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import Clipboard from "clipboard";
import {checkSession} from "@/action/session";
import LoginDialog from "@/components/LoginDialog.vue";
import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(0)
const paramBoxHeight = ref(0)
const showLoginDialog = ref(false)
const isLogin = ref(false)
const loading = ref(true)
const colWidth = ref(240)
const colWidth = ref(220)
const isOver = ref(false)
const previewURL = ref("")
const store = useSharedStore();
const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 90
@@ -438,7 +437,7 @@ const generate = () => {
}
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}
httpPost("/api/dall/image", params.value).then(() => {

9
web/src/views/Home.vue
View File

@@ -14,7 +14,7 @@
<el-tooltip
class="box-item"
effect="dark"
effect="light"
content="部署文档"
placement="bottom">
<a href="https://ai.r9it.com/docs/install/" class="link-button" target="_blank">
@@ -24,7 +24,7 @@
<el-tooltip
class="box-item"
effect="dark"
effect="light"
content="项目源码"
placement="bottom">
<a href="https://github.com/yangjian102621/chatgpt-plus" class="link-button" target="_blank">
@@ -68,7 +68,7 @@
</el-dropdown>
<div v-else>
<el-button size="small" color="#21aa93" @click="show = true" round>登录</el-button>
<el-button size="small" color="#21aa93" @click="store.setShowLoginDialog(true)" round>登录</el-button>
<el-button size="small" @click="router.push('/register')" round>注册</el-button>
</div>
</div>
@@ -113,7 +113,7 @@
</ul>
</div>
<div class="content" :style="{height: mainWinHeight+'px'}">
<div class="content custom-scroll" :style="{height: mainWinHeight+'px'}">
<router-view :key="routerViewKey" v-slot="{ Component }">
<transition name="move" mode="out-in">
<component :is="Component"></component>
@@ -220,5 +220,6 @@ const loginCallback = () => {
</script>
<style lang="stylus" scoped>
@import "@/assets/css/custom-scroll.styl"
@import "@/assets/css/home.styl"
</style>

12
web/src/views/ImageMj.vue
View File

@@ -600,8 +600,6 @@
</div>
<el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div>
</template>
@@ -616,14 +614,14 @@ import {checkSession} from "@/action/session";
import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session";
import {copyObj, removeArrayItem} from "@/utils/libs";
import LoginDialog from "@/components/LoginDialog.vue";
import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(0)
const paramBoxHeight = ref(0)
const showLoginDialog = ref(false)
const loading = ref(true)
const colWidth = ref(240)
const colWidth = ref(220)
const previewURL = ref("")
const store = useSharedStore();
const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 80
@@ -903,7 +901,7 @@ const beforeUpload = (key) => {
// 图片上传
const uploadImg = (file) => {
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}
@@ -936,7 +934,7 @@ const uploadImg = (file) => {
const promptRef = ref(null)
const generate = () => {
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}

10
web/src/views/ImageSd.vue
View File

@@ -497,8 +497,6 @@
</el-dialog>
</div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div>
</template>
@@ -511,17 +509,17 @@ import Clipboard from "clipboard";
import {checkSession} from "@/action/session";
import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session";
import LoginDialog from "@/components/LoginDialog.vue";
import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(0)
const paramBoxHeight = ref(0)
const fullImgHeight = ref(window.innerHeight - 60)
const showTaskDialog = ref(false)
const item = ref({})
const showLoginDialog = ref(false)
const isLogin = ref(false)
const loading = ref(true)
const colWidth = ref(240)
const colWidth = ref(220)
const store = useSharedStore();
const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 80
@@ -730,7 +728,7 @@ const generate = () => {
}
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}

2
web/src/views/ImagesWall.vue
View File

@@ -311,7 +311,7 @@ const loading = ref(true)
const isOver = ref(false)
const imgType = ref("mj") // 图片类别
const listBoxHeight = window.innerHeight - 124
const colWidth = ref(240)
const colWidth = ref(220)
const fullImgHeight = ref(window.innerHeight - 60)
const showTaskDialog = ref(false)
const item = ref({})

10
web/src/views/Invitation.vue
View File

@@ -84,8 +84,6 @@
</div>
</div>
</div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div>
</template>
@@ -97,17 +95,17 @@ import {ElMessage} from "element-plus";
import Clipboard from "clipboard";
import InviteList from "@/components/InviteList.vue";
import {checkSession} from "@/action/session";
import LoginDialog from "@/components/LoginDialog.vue";
import {useSharedStore} from "@/store/sharedata";
const inviteURL = ref("")
const qrImg = ref("")
const qrImg = ref("/images/wx.png")
const inviteChatCalls = ref(0)
const inviteImgCalls = ref(0)
const hits = ref(0)
const regNum = ref(0)
const rate = ref(0)
const isLogin = ref(false)
const showLoginDialog = ref(false)
const store = useSharedStore()
onMounted(() => {
initData()
@@ -152,7 +150,7 @@ const initData = () => {
ElMessage.error("获取系统配置失败：" + e.message)
})
}).catch(() => {
showLoginDialog.value = true
store.setShowLoginDialog(true)
});
}
</script>

34
web/src/views/MarkMap.vue
View File

@@ -90,13 +90,10 @@
</div>
</div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div>
</template>
<script setup>
import LoginDialog from "@/components/LoginDialog.vue";
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import {Markmap} from 'markmap-view';
import {Transformer} from 'markmap-lib';
@@ -105,6 +102,7 @@ import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {Download} from "@element-plus/icons-vue";
import {Toolbar} from 'markmap-toolbar';
import {useSharedStore} from "@/store/sharedata";
const leftBoxHeight = ref(window.innerHeight - 105)
const rightBoxHeight = ref(window.innerHeight - 115)
@@ -125,10 +123,10 @@ const md = require('markdown-it')({breaks: true});
const content = ref(text.value)
const html = ref("")
const showLoginDialog = ref(false)
const isLogin = ref(false)
const loginUser = ref({power: 0})
const transformer = new Transformer();
const store = useSharedStore();
const svgRef = ref(null)
@@ -150,21 +148,21 @@ onMounted(() => {
});
const initData = () => {
httpGet("/api/model/list").then(res => {
for (let v of res.data) {
if (v.platform === "OpenAI" && v.value.indexOf("gpt-4-gizmo") === -1) {
models.value.push(v)
}
}
modelID.value = models.value[0].id
}).catch(e => {
ElMessage.error("获取模型失败：" + e.message)
})
checkSession().then(user => {
loginUser.value = user
isLogin.value = true
httpGet("/api/model/list").then(res => {
for (let v of res.data) {
if (v.platform === "OpenAI" && v.value.indexOf("gpt-4-gizmo") === -1) {
models.value.push(v)
}
}
modelID.value = models.value[0].id
connect(user.id)
}).catch(e => {
ElMessage.error("获取模型失败：" + e.message)
})
connect(user.id)
}).catch(() => {
});
}
@@ -205,7 +203,7 @@ window.onresize = () => {
}
const socket = ref(null)
const heartbeatHandle = ref(null)
const heartbeatHandle = ref(0)
const connect = (userId) => {
if (socket.value !== null) {
socket.value.close()
@@ -292,7 +290,7 @@ const generateAI = () => {
return ElMessage.error("请输入你的需求")
}
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}
loading.value = true

173
web/src/views/Member.vue
View File

@@ -2,98 +2,92 @@
<div>
<div class="member custom-scroll">
<div class="inner" :style="{height: listBoxHeight + 'px'}">
<el-row :gutter="20">
<el-col :span="7">
<div class="user-profile">
<user-profile/>
<div class="user-profile">
<user-profile/>
<el-row class="user-opt" :gutter="20">
<el-col :span="12">
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
</el-col>
<el-col :span="12">
<el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
</el-col>
<el-col :span="12">
<el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
</el-col>
<el-col :span="12">
<el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
</el-button>
</el-col>
<el-row class="user-opt" :gutter="20">
<el-col :span="12">
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
</el-col>
<el-col :span="12">
<el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
</el-col>
<el-col :span="12">
<el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
</el-col>
<el-col :span="12">
<el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
</el-button>
</el-col>
<el-col :span="24" style="padding-top: 30px" v-if="isLogin">
<el-button type="danger" round @click="logout">退出登录</el-button>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="24" style="padding-top: 30px" v-if="isLogin">
<el-button type="danger" round @click="logout">退出登录</el-button>
</el-col>
</el-row>
</div>
<el-col :span="17">
<div class="product-box">
<div class="info" v-if="orderPayInfoText !== ''">
<el-alert type="success" show-icon :closable="false" effect="dark">
<strong>说明:</strong> {{ vipInfoText }}
</el-alert>
</div>
<div class="product-box">
<div class="info" v-if="orderPayInfoText !== ''">
<el-alert type="success" show-icon :closable="false" effect="dark">
<strong>说明:</strong> {{ vipInfoText }}
</el-alert>
</div>
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
<template #default="scope">
<div class="product-item" :style="{width: scope.width+'px'}">
<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>
<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 class="info-line">
<span class="label">算力值：</span>
<span class="power" v-if="scope.item.power > 0">{{ scope.item.power }}</span>
<span class="power" v-else>{{ vipMonthPower }}</span>
</div>
<div class="pay-way">
<el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
<i class="iconfont icon-alipay"></i> 支付宝
</el-button>
<el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
<span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
</el-button>
<el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
</el-button>
</div>
</div>
<ItemList :items="list" v-if="list.length > 0" :gap="15" :width="240">
<template #default="scope">
<div class="product-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>
<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>
</template>
</ItemList>
<h2 class="headline">消费账单</h2>
<div class="info-line">
<span class="label">算力值：</span>
<span class="power" v-if="scope.item.power > 0">{{ scope.item.power }}</span>
<span class="power" v-else>{{ vipMonthPower }}</span>
</div>
<div class="user-order">
<user-order v-if="isLogin"/>
<div class="pay-way">
<el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
<i class="iconfont icon-alipay"></i> 支付宝
</el-button>
<el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
<span v-if="payWays['hupi']['name'] === 'wechat'"><i
class="iconfont icon-wechat-pay"></i> 微信</span>
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
</el-button>
<el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
</el-button>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</template>
</ItemList>
<h2 class="headline">消费账单</h2>
<div class="user-order">
<user-order v-if="isLogin"/>
</div>
</div>
</div>
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
@@ -154,7 +148,6 @@
</el-dialog>
</div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="loginSuccess"/>
</div>
</template>
@@ -164,7 +157,6 @@ import {ElMessage} from "element-plus";
import {httpGet, httpPost} from "@/utils/http";
import ItemList from "@/components/ItemList.vue";
import {InfoFilled, SuccessFilled} from "@element-plus/icons-vue";
import LoginDialog from "@/components/LoginDialog.vue";
import {checkSession} from "@/action/session";
import UserProfile from "@/components/UserProfile.vue";
import PasswordDialog from "@/components/PasswordDialog.vue";
@@ -174,10 +166,10 @@ import {useRouter} from "vue-router";
import {removeUserToken} from "@/store/session";
import UserOrder from "@/components/UserOrder.vue";
import CountDown from "@/components/CountDown.vue";
import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = window.innerHeight - 97
const list = ref([])
const showLoginDialog = ref(false)
const showPayDialog = ref(false)
const vipImg = ref("/images/vip.png")
const enableReward = ref(false) // 是否启用众筹功能
@@ -205,6 +197,7 @@ const amount = ref(0)
const payName = ref("支付宝")
const curPay = ref("alipay") // 当前支付方式
const vipInfoText = ref("")
const store = useSharedStore()
onMounted(() => {
@@ -212,7 +205,7 @@ onMounted(() => {
user.value = _user
isLogin.value = true
}).catch(() => {
showLoginDialog.value = true
store.setShowLoginDialog(true)
})
httpGet("/api/product/list").then((res) => {
@@ -278,7 +271,7 @@ const alipay = (row) => {
curPay.value = "alipay"
amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}
@@ -294,7 +287,7 @@ const huPiPay = (row) => {
curPay.value = "hupi"
amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}
@@ -310,7 +303,7 @@ const PayJs = (row) => {
curPay.value = "payjs"
amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) {
showLoginDialog.value = true
store.setShowLoginDialog(true)
return
}

45
web/src/views/PowerLog.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="power-log" v-loading="loading">
<div class="inner">
<div class="list-box" :style="{height: listBoxHeight + 'px'}">
<div class="power-log custom-scroll" v-loading="loading">
<div class="inner" :style="{height: listBoxHeight + 'px'}">
<div class="list-box">
<div class="handle-box">
<el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>
<el-date-picker
@@ -11,9 +11,9 @@
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin: 0 10px;width: 200px; position: relative;top:3px;"
style="margin: 0 10px;width: 200px;"
/>
<el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
<el-button color="#21aa93" :icon="Search" @click="fetchData">搜索</el-button>
</div>
<el-row v-if="items.length > 0">
@@ -71,21 +71,25 @@ import {Search} from "@element-plus/icons-vue";
import Clipboard from "clipboard";
import {ElMessage} from "element-plus";
import {httpPost} from "@/utils/http";
import {checkSession} from "@/action/session";
const items = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const listBoxHeight = window.innerHeight - 117
const listBoxHeight = window.innerHeight - 87
const query = ref({
model: "",
date: []
})
const tagColors = ref(["", "success", "", "danger", "info", "warning"])
const tagColors = ref(["primary", "success", "primary", "danger", "info", "warning"])
onMounted(() => {
fetchData()
checkSession().then(() => {
fetchData()
}).catch(() => {
})
const clipboard = new Clipboard('.copy-order-no');
clipboard.on('success', () => {
ElMessage.success("复制成功！");
@@ -121,33 +125,12 @@ const fetchData = () => {
</script>
<style lang="stylus" scoped>
@import "@/assets/css/custom-scroll.styl"
.power-log {
color #ffffff
.inner {
padding 0 20px 20px 20px
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
/* 修改滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
background-color: #ffffff;
}
/* 修改滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius 8px
}
/* 修改滚动条的滑块的悬停颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: #999999;
}
overflow auto
.list-box {
overflow-x hidden