xinyin025/mpay
1
0
Fork 0
mirror of https://gitee.com/technical-laohu/mpay.git synced 2025-09-18 01:36:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

引入vue构建控制台页面

Browse Source
This commit is contained in:
技术老胡 2024-10-10 14:34:34 +08:00
parent 5b840b3518
commit 93f0e79632
3 changed files with 18114 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/controller/ConsoleController.php
View File

@ -29,6 +29,8 @@ class ConsoleController extends BaseController
$orders = Order::where([['state', '=', 1], ['create_time', '>', date('Y-m-d 00:00:00', strtotime('-32 days'))]])->select(); $orders = Order::where([['state', '=', 1], ['create_time', '>', date('Y-m-d 00:00:00', strtotime('-32 days'))]])->select();
$income = $this->getRevenueData($orders); $income = $this->getRevenueData($orders);
View::assign($income); View::assign($income);
$servertime = date('Y-m-d H:i:s', time());
View::assign('servertime', $servertime);
return View::fetch(); return View::fetch();
} }
// 获取收入数据总览 // 获取收入数据总览

18075
public/static/js/vue.global.js Normal file
View File

File diff suppressed because it is too large Load Diff

49
view/console/console.html
View File

@ -26,7 +26,7 @@
} }
.order-container>div>div { .order-container>div>div {
min-height: 485px; min-height: 425px;
} }
.header-tite { .header-tite {
@ -36,7 +36,7 @@
} }
.order-total { .order-total {
margin: 18px; margin: 28px 18px;
} }
.order-total>div { .order-total>div {
@ -60,6 +60,7 @@
align-items: center; align-items: center;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
margin-top: 15px;
} }
.order-channel:hover { .order-channel:hover {
@ -111,9 +112,16 @@
color: #a1acb8; color: #a1acb8;
} }
.neworder table tr { div[lay-table-id="orders-table"] {
height: 24px; margin-top: 0px !important;
line-height: 24px; }
.neworder div[class="layui-table-header"] table th {
padding: 0px;
}
.neworder div[class="layui-table-body layui-table-main"] table td {
padding: 3px 0px;
} }
</style> </style>
</head> </head>
@ -241,7 +249,7 @@
id="order-data"><span>今年</span><i id="order-data"><span>今年</span><i
class="layui-icon layui-icon-down layui-font-12"></i></button> class="layui-icon layui-icon-down layui-font-12"></i></button>
</div> </div>
<div class="layui-card-body"> <div id="app" class="layui-card-body">
<div class="layui-row order-total"> <div class="layui-row order-total">
<div class="layui-col-xs6"> <div class="layui-col-xs6">
<p>1433</p> <p>1433</p>
@ -268,8 +276,8 @@
<p>全渠道统计</p> <p>全渠道统计</p>
</div> </div>
</div> </div>
<div><strong>99</strong> 笔</div> <div><strong @click="add(100)">{{ data.ordernum }}</strong> 笔</div>
<div><strong>120</strong> 元</div> <div><strong>{{ data.totalmoney }}</strong> 元</div>
</div> </div>
<div class="layui-col-xs12 order-channel"> <div class="layui-col-xs12 order-channel">
<div class="info-channel"> <div class="info-channel">
@ -400,6 +408,7 @@
</div> </div>
<script src="/component/layui/layui.js"></script> <script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script> <script src="/component/pear/pear.js"></script>
<script src="/static/js/vue.global.js"></script>
<script> <script>
layui.use(['layer', 'echarts', 'element', 'count', 'dropdown', 'table'], function () { layui.use(['layer', 'echarts', 'element', 'count', 'dropdown', 'table'], function () {
var $ = layui.jquery, var $ = layui.jquery,
@ -437,9 +446,10 @@
// 表格列参数 // 表格列参数
let cols = [[ let cols = [[
{ title: '订单号', field: 'order_id', align: 'center', minWidth: 165 }, { title: '订单号', field: 'order_id', align: 'center', minWidth: 160 },
{ title: '金额', field: 'money', align: 'center' }, { title: '金额', field: 'money', align: 'center', minWidth: 70 },
{ title: '状态', field: 'state', align: 'center' }, { title: '状态', field: 'state', align: 'center', minWidth: 70, templet: '<div>{{# if(d.state==1){return`<span class="layui-badge layui-bg-green">成功</span>`}else{if(new Date(d.close_time)>new Date("<?php echo $servertime ?>")){return`<span class="layui-badge layui-bg-orange">等待</span>`}else{return`<span class="layui-badge layui-bg-gray">过期</span>`} } }}</div>' },
{ title: '创建时间', field: 'create_time', align: 'center', minWidth: 155 }
]] ]]
// 表格渲染 // 表格渲染
table.render({ table.render({
@ -450,7 +460,6 @@
skin: 'line', skin: 'line',
}); });
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'] const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
var option = { var option = {
@ -542,6 +551,22 @@
}); });
</script> </script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const data = ref({ ordernum: 100, totalmoney: 1500 });
function add(num) {
data.value.ordernum += num;
}
return {
data,
add
}
}
}).mount('#app')
</script>
</body> </body>
</html> </html>