9 Commits

  1. 2
      .env.development
  2. 1
      .gitignore
  3. 7
      package-lock.json
  4. 1
      package.json
  5. 14
      src/assets/SvgIcons/上升箭头.svg
  6. 14
      src/assets/SvgIcons/下降箭头.svg
  7. 14
      src/assets/SvgIcons/持平.svg
  8. 160
      src/components/workspace/CashManagement.vue
  9. 100
      src/components/workspace/GoldGraph.vue
  10. 471
      src/components/workspace/GoldManagement.vue
  11. 88
      src/views/home.vue
  12. 616
      src/views/moneyManage/receiveDetail/receiveDetail.vue
  13. 3
      src/views/recharge/gold/addCoinRecharge.vue
  14. 43
      src/views/workspace/index.vue
  15. 2
      stats.html

2
.env.development

@ -13,4 +13,4 @@ VITE_UPLOAD_URL=http://39.101.133.168:8828/hljw/api/aws/upload
# 本地 # 本地
#VITE_API_BASE='http://localhost:8081/' #VITE_API_BASE='http://localhost:8081/'
# sunjiabei # sunjiabei
# VITE_API_BASE='http://192.168.0.34:8081/'
# VITE_API_BASE='http://192.168.1.70:8081/'

1
.gitignore

@ -25,3 +25,4 @@ dist-ssr
# 忽略 # 忽略
stats.html stats.html
.env.development .env.development
stats.html

7
package-lock.json

@ -17,6 +17,7 @@
"axios": "^1.12.2", "axios": "^1.12.2",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"dayjs-plugin-utc": "^0.1.2", "dayjs-plugin-utc": "^0.1.2",
"decimal.js": "^10.6.0",
"echarts": "^5.5.1", "echarts": "^5.5.1",
"element-plus": "^2.8.8", "element-plus": "^2.8.8",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
@ -3564,9 +3565,9 @@
} }
}, },
"node_modules/decimal.js": { "node_modules/decimal.js": {
"version": "10.4.3",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/decimal.js/-/decimal.js-10.4.3.tgz",
"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
"version": "10.6.0",
"resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.6.0.tgz",
"integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/define-lazy-prop": { "node_modules/define-lazy-prop": {

1
package.json

@ -21,6 +21,7 @@
"axios": "^1.12.2", "axios": "^1.12.2",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"dayjs-plugin-utc": "^0.1.2", "dayjs-plugin-utc": "^0.1.2",
"decimal.js": "^10.6.0",
"echarts": "^5.5.1", "echarts": "^5.5.1",
"element-plus": "^2.8.8", "element-plus": "^2.8.8",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",

14
src/assets/SvgIcons/上升箭头.svg

@ -0,0 +1,14 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 14" class="design-iconfont">
<path d="M3.33333 14H6.66667V7.875V5.25H10L5 0L0 5.25H3.33333V7.875V14Z" fill="url(#9ch16kl2f__paint0_linear_454_32894)"/>
<path d="M6.54883 13.8828V5.13281H9.72656L5 0.170898L0.273438 5.13281H3.45117V13.8828H6.54883Z" stroke="url(#9ch16kl2f__paint1_linear_454_32894)" stroke-opacity=".63" stroke-width=".235129" stroke-miterlimit="10"/>
<defs>
<linearGradient id="9ch16kl2f__paint0_linear_454_32894" x1=".938339" y1="14" x2="12.7734" y2="9.25209" gradientUnits="userSpaceOnUse">
<stop stop-color="#F46C6C"/>
<stop offset="1" stop-color="#FCC4C5"/>
</linearGradient>
<linearGradient id="9ch16kl2f__paint1_linear_454_32894" x1=".975668" y1="14" x2="12.7608" y2="9.22824" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCC4C5"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
</defs>
</svg>

14
src/assets/SvgIcons/下降箭头.svg

@ -0,0 +1,14 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 14" class="design-iconfont">
<path d="M3.33333 0H6.66667V6.125V8.75H10L5 14L0 8.75H3.33333V6.125V0Z" fill="url(#3jb4xovw8__paint0_linear_415_444599)"/>
<path d="M6.50977 0.157227V8.90723H9.63379L5 13.7725L0.366211 8.90723H3.49023V0.157227H6.50977Z" stroke="url(#3jb4xovw8__paint1_linear_415_444599)" stroke-opacity=".63" stroke-width=".313505" stroke-miterlimit="10"/>
<defs>
<linearGradient id="3jb4xovw8__paint0_linear_415_444599" x1=".938339" y1="-6.2e-7" x2="12.7734" y2="4.74791" gradientUnits="userSpaceOnUse">
<stop stop-color="#047CF5"/>
<stop offset="1" stop-color="#4CB9F9"/>
</linearGradient>
<linearGradient id="3jb4xovw8__paint1_linear_415_444599" x1=".975668" y1="4.4e-7" x2="12.7608" y2="4.77176" gradientUnits="userSpaceOnUse">
<stop stop-color="#4CB9F9"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
</defs>
</svg>

14
src/assets/SvgIcons/持平.svg

@ -0,0 +1,14 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 5" class="design-iconfont">
<rect x="1" y="1" width="11" height="3" rx=".6875" fill="url(#12pnzcg9o__paint0_linear_443_32365)" fill-opacity=".7"/>
<rect x=".838349" y=".838349" width="11.3233" height="3.3233" rx=".849151" stroke="url(#12pnzcg9o__paint1_linear_443_32365)" stroke-opacity=".63" stroke-width=".323302" stroke-miterlimit="10"/>
<defs>
<linearGradient id="12pnzcg9o__paint0_linear_443_32365" x1="2.03217" y1="1" x2="4.91594" y2="6.93872" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-color="#8A8A8A"/>
</linearGradient>
<linearGradient id="12pnzcg9o__paint1_linear_443_32365" x1="2.07323" y1="1" x2="4.90949" y2="6.89506" gradientUnits="userSpaceOnUse">
<stop stop-color="#8A8A8A"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
</defs>
</svg>

160
src/components/workspace/CashManagement.vue

@ -1,13 +1,30 @@
<template> <template>
<span class="text"> 现金管理
最后更新时间{{
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
}}</span>
<div>
<el-card class="cash-card">
<div>总营收{{ cashData.totalIncome }}</div>
<div class="cash-management">
<div class="cash-title">
<div class="text1"> 现金管理
<span class="text1-update-time">最后更新时间{{
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
}}</span>
</div>
</div>
<div class="text2"><span class="text2-income">总营收{{ cashData.totalIncome }}</span></div>
<div class="chart-container">
<!-- 左侧数据列表 -->
<div class="market-data">
<div v-for="market in cashData.markets" :key="market.name" class="market-item">
<span class="market-name">{{ market.name }}:</span>
<span class="market-value">{{ market.value.toLocaleString() }}</span>
</div>
</div>
<!-- 图表区域 -->
<div ref="chartRef" class="chart"></div> <div ref="chartRef" class="chart"></div>
</el-card>
</div>
</div> </div>
</template> </template>
@ -37,12 +54,16 @@ const renderChart = () => {
} }
const option = { const option = {
tooltip: {trigger: 'item'}, tooltip: {trigger: 'item'},
legend: {bottom: 10},
legend: {
bottom: 5, //
left: 'center'
},
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
data: cashData.value.markets
data: cashData.value.markets,
center: ['60%', '45%'] //
} }
] ]
} }
@ -55,6 +76,21 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
/* 背景卡片大小 */
.cash-management {
margin: 10px 5px;
width: 100%;
height: 50vh;
flex-shrink: 0;
border-radius: 8px;
background: #E7F4FD;
box-shadow: 0 2px 2px 0 #00000040;
display: flex;
flex-direction: column;
align-items: center;
}
/*
.cash-card { .cash-card {
width: 100%; width: 100%;
} }
@ -62,10 +98,110 @@ onMounted(() => {
.chart { .chart {
width: 100%; width: 100%;
height: 200px; height: 200px;
}
} */
.cash-title { .cash-title {
font-weight: bold;
width: 100%;
height: 5vh;
flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(90deg, #E4F0FC 0%, #C6ADFF 50%, #E4F0FC 100%);
box-shadow: 0 2px 2px 0 #00152940;
display: flex;
align-items: center;
justify-content: center;
}
.text1 {
color: #040a2d;
font-family: "PingFang SC";
font-size: 28px;
font-style: normal;
font-weight: 900;
line-height: 31.79px;
}
.text1-update-time {
width: 100%;
height: 26px;
flex-shrink: 0;
color: #040a2d;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 31.79px;
}
/* 总收入的渐变框 */
.text2 {
margin: 13px;
width: 95%;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%);
box-shadow: 0 2px 2px 0 #00152940;
display: flex;
align-items: center;
justify-content: center;
}
/* 总收入字体 */
.text2-income {
width: 215px;
height: 26px;
flex-shrink: 0;
color: #040a2d;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: 31.79px;
}
/* 图表容器 */
.chart-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 10px;
}
/* 左侧数据列表,使用您指定的样式 */
.market-data {
display: flex;
width: 179px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 10px;
margin-left: 80px;
}
.market-item {
display: flex;
justify-content: space-between;
width: 100%;
font-family: "PingFang SC";
font-size: 16px; font-size: 16px;
color: #040a2d;
}
.market-name {
font-weight: 700;
}
.market-value {
font-weight: 500;
}
/* 图表样式 */
.chart {
flex: 1;
height: 300px;
margin-top: 10px;
} }
</style> </style>

