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
-
84vue/gold-system/src/views/index.vue
-
252vue/gold-system/src/views/managerecharge/activity.vue
@ -1,13 +1,257 @@ |
|||
<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> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>Activity</h1> |
|||
</div> |
|||
<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> |
|||
<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> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue