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