|
|
|
@ -1,39 +1,90 @@ |
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, reactive, computed } from "vue"; |
|
|
|
import ElementPlus from "element-plus"; |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import axios from 'axios'; |
|
|
|
//变量 |
|
|
|
// 用户对象假的 |
|
|
|
const admin = ref({ |
|
|
|
adminId: 1, |
|
|
|
name: '客服A', |
|
|
|
area: '新加坡' |
|
|
|
}) |
|
|
|
//活动表格数据 |
|
|
|
const tableData = ref([]); |
|
|
|
|
|
|
|
//分页总条目 |
|
|
|
const total = ref(100); |
|
|
|
// 搜索对象时间 |
|
|
|
const getTime = ref([]); |
|
|
|
// 搜索对象活动 |
|
|
|
const activity = ref({}); |
|
|
|
//搜索对象 |
|
|
|
const getObj = ref({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 5, |
|
|
|
}) |
|
|
|
//分页总条目 |
|
|
|
const total = ref(100) |
|
|
|
// 添加对象 |
|
|
|
const addObj = ref({ |
|
|
|
add: '', |
|
|
|
}) |
|
|
|
// 删除对象 |
|
|
|
const delObj = ref({ |
|
|
|
del: '', |
|
|
|
}); |
|
|
|
//表格高度 |
|
|
|
const tableHeight = computed(function () { |
|
|
|
return (getObj.value.pageSize + 1) * 50 + 'px'; |
|
|
|
}); |
|
|
|
|
|
|
|
// 表单验证ref |
|
|
|
const Ref = ref(null); |
|
|
|
|
|
|
|
//方法 |
|
|
|
//搜索方法 |
|
|
|
const get = async function () { |
|
|
|
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); |
|
|
|
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); |
|
|
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
|
|
|
// 存储分页总条目 |
|
|
|
total.value = result.data.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 = {}; |
|
|
|
get(); |
|
|
|
} |
|
|
|
//新增活动弹出框 |
|
|
|
const addActivityVisible = ref(false) |
|
|
|
//打开新增活动弹出框 |
|
|
|
@ -46,27 +97,124 @@ const closeAddActivityVisible = function () { |
|
|
|
} |
|
|
|
//添加活动按钮 |
|
|
|
const addActicity = function () { |
|
|
|
//添加对象初始化操作 |
|
|
|
addObj.value = {}; |
|
|
|
addObj.value.adminId = admin.value.adminId; |
|
|
|
addObj.value.adminName = admin.value.name; |
|
|
|
addObj.value.dept = admin.value.area; |
|
|
|
addObj.value.freeGold = '0'; |
|
|
|
addObj.value.rechargeRatio = 0; |
|
|
|
addObj.value.startTime = null; |
|
|
|
addObj.value.endTime = null; |
|
|
|
openAddActivityVisible(); |
|
|
|
} |
|
|
|
|
|
|
|
// 添加对象 |
|
|
|
const addObj = reactive({ |
|
|
|
activityName: '', |
|
|
|
freeGold: '', |
|
|
|
rechargeRatio: '', |
|
|
|
startTime: '', |
|
|
|
endTime: '', |
|
|
|
adminName: '', |
|
|
|
}) |
|
|
|
// 添加确认 |
|
|
|
const add = async function () { |
|
|
|
Ref.value.validate(async (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 Delete = function (index, row) { |
|
|
|
console.log(index, row) |
|
|
|
} |
|
|
|
|
|
|
|
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 axios.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'); |
|
|
|
}; |
|
|
|
const checkFreeGoldRadio = function (rule, value, callback) { |
|
|
|
if (addObj.value.freeGold == 1) { |
|
|
|
if (value == '0' || value == null || value == '') { |
|
|
|
callback(new Error('请输入免费金币兑换比')) |
|
|
|
} else { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
} else { |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const checkStartTime = function (rule, value, 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() |
|
|
|
} |
|
|
|
} |
|
|
|
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' }, |
|
|
|
], |
|
|
|
}) |
|
|
|
|
|
|
|
// 挂载 |
|
|
|
onMounted(async function(){ |
|
|
|
onMounted(async function () { |
|
|
|
get(); |
|
|
|
}) |
|
|
|
|
|
|
|
@ -79,16 +227,17 @@ onMounted(async function(){ |
|
|
|
<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 /> |
|
|
|
<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-time-picker v-model="value1" is-range range-separator="至" start-placeholder="起始时间" |
|
|
|
<el-date-picker v-model="getTime" type="daterange" range-separator="至" start-placeholder="起始时间" |
|
|
|
end-placeholder="结束时间" /> |
|
|
|
</div> |
|
|
|
<div class="head-card-btn"> |
|
|
|
<el-button>重置</el-button> |
|
|
|
<el-button type="primary">查询</el-button> |
|
|
|
<el-button @click="reset()">重置</el-button> |
|
|
|
<el-button type="primary" @click="get()">查询</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
@ -102,34 +251,44 @@ onMounted(async function(){ |
|
|
|
style="color: #048EFB; border:1px solid #048EFB">新增活动</el-button> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-table :data="tableData" style="width: 100%"> |
|
|
|
<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="免费兑换比" /> |
|
|
|
<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"> |
|
|
|
<div class="status"> |
|
|
|
<span v-if="scope.row.status === '进行中'"> |
|
|
|
<span v-if="scope.row.status === 1"> |
|
|
|
<div class="status"> |
|
|
|
<span class="green-dot"></span> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === '未开始'"> |
|
|
|
<span>进行中</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === 0"> |
|
|
|
<div class="status"> |
|
|
|
<span class="red-dot"></span> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === '已结束'"> |
|
|
|
<span>未开始</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.status === 2"> |
|
|
|
<div class="status"> |
|
|
|
<span class="grey-dot"></span> |
|
|
|
</span> |
|
|
|
<span>{{ scope.row.status }}</span> |
|
|
|
</div> |
|
|
|
<span>已结束</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="adminName" label="添加人" /> |
|
|
|
<el-table-column prop="name" label="添加人" /> |
|
|
|
<el-table-column prop="createTime" label="添加时间" /> |
|
|
|
<el-table-column prop="operation" label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-popconfirm title="确定将此条活动删除吗？"> |
|
|
|
<el-popconfirm title="确定将此条活动删除吗？" @confirm="delConfirm"> |
|
|
|
<template #reference> |
|
|
|
<el-button type="primary" text @click="Delete(scope.$index, scope.row)"> |
|
|
|
<el-button type="primary" text @click="del(scope.row)"> |
|
|
|
删除 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
@ -148,7 +307,7 @@ onMounted(async function(){ |
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
<el-pagination background layout="prev, pager, next" :total="total" :page-size="getObj.pageSize" |
|
|
|
:current-page="getObj.pageNum" /> |
|
|
|
:current-page="getObj.pageNum" @current-change="get" /> |
|
|
|
|
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
@ -157,33 +316,35 @@ onMounted(async function(){ |
|
|
|
<el-dialog v-model="addActivityVisible" title="新增活动" width="500" :before-close="closeAddActivityVisible"> |
|
|
|
<template #footer> |
|
|
|
|
|
|
|
<el-form :model="addObj" label-width="auto" style="max-width: 600px"> |
|
|
|
<el-form :model="addObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px"> |
|
|
|
|
|
|
|
<el-form-item label="活动名称:"> |
|
|
|
<el-form-item prop="activityName" label="活动名称:"> |
|
|
|
<el-input v-model="addObj.activityName" placeholder="请输入活动名称" style="width: 220px;" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="免费金币:"> |
|
|
|
<el-form-item prop="freeGold" label="免费金币:"> |
|
|
|
<el-radio-group v-model="addObj.freeGold"> |
|
|
|
<el-radio value="0">无赠送</el-radio> |
|
|
|
<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 label="免费金币兑换比:"> |
|
|
|
<el-input v-model="addObj.rechargeRatio" placeholder="请输入" style="width: 80px;" />：1 |
|
|
|
<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 label="开始时间:"> |
|
|
|
<el-time-picker v-model="addObj.startTime" /> |
|
|
|
<el-form-item prop="startTime" label="开始时间:"> |
|
|
|
<el-date-picker v-model="addObj.startTime" type="date" placeholder="请选择开始时间" |
|
|
|
@change="handleStartTimeChange" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="结束时间:"> |
|
|
|
<el-time-picker v-model="addObj.endTime" /> |
|
|
|
<el-form-item prop="endTime" label="结束时间:"> |
|
|
|
<el-date-picker v-model="addObj.endTime" type="date" placeholder="请选择结束时间" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="添加人:"> |
|
|
|
<el-form-item prop="adminName" label="添加人:"> |
|
|
|
<el-input v-model="addObj.adminName" disabled style="width: 220px;" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
@ -191,7 +352,7 @@ onMounted(async function(){ |
|
|
|
|
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button @click="closeAddActivityVisible">取消</el-button> |
|
|
|
<el-button type="primary" @click="closeAddActivityVisible"> |
|
|
|
<el-button type="primary" @click="add()"> |
|
|
|
提交 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
|
hongxilin
6 months ago