384 行
12 KiB
HTML
可执行文件
384 行
12 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
|
<style>
|
|
|
|
.list-table th > .cell {
|
|
white-space: nowrap !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.list-table th, .list-table td {
|
|
text-align: center;
|
|
line-height: 30px;
|
|
padding: 0;
|
|
}
|
|
|
|
.list-table th {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
color: #4c4c4c;
|
|
}
|
|
|
|
.list-table td {
|
|
color: #717171;
|
|
}
|
|
|
|
.list-table th > .cell, .list-table td > .cell {
|
|
text-align: center;
|
|
}
|
|
|
|
.list-table .el-table_1_column_13 {
|
|
border-right: none !important;
|
|
}
|
|
|
|
.list-table tr > td:nth-child(9) > .cell {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-table tr:nth-child(2n-1) > td {
|
|
background-color: rgb(246, 248, 249);;
|
|
}
|
|
|
|
.list-table tr > td {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.center-content {
|
|
margin: 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-table .el-table td, .list-table .el-table th {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.el-pagination {
|
|
padding: 8px 15px;
|
|
background-color: white;
|
|
}
|
|
|
|
.col-md-4 {
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
line-height: 40px;
|
|
border: 1px solid #eee;
|
|
margin: 0 20px;
|
|
flex: 1;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
margin: 20px 0;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.col-md-4 > span {
|
|
display: inline-block;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.Trade-money {
|
|
font-size: 18px;
|
|
color: #409EFF;
|
|
}
|
|
|
|
.Trade-count {
|
|
font-size: 18px;
|
|
color: #62b900;
|
|
}
|
|
|
|
.benefit-money {
|
|
font-size: 18px;
|
|
color: #e4393c;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 30px 0 15px;
|
|
}
|
|
|
|
.quick-list {
|
|
padding: 5px 15px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dcdfe6;
|
|
color: #666;
|
|
line-height: 12px;
|
|
font-size: 12px;
|
|
background-color: white;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.quick-list::selection {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 30px;
|
|
}
|
|
|
|
.isSelected {
|
|
background-color: #409EFF;
|
|
border-color: #409EFF;
|
|
color: white;
|
|
}
|
|
|
|
.el-input--small {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.el-range-editor--small .el-range-input {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.el-range-editor--small .el-range-separator {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.flex-span {
|
|
white-space: nowrap;
|
|
padding-right: 20px;
|
|
}
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<div class="aside">
|
|
<div class="cash-btn">
|
|
<if condition="$authArr['toCash'] eq true">
|
|
<el-button @click="showCashBox=true" type="primary" size="small">提现</el-button>
|
|
</if>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<span>余额</span><br>
|
|
<span class="Trade-money">{{balance}}</span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span>待审核金额</span><br>
|
|
<span class="Trade-count">{{loadMoney}}</span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span>已审核金额</span><br>
|
|
<span class="benefit-money">{{settledMoney}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<el-date-picker
|
|
@change="toSelectDate"
|
|
size="small"
|
|
v-model="selectDate"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
:picker-options="pickerOptions">
|
|
</el-date-picker>
|
|
<div class="content">
|
|
<template v-for="(item) in quickList">
|
|
<span v-text="item.name" class="quick-list" :class="selectType==item.type?'isSelected':''"
|
|
@click="doSelectType(item.type)"></span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-table" style="border: 1px solid #e6e6e6;">
|
|
<el-table border :data="orderList" style="width: 100%;border: none;">
|
|
<el-table-column prop="index" label="序号" width="60"></el-table-column>
|
|
<el-table-column prop="withdrawal_amount" label="提现金额" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="add_time" label="提交时间" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="state" label="状态" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.state==1" class="wait">待审核</span>
|
|
<span v-else-if="scope.row.state==2" class="pass">已通过</span>
|
|
<span v-else-if="scope.row.state==3" class="reject">已驳回</span>
|
|
</template>
|
|
</el-table-column>
|
|
<template v-if="selectType==2||selectType==3">
|
|
<el-table-column prop="settled_time" label="审核时间" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<span v-text="scope.row.settled_time"></span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
<template v-if="selectType==3">
|
|
<el-table-column prop="reason" label="原因" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<span v-text="scope.row.reason"></span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
|
|
:page-size="100"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="len">
|
|
</el-pagination>
|
|
</div>
|
|
<el-dialog title="提现" :modal-append-to-body="false" :visible.sync="showCashBox" :width="'500px'">
|
|
<div class="cash-big-box">
|
|
<div class="flex">
|
|
<span class="flex-span">提现金额</span>
|
|
<input class="el-input__inner" v-model="cashMoney" type="text" :placeholder="'可提现金额：'+balance"/>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="showCashBox = false" size="mini">取 消</el-button>
|
|
<el-button type="primary" @click="toCash" size="mini">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
cashMoney: '',
|
|
showCashBox: false,
|
|
balance: {$balance},
|
|
loadMoney: 0,
|
|
settledMoney: 0,
|
|
orderList: [],
|
|
len: 0,
|
|
currentPage: 1,
|
|
currentLimit: 10,
|
|
quickList: [{
|
|
type: 1,
|
|
name: '待审核'
|
|
}, {
|
|
type: 2,
|
|
name: '已通过'
|
|
}, {
|
|
type: 3,
|
|
name: '被驳回'
|
|
}],
|
|
selectType: 1,
|
|
selectDate: '',
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toCash: function () {
|
|
var that = this;
|
|
this.$confirm('确定提现' + this.cashMoney + '元?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'info'
|
|
}).then(() => {
|
|
$.ajax({
|
|
url: "{:U('toCash')}",
|
|
type: 'post',
|
|
data: {
|
|
money: that.cashMoney
|
|
},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.$message({
|
|
type: 'success',
|
|
message: res.msg,
|
|
duration: 1000
|
|
});
|
|
that.balance = res.balance;
|
|
that.cashMoney = '';
|
|
that.showCashBox = false;
|
|
that.getData();
|
|
} else {
|
|
that.$message({
|
|
type: 'warning',
|
|
message: res.msg
|
|
});
|
|
}
|
|
}
|
|
})
|
|
});
|
|
},
|
|
toSelectDate: function (maxDate) {
|
|
this.getData();
|
|
},
|
|
doSelectType: function (name) {
|
|
if (this.selectType != name) {
|
|
this.selectType = name;
|
|
this.getData();
|
|
}
|
|
},
|
|
handleSizeChange(val) {
|
|
this.currentLimit = val;//切换每页数量
|
|
this.currentPage = 1;
|
|
this.getData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.getData();//切换页数
|
|
},
|
|
getData: function () {
|
|
var that = this;
|
|
|
|
$.post("{:U(getCashOrder)}", {
|
|
page: this.currentPage,
|
|
limit: this.currentLimit,
|
|
agent_id: this.selectAgent,
|
|
selectType: this.selectType,
|
|
selectDate: this.selectDate
|
|
}, function (res) {
|
|
if (res.status == 1) {
|
|
that.orderList = [];
|
|
that.orderList = res.data;
|
|
that.len = res.count;
|
|
that.loadMoney = res.loadMoney;
|
|
that.settledMoney = res.settledMoney;
|
|
that.currentPage = res.page;
|
|
|
|
} else {
|
|
that.$confirm(res.msg, '提示', {
|
|
confirmButtonText: '确定',
|
|
type: 'warning'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getData();
|
|
},
|
|
watch: {
|
|
cashMoney: function (n, o) {
|
|
var reg = /[0-9]*[.]{0,1}/;
|
|
if (!reg.test(n)) {
|
|
this.cashMoney = o;
|
|
} else {
|
|
var count = 0;
|
|
for (var i in n) {
|
|
if (n[i] == '.') {
|
|
count++;
|
|
}
|
|
}
|
|
if (count > 1) {
|
|
this.cashMoney = o;
|
|
} else if (n.indexOf('.') > -1 && n.indexOf('.') < n.length - 3) {
|
|
this.cashMoney = o;
|
|
} else if (this.balance < n) {
|
|
this.cashMoney = o;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|