donghaolin
6 months ago
10 changed files with 557 additions and 147 deletions
-
4vue/gold-system/README.md
-
7vue/gold-system/index.html
-
26vue/gold-system/package-lock.json
-
1vue/gold-system/package.json
-
2vue/gold-system/src/views/index.vue
-
96vue/gold-system/src/views/managerecharge/activity.vue
-
143vue/gold-system/src/views/recharge/adminRecharge.vue
-
97vue/gold-system/src/views/recharge/allRecharge.vue
-
202vue/gold-system/src/views/usergold/index.vue
-
126vue/gold-system/src/views/workspace/index.vue
@ -1,13 +1,207 @@ |
|||
<script setup> |
|||
|
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
|
|||
const tableData = [ |
|||
{ |
|||
activityName: '这是活动名称', |
|||
startTime: '2023-12-22 00:00:00', |
|||
endTime: '2024-12-22 23:59:59', |
|||
rechargeRatio: '10:1', |
|||
status: '进行中', |
|||
adminName: '张三', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
{ |
|||
activityName: '这是活动名称2', |
|||
startTime: '2023-12-22 00:00:00', |
|||
endTime: '2024-12-22 23:59:59', |
|||
rechargeRatio: '5:1', |
|||
status: '进行中', |
|||
adminName: '张三', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
{ |
|||
activityName: '这是活动名称3', |
|||
startTime: '2024-12-22 00:00:00', |
|||
endTime: '2025-12-22 23:59:59', |
|||
rechargeRatio: '10:1', |
|||
status: '未开始', |
|||
adminName: '张三', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
{ |
|||
activityName: '这是活动名称4', |
|||
startTime: '2024-12-22 00:00:00', |
|||
endTime: '2025-12-22 23:59:59', |
|||
rechargeRatio: '5:1', |
|||
status: '未开始', |
|||
adminName: '张三', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
{ |
|||
activityName: '这是活动名称5', |
|||
startTime: '2023-01-01 00:00:00', |
|||
endTime: '2023-12-22 23:59:59', |
|||
rechargeRatio: '10:1', |
|||
status: '已结束', |
|||
adminName: '张三', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
{ |
|||
activityName: '这是活动名称6', |
|||
startTime: '2023-01-01 00:00:00', |
|||
endTime: '2023-12-22 23:59:59', |
|||
rechargeRatio: '5:1', |
|||
status: '已结束', |
|||
adminName: '张三', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
|
|||
] |
|||
|
|||
//下拉框 |
|||
const value = ref('') |
|||
const options = [ |
|||
{ |
|||
value: 'Option1', |
|||
label: 'Option1', |
|||
}, |
|||
{ |
|||
value: 'Option2', |
|||
label: 'Option2', |
|||
}, |
|||
{ |
|||
value: 'Option3', |
|||
label: 'Option3', |
|||
}, |
|||
{ |
|||
value: 'Option4', |
|||
label: 'Option4', |
|||
}, |
|||
{ |
|||
value: 'Option5', |
|||
label: 'Option5', |
|||
}, |
|||
] |
|||
|
|||
|
|||
//搜索对象 |
|||
const getObj = ref({ |
|||
page: 1, |
|||
size: 10, |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
|
|||
//新增活动弹出框 |
|||
const addActivityVisible = ref(false) |
|||
//打开新增活动弹出框 |
|||
const openAddActivityVisible = function () { |
|||
addActivityVisible.value = true |
|||
} |
|||
//关闭新增窗口弹出框 |
|||
const closeAddActivityVisible = function () { |
|||
addActivityVisible.value = false |
|||
} |
|||
//添加活动按钮 |
|||
const addActicity = function () { |
|||
openAddActivityVisible(); |
|||
} |
|||
|
|||
// 添加对象 |
|||
const addObj = reactive({ |
|||
activityName: '', |
|||
freeGold: '', |
|||
rechargeRatio: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
adminName: '', |
|||
}) |
|||
|
|||
|
|||
const Delete = function (index, row) { |
|||
console.log(index, row) |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>User Gold</h1> |
|||
</div> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input v-model="input" style="width: 240px" placeholder="请输入活动名称" clearable /> |
|||
</div> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">更新类型：</el-text> |
|||
<el-select v-model="value" placeholder="请选择活动名称" size="large" style="width: 240px"> |
|||
<el-option v-for="item in options" :key="item.value" :label="item.label" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">更新时间：</el-text> |
|||
<el-time-picker v-model="value1" is-range range-separator="至" start-placeholder="起始时间" |
|||
end-placeholder="结束时间" /> |
|||
</div> |
|||
<div class="head-card-btn"> |
|||
<el-button>重置</el-button> |
|||
<el-button type="primary">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
现有金币：免费金币：（），充值金币：（），任务金币：（） |
|||
</div> |
|||
<div> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="name" label="姓名" /> |
|||
<el-table-column prop="homilyId" label="精网号" /> |
|||
<el-table-column prop="area" label="所属地区" /> |
|||
<el-table-column prop="gold" label="更新数量" /> |
|||
<el-table-column prop="updateType" label="更新类型" /> |
|||
<el-table-column prop="freeCoin" label="免费金币" /> |
|||
<el-table-column prop="rechargeCoin" label="充值金币" /> |
|||
<el-table-column prop="taskCoin" label="任务金币" /> |
|||
<el-table-column prop="commitName" label="提交人" /> |
|||
<el-table-column prop="createTime" label="更新时间" /> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination background |
|||
layout="prev, pager, next" :total="total" /> |
|||
|
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</template> |
|||
|
|||
<style scoped> |
|||
|
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -1,13 +1,131 @@ |
|||
<script setup> |
|||
|
|||
import * as echarts from 'echarts'; |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import { VscInfo } from 'vue-icons-plus/vsc' |
|||
//默认高亮标签页 |
|||
const activeName = ref('recharge') |
|||
// 默认高亮单选按钮 |
|||
const platform = ref('all') |
|||
|
|||
onMounted(function () { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
var myChart = echarts.init(document.getElementById('main')); |
|||
|
|||
// 指定图表的配置项和数据 |
|||
var option = { |
|||
title: { |
|||
text: 'ECharts 入门示例' |
|||
}, |
|||
tooltip: {}, |
|||
legend: { |
|||
data: ['销量'] |
|||
}, |
|||
xAxis: { |
|||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] |
|||
}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{ |
|||
name: '销量', |
|||
type: 'bar', |
|||
data: [5, 20, 36, 10, 10, 20] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
}) |
|||
|
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>Workspace</h1> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-card> |
|||
<p>当前金币余量 |
|||
</p> |
|||
<p>数据待填充</p> |
|||
<p>较前一天（数据待填充）</p> |
|||
<template #footer>充值（） 免费（） 任务（）</template> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-card> |
|||
<p>全年累计金币数</p> |
|||
<p>数据待填充</p> |
|||
<p>折合新币累计金额（数据待填充）</p> |
|||
<template #footer>昨日新增（），其中充值（）</template> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-card> |
|||
<p>全年累计消费金币数</p> |
|||
<p>数据待填充</p> |
|||
<p>消费（）；退款（）</p> |
|||
<template #footer>昨日新增消耗（）；消费（）；退款（）</template> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-card> |
|||
<p>全年累计充值人数</p> |
|||
<p>数据待填充</p> |
|||
<p>周同比 （）% 日环比（）%</p> |
|||
<template #footer>昨日充值人数（），其中首充（）人</template> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="20"> |
|||
<el-col> |
|||
<el-card> |
|||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
|||
<el-tab-pane label="金币充值" name="recharge"> |
|||
<div id="main" style="width: 600px;height:400px;"></div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="金币消费" name="consume"> |
|||
<div>金币消费</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="16"> |
|||
<el-card> |
|||
<template #header> |
|||
<div class="card-header"> |
|||
<span>金币概览</span> |
|||
</div> |
|||
</template> |
|||
<p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-card> |
|||
<template #header> |
|||
<div class="card-header" style="display: flex;"> |
|||
<span>金币消耗类别占比</span> |
|||
<el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small" style="margin-left: auto;"> |
|||
<el-radio-button label="全部平台" value="all" /> |
|||
<el-radio-button label="HC" value="hc" /> |
|||
<el-radio-button label="Link" value="link" /> |
|||
</el-radio-group> |
|||
</div> |
|||
</template> |
|||
<div>表格</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.el-row{ |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.el-radio-button{ |
|||
border: 1px solid grey; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue