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

style:样式切换

Browse Source
This commit is contained in:
lqins
2024-12-19 16:57:57 +08:00
parent 710b008453
commit 357c77ef30
59 changed files with 4775 additions and 3420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
web/src/components/UserOrder.vue
View File

@@ -1,95 +1,111 @@
<template>
<div class="user-bill" v-loading="loading" element-loading-background="rgba(255,255,255,.3)">
<div
class="user-bill"
v-loading="loading"
element-loading-background="rgba(255,255,255,.3)"
>
<el-row v-if="items.length > 0">
<el-table :data="items" :row-key="row => row.id" table-layout="auto" border
style="--el-table-border-color:#373C47;
--el-table-tr-bg-color:#2D323B;
--el-table-row-hover-bg-color:#373C47;
--el-table-header-bg-color:#474E5C;
--el-table-text-color:#d1d1d1">
<el-table
:data="items"
:row-key="(row) => row.id"
table-layout="auto"
border
>
<el-table-column prop="order_no" label="订单号">
<template #default="scope">
<span>{{ scope.row.order_no }}</span>
<el-icon class="copy-order-no" :data-clipboard-text="scope.row.order_no">
<DocumentCopy/>
<el-icon
class="copy-order-no"
:data-clipboard-text="scope.row.order_no"
>
<DocumentCopy />
</el-icon>
</template>
</el-table-column>
<el-table-column prop="subject" label="产品名称"/>
<el-table-column prop="amount" label="订单金额"/>
<el-table-column prop="subject" label="产品名称" />
<el-table-column prop="amount" label="订单金额" />
<el-table-column label="订单算力">
<template #default="scope">
<span>{{ scope.row.remark?.power }}</span>
</template>
</el-table-column>
<el-table-column prop="pay_method" label="支付渠道"/>
<el-table-column prop="pay_name" label="支付名称"/>
<el-table-column prop="pay_method" label="支付渠道" />
<el-table-column prop="pay_name" label="支付名称" />
<el-table-column label="支付时间">
<template #default="scope">
<span v-if="scope.row['pay_time']">{{ dateFormat(scope.row['pay_time']) }}</span>
<span v-if="scope.row['pay_time']">{{
dateFormat(scope.row["pay_time"])
}}</span>
<el-tag v-else>未支付</el-tag>
</template>
</el-table-column>
</el-table>
</el-row>
<el-empty :image-size="100" v-else/>
<el-empty :image-size="100" v-else />
<div class="pagination">
<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()"
:total="total"/>
<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()"
style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
:total="total"
/>
</div>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {dateFormat} from "@/utils/libs";
import {DocumentCopy} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { httpGet } from "@/utils/http";
import { ElMessage } from "element-plus";
import { dateFormat } from "@/utils/libs";
import { DocumentCopy } from "@element-plus/icons-vue";
import Clipboard from "clipboard";
const items = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(12)
const loading = ref(true)
const items = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(12);
const loading = ref(true);
onMounted(() => {
fetchData()
const clipboard = new Clipboard('.copy-order-no');
clipboard.on('success', () => {
fetchData();
const clipboard = new Clipboard(".copy-order-no");
clipboard.on("success", () => {
ElMessage.success("复制成功！");
})
});
clipboard.on('error', () => {
ElMessage.error('复制失败！');
})
})
clipboard.on("error", () => {
ElMessage.error("复制失败！");
});
});
// 获取数据
const fetchData = () => {
httpGet('/api/order/list', {page: page.value, page_size: pageSize.value}).then((res) => {
if (res.data) {
items.value = res.data.items
total.value = res.data.total
page.value = res.data.page
pageSize.value = res.data.page_size
}
loading.value = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
httpGet("/api/order/list", { page: page.value, page_size: pageSize.value })
.then((res) => {
if (res.data) {
items.value = res.data.items;
total.value = res.data.total;
page.value = res.data.page;
pageSize.value = res.data.page_size;
}
loading.value = false;
})
.catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
</script>
<style scoped lang="stylus">
.user-bill {
background-color: var(--chat-bg);
.pagination {
margin: 20px 0 0 0;
display: flex;
@@ -105,4 +121,4 @@ const fetchData = () => {
color #20a0ff
}
}
</style>
</style>