donghaolin
/
gold-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

11

Hongxilin
donghaolin 6 months ago
parent
4add3efaa9
commit
ad9e1838b8
4 changed files with 293 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      vue/gold-system/src/assets/css/common.css
  2. 1
      vue/gold-system/src/main.ts
  3. 57
      vue/gold-system/src/views/managerecharge/activity.vue
  4. 246
      vue/gold-system/src/views/recharge/adminRecharge.vue

26
vue/gold-system/src/assets/css/common.css
View File

@ -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
vue/gold-system/src/main.ts
View File

@ -4,6 +4,7 @@ import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import './assets/css/common.css'; // 引入公共CSS文件
const app = createApp(App)

57
vue/gold-system/src/views/managerecharge/activity.vue
View File

@ -59,6 +59,17 @@ const tableData = [
},
]
//分页对象
const getObj = ref({
page: 1,
size: 10,
})
//分页总条目
const total = ref(100)
//新增活动弹出框
const addActivityVisible = ref(false)
//打开新增活动弹出框
const openAddActivityVisible = function () {
@ -76,10 +87,10 @@ const addActicity = function () {
const form = reactive({
activityName: '',
freeGold: '',
rechargeRatio:'',
startTime:'',
endTime:'',
adminName:'',
rechargeRatio: '',
startTime: '',
endTime: '',
adminName: '',
})
@ -162,6 +173,11 @@ const Delete = function (index, row) {
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<el-pagination background
layout="prev, pager, next" :total="total" />
</el-card>
</el-col>
</el-row>
@ -172,7 +188,7 @@ const Delete = function (index, row) {
<el-form :model="form" label-width="auto" style="max-width: 600px">
<el-form-item label="活动名称">
<el-input v-model="form.activityName" placeholder="请输入活动名称"/>
<el-input v-model="form.activityName" placeholder="请输入活动名称" />
</el-form-item>
<el-form-item label="免费金币">
@ -183,7 +199,7 @@ const Delete = function (index, row) {
</el-form-item>
<el-form-item label="免费金币兑换比">
<el-input v-model="form.rechargeRatio" placeholder="请输入" style="width: 80px;"/>：1
<el-input v-model="form.rechargeRatio" placeholder="请输入" style="width: 80px;" />：1
<div style="color: grey;">(提示：当前规则每10新币可兑换1免费金币)</div>
</el-form-item>
@ -194,9 +210,9 @@ const Delete = function (index, row) {
<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-input v-model="form.adminName" disabled />
</el-form-item>
</el-form>
@ -212,32 +228,7 @@ const Delete = function (index, row) {
</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;

246
vue/gold-system/src/views/recharge/adminRecharge.vue
View File

@ -1,13 +1,251 @@
<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>
<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>
<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