<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
|
<el-form-item label="用户" prop="userKey">
|
<el-input v-model="queryParams.userKey" placeholder="请输入用户昵称或手机号" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="推荐人" prop="recommendKey">
|
<el-input
|
v-model="queryParams.recommendKey"
|
placeholder="请输入推荐人昵称或手机号"
|
clearable
|
style="width: 200px"
|
@keyup.enter="getDataList"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="级别" prop="levelId">
|
<el-select v-model="queryParams.levelId" placeholder="收益类型" clearable style="width: 150px">
|
<el-option v-for="dict in level_id" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 150px">
|
<el-option key="0" label="正常" value="0" />
|
<el-option key="1" label="禁用" value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="额外收益" prop="extraState">
|
<el-select v-model="queryParams.extraState" placeholder="额外收益" clearable style="width: 150px">
|
<el-option key="1" label="有" value="1" />
|
<el-option key="2" label="无" value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="允许提现" prop="isCash">
|
<el-select v-model="queryParams.isCash" placeholder="是否允许提现" clearable style="width: 150px">
|
<el-option key="1" label="是" value="1" />
|
<el-option key="2" label="否" value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="注册时间">
|
<el-date-picker
|
v-model="queryTimesC"
|
type="daterange"
|
value-format="YYYY-MM-DD"
|
clearable
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
/></el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
</el-col>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
|
</el-row>
|
<el-table v-loading="tableOption.loading" :data="dataTable">
|
<el-table-column type="index" width="50" align="center" />
|
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" width="200" />
|
<el-table-column label="用户账号" align="center" key="userName" prop="userName" width="200" />
|
<el-table-column label="级别" align="center">
|
<template #default="scope">
|
<span>{{ dispLevel(scope.row.levelId) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="推荐人" align="center" key="recommendName" prop="recommendName" width="200" />
|
<el-table-column label="推荐人电话" align="center" key="recommendPhone" prop="recommendPhone" width="200" />
|
<el-table-column label="累计充值" align="center" key="totalRecharge" prop="totalRecharge" />
|
<el-table-column label="累计提现" align="center" key="totalCash" prop="totalCash" />
|
<el-table-column label="当前余额" align="center" key="currentMoney" prop="currentMoney" />
|
<el-table-column label="当前灵玉" align="center" key="currentIntegral" prop="currentIntegral" />
|
<el-table-column label="账号状态" align="center">
|
<template #default="scope">
|
<el-switch
|
v-model="scope.row.status"
|
inline-prompt
|
active-value="0"
|
inactive-value="1"
|
active-text="正常"
|
inactive-text="禁用"
|
@change="updStatus($event, scope.row)"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="额外收益" align="center" key="extraState" prop="extraState">
|
<template #default="scope">
|
<el-button type="primary" link size="small" @click="handleOpenRate(scope.row)"> {{ scope.row.extraState == "1" ? "有" : "无" }}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column label="额外收益系数" align="center" key="extraCoeff" prop="extraCoeff" />
|
<el-table-column label="允许提现" align="center">
|
<template #default="scope">
|
<el-switch
|
v-model="scope.row.isCash"
|
inline-prompt
|
active-value="1"
|
inactive-value="2"
|
active-text="是"
|
inactive-text="否"
|
@change="updIsCash($event, scope.row)"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="管理者" align="center">
|
<template #default="scope">
|
<el-switch
|
v-model="scope.row.isManager"
|
inline-prompt
|
:active-value="1"
|
:inactive-value="2"
|
active-text="是"
|
inactive-text="否"
|
@change="updIsManager($event, scope.row)"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="注册时间" align="center" key="createTime" prop="createTime" width="200" />
|
<el-table-column label="最后登录" align="center" key="loginDate" prop="loginDate" width="200" />
|
<el-table-column align="center" width="80" fixed="right">
|
<template #default="scope">
|
<el-tooltip content="修改推荐人" placement="top">
|
<el-button link type="primary" icon="UserFilled" @click="handleRecommend(scope.row)"></el-button>
|
</el-tooltip>
|
<el-tooltip content="查看他的团队" placement="top">
|
<el-button link type="primary" icon="Memo" @click="handleTeam(scope.row)"></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
|
<!-- 审核-->
|
<el-dialog title="设置额外收益" :close-on-click-modal="false" v-model="isOpenRate" width="400px" top="20vh" draggable>
|
<el-row class="_cu_row">
|
<el-col :span="7"> 额外收益 </el-col>
|
<el-col :span="16" :offset="1">
|
<el-radio-group v-model="formData.extraState">
|
<el-radio label="1">有</el-radio>
|
<el-radio label="2">无</el-radio>
|
</el-radio-group>
|
</el-col>
|
</el-row>
|
<el-row class="_cu_row" v-if="formData.extraState == '1'">
|
<el-col :span="7"> 额外收益系数 </el-col>
|
<el-col :span="16" :offset="1">
|
<el-input-number v-model="formData.extraCoeff" :precision="2" :min="0" :max="1" :step="0.1"></el-input-number>
|
</el-col>
|
</el-row>
|
<template #footer>
|
<el-button @click="state.isOpenRate = false">取消</el-button>
|
<el-button type="primary" @click="updExtra()"> 提交 </el-button>
|
</template>
|
</el-dialog>
|
<!--修改推荐人-->
|
<el-dialog title="修改推荐人" :close-on-click-modal="false" v-model="recommendDialog" width="400px" top="20vh" draggable>
|
<el-form>
|
<el-form-item label="新的推荐人">
|
<el-select
|
v-model="recommendObj.recommendId"
|
filterable
|
remote
|
reserve-keyword
|
:remote-method="remoteMethod"
|
:loading="selectProps.loading"
|
placeholder="用户昵称/手机号"
|
clearable
|
style="width: 200px"
|
>
|
<el-option v-for="item in selectProps.options" :key="item.userId" :label="item.userName + '/' + item.nickName" :value="item.userId" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="recommendDialog = false">取消</el-button>
|
<el-button type="primary" @click="updRecommend()"> 提交 </el-button>
|
</template>
|
</el-dialog>
|
|
<el-dialog :title="teamObj.title" :close-on-click-modal="false" v-model="teamObj.teamDialog" width="600px" top="20vh" draggable destroy-on-close>
|
<div style="width: 100%; height: 600px; overflow: scroll">
|
<el-tree :props="teamObj.props" :load="teamObj.loadNode" lazy>
|
<template #default="{ node, data }">
|
<div>
|
<span>{{ data.nickName }}</span>
|
<span style="margin-left: 5px">{{ data.levelName }}</span>
|
<span style="margin-left: 5px">累充</span>
|
(<span style="color: red">{{ data.rechargeMoney }}</span
|
>)
|
</div>
|
</template>
|
</el-tree>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { reactive, onMounted, toRefs, ref, getCurrentInstance } from "vue";
|
import { GetDataList, setStatus, setIsCash, setExtra, updBindRecommend, getTeamList, setIsManager } from "@/api/report/userinfo";
|
import { getUserByKeyword } from "@/api/report/wallet";
|
import type { FormInstance } from "element-plus";
|
import type Node from "element-plus/es/components/tree/src/model/node";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { level_id } = proxy.useDict("level_id");
|
const state = reactive({
|
dataTable: [] as any[], //数据列表
|
total: 0, //总条数
|
tableOption: {
|
//表格配置
|
loading: true,
|
},
|
power: {
|
//操作权限
|
add: false,
|
single: false, //
|
multiple: true, //
|
},
|
showSearch: true, //是否显示分类
|
isOpenRate: false,
|
});
|
const { dataTable, total, tableOption, power, showSearch, isOpenRate } = toRefs(state);
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
//#region commonDisp
|
|
/**
|
*
|
* @param e
|
*/
|
const dispLevel = (e: string) => {
|
return level_id.value.find((f: Dict.dictType) => f.value == e)?.label;
|
};
|
|
//#endregion
|
|
//#region 查询
|
|
const queryTimesC = ref("");
|
const queryRef = ref<FormInstance>();
|
const queryParams = reactive({
|
//查询配置参数
|
pageNum: 1,
|
pageSize: 10,
|
userKey: "", // 用户名称或手机号
|
recommendKey: "",
|
beginTime: "",
|
endTime: "",
|
levelId: "",
|
status: "",
|
extraState: "",
|
isCash: "",
|
});
|
|
/**
|
* 获取数据列表
|
*/
|
const getDataList = async () => {
|
queryParams.beginTime = queryTimesC.value[0];
|
queryParams.endTime = queryTimesC.value[1];
|
await GetDataList(queryParams).then((res) => {
|
if (res.code == 200) {
|
state.dataTable = res.rows;
|
state.total = res.total;
|
state.tableOption.loading = false;
|
}
|
});
|
};
|
|
/**
|
* 重置
|
*/
|
const resetQuery = () => {
|
queryRef.value!.resetFields();
|
};
|
|
//#endregion
|
|
//#region 设置用户
|
|
const handleExport = () => {
|
queryParams.beginTime = queryTimesC.value[0];
|
queryParams.endTime = queryTimesC.value[1];
|
proxy.download(
|
"/report/user/exportUserList",
|
{
|
...queryParams,
|
},
|
`用户信息_${new Date().getTime()}.xlsx`
|
);
|
};
|
|
/**
|
* 设置用户状态
|
*/
|
const updStatus = (e: any, v: any) => {
|
setStatus({ userId: v.userId, status: e }).catch((res) => {
|
if (res.code != 200) {
|
if (e == "1") {
|
v.status = "0";
|
} else {
|
v.status = "1";
|
}
|
}
|
});
|
};
|
|
/**
|
* 设置提现状态
|
*/
|
const updIsCash = (e: any, v: any) => {
|
setIsCash({ userId: v.userId, isCash: e }).catch((res) => {
|
if (res.code != 200) {
|
if (e == "1") {
|
v.isCash = "2";
|
} else {
|
v.isCash = "1";
|
}
|
}
|
});
|
};
|
|
/**
|
* 设置管理者状态
|
* @param e
|
* @param v
|
*/
|
const updIsManager = (e: any, v: any) => {
|
setIsManager({ userId: v.userId, isManager: e }).catch((res) => {
|
if (res.code != 200) {
|
if (e == 1) {
|
v.isManager = 2;
|
} else {
|
v.isManager = 1;
|
}
|
}
|
});
|
};
|
|
const formData = reactive({
|
extraCoeff: 0.0, //额外系数
|
extraState: "",
|
userId: "",
|
});
|
|
const handleOpenRate = (e: any) => {
|
formData.userId = e.userId;
|
formData.extraCoeff = parseFloat(e.extraCoeff);
|
formData.extraState = e.extraState;
|
state.isOpenRate = true;
|
};
|
|
const updExtra = () => {
|
if (formData.extraCoeff <= 0 && formData.extraState == "1") {
|
proxy.$modal.msgWarning("请设置收益系数");
|
return;
|
}
|
setExtra(formData).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("设置成功");
|
getDataList();
|
state.isOpenRate = false;
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 修改推荐人
|
|
//#region 用户远程搜索
|
const selectProps = reactive({
|
loading: true,
|
options: [] as any[],
|
});
|
const remoteMethod = async (query: string) => {
|
if (query) {
|
selectProps.loading = true;
|
await getUserByKeyword({ keyword: query }).then((res) => {
|
if (res.code == 200) {
|
selectProps.options = res.data;
|
selectProps.loading = false;
|
}
|
});
|
} else {
|
selectProps.options = [];
|
}
|
};
|
|
//#endregion
|
|
const recommendDialog = ref(false);
|
|
const recommendObj = reactive({
|
userId: "",
|
recommendId: "",
|
});
|
|
/**
|
* 打开推荐人弹窗
|
*/
|
const handleRecommend = (e: any) => {
|
recommendObj.userId = e.userId;
|
recommendDialog.value = true;
|
};
|
|
const updRecommend = () => {
|
updBindRecommend(recommendObj).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("设置成功");
|
getDataList();
|
recommendDialog.value = false;
|
}
|
});
|
};
|
|
//#endregion
|
|
interface Tree {
|
name?: string;
|
leaf?: boolean;
|
}
|
|
const handleTeam = (e: any) => {
|
teamObj.userId = e.userId;
|
teamObj.title = e.nickName + "的团队";
|
teamObj.teamDialog = true;
|
};
|
|
/**
|
* 团队列表配置
|
*/
|
const teamObj = reactive({
|
userId: "",
|
title: "",
|
teamDialog: false,
|
props: {
|
label: "nickName",
|
children: "zones",
|
isLeaf: "hasChildren",
|
},
|
loadNode(node: Node, resolve: (data: Tree[]) => void) {
|
if (node.level === 0) {
|
getTeamList({ userId: teamObj.userId }).then((res) => {
|
let list = res.rows.map((f) => {
|
return {
|
nickName: f.nickName,
|
children: [],
|
isLeaf: !f.hasChildren,
|
levelName: f.levelName,
|
userId: f.userId,
|
rechargeMoney: f.rechargeMoney,
|
};
|
});
|
return resolve(list);
|
});
|
}
|
if (node.level > 0) {
|
getTeamList({ recommendId: node.data.userId }).then((res) => {
|
let list = res.rows.map((f) => {
|
return {
|
nickName: f.nickName,
|
children: [],
|
isLeaf: !f.hasChildren,
|
levelName: f.levelName,
|
userId: f.userId,
|
rechargeMoney: f.rechargeMoney,
|
};
|
});
|
return resolve(list);
|
});
|
}
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.el-table :deep(.danger-row) {
|
--el-table-tr-bg-color: var(--el-color-danger-light-9);
|
}
|
._cu_row {
|
padding: 5px 0px;
|
align-items: center;
|
}
|
._el-row {
|
padding: 5px 0px;
|
border-bottom: 1px solid var(--el-border-color);
|
// margin-left: 20px;
|
align-items: center;
|
|
.el-input__wrapper {
|
padding: 0px !important;
|
}
|
}
|
// .td {
|
// overflow: hidden;
|
// }
|
// :deep(.el-descriptions__table) {
|
// table-layout: fixed;
|
// }
|
:deep(.el-descriptions__cell) {
|
padding: 8px 0px !important;
|
}
|
// .custom-item-sty {
|
// color: #333;
|
// padding: 8px 0px;
|
// font-weight: bold;
|
// overflow-x: hidden;
|
// }
|
</style>
|