100
src/components/workspace/GoldGraph.vue

@ -1,6 +1,6 @@
<template> <template>
<div class="graph"> <div class="graph">
<el-card style="width:84vw;">
<el-card style="width:100%;" class="graph-card">
<div> <div>
<el-tabs v-model="activeTab" @tab-change="handleTabChange"> <el-tabs v-model="activeTab" @tab-change="handleTabChange">
<el-tab-pane label="金币充值" name="recharge"></el-tab-pane> <el-tab-pane label="金币充值" name="recharge"></el-tab-pane>
@ -29,8 +29,9 @@
<div> <div>
<el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="" <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator=""
start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime"
:disabled-date="disabledDate" @change="handleDatePickerChange" />
style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss"
:default-time="defaultTime"
:disabled-date="disabledDate" @change="handleDatePickerChange"/>
<el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">查询</el-button> <el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">查询</el-button>
</div> </div>
</div> </div>
@ -38,15 +39,15 @@
<div class="graph-content"> <div class="graph-content">
<div ref="chartRef" class="left"></div> <div ref="chartRef" class="left"></div>
<div class="right"> <div class="right">
<el-card>
<el-card class="graph-card-list">
<div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div> <div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
<el-select v-model="selectedType" style="width: 100%; margin-bottom: 15px">
<el-select class="card-select" v-model="selectedType" style="width: 100%; margin-bottom: 15px">
<el-option label="全部类型" value="all"></el-option> <el-option label="全部类型" value="all"></el-option>
<el-option label="永久金币" value="permanent"></el-option> <el-option label="永久金币" value="permanent"></el-option>
<el-option label="免费金币" value="free"></el-option> <el-option label="免费金币" value="free"></el-option>
<el-option label="任务金币" value="task"></el-option> <el-option label="任务金币" value="task"></el-option>
</el-select> </el-select>
<el-table :data="tableData" height="320px">
<el-table class="card-table" :data="tableData" height="320px">
<el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column> <el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column>
<el-table-column prop="market" label="地区" align="center"> <el-table-column prop="market" label="地区" align="center">
<template #default="scope"> <template #default="scope">
@ -511,7 +512,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargePermanent, data: chartData.rechargePermanent,
itemStyle: { color: '#5470c6' },
itemStyle: {color: '#5470c6'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -519,7 +520,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeFree, data: chartData.rechargeFree,
itemStyle: { color: '#91cc75' },
itemStyle: {color: '#91cc75'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -527,7 +528,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeTask, data: chartData.rechargeTask,
itemStyle: { color: '#fac858' },
itemStyle: {color: '#fac858'},
barWidth: 30 barWidth: 30
} }
] ]
@ -539,7 +540,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumePermanent, data: chartData.consumePermanent,
itemStyle: { color: '#5470c6' },
itemStyle: {color: '#5470c6'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -547,7 +548,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeFree, data: chartData.consumeFree,
itemStyle: { color: '#91cc75' },
itemStyle: {color: '#91cc75'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -555,7 +556,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeTask, data: chartData.consumeTask,
itemStyle: { color: '#fac858' },
itemStyle: {color: '#fac858'},
barWidth: 30 barWidth: 30
} }
] ]
@ -594,16 +595,24 @@ const updateChart = (chartData) => {
data: markets.value, data: markets.value,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 30
rotate: 0
} }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: {
lineStyle: {
type: 'dashed',
width: 1,
color: '#000000'
}
},
axisLabel: { axisLabel: {
formatter: function (value) { formatter: function (value) {
return value.toLocaleString() return value.toLocaleString()
} }
}
},
}, },
series: series, series: series,
// dataZoom: [ // dataZoom: [
@ -639,7 +648,7 @@ const handleTabChange = () => {
const getAdminData = async function () { const getAdminData = async function () {
try { try {
const result = await API({ url: '/admin/userinfo', data: {} })
const result = await API({url: '/admin/userinfo', data: {}})
adminData.value = result adminData.value = result
console.log('用户信息', adminData.value) console.log('用户信息', adminData.value)
} catch (error) { } catch (error) {
@ -649,7 +658,7 @@ const getAdminData = async function () {
// //
const getCardData = async () => { const getCardData = async () => {
try { try {
const response = await API({ url: '/workbench/getCard', data: {} })
const response = await API({url: '/workbench/getCard', data: {}})
workDataUpdateTime.value = response.updateTime workDataUpdateTime.value = response.updateTime
// //
sumWow.value = response.sumWow.toFixed(2) sumWow.value = response.sumWow.toFixed(2)
@ -756,6 +765,7 @@ onUnmounted(() => {
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
} }
@keyframes spin { @keyframes spin {
@ -767,4 +777,62 @@ onUnmounted(() => {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.graph-card {
background: #F3FAFF;
box-shadow: 0 0 8px 0 #00000040;
}
.graph-card-list {
background: #F3FAFF;
box-shadow: 0 0 8px 0 #00000040;
padding: 12px;
.card-select {
:deep(.el-input__wrapper) {
background-color: #E7F4FD !important;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25) !important;
border: none !important;
}
:deep(.el-input__inner) {
background-color: transparent !important;
}
:deep(.el-input__suffix) {
background-color: transparent !important;
}
}
/* 表格整体背景:把表格容器设为卡片背景 */
:deep(.el-table) {
background-color: #F3FAFF !important;
box-shadow: none !important;
}
/* 表头/表体 wrapper 与 table body 单元格 */
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__body),
:deep(.el-table__header),
:deep(.el-table__body tbody),
:deep(.el-table__body tr),
:deep(.el-table__row),
:deep(.el-table__cell),
:deep(.el-table__body td) {
background-color: transparent !important;
}
/* 表头 */
:deep(.el-table__header th) {
background-color: #F3FAFF !important;
}
/* 行之间的分隔线(更像卡片内表格) */
:deep(.el-table .el-table__row):not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.06);
}
}
</style> </style>

471
src/components/workspace/GoldManagement.vue

@ -1,43 +1,40 @@
<template> <template>
<div>
金币管理 <span class="text">
最后更新时间{{
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
}}
</span>
<div class="gold-management">
<div class="gold-title">
<div class="text1">
金币管理
<span class="text1-update-time">最后更新时间{{
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
}} </span>
</div>
</div>
<!-- 第一行包含两个横向格子 --> <!-- 第一行包含两个横向格子 -->
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<!-- 第一个卡片 --> <!-- 第一个卡片 -->
<el-card class="card-item">
<template #header>
<div class="card-title">当前金币余量
<span style="font-weight: bold">{{
currentGold / 100
}}</span>&nbsp;&nbsp;&nbsp;&nbsp;较前一日
{{ dailyChange / 100 }}
<template v-if="dailyChange > 0">
<el-icon style="color:red">
<ArrowUpBold/>
</el-icon>
</template>
<template v-else-if="dailyChange < 0">
<el-icon style="color:forestgreen">
<ArrowDownBold/>
</el-icon>
</template>
<template v-else>
<el-icon style="color:grey">
<SemiSelect/>
</el-icon>
</template>
</div>
</template>
<div class="card-item-row1">
<div class="card-title">当前金币余量
<span style="font-weight: bold">{{
currentGold / 100
}}</span>&nbsp;&nbsp;&nbsp;&nbsp;较前一日
{{ dailyChange / 100 }}&nbsp;
<template v-if="dailyChange > 0">
<el-image :src="upArrow" style="width: 14px;"/>
</template>
<template v-else-if="dailyChange < 0">
<el-image :src="downArrow" style="width: 14px;"/>
</template>
<template v-else>
<el-image :src="pingArrow" style="width: 14px; padding-top: 12px"/>
</template>
</div>
<div> <div>
<el-row> <el-row>
<!-- 左边文本信息 --> <!-- 左边文本信息 -->
<el-col :span="12"> <el-col :span="12">
<div class="margin-bottom">永久金币<b>{{ currentPermanent / 100 }}</b></div>
<div class="margin-bottom" style="white-space: nowrap;">
永久金币<b>{{ currentPermanent / 100 }}</b>
</div>
<div class="margin-bottom">&nbsp;</div> <div class="margin-bottom">&nbsp;</div>
<div class="margin-bottom">免费金币{{ currentFree / 100 }}</div> <div class="margin-bottom">免费金币{{ currentFree / 100 }}</div>
@ -48,7 +45,7 @@
</div> </div>
<div class="margin-bottom">&nbsp;</div> <div class="margin-bottom">&nbsp;</div>
<div>任务金币{{ currentTask / 100 }}</div>
<div class="margin-bottom">任务金币{{ currentTask / 100 }}</div>
</el-col> </el-col>
<!-- 右边图表 --> <!-- 右边图表 -->
<el-col :span="12"> <el-col :span="12">
@ -61,88 +58,76 @@
</el-row> </el-row>
</div> </div>
</el-card>
</div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<!-- 第二个卡片 --> <!-- 第二个卡片 -->
<el-card class="card-item">
<div class="card-item-row1">
<div class="card-title">全年累计充值金币数{{ yearlyRecharge / 100 }}</div> <div class="card-title">全年累计充值金币数{{ yearlyRecharge / 100 }}</div>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div class="center-card">折合新币累计金额:{{ yearlyMoney / 100 }}</div>
<div class="center-card">昨日新增金币{{ recharge / 100 }}</div>
<div class="center-card">折合新币累计金额</div>
<el-image :src="svg1" style="width: 68px; display: block;margin: 0 auto;"/>
<div class="center-card">{{ yearlyMoney / 100 }}新币</div>
</el-col> </el-col>
<el-col :span="12">
<div class="center-card">其中永久金币{{ money / 100 }}</div>
<!-- 新增的环形图容器 -->
<div ref="rechargeGoldChart" style="width: 100%; height: 150px; margin-top: 10px;"></div>
<el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 120px">
<div class="center-card" style="white-space: nowrap;">昨日新增金币{{ recharge / 100 }}</div>
<div ref="rechargeGoldChart" style="width: 68px; height: 68px; display: block;margin: 0 auto;"></div>
<div class="center-card" style="white-space: nowrap;">其中永久金币{{ money / 100 }}</div>
</el-col> </el-col>
</el-row> </el-row>
</el-card>
</div>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第二行包含两个横向格子 --> <!-- 第二行包含两个横向格子 -->
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<!-- 第三个卡片 --> <!-- 第三个卡片 -->
<el-card class="card-item">
<div class="card-item">
<div class="card-title">全年累计消费金币数{{ yearlyReduce / 100 }}</div> <div class="card-title">全年累计消费金币数{{ yearlyReduce / 100 }}</div>
<div style="padding-left: 30%;">消耗{{ yearlyConsume / 100 }}</div>
<div style="padding-left: 30%;">退款{{ yearlyRefund / 100 }}</div>
<!-- 新增的两个环形图容器 -->
<div ref="consumeChart" style="width: 100%; height: 150px; margin-top: 10px;"></div>
<template #footer>
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增消费{{ dailyConsume / 100 }}</div>
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增消耗{{ dailyReduce / 100 }}</div>
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增退款{{ dailyRefund / 100 }}</div>
</template>
</el-card>
<el-row style="height: 200px;">
<el-col :span="12">
<div ref="consumeChart" style="width:100%; height: 68%;"></div>
</el-col>
<el-col :span="12">
<div ref="consumeDetailChart" style="width: 100%; height: 88%;"></div>
</el-col>
</el-row>
</div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<!-- 第四个卡片 --> <!-- 第四个卡片 -->
<el-card class="card-item">
<el-col class="card-title">全年累计充值人头数{{ yearlyRechargeNum }}</el-col>
<el-col style="padding-left: 35%;">周同比:{{ sumWow }}%&nbsp;&nbsp;&nbsp;&nbsp;
<template v-if="sumWow > 0">
<el-icon style="color:red">
<ArrowUpBold/>
</el-icon>
</template>
<template v-else-if="sumWow < 0">
<el-icon style="color:forestgreen">
<ArrowDownBold/>
</el-icon>
</template>
<template v-else>
<el-icon style="color:grey">
<SemiSelect/>
</el-icon>
</template>
</el-col>
<el-col style="padding-left: 35%;">日环比:{{ sumDaily }}%&nbsp;&nbsp;&nbsp;&nbsp;
<template v-if="sumDaily > 0">
<el-icon style="color:red">
<ArrowUpBold/>
</el-icon>
</template>
<template v-else-if="sumDaily < 0">
<el-icon style="color:forestgreen">
<ArrowDownBold/>
</el-icon>
</template>
<template v-else>
<el-icon style="color:grey">
<SemiSelect/>
</el-icon>
</template>
</el-col>
<!-- 新增的环形图容器 -->
<div ref="rechargePeopleChart" style="width: 100%; height: 150px; margin-top: 10px;"></div>
<template #footer>
<el-col style="padding-left: 35%;margin-bottom:0.5%">昨日充值人数{{ ydayRechargeNum }}</el-col>
<el-col style="padding-left: 35%;">其中首充{{ firstRecharge }}</el-col>
</template>
</el-card>
<div class="card-item">
<div class="card-title">全年累计充值人头数{{ yearlyRechargeNum }}</div>
<el-row style="height: 200px;">
<el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 150px">
<div class="chart5">
<el-image :src="svg2" style="width: 68px; display: block;margin: 0 auto;"/>
<div class="margin-bottom">
<div style="display: flex; gap: 10px; font-size: 14px;">周同比{{ sumWow }}%
<el-image v-if="sumWow > 0" :src="upArrow" style="width: 10px;"/>
<el-image v-else-if="sumWow < 0" :src="downArrow" style="width: 10px;"/>
<el-image v-else :src="pingArrow" style="width: 10px;"/>
</div>
<div style="display: flex; gap: 10px; font-size: 14px;">
日环比{{ sumDaily }}%
<el-image v-if="sumDaily > 0" :src="upArrow" style="width: 10px;"/>
<el-image v-else-if="sumDaily < 0" :src="downArrow" style="width: 10px;"/>
<el-image v-else :src="pingArrow" style="width: 10px; "/>
</div>
</div>
</div>
</el-col>
<!-- 新增的环形图容器 -->
<el-col :span="12">
<div ref="rechargePeopleChart" style="width:100%; height: 68%;"></div>
</el-col>
</el-row>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -155,6 +140,11 @@ import API from '@/util/http'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import utc from 'dayjs-plugin-utc' import utc from 'dayjs-plugin-utc'
import {ArrowDownBold, ArrowUpBold, SemiSelect} from '@element-plus/icons-vue' import {ArrowDownBold, ArrowUpBold, SemiSelect} from '@element-plus/icons-vue'
import svg1 from '@/assets/SvgIcons/折合新币累计金额.svg'
import svg2 from '@/assets/SvgIcons/周同比.svg'
import upArrow from '@/assets/SvgIcons/上升箭头.svg'
import downArrow from '@/assets/SvgIcons/下降箭头.svg'
import pingArrow from '@/assets/SvgIcons/持平.svg'
dayjs.extend(utc) dayjs.extend(utc)
@ -190,6 +180,7 @@ const length = ref(0)
const goldTypeChart = ref(null) const goldTypeChart = ref(null)
const rechargeGoldChart = ref(null) const rechargeGoldChart = ref(null)
const consumeChart = ref(null) const consumeChart = ref(null)
const consumeDetailChart = ref(null)
const rechargePeopleChart = ref(null) const rechargePeopleChart = ref(null)
// ( = + 6 + 12 + + ) // ( = + 6 + 12 + + )
@ -271,9 +262,10 @@ const processData = (data) => {
// //
nextTick(() => { nextTick(() => {
initGoldTypeChart();
// initGoldTypeChart();
initRechargeGoldChart(); initRechargeGoldChart();
initConsumeChart(); initConsumeChart();
initConsumeDetailChart();
initRechargePeopleChart(); initRechargePeopleChart();
}); });
} }
@ -326,18 +318,40 @@ const initRechargeGoldChart = () => {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['50%', '70%'],
radius: ['60%', '85%'],
silent: true,
clockwise: true,
label: {show: false},
data: [ data: [
{value: money.value / 100, name: '永久金币'},
{value: (recharge.value - money.value) / 100, name: '其他金币'}
],
label: {
show: true,
formatter: '{b}: {c}'
}
{
value: recharge.value / 100,
itemStyle: {color: '#80aaff'}
}
]
},
{
type: 'pie',
radius: ['60%', '75%'],
startAngle: 180,
silent: true,
clockwise: true,
label: {show: false},
data: [
{
value: money.value / 100,
itemStyle: {color: '#f2c97d'}
},
{
value: (recharge.value / 100 - money.value / 100),
itemStyle: {color: 'transparent'}
}
]
} }
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
} }
@ -345,46 +359,157 @@ const initRechargeGoldChart = () => {
const initConsumeChart = () => { const initConsumeChart = () => {
const myChart = echarts.init(consumeChart.value); const myChart = echarts.init(consumeChart.value);
const option = { const option = {
legend: {
orient: 'vertical',
left: '10%',
top: '85',
icon: 'circle',
iconSize: 5,
textSize: 12,
itemWidth: 7,
itemHeight: 7,
},
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['40%', '70%'],
radius: ['30%', '45%'],
center: ['50%', '35%'],
silent: true,
clockwise: true,
label: {show: false},
data: [ data: [
{value: yearlyConsume.value / 100, name: '消耗'},
{value: yearlyRefund.value / 100, name: '退款'}
{
value: yearlyConsume.value / 100,
name: '消耗:' + yearlyConsume.value / 100,
// name: '' + 1234567890,
itemStyle: {color: '#7DB7FA'}
},
{
value: yearlyRefund.value / 100,
name: '退款:' + yearlyRefund.value / 100,
itemStyle: {color: '#F7D47C'}
}
], ],
label: {
show: true,
formatter: '{b}: {c}'
}
} }
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
}
};
//
const initConsumeDetailChart = () => {
const myChart = echarts.init(consumeDetailChart.value);
const option = {
//
legend: {
orient: 'vertical',
left: 'left',
top: '85',
icon: 'circle',
iconSize: 5,
itemWidth: 7,
itemHeight: 7,
},
series: [
{
type: 'pie',
radius: ['25%', '40%'],
center: ['50%', '25%'],
silent: true,
clockwise: true,
label: {show: false},
data: [
{
value: dailyConsume.value / 100,
name: '昨日新增消费:' + dailyConsume.value / 100,
itemStyle: {color: '#65C9C9'}
}
]
},
{
type: 'pie',
radius: ['25%', '35%'],
center: ['50%', '25%'],
startAngle: 180,
silent: true,
clockwise: true,
label: {show: false},
data: [
{
value: dailyReduce.value / 100,
name: '昨日新增消耗:' + dailyReduce.value / 100,
// name: '' + 1234567890,
itemStyle: {color: '#9469D1'}
},
{
value: dailyRefund.value / 100,
name: '昨日新增退款:' + dailyRefund.value / 100,
itemStyle: {color: '#B8DB6E'}
}
]
}
]
};
myChart.setOption(option);
};
// //
const initRechargePeopleChart = () => { const initRechargePeopleChart = () => {
const myChart = echarts.init(rechargePeopleChart.value); const myChart = echarts.init(rechargePeopleChart.value);
const option = { const option = {
legend: {
orient: 'vertical',
left: 'left',
top: '85',
icon: 'circle',
iconSize: 5,
textSize: 18,
itemWidth: 7,
itemHeight: 7,
},
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['40%', '70%'],
radius: ['30%', '50%'],
center: ['50%', '35%'],
silent: true,
clockwise: true,
label: {show: false},
data: [
{
value: ydayRechargeNum.value,
name: '昨日充值人数:' + ydayRechargeNum.value,
itemStyle: {color: '#65C9C9'}
},
],
},
{
type: 'pie',
radius: ['30%', '45%'],
center: ['50%', '35%'],
silent: true,
clockwise: true,
label: {show: false},
data: [ data: [
{value: firstRecharge.value, name: '首充'},
{value: (ydayRechargeNum.value - firstRecharge.value), name: '非首充'}
{
value: firstRecharge.value,
name: '其中首充:' + firstRecharge.value,
itemStyle: {color: '#9469D1'}
},
{
value: ydayRechargeNum.value - firstRecharge.value,
itemStyle: {color: 'transparent'}
}
], ],
label: {
show: true,
formatter: '{b}: {c}'
}
} }
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
} }
// //
const getCardData = async () => { const getCardData = async () => {
try { try {
@ -406,6 +531,7 @@ const getCardData = async () => {
console.error('获取卡片数据失败:', error) console.error('获取卡片数据失败:', error)
} }
} }
const workDataUpdateTime = ref(null) const workDataUpdateTime = ref(null)
@ -415,12 +541,7 @@ onMounted(async () => {
</script> </script>
<style scoped> <style scoped>
.card {
height: 28vh;
margin-bottom: 0.5vh;
display: flex;
justify-content: center;
}
.center-card { .center-card {
display: flex; display: flex;
@ -428,18 +549,50 @@ onMounted(async () => {
align-items: center; align-items: center;
} }
.card-item-row1 {
height: 160px;
width: auto;
background: #E4F0FC;
box-shadow: 0 0 4px 0 #00000040;
border-radius: 10px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
padding-bottom: 10px;
}
.card-item { .card-item {
height: 28vh;
height: 200px;
width: auto;
background: #E4F0FC;
box-shadow: 0 0 4px 0 #00000040;
border-radius: 10px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
padding-bottom: 10px;
} }
.card-title { .card-title {
font-weight: bold; font-weight: bold;
margin-bottom: 1vh;
height: 36px;
width: 100%;
flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%);
box-shadow: 0 0 2px 0 #00152940;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
margin-top: -5px;
margin-bottom: 10px;
}
.card-item .el-col {
overflow: visible;
} }
@keyframes spin { @keyframes spin {
@ -451,4 +604,64 @@ onMounted(async () => {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.gold-title {
width: 100%;
height: 5vh;
flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(90deg, #E4F0FC 0%, #FFF178 50%, #E4F0FC 100%);
box-shadow: 0 2px 2px 0 #00152940;
display: flex;
align-items: center;
justify-content: center;
}
.text1 {
color: #040a2d;
font-family: " PingFang SC ";
font-size: 28px;
font-style: normal;
font-weight: 900;
line-height: 31.79px;
}
.text1-update-time {
width: 100%;
height: 26px;
flex-shrink: 0;
color: #040a2d;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 31.79px;
}
/* 背景卡片大小 */
.gold-management {
margin: 10px 5px;
width: 100%;
height: 50vh;
flex-shrink: 0;
border-radius: 8px;
background: #E7F4FD;
box-shadow: 0 2px 2px 0 #00000040;
flex-direction: column;
align-items: center;
}
.margin-bottom {
padding-left: 20px;
}
.chart5 {
margin-top: 15px;
.margin-bottom {
margin-top: 10px;
padding-left: 20px;
}
}
</style> </style>

88
src/views/home.vue

@ -48,6 +48,10 @@ function findBestMatch(menuList, path) {
return bestMatch || path // fallback return bestMatch || path // fallback
} }
// require
// //
const activeMenu = computed(() => { const activeMenu = computed(() => {
return findBestMatch(menuList.value, route.path) return findBestMatch(menuList.value, route.path)
@ -112,26 +116,38 @@ function logout() {
<!-- 有子菜单的父级菜单menuType=2 且存在children --> <!-- 有子菜单的父级菜单menuType=2 且存在children -->
<el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()"> <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
<template #title> <template #title>
<el-icon>
<Folder />
</el-icon>
<img
:src="`/src/assets/SvgIcons/${menu.menuName}.svg`"
:alt="`${menu.menuName}图标`"
style="width: 4vh; height: 4vh; margin-right: 4px;"
>
<span>{{ menu.menuName }}</span> <span>{{ menu.menuName }}</span>
</template> </template>
<!-- 子菜单 --> <!-- 子菜单 -->
<template v-for="child in menu.children" :key="child.id"> <template v-for="child in menu.children" :key="child.id">
<!-- 子菜单为叶子节点无children --> <!-- 子菜单为叶子节点无children -->
<el-menu-item v-if="!child.children || child.children.length === 0" :index="getRoutePath(child)"> <el-menu-item v-if="!child.children || child.children.length === 0" :index="getRoutePath(child)">
<el-icon style="margin-right: 4px;">
<Folder />
</el-icon>
<span>{{ child.menuName }}</span> <span>{{ child.menuName }}</span>
</el-menu-item> </el-menu-item>
<!-- 子菜单有下级 --> <!-- 子菜单有下级 -->
<el-sub-menu v-else :index="child.id.toString()"> <el-sub-menu v-else :index="child.id.toString()">
<template #title> <template #title>
<el-icon style="margin-right: 4px;">
<Folder />
</el-icon>
<span>{{ child.menuName }}</span> <span>{{ child.menuName }}</span>
</template> </template>
<!-- 递归 下一级--> <!-- 递归 下一级-->
<template v-for="grandChild in child.children" :key="grandChild.id"> <template v-for="grandChild in child.children" :key="grandChild.id">
<el-menu-item :index="getRoutePath(grandChild)"> <el-menu-item :index="getRoutePath(grandChild)">
<el-icon style="margin-right: 4px;">
<Folder />
</el-icon>
<span>{{ grandChild.menuName }}</span> <span>{{ grandChild.menuName }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
@ -141,9 +157,11 @@ function logout() {
<!-- 无子菜单的一级菜单 --> <!-- 无子菜单的一级菜单 -->
<el-menu-item v-else :index="getRoutePath(menu)"> <el-menu-item v-else :index="getRoutePath(menu)">
<el-icon>
<Folder />
</el-icon>
<img
:src="`@/assets/SvgIcons/${menu.menuName}.svg`"
:alt="`${menu.menuName}图标`"
style="width: 4vh; height: 4vh; margin-right: 4px;"
>
<span>{{ menu.menuName }}</span> <span>{{ menu.menuName }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
@ -174,10 +192,10 @@ function logout() {
<!-- 右侧内容区域 --> <!-- 右侧内容区域 -->
<div class="content-container"> <div class="content-container">
<!-- 头部 -->
<!-- 头部
<el-header class="header"> <el-header class="header">
</el-header>
</el-header> -->
<!-- 主内容区域 --> <!-- 主内容区域 -->
<div class="main-area"> <div class="main-area">
@ -240,9 +258,8 @@ function logout() {
left: 1vh; left: 1vh;
right: 1vh; right: 1vh;
bottom: 1vh; bottom: 1vh;
/* 毛玻璃效果 */
background-image: url('@/assets/半透明background.png'); background-image: url('@/assets/半透明background.png');
background-size: cover;
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -253,6 +270,7 @@ function logout() {
/* 侧边栏容器 */ /* 侧边栏容器 */
.sidebar-container { .sidebar-container {
flex-shrink: 0; flex-shrink: 0;
} }
.logo { .logo {
display: flex; display: flex;
@ -271,7 +289,6 @@ function logout() {
/* 底部设置中心样式 */ /* 底部设置中心样式 */
.settings-container { .settings-container {
padding: 10px 0 10px 20px; /* 上,右, 下,左 */ padding: 10px 0 10px 20px; /* 上,右, 下,左 */
background: rgba(255, 255, 255, 0.85);
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
} }
@ -279,7 +296,7 @@ function logout() {
/* 调整下拉菜单的样式,确保它向上弹出 */ /* 调整下拉菜单的样式,确保它向上弹出 */
.el-dropdown-link:focus { .el-dropdown-link:focus {
/* 移除异常效果 */
/* 移除底部的异常效果 */
outline: none; outline: none;
text-decoration: none; text-decoration: none;
} }
@ -292,13 +309,14 @@ function logout() {
.sidebar-layout { .sidebar-layout {
width: 15vw; width: 15vw;
height: 100%; height: 100%;
background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
backdrop-filter: blur(5px); /* 毛玻璃效果 */
background: #E7F4FD; /* 浅蓝色背景 */
/* backdrop-filter: blur(5px); 毛玻璃效果 --消耗性能 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
transition: all 0.3s ease;
} }
/* 内容区域容器 */ /* 内容区域容器 */
@ -312,25 +330,13 @@ function logout() {
overflow: hidden; overflow: hidden;
} }
/* 头部样式 */
.header {
background: rgba(255, 255, 255, 0.9);
/* 半透明白色背景 */
backdrop-filter: blur(5px);
/* 毛玻璃效果 */
height: 8vh;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
/* 添加阴影增强层次感 */
z-index: 80;
}
/* 主内容区域容器 */ /* 主内容区域容器 */
.main-area { .main-area {
flex: 1; flex: 1;
background: rgba(255, 255, 255, 0.9);
/* 半透明色背景 */
backdrop-filter: blur(5px);
background: #E7F4FD;
/* 半透明浅色背景 */
/* backdrop-filter: blur(5px); */
/* 毛玻璃效果 */ /* 毛玻璃效果 */
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@ -356,23 +362,23 @@ function logout() {
width: 100%; width: 100%;
} }
/* 感觉没用 */
.el-menu-demo {
border: none;
padding: 0;
float: right;
background: transparent !important;
/* 最高优先级的透明 */
}
/* 侧边栏菜单样式优化 感觉没用*/
/* 侧边栏菜单样式 适配浅色背景 */
.el-menu { .el-menu {
background: transparent !important; background: transparent !important;
} }
::v-deep(.el-sub-menu__title:hover) {
background: transparent !important;
/* 工作台,金币管理,现金管理 */
::v-deep(.el-sub-menu__title:hover),
::v-deep(.el-menu-item:hover) {
background: #E5EBFE;
} }
/* 子菜单展开时和背景同色 */
::v-deep(.el-sub-menu__title),
::v-deep(.el-menu-item) {
background: #E7F4FD;
}
.message-font { .message-font {
/* 个人信息字体样式 */ /* 个人信息字体样式 */

616
src/views/moneyManage/receiveDetail/receiveDetail.vue

@ -100,9 +100,24 @@
</el-table-column> </el-table-column>
<el-table-column prop="permanentGold" label="付款金额" width="120px"> <el-table-column prop="permanentGold" label="付款金额" width="120px">
</el-table-column> </el-table-column>
<el-table-column prop="freeGold" label="支付方式" width="110px">
<el-table-column prop="moneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'" width="150px" ></el-table-column>
<el-table-column prop="getMoney" label="到账金额" v-if="caiwu && activeTab == 'pass'" width="150px" >
<template #default="scope">
<div v-if="!scope.row.getMoney">
<text style="color: #FA5A1E;">待补充</text>
</div>
</template>
</el-table-column>
<el-table-column prop="shouxufei" label="手续费" v-if="caiwu && activeTab == 'pass'" width="150px" >
<template #default="scope">
<div v-if="!scope.row.shouxufei">
<text style="color: #FA5A1E;">待补充</text>
</div>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" label="付款时间" width="200px" />
<el-table-column prop="pastType" label="支付方式" width="110px">
</el-table-column>
<el-table-column prop="remark" label="付款时间" width="100px" />
<el-table-column prop="payModel" label="转账凭证" width="110px"> <el-table-column prop="payModel" label="转账凭证" width="110px">
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.voucher" <div v-if="scope.row.voucher"
@ -116,7 +131,11 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" label="备注" width="150px" show-overflow-tooltip>
<el-table-column prop="bankOrder" label="银行流水订单号" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column>
<el-table-column prop="submiter" label="提交人" width="150px" show-overflow-tooltip></el-table-column>
<el-table-column prop="auditor" label="审核人" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column>
<el-table-column prop="mask" label="备注" width="150px" show-overflow-tooltip></el-table-column>
<el-table-column prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" /> <el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" />
<el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'"> <el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'">
@ -124,8 +143,12 @@
<span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span> <span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span>
<span v-else-if="kefu && scope.row.orderStatus == '已撤回'" <span v-else-if="kefu && scope.row.orderStatus == '已撤回'"
style="color: #2741DE;">编辑</span> style="color: #2741DE;">编辑</span>
<span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;">审核</span>
<span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;" @click="openEditForm">编辑</span>
<span v-else-if="kefu && scope.row.orderStatus == '待审核'"
style="color: #FA5A1E;">撤回</span>
<span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;"
@click="openAuditForm">审核</span>
<span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;"
@click="openEditForm(scope.row)">编辑</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -178,8 +201,8 @@
</el-icon> </el-icon>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="驳回理由" required>
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
<el-form-item label="备注" required>
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入备注" maxlength="100"
show-word-limit /> show-word-limit />
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -191,66 +214,173 @@
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<!-- 编辑弹窗 -->
<el-dialog class="adddialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm">
<!-- 审核弹窗 -->
<el-dialog class="adddialog" v-model="auditFormisible" width="20vw" :before-close="closeAuditForm">
<el-form class="addForm" label-width="4vw" label-position="left"> <el-form class="addForm" label-width="4vw" label-position="left">
<el-form-item label="精网号" required>
<el-input v-model="addFormData.jwcode" placeholder="请输入驳回理由" />
<el-form-item label="精网号">
<el-input v-model="auditFormData.jwcode" placeholder="请输入驳回理由" />
</el-form-item> </el-form-item>
<el-form-item label="客户姓名" required>
<el-input v-model="addFormData.userName" placeholder="请输入客户姓名" />
<el-form-item label="客户姓名">
<el-input v-model="auditFormData.userName" placeholder="请输入客户姓名" />
</el-form-item> </el-form-item>
<el-form-item label="所属地区" required>
<el-input disabled="true" v-model="addFormData.market" placeholder="请输入所属地区" />
<el-form-item label="所属地区">
<el-input disabled="true" v-model="auditFormData.market" />
</el-form-item> </el-form-item>
<el-form-item label="活动名称" required>
<el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" />
<el-form-item label="活动名称">
<el-input v-model="auditFormData.jwcode" placeholder="请输入活动名称" />
</el-form-item> </el-form-item>
<el-form-item label="产品名称" required>
<el-form-item label="产品名称">
<el-select placeholder="请选择产品名称" clearable></el-select> <el-select placeholder="请选择产品名称" clearable></el-select>
</el-form-item> </el-form-item>
<el-form-item label="付款币种" required>
<el-form-item label="付款币种">
<el-select placeholder="请选择付款币种" clearable></el-select> <el-select placeholder="请选择付款币种" clearable></el-select>
</el-form-item> </el-form-item>
<el-form-item label="付款金额" required>
<el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" />
<el-form-item label="付款金额">
<el-input v-model="auditFormData.jwcode" placeholder="请输入付款金额" />
</el-form-item> </el-form-item>
<el-form-item label="支付方式" required>
<el-form-item label="支付方式">
<el-select placeholder="请选择支付方式" clearable></el-select> <el-select placeholder="请选择支付方式" clearable></el-select>
</el-form-item> </el-form-item>
<el-form-item label="付款时间" required>
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" />
<el-form-item label="付款时间">
<el-time-picker v-model="auditFormData.time" placeholder="请选择付款时间" />
</el-form-item> </el-form-item>
<el-form-item label="转账凭证" required>
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card"
:auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr"
:on-change="handleImageChange" :http-request="customUpload">
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar"
style="height: 100%; width: 100%; object-fit: cover;" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-form-item label="转账凭证">
<div class="pic">
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card"
:auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr"
:on-change="handleImageChange" :http-request="customUpload">
<img v-if="auditFormData.imageUrl" :src="auditFormData.imageUrl" class="avatar"
style="height: 100%; width: 100%; object-fit: cover;" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-text class="picText">
仅支持.jpg .png格式文件 1 MB
</el-text>
</div>
</el-form-item> </el-form-item>
<el-form-item label="驳回理由" required>
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
<el-form-item label="备注">
<el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入备注" maxlength="100"
show-word-limit /> show-word-limit />
</el-form-item> </el-form-item>
<el-form-item label="驳回理由" v-if="ifReject" required>
<el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入驳回理由"
maxlength="100" show-word-limit />
</el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer">
<el-button style="background-color: #7E91FF;" @click="closeEditForm">取消</el-button>
<span class="dialog-footer" v-if="!ifReject">
<el-button style="background-color: #7E91FF;" @click="ifReject = true">驳回</el-button>
<el-button :style="{
backgroundColor: isBtnDisabled ? '#E5E5E5FF' : '#2741DEFF',
marginLeft: '60px',
color: isBtnDisabled ? '#8A8A8A' : '#F3FAFE'
}" @click="handleReject" :disabled="isBtnDisabled">{{ btnText }}</el-button>
</span>
<span class="dialog-footer" v-if="ifReject">
<el-button style="background-color: #7E91FF;" @click="closeAuditForm">取消</el-button>
<el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
@click="handleReject">确定</el-button> @click="handleReject">确定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<!-- 编辑弹窗 -->
<el-dialog class="editdialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm">
<div class="content">
<div class="left">
<el-form class="editForm" label-width="4.5vw" label-position="left">
<el-form-item label="精网号">
<el-input v-model="editFormData.jwcode" placeholder="请输入驳回理由" />
</el-form-item>
<el-form-item label="客户姓名">
<el-input v-model="editFormData.userName" placeholder="请输入客户姓名" />
</el-form-item>
<el-form-item label="所属地区">
<el-input disabled="true" v-model="editFormData.market" placeholder="请输入所属地区" />
</el-form-item>
<el-form-item label="活动名称">
<el-input v-model="editFormData.jwcode" placeholder="请输入活动名称" />
</el-form-item>
<el-form-item label="产品名称">
<el-select placeholder="请选择产品名称" clearable></el-select>
</el-form-item>
<el-form-item label="付款币种">
<el-select placeholder="请选择付款币种" clearable></el-select>
</el-form-item>
<el-form-item label="付款金额">
<el-input v-model="editFormData.jwcode" placeholder="请输入付款金额" />
</el-form-item>
<el-form-item label="支付方式">
<el-select placeholder="请选择支付方式" clearable></el-select>
</el-form-item>
<el-form-item label="付款时间">
<el-time-picker v-model="editFormData.time" placeholder="请选择付款时间" />
</el-form-item>
<el-form-item label="转账凭证">
<div class="pic">
<el-upload ref="uploadRef" class="uploader" :show-file-list="false"
list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
:on-error="handelImgErr" :on-change="handleImageChange"
:http-request="customUpload">
<img v-if="editFormData.imageUrl" :src="editFormData.imageUrl" class="avatar"
style="height: 100%; width: 100%; object-fit: cover;" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-text class="picText">
仅支持.jpg .png格式文件 1 MB
</el-text>
</div>
</el-form-item>
<el-form-item label="驳回理由">
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由"
maxlength="100" show-word-limit />
</el-form-item>
</el-form>
</div>
<div class="right">
<el-form class="editFormRighrt" label-width="4.5vw" label-position="left">
<el-form-item label="到账货币">
<el-select placeholder="请选择产品名称" clearable></el-select>
</el-form-item>
<el-form-item label="到账金额">
<el-input v-model="addFormData.userName" placeholder="请输入到账金额" />
</el-form-item>
<el-form-item label="手续费">
<el-input disabled="true" v-model="addFormData.market" placeholder="请输入手续费" />
</el-form-item>
<el-form-item label="银行流水订单号">
<el-input v-model="addFormData.jwcode" placeholder="请输入银行流水订单号" />
</el-form-item>
<el-form-item label="到账时间">
<el-input v-model="addFormData.jwcode" placeholder="请输入到账时间" />
</el-form-item>
</el-form>
<span class="editBtns">
<button class="editBtn1">
<text class="txt">
取消
</text>
</button>
<button class="editBtn2">
<text class="txt">
提交
</text>
</button>
</span>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import API from '@/util/http.js' import API from '@/util/http.js'
import { color } from 'echarts';
import { template } from 'lodash';
//==================== ========================= //==================== =========================
const activeTab = ref('wait') const activeTab = ref('wait')
@ -335,7 +465,7 @@ const customUpload = async (options) => {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
} }
}) })
if (response.code === 200 && response.data) {
if (response.code === 100 && response.data) {
handleImgSuccess(response, options.file) handleImgSuccess(response, options.file)
ElMessage.success(response.msg || '上传成功') ElMessage.success(response.msg || '上传成功')
} else { } else {
@ -348,18 +478,59 @@ const customUpload = async (options) => {
} }
} }
//================== =========================
//================== =========================
const editFormData = ref({ const editFormData = ref({
}) })
const editFormisible = ref(false) const editFormisible = ref(false)
const openEditForm = () => {
const openEditForm = (row) => {
console.log('编辑时该行数据:',row);
editFormData.value = row
editFormisible.value = true editFormisible.value = true
} }
const closeEditForm = () => { const closeEditForm = () => {
editFormisible.value = false editFormisible.value = false
editFormData.value = {} editFormData.value = {}
} }
//================== =========================
const auditFormData = ref({
})
const auditFormisible = ref(false)
//
const ifReject = ref(false)
const openAuditForm = () => {
auditFormisible.value = true
}
const countdown = ref(0); // 5
const isBtnDisabled = ref(false); //
const btnText = ref('通过(3)'); //
const closeAuditForm = () => {
ifReject.value = false
auditFormisible.value = false
auditFormData.value = {}
}
//
watch(auditFormisible, (val) => {
if (val) {
countdown.value = 3
isBtnDisabled.value = true
btnText.value = `通过(${countdown.value})`
const timer = setInterval(() => {
countdown.value--
btnText.value = `通过(${countdown.value})`
console.log(btnText.value);
if (countdown.value <= 0) {
isBtnDisabled.value = false
clearInterval(timer)
btnText.value = '通过'
}
}, 1000);
}
})
//========================================== //==========================================
const pageInfo = ref({ const pageInfo = ref({
pageSize: 10, pageSize: 10,
@ -369,80 +540,124 @@ const pageInfo = ref({
const total = ref(0) const total = ref(0)
const tableData = [ const tableData = [
{
jwcode: 'HW2023001',
name: '张三',
market: '北京',
activity: '春季促销活动',
rateName: '黄金投资产品A',
money: '人民币',
permanentGold: '5000.00',
freeGold: '银行转账',
remark: '2023-03-15 10:30:00',
voucher: 'https://example.com/images/voucher1.jpg',
orderStatus: '待审核',
},
{
jwcode: 'HW2023002',
name: '李四',
market: '上海',
activity: '夏日特惠活动',
rateName: '白银理财产品B',
money: '人民币',
permanentGold: '3000.00',
freeGold: '支付宝',
remark: '2023-06-20 14:15:00',
voucher: 'https://example.com/images/voucher2.jpg',
orderStatus: '已通过',
},
{
jwcode: 'HW2023003',
name: '王五',
market: '广州',
activity: '秋季回馈活动',
rateName: '铂金收藏产品C',
money: '美元',
permanentGold: '1000.00',
freeGold: '微信支付',
remark: '2023-09-10 09:20:00',
voucher: '',
orderStatus: '已撤回',
},
{
jwcode: 'HW2023004',
name: '赵六',
market: '深圳',
activity: '冬季感恩活动',
rateName: '钻石尊享产品D',
money: '欧元',
permanentGold: '2000.00',
freeGold: '信用卡',
remark: '2023-12-05 16:40:00',
voucher: 'https://example.com/images/voucher4.jpg',
orderStatus: '已驳回',
rejectReason: '无',
},
{
jwcode: 'HW2023005',
name: '孙七',
market: '成都',
activity: '周年庆典活动',
rateName: '翡翠投资产品E',
money: '人民币',
permanentGold: '8000.00',
freeGold: '银行转账',
remark: '2024-01-20 11:10:00',
voucher: '',
orderStatus: '已驳回',
}
];
{
"jwcode": "HM2024001",
"name": "张三",
"market": "华东区",
"activity": "2024春季促销活动",
"rateName": "年度会员套餐A",
"money": "人民币",
"permanentGold": 2980.00,
"moneyType": "人民币",
"getMoney": 2980.00,
"shouxufei": 59.60,
"pastType": "支付宝转账",
"remark": "2024-05-10 09:23",
"voucher": "https://example.com/voucher/1.jpg",
"payModel": "https://example.com/icon/alipay.png",
"bankOrder": "ALIPAY2024051000001",
"submiter": "李四(运营部)",
"auditor": "王五(财务部)",
"mask": "客户主动购买,无特殊备注",
"getMoneyTime": "2024-05-10 10:05",
"orderStatus": "已通过"
},
{
"jwcode": "HM2024002",
"name": "李四",
"market": "华北区",
"activity": "新客首单优惠",
"rateName": "季度体验套餐B",
"money": "美元",
"permanentGold": 99.00,
"moneyType": "人民币",
"getMoney": 712.00,
"shouxufei": 14.24,
"pastType": "PayPal",
"remark": "2024-05-11 14:56",
"voucher": "https://example.com/voucher/2.jpg",
"payModel": "https://example.com/icon/paypal.png",
"bankOrder": "PAYPAL2024051100002",
"submiter": "赵六(国际部)",
"auditor": "孙七(财务部)",
"mask": "跨境支付,汇率按当日中间价计算",
"getMoneyTime": "2024-05-12 08:30",
"orderStatus": "待审核"
},
{
"jwcode": "HM2024003",
"name": "王五",
"market": "华南区",
"activity": "老客召回活动",
"rateName": "月度续费套餐C",
"money": "人民币",
"permanentGold": 399.00,
"moneyType": "人民币",
"getMoney": null,
"shouxufei": null,
"pastType": "微信支付",
"remark": "2024-05-12 11:18",
"voucher": "https://example.com/voucher/3.jpg",
"payModel": "https://example.com/icon/wechat.png",
"bankOrder": "WECHAT2024051200003",
"submiter": "钱八(客服部)",
"auditor": null,
"mask": "到账信息待财务补充",
"getMoneyTime": null,
"orderStatus": "已撤回"
},
{
"jwcode": "HM2024004",
"name": "赵六",
"market": "西区",
"activity": "企业团购活动",
"rateName": "企业定制套餐D",
"money": "人民币",
"permanentGold": 15800.00,
"moneyType": "人民币",
"getMoney": 15800.00,
"shouxufei": 316.00,
"pastType": "银行对公转账",
"remark": "2024-05-13 09:45",
"voucher": "https://example.com/voucher/4.jpg",
"payModel": "https://example.com/icon/bank.png",
"bankOrder": "BANK2024051300004",
"submiter": "周九(销售部)",
"auditor": "吴十(财务部)",
"mask": "10人企业团单,享受95折优惠",
"getMoneyTime": "2024-05-13 11:20",
"orderStatus": "已通过"
},
{
"jwcode": "HM2024005",
"name": "孙七",
"market": "东北区",
"activity": "节日特惠活动",
"rateName": "年度会员套餐A",
"money": "人民币",
"permanentGold": 2780.00,
"moneyType": "人民币",
"getMoney": 2780.00,
"shouxufei": 55.60,
"pastType": "银联支付",
"remark": "2024-05-14 15:30",
"voucher": null,
"payModel": null,
"bankOrder": "UNIONPAY2024051400005",
"submiter": "郑一(市场部)",
"auditor": "王二(财务部)",
"mask": "凭证暂未上传,已提醒客户补充",
"getMoneyTime": "2024-05-14 16:45",
"orderStatus": "待审核"
}
]
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.content {
.content { //
height: 100%; height: 100%;
width: 83vw; width: 83vw;
.card1 {
.card1 { //
width: 100%; width: 100%;
.row { .row {
@ -469,12 +684,12 @@ const tableData = [
} }
.card2 {
.card2 { // card
width: 100%; width: 100%;
margin-top: 2vh; margin-top: 2vh;
.btns {
.btns { //
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -508,19 +723,47 @@ const tableData = [
} }
} }
:deep(.adddialog) {
min-width: 450px;
:deep(.adddialog) { //
min-width: 500px;
background-color: #F3FAFE !important; background-color: #F3FAFE !important;
margin-top: 10vh;
margin-top: 8vh;
border-radius: 8px;
.addForm { .addForm {
padding: 0 3vw 1vh 1vw;
padding: 0 60px 1vh 60px;
.el-date-editor { .el-date-editor {
display: flex; display: flex;
flex: 1; flex: 1;
} }
.pic {
display: flex;
align-items: center;
.uploader {
height: 80px;
width: 80px;
.el-upload {
height: 100%;
width: 100%;
}
}
.picText {
color: #999999;
font-family: "PingFang SC";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-left: 10px;
}
}
} }
.dialog-footer { .dialog-footer {
@ -530,7 +773,144 @@ const tableData = [
} }
} }
:deep(.adddialog .el-form-item__label) {
:deep(.editdialog) { //
min-width: 990px;
background-color: #F3FAFE !important;
margin-top: 8vh;
border-radius: 8px;
.editForm {
padding: 0 60px 1vh 60px;
.el-date-editor {
display: flex;
flex: 1;
}
.pic {
display: flex;
align-items: center;
.uploader {
height: 80px;
width: 80px;
.el-upload {
height: 100%;
width: 100%;
}
}
.picText {
color: #999999;
font-family: "PingFang SC";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-left: 10px;
}
}
}
.content { //
display: flex;
height: 100%;
width: 100%;
.left {
min-width: 500px;
}
.right {
flex: 1;
.editFormRighrt {
padding: 0 60px 0 40px;
.el-date-editor {
display: flex;
flex: 1;
}
.pic {
display: flex;
align-items: center;
.uploader {
height: 80px;
width: 80px;
.el-upload {
height: 100%;
width: 100%;
}
}
.picText {
color: #999999;
font-family: "PingFang SC";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-left: 10px;
}
}
}
.editBtns {
display: flex;
justify-content: center;
margin-top: 60px;
.txt {
color: #f3fafe;
text-align: center;
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.editBtn1 {
min-width: 80px;
padding: 5px 12px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 4px;
background: #7E91FF;
border: none;
box-shadow: 0 0 4px 0 #00000040;
}
.editBtn2 {
display: flex;
width: 80px;
min-width: 80px;
padding: 5px 12px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 4px;
background: #2741DE;
border: none;
box-shadow: 0 0 4px 0 #00000040;
margin-left: 60px;
}
}
}
}
}
:deep(.adddialog .el-form-item__label) { //
min-width: 80px; min-width: 80px;
width: auto; width: auto;
font-weight: 800; font-weight: 800;

3
src/views/recharge/gold/addCoinRecharge.vue

@ -6,6 +6,7 @@ import axios from 'axios'
import API from '@/util/http.js' import API from '@/util/http.js'
import moment from 'moment' import moment from 'moment'
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import Decimal from 'decimal.js';
// fixedAdminId // fixedAdminId
// const fixedAdminId = 1; // const fixedAdminId = 1;
@ -93,7 +94,7 @@ const add = async function () {
formattedRecharge.freeGold = Number(formattedRecharge.freeGold) * 100; formattedRecharge.freeGold = Number(formattedRecharge.freeGold) * 100;
} }
if (formattedRecharge.money) { if (formattedRecharge.money) {
formattedRecharge.money = Number(formattedRecharge.money) * 100;
formattedRecharge.money = new Decimal(formattedRecharge.money).mul(100).toNumber();
} }
if (formattedRecharge.payTime) { if (formattedRecharge.payTime) {

43
src/views/workspace/index.vue

@ -1,11 +1,15 @@
<template> <template>
<div style="height: 100vh; overflow: hidden;">
<!-- 头部 -->
<el-header class="header">
<div class="title">数据总览</div>
</el-header>
<div style="height: 100vh;">
<el-row class="cards" > <el-row class="cards" >
<el-col :span="12">
<el-col :span="14">
<GoldManagement :cardData="cardData" /> <GoldManagement :cardData="cardData" />
</el-col> </el-col>
<!-- 右上格子占12列 --> <!-- 右上格子占12列 -->
<el-col :span="12">
<el-col :span="10">
<CashManagement /> <CashManagement />
</el-col> </el-col>
</el-row> </el-row>
@ -31,7 +35,7 @@ const markets = ref([])
const account = ref('') const account = ref('')
const activeTab = ref('recharge') const activeTab = ref('recharge')
// 👉 tab
// tab
const handleTabChange = async (tab) => { const handleTabChange = async (tab) => {
activeTab.value = tab activeTab.value = tab
await getGraphData() await getGraphData()
@ -99,4 +103,35 @@ onMounted(async () => {
<style scoped> <style scoped>
.header {
/* 将纯色背景替换为线性渐变 */
background: linear-gradient(
90deg,
rgba(228, 240, 252, 1) 20%,
rgba(190, 218, 247, 1) 50%,
rgba(228, 240, 252, 1) 100%
);
height: 6vh;
border-radius: 12px;
margin-bottom: 4px;
box-shadow: 0 2px 5px rgba(8, 4, 4, 0.1);
/* 添加阴影增强层次感 */
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
}
.title {
width: 136px;
color: #040a2d;
font-family: "PingFang SC";
font-size: 34px;
font-style: normal;
font-weight: 900;
line-height: 31.79px;
text-align: center;
}
</style> </style>

2
stats.html
File diff suppressed because it is too large
View File

Loading…
Cancel
Save