donghaolin
6 months ago
6 changed files with 2204 additions and 614 deletions
-
326vue/gold-system/src/views/consume/addConsume.vue
-
421vue/gold-system/src/views/consume/allConsume.vue
-
755vue/gold-system/src/views/managerecharge/rate.vue
-
537vue/gold-system/src/views/recharge/addRecharge.vue
-
313vue/gold-system/src/views/refund/addRefund.vue
-
466vue/gold-system/src/views/refund/allRefund.vue
@ -1,13 +1,331 @@ |
|||
<script setup> |
|||
import { reactive } from 'vue'; |
|||
import { ref,computed,watch } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import { Plus } from '@element-plus/icons-vue' |
|||
import axios from 'axios' |
|||
import { ElMessageBox } from 'element-plus' |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
// 这是添加充值信息的表单 |
|||
const addConsume = ref({ |
|||
|
|||
}); |
|||
// 这是添加充值信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post('http://192.168.8.93:10010/recharge/recharge/add', addConsume.value); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result); |
|||
// 存储表格数据 |
|||
console.log('用户信息', user.value); |
|||
} catch (error) { |
|||
console.log('请求失败', error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm('确认添加？').then(() => { |
|||
add(); |
|||
console.log('添加成功'); |
|||
imageUrl.value = ''; |
|||
addConsume.value = {}; |
|||
}).catch(() => { |
|||
console.log('取消添加'); |
|||
}) } else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容', |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时，重新验证结束时间 |
|||
const Ref = ref(null); |
|||
const checkEndTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error('付款时间不能小于当前时间')) |
|||
} |
|||
} |
|||
const rules = reactive({ |
|||
homilyId: [{ required: true, message: '请输入精网号', trigger: 'blur' },], |
|||
refundGoods: [{ required: true, message: '请选择退款商品', trigger: 'blur' },], |
|||
taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' },], |
|||
freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },], |
|||
rechargeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },], |
|||
allGold: [{ required: true, message: '请输入消费金币总数', trigger: 'blur' },], |
|||
|
|||
|
|||
}) |
|||
|
|||
// 查找客户信息的方法 |
|||
const user = ref({}); |
|||
const getUser = async function (homilyId) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post('http://192.168.8.93:10020/recharge/user', {homilyId: homilyId}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result); |
|||
// 存储表格数据 |
|||
user.value = result.data.data[0]; |
|||
console.log('用户信息', user.value); |
|||
|
|||
} catch (error) { |
|||
console.log('请求失败', error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 这是查询活动的接口 |
|||
const activity = ref([]); |
|||
const getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result); |
|||
// 存储表格数据 |
|||
activity.value = result.data.data; |
|||
console.log('活动信息', activity.value); |
|||
} catch (error) { |
|||
console.log('请求失败', error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
getActivity(); |
|||
|
|||
// 这是查询货币的接口 |
|||
const currency = ref([]); |
|||
const getCurrency = async function () { |
|||
try { |
|||
|
|||
// 发送POST请求 |
|||
const result = await axios.post('http://192.168.8.174:10010/rates/search',{}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('货币请求成功', result); |
|||
// 存储表格数据 |
|||
currency.value = result.data.data; |
|||
console.log('tableData', currency.value); |
|||
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
|||
|
|||
} catch (error) { |
|||
console.log('请求失败', error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
getCurrency(); |
|||
|
|||
|
|||
// 这是添加上传图片的接口 |
|||
const imageUrl = ref('') |
|||
|
|||
// 上传图片成功的回调函数 |
|||
const handleAvatarSuccess = (response, uploadFile) => { |
|||
imageUrl.value = URL.createObjectURL(uploadFile.raw); |
|||
console.log('图片上传成功', response, uploadFile); |
|||
addConsume.value.rechargeVoucher = 'http://192.168.8.93:10010/upload/' + response.data; |
|||
console.log('图片名称', addConsume.value.rechargeVoucher); |
|||
}; |
|||
// 上传图片之前的校验函数 |
|||
const beforeAvatarUpload = (rawFile) => { |
|||
if (rawFile.type !== 'image/jpeg') { |
|||
ElMessage.error('Avatar picture must be JPG format!'); |
|||
return false; |
|||
} else if (rawFile.size / 1024 / 1024 > 2) { |
|||
ElMessage.error('Avatar picture size can not exceed 2MB!'); |
|||
return false; |
|||
} |
|||
return true; |
|||
}; |
|||
|
|||
//充值方式条目 |
|||
const options = [ |
|||
{ |
|||
value: '现金充值', |
|||
label: '现金充值', |
|||
}, |
|||
{ |
|||
value: '龙鳞卡', |
|||
label: '龙鳞卡', |
|||
}, |
|||
{ |
|||
value: '弘粉卡', |
|||
label: '弘粉卡', |
|||
}, |
|||
|
|||
] |
|||
|
|||
const calculatedFreeGold = computed(() => { |
|||
return addConsume.value.paidGold * addConsume.value.activityId; |
|||
}); |
|||
|
|||
watch(calculatedFreeGold, (newVal) => { |
|||
addConsume.value.freeGold = newVal; |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>Add Consume</h1> |
|||
</div> |
|||
<div style="margin-bottom: 20px;"> |
|||
新增消费 |
|||
</div> |
|||
|
|||
<el-form :model="addConsume" ref="Ref" :rules="rules" label-width="auto" style="max-width: 750px"> |
|||
<el-form-item prop="homilyId" label="精网号"> |
|||
<el-input v-model="addConsume.homilyId" style="width: 220px;" /> |
|||
<el-button type="primary" @click="getUser(addConsume.homilyId)" style="margin-left: 20px;">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item prop="goods" label="商品名称"> |
|||
<el-select v-model="addConsume.goods" placeholder="请选择" style="width: 300px"> |
|||
<el-option |
|||
v-for="item in activity" |
|||
:key="item.value" |
|||
:label="item.activityName" |
|||
:value="item.rechargeRatio" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="allGold" label="消费金币总数"> |
|||
<el-input v-model="addConsume.paidGold" style="width: 100px;"/> |
|||
</el-form-item> |
|||
<el-form-item prop="taskCoin" label="任务金币" style="float: left; "> |
|||
<el-input disabled v-model="addConsume.taskCoin" style="width: 100px;margin-left: -5px;"/> |
|||
<p style="margin-right: 0px;">个</p> |
|||
</el-form-item> |
|||
<el-form-item prop="freeCoin" label="免费金币" style="float: left;margin-left: -10px;margin-right: -10px;"> |
|||
<el-input disabled v-model="addConsume.freeCoin" style="width: 100px;margin-left: -5px;"/> |
|||
<p style="margin-right: 0px;">个</p> |
|||
</el-form-item> |
|||
<el-form-item prop="rechargeCoin" label="充值金币" style="margin-left: -20px;"> |
|||
<el-input disabled v-model="addConsume.rechargeCoin" style="width: 100px;margin-left: -5px;"/> |
|||
<p style="margin-right: 20px;">个</p> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addConsume.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="commitName" label="提交人"> |
|||
<el-input style="width: 300px" value="张三" disabled placeholder="提交人姓名"/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-button @click="closeAddActivityVisible" style="margin-left: 280px;">取消</el-button> |
|||
<el-button type="primary" @click="addBefore"> |
|||
提交 |
|||
</el-button> |
|||
|
|||
<!-- 客户信息栏 --> |
|||
<el-card style="width: 700px;float: right;margin-top: -330px;margin-right: 100px;"> |
|||
<el-form :model="user" label-width="auto" style="max-width: 600px" label-position="left"> |
|||
<el-text size="large" style="margin-left: 20px;">客户信息</el-text> |
|||
<el-row style="margin-top: 20px;"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="姓名:" > |
|||
<p>{{user.name}}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="历史金币总数" > |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="精网号" > |
|||
<p>{{user.homilyId}}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="当前金币总数" > |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="首次充值日期"> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="充值次数" > |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责客服" > |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="消费次数" > |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所属门店" > |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="待审核" > |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p{ |
|||
margin: 0px; |
|||
} |
|||
.el-form-item { |
|||
margin-left: 50px; |
|||
|
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 50px; |
|||
height: 50px; |
|||
text-align: center; |
|||
|
|||
</style> |
|||
} |
|||
</style> |
|||
@ -1,13 +1,424 @@ |
|||
<script setup> |
|||
|
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
import { AiFillRead } from "vue-icons-plus/ai"; |
|||
import axios from "axios"; |
|||
// 变量 |
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索====================================== |
|||
// 搜索detailVo |
|||
const detailVo = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索对象时间 |
|||
const getTime = ref([]); |
|||
// 搜索活动列表 |
|||
const activity = ref([]); |
|||
// 所有信息 |
|||
const allData = ref([]); |
|||
// 搜索地区列表 |
|||
const area = ref([]); |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref("all"); |
|||
|
|||
// 支付方式选项 |
|||
const payWay = [ |
|||
{ |
|||
value: "微信", |
|||
label: "微信", |
|||
}, |
|||
{ |
|||
value: "支付宝", |
|||
label: "支付宝", |
|||
}, |
|||
{ |
|||
value: "银联", |
|||
label: "银联", |
|||
}, |
|||
{ |
|||
value: "信用卡", |
|||
label: "信用卡", |
|||
}, |
|||
{ |
|||
value: "借记卡", |
|||
label: "借记卡", |
|||
}, |
|||
]; |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 2) * 60 + "px"; |
|||
}); |
|||
|
|||
// 方法 |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
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 != "") { |
|||
detailVo.value.startDate = getTime.value[0]; |
|||
detailVo.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
detailVo.value.startDate = ""; |
|||
detailVo.value.endDate = ""; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.147:10030/consume/select", |
|||
{ ...getObj.value, detailVo: { ...detailVo.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); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 重置 |
|||
const reset = function () { |
|||
detailVo.value.activityId = ""; |
|||
detailVo.value.payWay = ""; |
|||
detailVo.value.area = ""; |
|||
detailVo.value.startDate = ""; |
|||
detailVo.value.endDate = ""; |
|||
get(); |
|||
}; |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log("adminAll"); |
|||
detailVo.value.status = ""; |
|||
get(); |
|||
}; |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
detailVo.value.status = 0; |
|||
get(); |
|||
console.log("adminWait"); |
|||
}; |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
detailVo.value.status = 1; |
|||
get(); |
|||
console.log("adminPass"); |
|||
}; |
|||
//已驳回充值明细 |
|||
const adminReject = function () { |
|||
detailVo.value.status = 2; |
|||
get(); |
|||
console.log("adminReject"); |
|||
}; |
|||
//点击标签页 |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === "all") { |
|||
adminAll(); |
|||
} else if (tab.props.name === "wait") { |
|||
adminWait(); |
|||
} else if (tab.props.name === "pass") { |
|||
adminPass(); |
|||
} else if (tab.props.name === "reject") { |
|||
adminReject(); |
|||
} |
|||
}; |
|||
// 获取活动名称 |
|||
const getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10010/recharge/activity/select", |
|||
{} |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
activity.value = result.data.data; |
|||
console.log("activity", activity.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10010/recharge/recharge", |
|||
{} |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
allData.value = result.data.data; |
|||
console.log("allData", allData.value); |
|||
// 分离并去重地区列表 |
|||
area.value = [...new Set(allData.value.map((item) => item.area))]; |
|||
console.log("地区", area.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
getActivity(); |
|||
await getArea(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>All Consume</h1> |
|||
</div> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">商品名称：</el-text> |
|||
<el-select |
|||
v-model="detailVo.activityId" |
|||
placeholder="请选择活动名称" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in activity" |
|||
:key="item.activityId" |
|||
:label="item.activityName" |
|||
:value="item.activityId" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">消费平台：</el-text> |
|||
<el-select |
|||
v-model="detailVo.payWay" |
|||
placeholder="请选择支付方式" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in payWay" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">消费类型：</el-text> |
|||
<el-select |
|||
v-model="detailVo.area" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="21"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">充值时间：</el-text> |
|||
<el-date-picker |
|||
v-model="getTime" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()" |
|||
>今</el-button |
|||
> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<div class="head-card-btn"> |
|||
<el-button @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="username" label="姓名" width="80px" /> |
|||
<el-table-column prop="homilyId" label="精网号" width="180px" /> |
|||
<el-table-column prop="area" label="所属地区" width="120px" /> |
|||
<el-table-column prop="goods" label="商品名称" width="200px" /> |
|||
<el-table-column |
|||
prop="consumPlatform" |
|||
label="消费平台" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="consumeType" |
|||
label="消费类型" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeTotal" |
|||
label="消费金币总数" |
|||
width="180px" |
|||
/> |
|||
<el-table-column prop="taskCoin" label="任务金币" width="120px" /> |
|||
<el-table-column prop="freeCoin" label="免费金币" width="120px" /> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="conmmitName" label="提交人" width="120px" /> |
|||
<el-table-column prop="createTime" label="消费时间" width="180px" /> |
|||
<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> |
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next" |
|||
:total="total" |
|||
:page-size="getObj.pageSize" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
</style> |
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -1,13 +1,316 @@ |
|||
<script setup> |
|||
|
|||
import { reactive } from "vue"; |
|||
import { ref, computed, watch } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import { Plus } from "@element-plus/icons-vue"; |
|||
import axios from "axios"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
|
|||
// 这是添加充值信息的表单 |
|||
const addRefund = ref({}); |
|||
// 这是添加充值信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10010/recharge/recharge/add", |
|||
addRefund.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
console.log("用户信息", user.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm("确认添加？") |
|||
.then(() => { |
|||
add(); |
|||
console.log("添加成功"); |
|||
imageUrl.value = ""; |
|||
addRefund.value = {}; |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消添加"); |
|||
}); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时，重新验证结束时间 |
|||
const Ref = ref(null); |
|||
const checkEndTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error("付款时间不能小于当前时间")); |
|||
} |
|||
}; |
|||
const rules = reactive({ |
|||
homilyId: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
|||
refundType: [{ required: true, message: "请选择退款类型", trigger: "blur" }], |
|||
refundGoods: [{ required: true, message: "请选择退款商品", trigger: "blur" }], |
|||
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }], |
|||
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }], |
|||
rechargeCoin: [ |
|||
{ required: true, message: "请输入充值金币", trigger: "blur" }, |
|||
], |
|||
allCoin: [{ required: true, message: "请选择付款方式", trigger: "blur" }], |
|||
}); |
|||
|
|||
// 查找客户信息的方法 |
|||
const user = ref({}); |
|||
const getUser = async function (homilyId) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post("http://192.168.8.93:10020/recharge/user", { |
|||
homilyId: homilyId, |
|||
}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
user.value = result.data.data[0]; |
|||
console.log("用户信息", user.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 这是查询货币的接口 |
|||
const currency = ref([]); |
|||
const getCurrency = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.174:10010/rates/search", |
|||
{} |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("货币请求成功", result); |
|||
// 存储表格数据 |
|||
currency.value = result.data.data; |
|||
console.log("tableData", currency.value); |
|||
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
getCurrency(); |
|||
|
|||
const calculatedFreeGold = computed(() => { |
|||
return addRefund.value.paidGold * addRefund.value.activityId; |
|||
}); |
|||
|
|||
watch(calculatedFreeGold, (newVal) => { |
|||
addRefund.value.freeGold = newVal; |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>Add Refund</h1> |
|||
</div> |
|||
<div>新增退款</div> |
|||
|
|||
<el-form |
|||
:model="addRefund" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 750px" |
|||
> |
|||
<el-form-item prop="homilyId" label="精网号"> |
|||
<el-input v-model="addRefund.homilyId" style="width: 220px" /> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(addRefund.homilyId)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="refundType" label="退款类型"> |
|||
<el-select |
|||
v-model="addRefund.refundType" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in activity" |
|||
:key="item.value" |
|||
:label="item.activityName" |
|||
:value="item.rechargeRatio" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="refundGoods" label="退款商品"> |
|||
<el-select |
|||
v-model="addRefund.refundGoods" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in activity" |
|||
:key="item.value" |
|||
:label="item.activityName" |
|||
:value="item.rechargeRatio" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="taskCoin" label="任务金币" style="float: left"> |
|||
<el-input |
|||
v-model="addRefund.taskCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 0px">个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="freeCoin" |
|||
label="免费金币" |
|||
style="float: left; margin-left: -10px; margin-right: -10px" |
|||
> |
|||
<el-input |
|||
v-model="addRefund.freeCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 0px">个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
style="margin-left: -20px" |
|||
> |
|||
<el-input |
|||
v-model="addRefund.rechargeCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 20px">个</p> |
|||
</el-form-item> |
|||
<el-form-item prop="allCoin" label="退款金币总数"> |
|||
<el-input disabled v-model="addRefund.allCoin" style="width: 100px" /> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addRefund.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="commitName" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
value="张三" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-button @click="closeAddActivityVisible" style="margin-left: 280px" |
|||
>取消</el-button |
|||
> |
|||
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
|||
|
|||
<!-- 客户信息栏 --> |
|||
<el-card |
|||
style="width: 700px; float: right; margin-top: -370px; margin-right: 100px" |
|||
> |
|||
<el-form |
|||
:model="user" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
label-position="left" |
|||
> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<el-row style="margin-top: 20px"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="姓名:"> |
|||
<p>{{ user.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="历史金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="精网号"> |
|||
<p>{{ user.homilyId }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="当前金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="首次充值日期"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="充值次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责客服"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="消费次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所属门店"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="待审核"> </el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
.el-form-item { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
</style> |
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 50px; |
|||
height: 50px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -1,13 +1,469 @@ |
|||
<script setup> |
|||
|
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
import { AiFillRead } from "vue-icons-plus/ai"; |
|||
import axios from "axios"; |
|||
// 变量 |
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索====================================== |
|||
// 搜索rechargeVo |
|||
const rechargeVo = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索对象时间 |
|||
const getTime = ref([]); |
|||
// 搜索活动列表 |
|||
const activity = ref([]); |
|||
// 所有信息 |
|||
const allData = ref([]); |
|||
// 搜索地区列表 |
|||
const area = ref([]); |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref("all"); |
|||
|
|||
// 支付方式选项 |
|||
const payWay = [ |
|||
{ |
|||
value: "微信", |
|||
label: "微信", |
|||
}, |
|||
{ |
|||
value: "支付宝", |
|||
label: "支付宝", |
|||
}, |
|||
{ |
|||
value: "银联", |
|||
label: "银联", |
|||
}, |
|||
{ |
|||
value: "信用卡", |
|||
label: "信用卡", |
|||
}, |
|||
{ |
|||
value: "借记卡", |
|||
label: "借记卡", |
|||
}, |
|||
]; |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 2) * 60 + "px"; |
|||
}); |
|||
|
|||
// 方法 |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
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 != "") { |
|||
rechargeVo.value.startDate = getTime.value[0]; |
|||
rechargeVo.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = ""; |
|||
rechargeVo.value.endDate = ""; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10030/audit/audit/refund", |
|||
{ ...getObj.value, rechargeVo: { ...rechargeVo.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); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 重置 |
|||
const reset = function () { |
|||
rechargeVo.value.activityId = ""; |
|||
rechargeVo.value.payWay = ""; |
|||
rechargeVo.value.area = ""; |
|||
rechargeVo.value.startDate = ""; |
|||
rechargeVo.value.endDate = ""; |
|||
get(); |
|||
}; |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log("adminAll"); |
|||
rechargeVo.value.status = ""; |
|||
get(); |
|||
}; |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
rechargeVo.value.status = 0; |
|||
get(); |
|||
console.log("adminWait"); |
|||
}; |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
rechargeVo.value.status = 1; |
|||
get(); |
|||
console.log("adminPass"); |
|||
}; |
|||
//已驳回充值明细 |
|||
const adminReject = function () { |
|||
rechargeVo.value.status = 2; |
|||
get(); |
|||
console.log("adminReject"); |
|||
}; |
|||
//点击标签页 |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === "all") { |
|||
adminAll(); |
|||
} else if (tab.props.name === "wait") { |
|||
adminWait(); |
|||
} else if (tab.props.name === "pass") { |
|||
adminPass(); |
|||
} else if (tab.props.name === "reject") { |
|||
adminReject(); |
|||
} |
|||
}; |
|||
// 获取活动名称 |
|||
const getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10010/recharge/activity/select", |
|||
{} |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
activity.value = result.data.data; |
|||
console.log("activity", activity.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10010/recharge/recharge", |
|||
{} |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
allData.value = result.data.data; |
|||
console.log("allData", allData.value); |
|||
// 分离并去重地区列表 |
|||
area.value = [...new Set(allData.value.map((item) => item.area))]; |
|||
console.log("地区", area.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
getActivity(); |
|||
await getArea(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<h1>allRefund</h1> |
|||
</div> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">活动名称：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.activityId" |
|||
placeholder="请选择活动名称" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in activity" |
|||
:key="item.activityId" |
|||
:label="item.activityName" |
|||
:value="item.activityId" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">支付方式：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.payWay" |
|||
placeholder="请选择支付方式" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in payWay" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.area" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="21"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">充值时间：</el-text> |
|||
<el-date-picker |
|||
v-model="getTime" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()" |
|||
>今</el-button |
|||
> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<div class="head-card-btn"> |
|||
<el-button @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<el-tabs |
|||
v-model="activeName" |
|||
type="card" |
|||
class="demo-tabs" |
|||
@tab-click="handleClick" |
|||
> |
|||
<el-tab-pane label="全部" name="all"></el-tab-pane> |
|||
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
|||
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
|||
<el-tab-pane label="已驳回" name="reject"></el-tab-pane> |
|||
</el-tabs> |
|||
<div> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="name" label="姓名" width="80px" /> |
|||
<el-table-column prop="homilyId" label="精网号" width="180px" /> |
|||
<el-table-column prop="area" label="所属地区" width="120px" /> |
|||
<el-table-column prop="refundType" label="退款类型" width="180px" /> |
|||
<el-table-column |
|||
prop="refundGoods" |
|||
label="退款商品" |
|||
width="120px" |
|||
/> |
|||
<el-table-column label="退款金币数" width="120px"> |
|||
<template #default="scope"> |
|||
{{ |
|||
scope.row.rechargeCoin + |
|||
scope.row.freeCoin + |
|||
scope.row.taskCoin |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
width="100px" |
|||
/> |
|||
<el-table-column prop="freeCoin" label="免费金币" width="100px" /> |
|||
<el-table-column prop="taskCoin" label="任务金币" width="100px" /> |
|||
<!-- 修改prop为taskGold --> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="adminName" label="提交人" width="100px" /> |
|||
<el-table-column prop="status" label="审核状态" width="120px"> |
|||
<!-- 模板内容 --> |
|||
<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="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>已驳回</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reson" |
|||
label="驳回理由" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="createTime" label="提交时间" width="180px" /> |
|||
<el-table-column |
|||
prop="operation" |
|||
label="操作" |
|||
fixed="right" |
|||
width="120px" |
|||
> |
|||
<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> |
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next" |
|||
:total="total" |
|||
:page-size="getObj.pageSize" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
</style> |
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue