donghaolin
6 months ago
3 changed files with 440 additions and 162 deletions
-
22vue/gold-system/src/views/managerecharge/activity.vue
-
314vue/gold-system/src/views/recharge/adminRecharge.vue
-
266vue/gold-system/src/views/recharge/allRecharge.vue
@ -1,13 +1,271 @@ |
|||
<script setup> |
|||
|
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
import { AiFillRead } from "vue-icons-plus/ai"; |
|||
|
|||
const tableData = [ |
|||
{ |
|||
userName: '梁凡', |
|||
homilyId: '123456', |
|||
area: '北京', |
|||
activityName: '这是活动名称', |
|||
rechargeGold: '1000', |
|||
paidGold: '500', |
|||
freeGold: '500', |
|||
remark: '这是备注', |
|||
rechargeWay: '微信', |
|||
rechargeVoucher: '123456789', |
|||
adminName: '张三', |
|||
status: '进行中', |
|||
reason: '原因驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由', |
|||
rechargeTime: '2023-12-22 00:00:00', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
{ |
|||
userName: '梁凡', |
|||
homilyId: '123456', |
|||
area: '北京', |
|||
activityName: '这是活动名称', |
|||
rechargeGold: '1000', |
|||
paidGold: '500', |
|||
freeGold: '500', |
|||
remark: '这是备注', |
|||
rechargeWay: '微信', |
|||
rechargeVoucher: '123456789', |
|||
adminName: '张三', |
|||
status: '进行中', |
|||
reason: '原因', |
|||
rechargeTime: '2023-12-22 00:00:00', |
|||
createTime: '2023-01-01 00:00:00', |
|||
},{ |
|||
userName: '梁凡', |
|||
homilyId: '123456', |
|||
area: '北京', |
|||
activityName: '这是活动名称', |
|||
rechargeGold: '1000', |
|||
paidGold: '500', |
|||
freeGold: '500', |
|||
remark: '这是备注', |
|||
rechargeWay: '微信', |
|||
rechargeVoucher: '123456789', |
|||
adminName: '张三', |
|||
status: '进行中', |
|||
reason: '原因', |
|||
rechargeTime: '2023-12-22 00:00:00', |
|||
createTime: '2023-01-01 00:00:00', |
|||
},{ |
|||
userName: '梁凡', |
|||
homilyId: '123456', |
|||
area: '北京', |
|||
activityName: '这是活动名称', |
|||
rechargeGold: '1000', |
|||
paidGold: '500', |
|||
freeGold: '500', |
|||
remark: '这是备注', |
|||
rechargeWay: '微信', |
|||
rechargeVoucher: '123456789', |
|||
adminName: '张三', |
|||
status: '进行中', |
|||
reason: '原因', |
|||
rechargeTime: '2023-12-22 00:00:00', |
|||
createTime: '2023-01-01 00:00:00', |
|||
},{ |
|||
userName: '梁凡', |
|||
homilyId: '123456', |
|||
area: '北京', |
|||
activityName: '这是活动名称', |
|||
rechargeGold: '1000', |
|||
paidGold: '500', |
|||
freeGold: '500', |
|||
remark: '这是备注', |
|||
rechargeWay: '微信', |
|||
rechargeVoucher: '123456789', |
|||
adminName: '张三', |
|||
status: '进行中', |
|||
reason: '原因', |
|||
rechargeTime: '2023-12-22 00:00:00', |
|||
createTime: '2023-01-01 00:00:00', |
|||
}, |
|||
|
|||
] |
|||
|
|||
//分页对象 |
|||
const getObj = ref({ |
|||
page: 1, |
|||
size: 10, |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
//默认高亮选项 |
|||
const activeName = ref('all') |
|||
|
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll'); |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
console.log('adminWait'); |
|||
} |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
console.log('adminPass'); |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = function () { |
|||
console.log('adminReject'); |
|||
} |
|||
//点击标签页 |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === 'all') { |
|||
adminAll(); |
|||
} else if (tab.props.name === 'wait') { |
|||
adminWait(); |
|||
} else if (tab.props.name === 'pass') { |
|||
adminPass(); |
|||
} else if (tab.props.name === 'reject') { |
|||
adminReject(); |
|||
} |
|||
} |
|||
|
|||
|
|||
const Delete = function (index, row) { |
|||
console.log(index, row) |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>All Recharge</h1> |
|||
</div> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px;"> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">活动名称：</el-text> |
|||
<el-input v-model="input" style="width: 240px" clearable /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">充值方式：</el-text> |
|||
<el-input v-model="input" style="width: 240px" clearable /> |
|||
</div> |
|||
|
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<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> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="21"> |
|||
<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="结束时间" /> |
|||
<el-button style="margin-left: 10px;">今</el-button> |
|||
<el-button>昨</el-button> |
|||
<el-button>近7天</el-button> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<div class="head-card-btn"> |
|||
<el-button>重置</el-button> |
|||
<el-button type="primary">查询</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"> |
|||
<el-tab-pane label="全部" name="all" @click="adminAll()"></el-tab-pane> |
|||
<el-tab-pane label="待审核" name="wait" @click="adminWait()"></el-tab-pane> |
|||
<el-tab-pane label="已通过" name="pass" @click="adminPass()"></el-tab-pane> |
|||
<el-tab-pane label="已驳回" name="reject" @click="adminReject()"></el-tab-pane> |
|||
</el-tabs> |
|||
<div> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="userName" label="姓名" width="100px"/> |
|||
<el-table-column prop="homilyId" label="精网号" width="150px"/> |
|||
<el-table-column prop="area" label="所属地区" width="100px"/> |
|||
<el-table-column prop="activityName" label="活动名称" width="150px"/> |
|||
<el-table-column prop="rechargeGold" label="充值金额" width="100px"/> |
|||
<el-table-column prop="paidGold" label="充值金币" width="100px"/> |
|||
<el-table-column prop="freeGold" label="免费金币" width="100px"/> |
|||
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip/> |
|||
<el-table-column prop="rechargeWay" label="支付方式" width="100px"/> |
|||
<el-table-column prop="rechargeVoucher" label="支付凭证" width="150px"/> |
|||
<el-table-column prop="adminName" label="提交人" width="100px"/> |
|||
<el-table-column prop="status" label="状态" width="100px"> |
|||
<template #default="scope"> |
|||
<div class="status"> |
|||
<span v-if="scope.row.status === '进行中'"> |
|||
<span class="green-dot"></span> |
|||
</span> |
|||
<span v-if="scope.row.status === '未开始'"> |
|||
<span class="red-dot"></span> |
|||
</span> |
|||
<span v-if="scope.row.status === '已结束'"> |
|||
<span class="grey-dot"></span> |
|||
</span> |
|||
<span>{{ scope.row.status }}</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="reason" label="驳回理由" width="200px" show-overflow-tooltip/> |
|||
<el-table-column prop="rechargeTime" label="交款时间" width="200px"/> |
|||
<el-table-column prop="createTime" label="提交时间" width="200px"/> |
|||
<el-table-column fixed="right" prop="operation" label="操作" width="150px"> |
|||
<template #default="scope"> |
|||
<el-popconfirm title="确定将此条活动删除吗？"> |
|||
<template #reference> |
|||
<el-button type="primary" text @click="Delete(scope.$index, scope.row)"> |
|||
修改 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" @click="confirm"> |
|||
确定 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</template> |
|||
|
|||
</el-table-column> |
|||
</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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue