5 Commits
fb076705f4
...
2939348502
| Author | SHA1 | Message | Date |
|---|---|---|---|
zhaoln
|
2939348502 |
金豆增加充值页面的开发
|
1 month ago |
|
zhaoln
|
b28983900e |
金豆增加充值页面的开发
|
1 month ago |
|
zhaoln
|
43b0f76e21 |
封装工作台代码
|
1 month ago |
|
zhaoln
|
afc6726c41 |
Merge branch 'zln1' of http://39.101.133.168:8807/yanjiaqing/gold_vue into zln1
|
1 month ago |
|
zhaoln
|
1be305a252 |
修改明细字段
|
1 month ago |
14 changed files with 1996 additions and 161 deletions
-
593gold-system/package-lock.json
-
2gold-system/package.json
-
15gold-system/src/main.ts
-
6gold-system/src/router/index.js
-
12gold-system/src/store/area.js
-
174gold-system/src/views/goldBeen/addGoldenBeen.vue
-
495gold-system/src/views/goldBeen/goldenBeenBalance.vue
-
532gold-system/src/views/goldBeen/goldenBeenDetail.vue
-
145gold-system/src/views/index.vue
-
2gold-system/src/views/recharge/allRecharge.vue
-
172gold-system/src/views/workspace/index.vue
-
3gold-system/tsconfig.app.json
-
3gold-system/tsconfig.json
-
3gold-system/tsconfig.node.json
@ -0,0 +1,12 @@ |
|||||
|
import { defineStore } from 'pinia' |
||||
|
|
||||
|
export const useAreaStore = defineStore('area', { |
||||
|
state: () => ({ |
||||
|
currentArea: '全部', |
||||
|
}), |
||||
|
actions: { |
||||
|
updateArea(newVal) { |
||||
|
this.currentArea = newVal |
||||
|
}, |
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,174 @@ |
|||||
|
<template> |
||||
|
<div class="add-goldenbeen"> |
||||
|
<div>新增充值</div> |
||||
|
<div class="add-box"> |
||||
|
<el-form |
||||
|
:model="beenObj" |
||||
|
ref="Ref" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
style="max-width: 600px" |
||||
|
class="add-form" |
||||
|
> |
||||
|
<el-form-item prop="jwcode" label="精网号"> |
||||
|
<el-input v-model="beenObj.jwcode" style="width: 220px" /> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click="beenObj.jwcode" |
||||
|
style="margin-left: 20px" |
||||
|
>查询</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="type" label="充值类型"> |
||||
|
<el-radio-group v-model="beenObj.type"> |
||||
|
<el-radio value="0">增加</el-radio> |
||||
|
<el-radio label="1">减少</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<div style="display: flex"> |
||||
|
<el-form-item prop="payBeean" label="付费金豆"> |
||||
|
<el-input v-model="beenObj.payBeean" style="width: 50px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="freeBeean" label="免费金豆"> |
||||
|
<el-input v-model="beenObj.freeBeean" style="width: 50px" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
|
||||
|
<el-form-item prop="remark" label="备注"> |
||||
|
<el-input |
||||
|
v-model="beenObj.remark" |
||||
|
style="width: 300px" |
||||
|
:rows="2" |
||||
|
maxlength="100" |
||||
|
show-word-limit |
||||
|
type="textarea" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="submitter" label="提交人"> |
||||
|
<el-input |
||||
|
style="width: 300px" |
||||
|
:value="beenObj.submitter" |
||||
|
disabled |
||||
|
placeholder="提交人姓名" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<div class="btn-group"> |
||||
|
<el-button @click="deleteRecharge">重置</el-button> |
||||
|
<el-button type="primary" @click="addBean"> 提交 </el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<!-- 客户信息栏 --> |
||||
|
<el-card> |
||||
|
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
||||
|
<div class="custom-box"> |
||||
|
<el-text>姓名:{{ user.name }}</el-text> |
||||
|
<el-text>当前付费金豆:</el-text> |
||||
|
<el-text>精网号:{{ user.jwcode }}</el-text> |
||||
|
<el-text>当前免费金豆:</el-text> |
||||
|
<el-text>负责客服:</el-text> |
||||
|
<el-text>消费次数:</el-text> |
||||
|
<el-text>所属门店</el-text> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { reactive, ref } from 'vue' |
||||
|
import API from '@/util/http' |
||||
|
const beenObj = ref({ |
||||
|
jwcode: '', |
||||
|
remark: '', |
||||
|
submitter: '', |
||||
|
type: '0', |
||||
|
payBeean: 0, |
||||
|
freeBeean: 0 |
||||
|
}) |
||||
|
const user = reactive({}) |
||||
|
const adminData = reactive({}) |
||||
|
const rules = ref({ |
||||
|
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
||||
|
remark: [{ required: true, message: '请输入备注', trigger: 'blur' }], |
||||
|
submitter: [{ required: true, message: '请输入提交人', trigger: 'blur' }], |
||||
|
type: [{ required: true, message: '请选择充值类型', trigger: 'change' }], |
||||
|
payBeean: [{ required: true, message: '请输入付费金豆', trigger: 'blur' }], |
||||
|
freeBeean: [{ required: true, message: '请输入免费金豆', trigger: 'blur' }] |
||||
|
}) |
||||
|
const addBean = () => { |
||||
|
// 提交表单 |
||||
|
bean.value.validate((valid) => { |
||||
|
if (valid) { |
||||
|
// 处理表单提交逻辑 |
||||
|
console.log('表单提交成功', beenObj.value) |
||||
|
} else { |
||||
|
console.log('表单验证失败') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const getUser = async function (jwcode) { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await API({ |
||||
|
url: '/recharge/user', |
||||
|
data: { |
||||
|
jwcode: jwcode, |
||||
|
area: adminData.area |
||||
|
} |
||||
|
}) |
||||
|
if (result.code === 0) { |
||||
|
ElMessage.error(result.msg) |
||||
|
} else { |
||||
|
user = result.data |
||||
|
user.A = |
||||
|
Number(user.pendingRechargeTimes) + Number(user.pendingSpendTimes) |
||||
|
ElMessage.success(result.msg) |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
ElMessage.error('查询失败，请检查精网号是否正确') |
||||
|
} |
||||
|
} |
||||
|
const getAdminData = async function () { |
||||
|
try { |
||||
|
const result = await API({ |
||||
|
url: '/admin/userinfo', |
||||
|
data: {} |
||||
|
}) |
||||
|
adminData = result |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
} |
||||
|
} |
||||
|
getAdminData() |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.add-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
column-gap: 50px; |
||||
|
} |
||||
|
.btn-group { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.custom-box { |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
row-gap: 20px; |
||||
|
box-sizing: border-box; |
||||
|
.el-text { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
.el-card { |
||||
|
width: 500px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,495 @@ |
|||||
|
<template> |
||||
|
<div class="filter-box"> |
||||
|
<el-form> |
||||
|
<el-form-item label="精网号"> |
||||
|
<el-input |
||||
|
v-model="detailY.jwcode" |
||||
|
placeholder="请输入精网号" |
||||
|
style="width: 220px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="地区"> |
||||
|
<el-select |
||||
|
v-model="detailY.area" |
||||
|
placeholder="请选择所属地区" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="table-box"> |
||||
|
<p>金豆总数：充值金豆总数：合计新币数</p> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
:default-sort="{ prop: 'createTime', order: 'descending' }" |
||||
|
height="584px" |
||||
|
> |
||||
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="left" prop="username" label="姓名" width="150" /> |
||||
|
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="120" /> |
||||
|
<el-table-column prop="type" label="类型" width="110"> |
||||
|
<!-- 模板内容 --> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.updateType == 1"> |
||||
|
<span>消费</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 0"> |
||||
|
<span>充值</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 2"> |
||||
|
<span>退款</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 3"> |
||||
|
<span>其他</span> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="order" label="订单号" width="120" /> |
||||
|
<el-table-column prop="been" label="金豆数量" width="120"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.gold / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="paybeen" label="付费金豆" width="120"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.paybeen / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="freebeen" label="免费金豆" width="120"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.freebeen / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="count" label="金额"></el-table-column> |
||||
|
<el-table-column prop="consumePlatform" label="充值平台" width="140"> |
||||
|
<template #default="scope"> |
||||
|
<!-- 使用非严格相等比较 --> |
||||
|
<span v-if="scope.row.consumePlatform == 0">初始化金币</span> |
||||
|
<span v-if="scope.row.consumePlatform == 1">ERP系统</span> |
||||
|
<span v-if="scope.row.consumePlatform == 3">Homily Link</span> |
||||
|
<span v-if="scope.row.consumePlatform == 2">Homily Chart</span> |
||||
|
<span v-if="scope.row.consumePlatform == 4">金币系统</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="notes" label="备注" width="210"></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="createTime" |
||||
|
sortable="“custom”" |
||||
|
label="充值时间" |
||||
|
width="210" |
||||
|
show-overflow-tooltip |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<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, 10, 20, 50, 100]" |
||||
|
: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> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 这是导出excel的弹窗 --> |
||||
|
<el-dialog |
||||
|
v-model="getPutEX" |
||||
|
title="请选择导出条件" |
||||
|
width="500" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<template #footer> |
||||
|
<el-form |
||||
|
v-loading="loading" |
||||
|
ref="ruleFormRef" |
||||
|
style="max-width: 600px" |
||||
|
:model="putExcel" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
:size="formSize" |
||||
|
status-icon |
||||
|
> |
||||
|
<el-form-item prop="activityName" label="精网号:"> |
||||
|
<el-input |
||||
|
v-model="putExcel.jwcode" |
||||
|
placeholder="请输入精网号" |
||||
|
style="width: 220px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="所属地区：" |
||||
|
><el-select |
||||
|
v-model="putExcel.area" |
||||
|
placeholder="请选择所属地区" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="更新时间："> |
||||
|
<el-radio-group v-model="TimeGet"> |
||||
|
<el-radio value="1" @click="getT()">今天</el-radio> |
||||
|
<el-radio value="3" @click="get3()">近三天</el-radio> |
||||
|
<el-radio value="7" @click="get7()">近一周</el-radio> |
||||
|
<el-radio value="30" @click="get30()">近一个月</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
style="margin-left: 10px" |
||||
|
@click="areyour()" |
||||
|
>确定</el-button |
||||
|
> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<el-dialog |
||||
|
v-model="areyouright" |
||||
|
title="" |
||||
|
width="500" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<el-button type="success" @click="exportExcel()">导出</el-button> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive, computed } from 'vue' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
import moment from 'moment' |
||||
|
import API from '@/util/http' |
||||
|
import * as XLSX from 'xlsx' |
||||
|
//这是获取用户信息的接口 |
||||
|
const adminData = ref({}) |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]) |
||||
|
//分页总条目 |
||||
|
const total = ref(100) |
||||
|
//搜索表单数据 |
||||
|
const detailY = ref({}) |
||||
|
//初始化 |
||||
|
const get = async function (val) { |
||||
|
try { |
||||
|
// 地区赋值 |
||||
|
if (adminData.value.area === '泰国') { |
||||
|
detailY.value.areas = ['泰国', '越南'] |
||||
|
} else if (adminData.value.area !== '总部') { |
||||
|
detailY.value.area = adminData.value.area |
||||
|
} |
||||
|
// 搜索参数页码赋值 |
||||
|
if (typeof val === 'number') { |
||||
|
getObj.value.pageNum = val |
||||
|
} |
||||
|
// 搜索参数时间赋值 |
||||
|
if (getTime.value != null) { |
||||
|
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
||||
|
detailY.value.startDate = getTime.value[0] |
||||
|
detailY.value.endDate = getTime.value[1] |
||||
|
} |
||||
|
} else { |
||||
|
detailY.value.startDate = '' |
||||
|
detailY.value.endDate = '' |
||||
|
} |
||||
|
// 添加排序字段和排序方式到请求参数 |
||||
|
detailY.value.sortField = sortField.value |
||||
|
detailY.value.sortOrder = sortOrder.value |
||||
|
console.log('搜索参数', getObj.value) |
||||
|
// 发送POST请求 |
||||
|
const result = await API({ |
||||
|
url: '/detailY', |
||||
|
method: 'post', |
||||
|
data: { ...getObj.value, detailY: { ...detailY.value } } |
||||
|
}) |
||||
|
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 search = function () {} |
||||
|
// 重置 |
||||
|
const reset = function () {} |
||||
|
|
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
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) |
||||
|
) { |
||||
|
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
||||
|
console.log('输入的数字合法') |
||||
|
get() |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容' |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await getAdminData() |
||||
|
await get() |
||||
|
}) |
||||
|
|
||||
|
// 这是导出excel表格的方法 |
||||
|
// 导出Excel的方法 |
||||
|
// 定义字段映射 |
||||
|
const json_fields = (row) => { |
||||
|
return [ |
||||
|
row.jwcode, // 姓名 |
||||
|
row.area, // 精网号 |
||||
|
row.platform, // 所属地区 |
||||
|
row.consumePlatform, // 平台信息 |
||||
|
row.gold, // 更新数量 |
||||
|
row.rechargeCoin, // 免费金币 |
||||
|
row.freeCoin, // 永久金币 |
||||
|
row.taskCoin, // 任务金币 |
||||
|
row.createAdmin, // 提交人 |
||||
|
row.createTime, |
||||
|
row.name, |
||||
|
row.id |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
const headers = [ |
||||
|
'精网号', |
||||
|
'地区', |
||||
|
'平台信息', |
||||
|
'数量', |
||||
|
'更新类型', |
||||
|
'永久金币', |
||||
|
'免费金币', |
||||
|
'任务金币', |
||||
|
'提交人', |
||||
|
'更新时间', |
||||
|
'用户名', |
||||
|
'id' |
||||
|
] |
||||
|
const exportExcel = () => { |
||||
|
// 先将 json_fields 应用到数据上 |
||||
|
const data = excelInfo.value.map(json_fields) |
||||
|
const ws = XLSX.utils.aoa_to_sheet(data) |
||||
|
// 添加表头到工作表 |
||||
|
XLSX.utils.sheet_add_aoa(ws, [headers], { origin: 'A1' }) |
||||
|
const wb = XLSX.utils.book_new() |
||||
|
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') |
||||
|
XLSX.writeFile(wb, '客户金币明细.xlsx') |
||||
|
} |
||||
|
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 |
||||
|
) |
||||
|
const putExcel = ref({ |
||||
|
startDate: startDate, |
||||
|
endDate: endDate |
||||
|
}) |
||||
|
const excelInfo = ref({}) |
||||
|
const loading = ref(false) |
||||
|
const areyour = async function () { |
||||
|
try { |
||||
|
loading.value = true |
||||
|
const result = await API({ |
||||
|
url: '/detailY/searchAll', |
||||
|
method: 'post', |
||||
|
data: { ...putExcel.value } |
||||
|
}) |
||||
|
excelInfo.value = result.data |
||||
|
|
||||
|
// 处理 excelInfo 中的数据 |
||||
|
if (Array.isArray(excelInfo.value)) { |
||||
|
excelInfo.value.forEach((item) => { |
||||
|
if (item.rechargeCoin) { |
||||
|
item.rechargeCoin = item.rechargeCoin / 100 |
||||
|
} |
||||
|
if (item.freeCoin) { |
||||
|
item.freeCoin = item.freeCoin / 100 |
||||
|
} |
||||
|
if (item.taskCoin) { |
||||
|
item.taskCoin = item.taskCoin / 100 |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
areyouright.value = true |
||||
|
ElMessage({ |
||||
|
type: 'success', |
||||
|
message: '查询成功' |
||||
|
}) |
||||
|
loading.value = false |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const areyouright = ref(false) |
||||
|
|
||||
|
//选地区 |
||||
|
const area = [ |
||||
|
{ |
||||
|
value: '马来西亚', |
||||
|
label: '马来西亚' |
||||
|
}, |
||||
|
{ |
||||
|
value: '新加坡', |
||||
|
label: '新加坡' |
||||
|
}, |
||||
|
{ |
||||
|
value: '香港', |
||||
|
label: '香港' |
||||
|
}, |
||||
|
{ |
||||
|
value: '泰国', |
||||
|
label: '泰国' |
||||
|
}, |
||||
|
{ |
||||
|
value: '加拿大', |
||||
|
label: '加拿大' |
||||
|
}, |
||||
|
{ |
||||
|
value: '越南HCM', |
||||
|
label: '越南HCM' |
||||
|
} |
||||
|
] |
||||
|
//选消费平台 |
||||
|
const platform = [ |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '金币系统' |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'ERP系统' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'Homily Chart' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: 'Homily Link' |
||||
|
}, |
||||
|
{ |
||||
|
value: '0', |
||||
|
label: '初始化金币' |
||||
|
} |
||||
|
] |
||||
|
const TimeGet = ref('1') |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.filter-box { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px; |
||||
|
padding-bottom: 0px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
|
margin-bottom: 20px; |
||||
|
border-radius: 5px; |
||||
|
.el-form { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
row-gap: 20px; |
||||
|
column-gap: 20px; |
||||
|
} |
||||
|
} |
||||
|
.table-box { |
||||
|
width: 100%; |
||||
|
padding: 20px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,532 @@ |
|||||
|
<template> |
||||
|
<div class="filter-box"> |
||||
|
<el-form> |
||||
|
<el-form-item label="精网号"> |
||||
|
<el-input |
||||
|
v-model="detailY.jwcode" |
||||
|
placeholder="请输入精网号" |
||||
|
style="width: 220px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="地区"> |
||||
|
<el-select |
||||
|
v-model="detailY.area" |
||||
|
placeholder="请选择所属地区" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="订单号"> |
||||
|
<el-input |
||||
|
v-model="detailY.order" |
||||
|
placeholder="请输入订单号" |
||||
|
style="width: 220px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="充值平台"> |
||||
|
<el-select |
||||
|
v-model="detailY.platform" |
||||
|
placeholder="请选择充值平台" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="充值时间"> |
||||
|
<el-date-picker |
||||
|
v-model="detailY.createTime" |
||||
|
type="daterange" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
style="width: 240px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="search">查询</el-button> |
||||
|
<el-button type="success" @click="reset">重置</el-button> |
||||
|
<el-button type="info">导出excel</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="table-box"> |
||||
|
<p>金豆总数：充值金豆总数：合计新币数</p> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
:default-sort="{ prop: 'createTime', order: 'descending' }" |
||||
|
height="584px" |
||||
|
> |
||||
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="left" prop="username" label="姓名" width="150" /> |
||||
|
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="120" /> |
||||
|
<el-table-column prop="type" label="类型" width="110"> |
||||
|
<!-- 模板内容 --> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.updateType == 1"> |
||||
|
<span>消费</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 0"> |
||||
|
<span>充值</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 2"> |
||||
|
<span>退款</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 3"> |
||||
|
<span>其他</span> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="order" label="订单号" width="120" /> |
||||
|
<el-table-column prop="been" label="金豆数量" width="120"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.gold / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="paybeen" label="付费金豆" width="120"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.paybeen / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="freebeen" label="免费金豆" width="120"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.freebeen / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="count" label="金额"></el-table-column> |
||||
|
<el-table-column prop="consumePlatform" label="充值平台" width="140"> |
||||
|
<template #default="scope"> |
||||
|
<!-- 使用非严格相等比较 --> |
||||
|
<span v-if="scope.row.consumePlatform == 0">初始化金币</span> |
||||
|
<span v-if="scope.row.consumePlatform == 1">ERP系统</span> |
||||
|
<span v-if="scope.row.consumePlatform == 3">Homily Link</span> |
||||
|
<span v-if="scope.row.consumePlatform == 2">Homily Chart</span> |
||||
|
<span v-if="scope.row.consumePlatform == 4">金币系统</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="notes" label="备注" width="210"></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="createTime" |
||||
|
sortable="“custom”" |
||||
|
label="充值时间" |
||||
|
width="210" |
||||
|
show-overflow-tooltip |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 分页 --> |
||||
|
<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, 10, 20, 50, 100]" |
||||
|
: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> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 这是导出excel的弹窗 --> |
||||
|
<el-dialog |
||||
|
v-model="getPutEX" |
||||
|
title="请选择导出条件" |
||||
|
width="500" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<template #footer> |
||||
|
<el-form |
||||
|
v-loading="loading" |
||||
|
ref="ruleFormRef" |
||||
|
style="max-width: 600px" |
||||
|
:model="putExcel" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
:size="formSize" |
||||
|
status-icon |
||||
|
> |
||||
|
<el-form-item prop="activityName" label="精网号:"> |
||||
|
<el-input |
||||
|
v-model="putExcel.jwcode" |
||||
|
placeholder="请输入精网号" |
||||
|
style="width: 220px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="所属地区：" |
||||
|
><el-select |
||||
|
v-model="putExcel.area" |
||||
|
placeholder="请选择所属地区" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="更新时间："> |
||||
|
<el-radio-group v-model="TimeGet"> |
||||
|
<el-radio value="1" @click="getT()">今天</el-radio> |
||||
|
<el-radio value="3" @click="get3()">近三天</el-radio> |
||||
|
<el-radio value="7" @click="get7()">近一周</el-radio> |
||||
|
<el-radio value="30" @click="get30()">近一个月</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
style="margin-left: 10px" |
||||
|
@click="areyour()" |
||||
|
>确定</el-button |
||||
|
> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<el-dialog |
||||
|
v-model="areyouright" |
||||
|
title="" |
||||
|
width="500" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<el-button type="success" @click="exportExcel()">导出</el-button> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive, computed } from 'vue' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
import moment from 'moment' |
||||
|
import API from '@/util/http' |
||||
|
import * as XLSX from 'xlsx' |
||||
|
//这是获取用户信息的接口 |
||||
|
const adminData = ref({}) |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]) |
||||
|
//分页总条目 |
||||
|
const total = ref(100) |
||||
|
//搜索表单数据 |
||||
|
const detailY = ref({}) |
||||
|
//初始化 |
||||
|
const get = async function (val) { |
||||
|
try { |
||||
|
// 地区赋值 |
||||
|
if (adminData.value.area === '泰国') { |
||||
|
detailY.value.areas = ['泰国', '越南'] |
||||
|
} else if (adminData.value.area !== '总部') { |
||||
|
detailY.value.area = adminData.value.area |
||||
|
} |
||||
|
// 搜索参数页码赋值 |
||||
|
if (typeof val === 'number') { |
||||
|
getObj.value.pageNum = val |
||||
|
} |
||||
|
// 搜索参数时间赋值 |
||||
|
if (getTime.value != null) { |
||||
|
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
||||
|
detailY.value.startDate = getTime.value[0] |
||||
|
detailY.value.endDate = getTime.value[1] |
||||
|
} |
||||
|
} else { |
||||
|
detailY.value.startDate = '' |
||||
|
detailY.value.endDate = '' |
||||
|
} |
||||
|
// 添加排序字段和排序方式到请求参数 |
||||
|
detailY.value.sortField = sortField.value |
||||
|
detailY.value.sortOrder = sortOrder.value |
||||
|
console.log('搜索参数', getObj.value) |
||||
|
// 发送POST请求 |
||||
|
const result = await API({ |
||||
|
url: '/detailY', |
||||
|
method: 'post', |
||||
|
data: { ...getObj.value, detailY: { ...detailY.value } } |
||||
|
}) |
||||
|
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 search = function () {} |
||||
|
// 重置 |
||||
|
const reset = function () {} |
||||
|
|
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
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) |
||||
|
) { |
||||
|
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
||||
|
console.log('输入的数字合法') |
||||
|
get() |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容' |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await getAdminData() |
||||
|
await get() |
||||
|
}) |
||||
|
|
||||
|
// 这是导出excel表格的方法 |
||||
|
// 导出Excel的方法 |
||||
|
// 定义字段映射 |
||||
|
const json_fields = (row) => { |
||||
|
return [ |
||||
|
row.jwcode, // 姓名 |
||||
|
row.area, // 精网号 |
||||
|
row.platform, // 所属地区 |
||||
|
row.consumePlatform, // 平台信息 |
||||
|
row.gold, // 更新数量 |
||||
|
row.rechargeCoin, // 免费金币 |
||||
|
row.freeCoin, // 永久金币 |
||||
|
row.taskCoin, // 任务金币 |
||||
|
row.createAdmin, // 提交人 |
||||
|
row.createTime, |
||||
|
row.name, |
||||
|
row.id |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
const headers = [ |
||||
|
'精网号', |
||||
|
'地区', |
||||
|
'平台信息', |
||||
|
'数量', |
||||
|
'更新类型', |
||||
|
'永久金币', |
||||
|
'免费金币', |
||||
|
'任务金币', |
||||
|
'提交人', |
||||
|
'更新时间', |
||||
|
'用户名', |
||||
|
'id' |
||||
|
] |
||||
|
const exportExcel = () => { |
||||
|
// 先将 json_fields 应用到数据上 |
||||
|
const data = excelInfo.value.map(json_fields) |
||||
|
const ws = XLSX.utils.aoa_to_sheet(data) |
||||
|
// 添加表头到工作表 |
||||
|
XLSX.utils.sheet_add_aoa(ws, [headers], { origin: 'A1' }) |
||||
|
const wb = XLSX.utils.book_new() |
||||
|
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') |
||||
|
XLSX.writeFile(wb, '客户金币明细.xlsx') |
||||
|
} |
||||
|
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 |
||||
|
) |
||||
|
const putExcel = ref({ |
||||
|
startDate: startDate, |
||||
|
endDate: endDate |
||||
|
}) |
||||
|
const excelInfo = ref({}) |
||||
|
const loading = ref(false) |
||||
|
const areyour = async function () { |
||||
|
try { |
||||
|
loading.value = true |
||||
|
const result = await API({ |
||||
|
url: '/detailY/searchAll', |
||||
|
method: 'post', |
||||
|
data: { ...putExcel.value } |
||||
|
}) |
||||
|
excelInfo.value = result.data |
||||
|
|
||||
|
// 处理 excelInfo 中的数据 |
||||
|
if (Array.isArray(excelInfo.value)) { |
||||
|
excelInfo.value.forEach((item) => { |
||||
|
if (item.rechargeCoin) { |
||||
|
item.rechargeCoin = item.rechargeCoin / 100 |
||||
|
} |
||||
|
if (item.freeCoin) { |
||||
|
item.freeCoin = item.freeCoin / 100 |
||||
|
} |
||||
|
if (item.taskCoin) { |
||||
|
item.taskCoin = item.taskCoin / 100 |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
areyouright.value = true |
||||
|
ElMessage({ |
||||
|
type: 'success', |
||||
|
message: '查询成功' |
||||
|
}) |
||||
|
loading.value = false |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const areyouright = ref(false) |
||||
|
|
||||
|
//选地区 |
||||
|
const area = [ |
||||
|
{ |
||||
|
value: '马来西亚', |
||||
|
label: '马来西亚' |
||||
|
}, |
||||
|
{ |
||||
|
value: '新加坡', |
||||
|
label: '新加坡' |
||||
|
}, |
||||
|
{ |
||||
|
value: '香港', |
||||
|
label: '香港' |
||||
|
}, |
||||
|
{ |
||||
|
value: '泰国', |
||||
|
label: '泰国' |
||||
|
}, |
||||
|
{ |
||||
|
value: '加拿大', |
||||
|
label: '加拿大' |
||||
|
}, |
||||
|
{ |
||||
|
value: '越南HCM', |
||||
|
label: '越南HCM' |
||||
|
} |
||||
|
] |
||||
|
//选消费平台 |
||||
|
const platform = [ |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '金币系统' |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'ERP系统' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'Homily Chart' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: 'Homily Link' |
||||
|
}, |
||||
|
{ |
||||
|
value: '0', |
||||
|
label: '初始化金币' |
||||
|
} |
||||
|
] |
||||
|
const TimeGet = ref('1') |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.filter-box { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px; |
||||
|
padding-bottom: 0px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
|
margin-bottom: 20px; |
||||
|
border-radius: 5px; |
||||
|
.el-form { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
row-gap: 20px; |
||||
|
column-gap: 20px; |
||||
|
} |
||||
|
} |
||||
|
.table-box { |
||||
|
width: 100%; |
||||
|
padding: 20px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue