hongxilin
6 months ago
5 changed files with 328 additions and 33 deletions
-
14vue/gold-system/README.md
-
10vue/gold-system/package-lock.json
-
1vue/gold-system/package.json
-
66vue/gold-system/src/views/index.vue
-
246vue/gold-system/src/views/managerecharge/activity.vue
@ -1,13 +1,257 @@ |
|||||
<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 addActivityVisible = ref(false) |
||||
|
//打开新增活动弹出框 |
||||
|
const openAddActivityVisible = function () { |
||||
|
addActivityVisible.value = true |
||||
|
} |
||||
|
//关闭新增窗口弹出框 |
||||
|
const closeAddActivityVisible = function () { |
||||
|
addActivityVisible.value = false |
||||
|
} |
||||
|
//添加活动按钮 |
||||
|
const addActicity = function () { |
||||
|
openAddActivityVisible(); |
||||
|
} |
||||
|
|
||||
|
const form = reactive({ |
||||
|
activityName: '', |
||||
|
freeGold: '', |
||||
|
rechargeRatio:'', |
||||
|
startTime:'', |
||||
|
endTime:'', |
||||
|
adminName:'', |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
const Delete = function (index, row) { |
||||
|
console.log(index, row) |
||||
|
} |
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
|
<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-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> |
||||
<h1>Activity</h1> |
|
||||
|
<el-button plain @click="addActicity()" |
||||
|
style="color: #048EFB; border:1px solid #048EFB">新增活动</el-button> |
||||
|
</div> |
||||
|
<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-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> |
</div> |
||||
</template> |
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.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