|
|
|
@ -1,16 +1,36 @@ |
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, reactive, computed } from "vue"; |
|
|
|
import ElementPlus from "element-plus"; |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import axios from 'axios'; |
|
|
|
import moment from 'moment'; |
|
|
|
import { ElMessage, ElMessageBox } from "element-plus"; |
|
|
|
import axios from "axios"; |
|
|
|
import moment from "moment"; |
|
|
|
import API from "../../api/index.js"; |
|
|
|
|
|
|
|
//这是获取用户信息的接口 |
|
|
|
const adminData = ref({}); |
|
|
|
const getAdminData = async function () { |
|
|
|
try { |
|
|
|
const result = await API.post( |
|
|
|
"http://192.168.8.93:10070/admin/userinfo", |
|
|
|
{} |
|
|
|
); |
|
|
|
adminData.value = result; |
|
|
|
addActicity.value.adminId = adminData.value.adminId; |
|
|
|
console.log("请求成功", result); |
|
|
|
console.log("用户信息", user.value); |
|
|
|
} catch (error) { |
|
|
|
console.log("请求失败", error); |
|
|
|
} |
|
|
|
}; |
|
|
|
getAdminData(); |
|
|
|
|
|
|
|
//变量 |
|
|
|
// 用户对象假的 |
|
|
|
const admin = ref({ |
|
|
|
adminId: 1, |
|
|
|
name: '赵刚', |
|
|
|
area: '中国' |
|
|
|
}) |
|
|
|
adminId: 1, |
|
|
|
name: "赵刚", |
|
|
|
area: "中国", |
|
|
|
}); |
|
|
|
//活动表格数据 |
|
|
|
const tableData = ref([]); |
|
|
|
//分页总条目 |
|
|
|
@ -21,19 +41,19 @@ const getTime = ref([]); |
|
|
|
const activity = ref({}); |
|
|
|
//搜索对象 |
|
|
|
const getObj = ref({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 5, |
|
|
|
}) |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 5, |
|
|
|
}); |
|
|
|
// 添加对象 |
|
|
|
const addObj = ref({ |
|
|
|
add:'' |
|
|
|
add: "", |
|
|
|
}); |
|
|
|
// 删除 |
|
|
|
// 删除对象 |
|
|
|
const delObj = ref({}); |
|
|
|
//表格高度 |
|
|
|
const tableHeight = computed(function () { |
|
|
|
return (getObj.value.pageSize + 1) * 50 + 'px'; |
|
|
|
return (getObj.value.pageSize + 1) * 50 + "px"; |
|
|
|
}); |
|
|
|
|
|
|
|
// 表单验证ref |
|
|
|
@ -42,383 +62,462 @@ const Ref = ref(null); |
|
|
|
//方法 |
|
|
|
//搜索方法 |
|
|
|
const get = async function (val) { |
|
|
|
try { |
|
|
|
// 搜索参数页码赋值 |
|
|
|
if (typeof val === 'number') { |
|
|
|
getObj.value.pageNum = val; |
|
|
|
} |
|
|
|
// 搜索参数时间赋值 |
|
|
|
if (getTime.value != null) { |
|
|
|
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|
|
|
activity.value.startDate = getTime.value[0]; |
|
|
|
activity.value.endDate = getTime.value[1]; |
|
|
|
} |
|
|
|
} else { |
|
|
|
activity.value.startDate = ''; |
|
|
|
activity.value.endDate = ''; |
|
|
|
} |
|
|
|
|
|
|
|
console.log('搜索参数', getObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', { ...getObj.value, activity: { ...activity.value } }); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
// 存储表格数据 |
|
|
|
tableData.value = result.data.data.list; |
|
|
|
console.log('tableData', tableData.value); |
|
|
|
// 存储分页总条目 |
|
|
|
total.value = result.data.data.total; |
|
|
|
console.log('total', total.value); |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
try { |
|
|
|
// 搜索参数页码赋值 |
|
|
|
if (typeof val === "number") { |
|
|
|
getObj.value.pageNum = val; |
|
|
|
} |
|
|
|
// 搜索参数时间赋值 |
|
|
|
if (getTime.value != null) { |
|
|
|
if (getTime.value.startDate != "" && getTime.value.endDate != "") { |
|
|
|
activity.value.startDate = getTime.value[0]; |
|
|
|
activity.value.endDate = getTime.value[1]; |
|
|
|
} |
|
|
|
} else { |
|
|
|
activity.value.startDate = ""; |
|
|
|
activity.value.endDate = ""; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
console.log("搜索参数", getObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await API.post( |
|
|
|
"http://192.168.8.93:10010/recharge/activity/select", |
|
|
|
{ ...getObj.value, activity: { ...activity.value } } |
|
|
|
); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log("请求成功", result); |
|
|
|
// 存储表格数据 |
|
|
|
tableData.value = result.data.list; |
|
|
|
console.log("tableData", tableData.value); |
|
|
|
// 存储分页总条目 |
|
|
|
total.value = result.data.total; |
|
|
|
console.log("total", total.value); |
|
|
|
} catch (error) { |
|
|
|
console.log("请求失败", error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 重置 |
|
|
|
const reset = function () { |
|
|
|
getObj.value = {}; |
|
|
|
getObj.value.pageNum = 1; |
|
|
|
getObj.value.pageSize = 5; |
|
|
|
getTime.value = {}; |
|
|
|
activity.value = {}; |
|
|
|
} |
|
|
|
getObj.value = {}; |
|
|
|
getObj.value.pageNum = 1; |
|
|
|
getObj.value.pageSize = 5; |
|
|
|
getTime.value = {}; |
|
|
|
activity.value = {}; |
|
|
|
}; |
|
|
|
//新增活动弹出框 |
|
|
|
const addActivityVisible = ref(false) |
|
|
|
const addActivityVisible = ref(false); |
|
|
|
//打开新增活动弹出框 |
|
|
|
const openAddActivityVisible = function () { |
|
|
|
addActivityVisible.value = true |
|
|
|
} |
|
|
|
addActivityVisible.value = true; |
|
|
|
}; |
|
|
|
//关闭新增窗口弹出框 |
|
|
|
const closeAddActivityVisible = function () { |
|
|
|
addActivityVisible.value = false |
|
|
|
} |
|
|
|
addActivityVisible.value = false; |
|
|
|
}; |
|
|
|
//添加活动按钮 |
|
|
|
const addActicity = function () { |
|
|
|
//添加对象初始化操作 |
|
|
|
addObj.value = {}; |
|
|
|
addObj.value.adminId = admin.value.adminId; |
|
|
|
addObj.value.adminName = admin.value.name; |
|
|
|
addObj.value.freeGold = '0'; |
|
|
|
addObj.value.rechargeRatio = 0; |
|
|
|
addObj.value.startTime = null; |
|
|
|
addObj.value.endTime = null; |
|
|
|
openAddActivityVisible(); |
|
|
|
} |
|
|
|
//添加对象初始化操作 |
|
|
|
addObj.value = {}; |
|
|
|
addObj.value.adminId = admin.value.adminId; |
|
|
|
addObj.value.adminName = admin.value.name; |
|
|
|
addObj.value.freeGold = "0"; |
|
|
|
addObj.value.rechargeRatio = 0; |
|
|
|
addObj.value.startTime = null; |
|
|
|
addObj.value.endTime = null; |
|
|
|
openAddActivityVisible(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 添加确认 |
|
|
|
const add = async function () { |
|
|
|
Ref.value.validate(async (valid) => { |
|
|
|
console.log('valid', valid); |
|
|
|
if (valid) { |
|
|
|
try { |
|
|
|
console.log('添加对象', addObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/add', addObj.value); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
// 刷新表格数据 |
|
|
|
get(); |
|
|
|
// 关闭弹出框 |
|
|
|
closeAddActivityVisible(); |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: 'success', |
|
|
|
message: '活动添加成功！', |
|
|
|
}) |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} else { |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: 'error', |
|
|
|
message: '请检查输入内容', |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
// 删除========================================================= |
|
|
|
// 删除按钮 |
|
|
|
const del = function (row) { |
|
|
|
delObj.value.activityId = row.activityId; |
|
|
|
console.log('delObj', delObj.value); |
|
|
|
} |
|
|
|
// 删除按钮的气泡弹出框确认按钮 |
|
|
|
const delConfirm = async function () { |
|
|
|
try { |
|
|
|
console.log('delObj', delObj.value); |
|
|
|
Ref.value.validate(async (valid) => { |
|
|
|
console.log("valid", valid); |
|
|
|
if (valid) { |
|
|
|
try { |
|
|
|
console.log("添加对象", addObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/edit', delObj.value); |
|
|
|
const result = await API.post( |
|
|
|
"http://192.168.8.93:10010/recharge/activity/add", |
|
|
|
addObj.value |
|
|
|
); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
console.log("请求成功", result); |
|
|
|
// 刷新表格数据 |
|
|
|
get(); |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 关闭弹出框 |
|
|
|
closeAddActivityVisible(); |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: "success", |
|
|
|
message: "活动添加成功！", |
|
|
|
}); |
|
|
|
} catch (error) { |
|
|
|
console.log("请求失败", error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} else { |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: "error", |
|
|
|
message: "请检查输入内容", |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
// 删除========================================================= |
|
|
|
// 删除按钮 |
|
|
|
const del = function (row) { |
|
|
|
delObj.value.activityId = row.activityId; |
|
|
|
console.log("delObj", delObj.value); |
|
|
|
}; |
|
|
|
// 删除按钮的气泡弹出框确认按钮 |
|
|
|
const delConfirm = async function () { |
|
|
|
try { |
|
|
|
console.log("delObj", delObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await API.post( |
|
|
|
"http://192.168.8.93:10010/recharge/activity/edit", |
|
|
|
delObj.value |
|
|
|
); |
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log("请求成功", result); |
|
|
|
// 刷新表格数据 |
|
|
|
get(); |
|
|
|
} catch (error) { |
|
|
|
console.log("请求失败", error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 表单验证 |
|
|
|
// 开始时间改变时，重新验证结束时间 |
|
|
|
const handleStartTimeChange = () => { |
|
|
|
Ref.value.validateField('endTime'); |
|
|
|
Ref.value.validateField("endTime"); |
|
|
|
}; |
|
|
|
const checkFreeGoldRadio = function (rule, value, callback) { |
|
|
|
if (addObj.value.freeGold == 1) { |
|
|
|
if (value == '0' || value == null || value == '') { |
|
|
|
callback(new Error('请输入免费金币兑换比')) |
|
|
|
}else if(value<0||isNaN(value)) { |
|
|
|
callback(new Error('请输入正确的格式')); |
|
|
|
}else{ |
|
|
|
callback(); |
|
|
|
} |
|
|
|
if (addObj.value.freeGold == 1) { |
|
|
|
if (value == "0" || value == null || value == "") { |
|
|
|
callback(new Error("请输入免费金币兑换比")); |
|
|
|
} else if (value < 0 || isNaN(value)) { |
|
|
|
callback(new Error("请输入正确的格式")); |
|
|
|
} else { |
|
|
|
callback() |
|
|
|
callback(); |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const checkStartTime = function (rule, value, callback) { |
|
|
|
if (value <= new Date()) { |
|
|
|
callback(new Error('开始时间不能小于当前时间')) |
|
|
|
} else { |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
if (value <= new Date()) { |
|
|
|
callback(new Error("开始时间不能小于当前时间")); |
|
|
|
} else { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const checkEndTime = function (rule, value, callback) { |
|
|
|
if (value <= new Date()) { |
|
|
|
callback(new Error('结束时间不能小于当前时间')) |
|
|
|
} else if (value <= addObj.value.startTime) { |
|
|
|
callback(new Error('结束时间不能小于开始时间')) |
|
|
|
} else { |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
if (value <= new Date()) { |
|
|
|
callback(new Error("结束时间不能小于当前时间")); |
|
|
|
} else if (value <= addObj.value.startTime) { |
|
|
|
callback(new Error("结束时间不能小于开始时间")); |
|
|
|
} else { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
}; |
|
|
|
const rules = reactive({ |
|
|
|
activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' },], |
|
|
|
freeGold: [{ required: true, message: '请选择是否赠送免费金币', trigger: 'blur' },], |
|
|
|
rechargeRatio: [{ validator: checkFreeGoldRadio, trigger: 'blur' },], |
|
|
|
startTime: [ |
|
|
|
{ required: true, message: '请选择开始时间', trigger: 'blur' }, |
|
|
|
{ validator: checkStartTime, trigger: 'blur' }, |
|
|
|
], |
|
|
|
endTime: [ |
|
|
|
{ required: true, message: '请选择结束时间', trigger: 'blur' }, |
|
|
|
{ validator: checkEndTime, trigger: 'blur' }, |
|
|
|
], |
|
|
|
}) |
|
|
|
activityName: [ |
|
|
|
{ required: true, message: "请输入活动名称", trigger: "blur" }, |
|
|
|
], |
|
|
|
freeGold: [ |
|
|
|
{ required: true, message: "请选择是否赠送免费金币", trigger: "blur" }, |
|
|
|
], |
|
|
|
rechargeRatio: [{ validator: checkFreeGoldRadio, trigger: "blur" }], |
|
|
|
startTime: [ |
|
|
|
{ required: true, message: "请选择开始时间", trigger: "blur" }, |
|
|
|
{ validator: checkStartTime, trigger: "blur" }, |
|
|
|
], |
|
|
|
endTime: [ |
|
|
|
{ required: true, message: "请选择结束时间", trigger: "blur" }, |
|
|
|
{ validator: checkEndTime, trigger: "blur" }, |
|
|
|
], |
|
|
|
}); |
|
|
|
|
|
|
|
// 验证跳转输入框的数字是否合法 |
|
|
|
const checkNumber = function () { |
|
|
|
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
|
|
|
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)); |
|
|
|
if ((getObj.value.pageNum > 0) && (getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize))) { |
|
|
|
console.log('输入的数字合法'); |
|
|
|
get(); |
|
|
|
} else { |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: 'error', |
|
|
|
message: '请检查输入内容', |
|
|
|
}) |
|
|
|
} |
|
|
|
if (typeof parseInt(getObj.value.pageNum) === "number") { |
|
|
|
console.log( |
|
|
|
"总共有多少页" + Math.ceil(total.value / getObj.value.pageSize) |
|
|
|
); |
|
|
|
if ( |
|
|
|
getObj.value.pageNum > 0 && |
|
|
|
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize) |
|
|
|
) { |
|
|
|
console.log("输入的数字合法"); |
|
|
|
get(); |
|
|
|
} else { |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: 'error', |
|
|
|
message: '请检查输入内容', |
|
|
|
}) |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: "error", |
|
|
|
message: "请检查输入内容", |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: "error", |
|
|
|
message: "请检查输入内容", |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 挂载 |
|
|
|
onMounted(async function () { |
|
|
|
get(); |
|
|
|
}) |
|
|
|
|
|
|
|
get(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<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="activity.activityName" style="width: 240px" placeholder="请输入活动名称" |
|
|
|
clearable /> |
|
|
|
</div> |
|
|
|
<div class="head-card-element"> |
|
|
|
<el-text class="mx-1" size="large">添加时间：</el-text> |
|
|
|
<el-date-picker v-model="getTime" type="daterange" range-separator="至" start-placeholder="起始时间" |
|
|
|
end-placeholder="结束时间" /> |
|
|
|
</div> |
|
|
|
<div class="head-card-btn"> |
|
|
|
<el-button @click="reset()">重置</el-button> |
|
|
|
<el-button type="primary" @click="get()">查询</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" :height="tableHeight" 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="免费兑换比"> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ scope.row.rechargeRatio }}:1</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="status" label="状态"> |
|
|
|
<template #default="scope"> |
|
|
|
<span v-if="scope.row.status === 1"> |
|
|
|
<div class="status"> |
|
|
|
<span class="green-dot"></span> |
|
|
|
<span>进行中</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === 0"> |
|
|
|
<div class="status"> |
|
|
|
<span class="red-dot"></span> |
|
|
|
<span>未开始</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === 2"> |
|
|
|
<div class="status"> |
|
|
|
<span class="grey-dot"></span> |
|
|
|
<span>已结束</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="添加人" /> |
|
|
|
<el-table-column prop="createTime" label="添加时间"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="operation" label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-popconfirm title="确定将此条活动删除吗？" @confirm="delConfirm"> |
|
|
|
<template #reference> |
|
|
|
<el-button type="primary" text @click="del(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> |
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
|
|
|
<div>共{{ total }}条,每页 </div> |
|
|
|
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
|
|
|
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
|
|
|
:value="item"></el-option> |
|
|
|
</el-select> |
|
|
|
<div> 条</div> |
|
|
|
</el-pagination> |
|
|
|
<el-pagination background layout="prev, pager, next, slot" :page-size="getObj.pageSize" |
|
|
|
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
|
|
|
<div>跳至</div> |
|
|
|
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
|
|
|
<div>页</div> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-dialog v-model="addActivityVisible" title="新增活动" width="500" :before-close="closeAddActivityVisible"> |
|
|
|
<template #footer> |
|
|
|
|
|
|
|
<el-form ref="Ref" :model="addObj" :rules="rules" label-width="auto" style="max-width: 600px"> |
|
|
|
|
|
|
|
<el-form-item prop="activityName" label="活动名称:"> |
|
|
|
<el-input v-model="addObj.activityName" placeholder="请输入活动名称" style="width: 220px;" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="freeGold" label="免费金币:"> |
|
|
|
<el-radio-group v-model="addObj.freeGold"> |
|
|
|
<el-radio value="0" @change="addObj.rechargeRatio = '0'">无赠送</el-radio> |
|
|
|
<el-radio value="1">有赠送</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="rechargeRatio" label="免费金币兑换比:"> |
|
|
|
<el-input v-model="addObj.rechargeRatio" :disabled="addObj.freeGold === '0' ? true : false" |
|
|
|
placeholder="请输入" style="width: 80px;" />：1 |
|
|
|
<div style="color: grey;">(提示：当前规则每10新币可兑换1免费金币)</div> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="startTime" label="开始时间:"> |
|
|
|
<el-date-picker v-model="addObj.startTime" type="date" placeholder="请选择开始时间" |
|
|
|
@change="handleStartTimeChange" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="endTime" label="结束时间:"> |
|
|
|
<el-date-picker v-model="addObj.endTime" type="date" placeholder="请选择结束时间" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="添加人:"> |
|
|
|
<el-input v-model="addObj.adminName" disabled style="width: 220px;" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button @click="closeAddActivityVisible">取消</el-button> |
|
|
|
<el-button type="primary" @click="add()"> |
|
|
|
提交 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
<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="activity.activityName" |
|
|
|
style="width: 240px" |
|
|
|
placeholder="请输入活动名称" |
|
|
|
clearable |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="head-card-element"> |
|
|
|
<el-text class="mx-1" size="large">添加时间：</el-text> |
|
|
|
<el-date-picker |
|
|
|
v-model="getTime" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="起始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="head-card-btn"> |
|
|
|
<el-button @click="reset()">重置</el-button> |
|
|
|
<el-button type="primary" @click="get()">查询</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" :height="tableHeight" 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="免费兑换比"> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ scope.row.rechargeRatio }}:1</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="status" label="状态"> |
|
|
|
<template #default="scope"> |
|
|
|
<span v-if="scope.row.status === 1"> |
|
|
|
<div class="status"> |
|
|
|
<span class="green-dot"></span> |
|
|
|
<span>进行中</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === 0"> |
|
|
|
<div class="status"> |
|
|
|
<span class="red-dot"></span> |
|
|
|
<span>未开始</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === 2"> |
|
|
|
<div class="status"> |
|
|
|
<span class="grey-dot"></span> |
|
|
|
<span>已结束</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="添加人" /> |
|
|
|
<el-table-column prop="createTime" label="添加时间"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="operation" label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-popconfirm |
|
|
|
title="确定将此条活动删除吗？" |
|
|
|
@confirm="delConfirm" |
|
|
|
> |
|
|
|
<template #reference> |
|
|
|
<el-button type="primary" text @click="del(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> |
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
:page-size="getObj.pageSize" |
|
|
|
layout="slot" |
|
|
|
:total="total" |
|
|
|
> |
|
|
|
<div>共{{ total }}条,每页</div> |
|
|
|
<el-select |
|
|
|
v-model="getObj.pageSize" |
|
|
|
class="page-size" |
|
|
|
@change="get()" |
|
|
|
style="width: 80px" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in [5, 6, 7, 8, 9, 10]" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
<div>条</div> |
|
|
|
</el-pagination> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
layout="prev, pager, next, slot" |
|
|
|
:page-size="getObj.pageSize" |
|
|
|
:total="total" |
|
|
|
:current-page="getObj.pageNum" |
|
|
|
@current-change="get" |
|
|
|
> |
|
|
|
<div>跳至</div> |
|
|
|
<el-input |
|
|
|
v-model="getObj.pageNum" |
|
|
|
style="width: 40px" |
|
|
|
@change="checkNumber" |
|
|
|
/> |
|
|
|
<div>页</div> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
v-model="addActivityVisible" |
|
|
|
title="新增活动" |
|
|
|
width="500" |
|
|
|
:before-close="closeAddActivityVisible" |
|
|
|
> |
|
|
|
<template #footer> |
|
|
|
<el-form |
|
|
|
ref="Ref" |
|
|
|
:model="addObj" |
|
|
|
:rules="rules" |
|
|
|
label-width="auto" |
|
|
|
style="max-width: 600px" |
|
|
|
> |
|
|
|
<el-form-item prop="activityName" label="活动名称:"> |
|
|
|
<el-input |
|
|
|
v-model="addObj.activityName" |
|
|
|
placeholder="请输入活动名称" |
|
|
|
style="width: 220px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="freeGold" label="免费金币:"> |
|
|
|
<el-radio-group v-model="addObj.freeGold"> |
|
|
|
<el-radio value="0" @change="addObj.rechargeRatio = '0'" |
|
|
|
>无赠送</el-radio |
|
|
|
> |
|
|
|
<el-radio value="1">有赠送</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="rechargeRatio" label="免费金币兑换比:"> |
|
|
|
<el-input |
|
|
|
v-model="addObj.rechargeRatio" |
|
|
|
:disabled="addObj.freeGold === '0' ? true : false" |
|
|
|
placeholder="请输入" |
|
|
|
style="width: 80px" |
|
|
|
/>：1 |
|
|
|
<div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="startTime" label="开始时间:"> |
|
|
|
<el-date-picker |
|
|
|
v-model="addObj.startTime" |
|
|
|
type="date" |
|
|
|
placeholder="请选择开始时间" |
|
|
|
@change="handleStartTimeChange" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="endTime" label="结束时间:"> |
|
|
|
<el-date-picker |
|
|
|
v-model="addObj.endTime" |
|
|
|
type="date" |
|
|
|
placeholder="请选择结束时间" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="添加人:"> |
|
|
|
<el-input v-model="adminData.name" disabled style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button @click="closeAddActivityVisible">取消</el-button> |
|
|
|
<el-button type="primary" @click="add()"> 提交 </el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.pagination { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.status { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.head-card { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.head-card-element { |
|
|
|
margin-right: 20px; |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.head-card-btn { |
|
|
|
margin-left: auto; |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
hongxilin
5 months ago