<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
|
<el-form-item label="用户查询" prop="userId">
|
<el-select
|
v-model="queryParams.userId"
|
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-item label="用户等级" prop="levelId">
|
<el-select v-model="queryParams.levelId" placeholder="用户等级" clearable style="width: 200px">
|
<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>
|
<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="primary" plain :disabled="power.add" @click="handleRate">解冻</el-button>
|
</el-col> -->
|
<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" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="账号" align="center" key="userName" prop="userName" />
|
<el-table-column label="昵称" align="center" key="nickName" prop="nickName" />
|
<el-table-column label="等级" align="center" key="nickName" prop="levelName" />
|
<el-table-column label="灵玉" align="center">
|
<template #default="scope">
|
<el-button link type="primary" @click="openDataInfo(scope.row, 1)">{{ scope.row.integralValue }}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column label="余额" align="center">
|
<template #default="scope">
|
<el-button link type="primary" @click="openDataInfo(scope.row, 2)">{{ scope.row.moneyValue }}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column label="灵玉收支状态" align="center">
|
<template #default="scope">
|
<span :style="{ color: scope.row.integralState != 1 ? 'red' : '#606266' }">{{ scope.row.integralState == 1 ? "正常" : "异常" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="余额收支状态" align="center">
|
<template #default="scope">
|
<span :style="{ color: scope.row.moneyState != 1 ? 'red' : '#606266' }">{{ scope.row.moneyState == 1 ? "正常" : "异常" }}</span>
|
</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="stocklogProps.dialogTitlle" :close-on-click-modal="false" v-model="state.isOpenInfo" width="700px" top="20vh" draggable append-to-body>
|
<el-table v-loading="stocklogProps.loading" :data="stocklogProps.dataTable" @cell-dblclick="openPfofitInfo">
|
<el-table-column type="index" width="60" align="center" />
|
<el-table-column label="金额" align="center" key="mxValue" prop="mxValue" width="200" />
|
<el-table-column label="类型" align="center" key="source" width="200">
|
<template #default="scope">
|
<span>{{ dispUserType(scope.row.source) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="时间" align="center" key="createTime" prop="createTime" width="200" />
|
<template #append>
|
<el-descriptions :column="4">
|
<el-descriptions-item width="60" label="合计:"></el-descriptions-item>
|
<el-descriptions-item width="200" align="center">{{ amountInfo.mxValueT }}</el-descriptions-item>
|
<el-descriptions-item width="200" align="center"></el-descriptions-item>
|
<el-descriptions-item width="200" align="center"></el-descriptions-item>
|
</el-descriptions>
|
</template>
|
</el-table>
|
<pagination
|
v-show="stocklogProps.total > 0"
|
:total="stocklogProps.total"
|
v-model:page="detailedParams.pageNum"
|
v-model:limit="detailedParams.pageSize"
|
@pagination="getDetailedList"
|
/>
|
|
<el-dialog v-model="isOpenProfitInfo" width="800px" title="收益详情" append-to-body>
|
<el-descriptions>
|
<el-descriptions-item label="来源单号:"> {{ profitInfo.sourceOrder }} </el-descriptions-item>
|
<el-descriptions-item label="收益类型:">{{ dispUserType(profitInfo.source) }}</el-descriptions-item>
|
<el-descriptions-item label="奖励金额:">{{ profitInfo.mxValue }}</el-descriptions-item>
|
<el-descriptions-item label="来源用户:">{{ profitInfo.nickName }}</el-descriptions-item>
|
<el-descriptions-item label="联系电话:">{{ profitInfo.userName }}</el-descriptions-item>
|
<el-descriptions-item label="下单时间:">{{ profitInfo.createTime }}</el-descriptions-item>
|
</el-descriptions>
|
</el-dialog>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { reactive, onMounted, toRefs, ref, getCurrentInstance } from "vue";
|
import { getWallet, getWalletMx, getWalletMxTotal, getUserByKeyword, getWalletMxView, batchThawProfit } from "@/api/report/wallet";
|
import type { FormInstance } from "element-plus";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { level_id, source } = proxy.useDict("level_id", "source");
|
const state = reactive({
|
dataTable: [] as any[], //数据列表
|
total: 0, //总条数useDict
|
amountInfo: {} as any, //合计信息
|
tableOption: {
|
//表格配置
|
loading: true,
|
},
|
power: {
|
//操作权限
|
add: false,
|
single: false, //
|
multiple: true, //
|
},
|
showSearch: true, //是否显示分类
|
isOpenInfo: false,
|
isOpenRate: false,
|
});
|
const { dataTable, total, tableOption, power, showSearch, amountInfo, isOpenRate } = toRefs(state);
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
//#region commonDisp
|
|
const dispUserType = (e: string) => {
|
let stt = source.value.find((f: Dict.dictType) => f.value == e);
|
return stt ? stt.label : "";
|
};
|
|
//#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 queryRef = ref<FormInstance>();
|
const queryParams = reactive({
|
//查询配置参数
|
pageNum: 1,
|
pageSize: 10,
|
levelId: undefined, //等级id
|
userId: undefined, // 用户Id
|
});
|
/**
|
* 获取数据列表
|
*/
|
const getDataList = async () => {
|
// if (queryParams.shopState == 0) queryParams.shopState = "";
|
await getWallet(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 stocklogProps = reactive({
|
dialogTitlle: "",
|
loading: true,
|
dataTable: [] as any[],
|
total: 0,
|
amountInfo: {},
|
});
|
|
const detailedParams = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
userId: "" as unknown,
|
walletMxType: "", //明细类型:1购买收益,2推荐收益,3招商收益,4岗位收益,5岗位工资,6收赠收益,7专卖店收益
|
walletType: "", //钱包类型:1灵玉,2酒滴,
|
});
|
|
const openDataInfo = (e: any, t: number) => {
|
if (t == 1) {
|
stocklogProps.dialogTitlle = "灵玉明细";
|
}
|
if (t == 2) {
|
stocklogProps.dialogTitlle = "余额明细";
|
}
|
|
detailedParams.userId = e.userId;
|
detailedParams.walletType = t.toString();
|
state.isOpenInfo = true;
|
getDetailedList();
|
};
|
|
/**
|
* 获取收益明细列表
|
*/
|
const getDetailedList = async () => {
|
stocklogProps.loading = true;
|
await getWalletMx(detailedParams).then((res) => {
|
if (res.code == 200) {
|
stocklogProps.dataTable = res.rows;
|
stocklogProps.total = res.total;
|
stocklogProps.loading = false;
|
getDetailedTotal();
|
}
|
});
|
};
|
|
/**
|
* 合计
|
*/
|
const getDetailedTotal = async () => {
|
await getWalletMxTotal(detailedParams).then((res) => {
|
if (res.code == 200) {
|
state.amountInfo = res.data;
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 收益详情
|
|
const isOpenProfitInfo = ref(false);
|
const profitInfo = ref<any>({});
|
|
const openPfofitInfo = (e: any) => {
|
getDataInfo(e.id);
|
};
|
|
/**
|
* 加载收益详情
|
* @param e 收益id
|
*/
|
const getDataInfo = async (e: number) => {
|
await getWalletMxView({ id: e, walletType: detailedParams.walletType }).then((res) => {
|
if (res.code == 200) {
|
profitInfo.value = res.data;
|
isOpenProfitInfo.value = true;
|
}
|
});
|
};
|
//#endregion
|
|
//#region 收益解冻
|
|
const ids = ref<any[]>([]);
|
/**
|
* 选择时
|
* @param {} row
|
*/
|
const handleSelectionChange = (row: any[]) => {
|
ids.value = row.map((item: any) => item.userId);
|
state.power.add = !ids.value.length;
|
};
|
const rate = ref(0);
|
</script>
|
|
<style scoped lang="scss">
|
.el-table :deep(.danger-row) {
|
--el-table-tr-bg-color: var(--el-color-danger-light-9);
|
}
|
._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>
|