donghaolin
6 months ago
4 changed files with 293 additions and 37 deletions
-
26vue/gold-system/src/assets/css/common.css
-
1vue/gold-system/src/main.ts
-
55vue/gold-system/src/views/managerecharge/activity.vue
-
244vue/gold-system/src/views/recharge/adminRecharge.vue
@ -0,0 +1,26 @@ |
|||||
|
.green-dot { |
||||
|
margin: 7px 5px 0px 0px; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
display: block; |
||||
|
background-color: green; |
||||
|
} |
||||
|
|
||||
|
.red-dot { |
||||
|
margin: 7px 5px 0px 0px; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
display: block; |
||||
|
background-color: red; |
||||
|
} |
||||
|
|
||||
|
.grey-dot { |
||||
|
margin: 7px 5px 0px 0px; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
display: block; |
||||
|
background-color: grey; |
||||
|
} |
||||
@ -1,13 +1,251 @@ |
|||||
<script setup> |
<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', |
||||
|
address: '进行中', |
||||
|
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', |
||||
|
address: '进行中', |
||||
|
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', |
||||
|
address: '未开始', |
||||
|
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', |
||||
|
address: '未开始', |
||||
|
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', |
||||
|
address: '已结束', |
||||
|
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', |
||||
|
address: '已结束', |
||||
|
adminName: '张三', |
||||
|
createTime: '2023-01-01 00:00:00', |
||||
|
}, |
||||
|
|
||||
|
] |
||||
|
|
||||
|
//分页对象 |
||||
|
const getObj = ref({ |
||||
|
page: 1, |
||||
|
size: 10, |
||||
|
}) |
||||
|
//分页总条目 |
||||
|
const total = ref(100) |
||||
|
|
||||
|
|
||||
|
const form = reactive({ |
||||
|
activityName: '', |
||||
|
freeGold: '', |
||||
|
rechargeRatio: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
adminName: '', |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
const Delete = function (index, row) { |
||||
|
console.log(index, row) |
||||
|
} |
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div> |
|
||||
<h1>Admin Recharge</h1> |
|
||||
</div> |
|
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<div class="head-card"> |
||||
|
<table> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">活动名称：</el-text> |
||||
|
<el-input v-model="input" style="width: 240px" clearable /> |
||||
|
</div> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">充值方式：</el-text> |
||||
|
<el-input v-model="input" style="width: 240px" clearable /> |
||||
|
</div> |
||||
|
</td> |
||||
|
<td> |
||||
|
<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> |
||||
|
</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td> |
||||
|
<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> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button>重置</el-button> |
||||
|
<el-button type="primary">查询</el-button> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div> |
||||
|
<el-table :data="tableData" style="width: 100%"> |
||||
|
<el-table-column prop="activityName" label="活动名称" /> |
||||
|
<el-table-column prop="startTime" label="开始时间" /> |
||||
|
<el-table-column prop="endTime" label="结束时间" /> |
||||
|
<el-table-column prop="rechargeRatio" label="免费兑换比" /> |
||||
|
<el-table-column prop="address" label="状态"> |
||||
|
<template #default="scope"> |
||||
|
<div class="status"> |
||||
|
<span v-if="scope.row.address === '进行中'"> |
||||
|
<span class="green-dot"></span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.address === '未开始'"> |
||||
|
<span class="red-dot"></span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.address === '已结束'"> |
||||
|
<span class="grey-dot"></span> |
||||
|
</span> |
||||
|
<span>{{ scope.row.address }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="adminName" label="添加人" /> |
||||
|
<el-table-column prop="createTime" label="添加时间" /> |
||||
|
<el-table-column prop="operation" label="操作"> |
||||
|
<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> |
||||
|
|
||||
|
<el-dialog v-model="addActivityVisible" title="新增活动" width="500" :before-close="closeAddActivityVisible"> |
||||
|
<template #footer> |
||||
|
|
||||
|
<el-form :model="form" label-width="auto" style="max-width: 600px"> |
||||
|
|
||||
|
<el-form-item label="活动名称"> |
||||
|
<el-input v-model="form.activityName" placeholder="请输入活动名称" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="免费金币"> |
||||
|
<el-radio-group v-model="form.freeGold"> |
||||
|
<el-radio value="0">无赠送</el-radio> |
||||
|
<el-radio value="1">有赠送</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="免费金币兑换比"> |
||||
|
<el-input v-model="form.rechargeRatio" placeholder="请输入" style="width: 80px;" />：1 |
||||
|
<div style="color: grey;">(提示：当前规则每10新币可兑换1免费金币)</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="开始时间"> |
||||
|
<el-time-picker v-model="form.startTime" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="结束时间"> |
||||
|
<el-time-picker v-model="form.endTime" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="添加人"> |
||||
|
<el-input v-model="form.adminName" disabled /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</el-form> |
||||
|
|
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="closeAddActivityVisible">取消</el-button> |
||||
|
<el-button type="primary" @click="closeAddActivityVisible"> |
||||
|
提交 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue