sadjv3_admin/src/views/bl/commission/jjr/jjrData.vue

640 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<!-- 列表 -->
<div style="margin-left:10px;display: inline-block">
<span>姓名</span>
<el-input style="width: 200px" placeholder="请输入姓名" v-model="name">
</el-input>
</div>
<div style="margin-left:10px;display: inline-block">
<span>电话</span>
<el-input style="width: 200px" placeholder="请输入电话" v-model="phone">
</el-input>
</div>
<div style="margin-left:10px;display: inline-block;">
<span>入驻开始时间</span>
<el-date-picker style="width: 160px;" v-model="startTime" align="right" type="datetime" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" placeholder="选择开始时间">
</el-date-picker>&nbsp;&nbsp;&nbsp;
</div>
<div style="margin-left:10px;display: inline-block;">
<span>入驻截止时间:</span>
<el-date-picker style="width: 160px;" v-model="endTime" align="right" type="datetime" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" placeholder="选择截止时间">
</el-date-picker>
</div>
<el-button style="margin-left: 10px" size="mini" type="primary" icon="document" @click="handleSelect">查询
</el-button>
<el-button style="margin-left: 10px" size="mini" type="primary" icon="document" @click="handleClear">重置
</el-button>
<el-table v-loading="tableDataLoading" :data="tableData.list">
<el-table-column prop="id" label="编号" width="80">
</el-table-column>
<el-table-column prop="userId" label="用户ID">
</el-table-column>
<el-table-column prop="avatar" label="头像">
<template slot-scope="scope">
<img v-if="scope.row.avatar && scope.row.avatar != ''" :src="scope.row.avatar" width="40"
height="40" />
<span v-else>暂无图片</span>
</template>
</el-table-column>
<el-table-column label="级别">
<template slot-scope="scope">
<span>{{ calcLevel(scope.row) }}</span>
</template>
</el-table-column>
<el-table-column label="提成比例">
<template slot-scope="scope">
<span>{{ calcRate(scope.row) }}</span>
</template>
</el-table-column>
<el-table-column prop="userName" label="昵称">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="phone" label="手机号" width="150">
</el-table-column>
<el-table-column prop="approveTime" label="入驻时间" width="180">
</el-table-column>
<el-table-column prop="artificerCount" label="累计邀请技师" align="right">
</el-table-column>
<el-table-column prop="ordersCount" label="累计成交订单数量" width="150" align="right">
</el-table-column>
<el-table-column prop="money" label="累计获得佣金" width="150" align="right">
<template slot-scope="scope">
<span style="color: #3E8EF7;cursor: pointer;" @click="moneyDetail(scope.row)">{{ scope.row.money }}</span>
</template>
</el-table-column>
<el-table-column label="操作" prop="id" width="150" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" style="margin: 5px"
@click="handleInvitationView(scope.row)">邀请的技师
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
</el-pagination>
</div>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 用户列表弹框 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<-->
<el-dialog title="邀请技师列表" :visible.sync="dialogUserListFormVisible" width="60%" center @close="closeUserList">
<div style="margin-left: 10px; display: inline-block;">
<span>姓名:</span>
<el-input style="width: 200px" placeholder="请输入姓名" v-model="userName"></el-input>
</div>
<div style="margin-left: 10px; display: inline-block">
<span>手机号:</span>
<el-input style="width: 200px" placeholder="请输入手机号" v-model="userPhone"></el-input>
</div>
<el-button style="margin-left: 10px;" size="mini" type="primary" icon="document"
@click="handleSelectUsers">查询
</el-button>
<el-button style="margin-left: 10px" size="mini" type="primary" icon="document" @click="handleClearUsers">重置
</el-button>
<el-button style="margin-left: 10px" size="mini" type="primary" icon="document"
@click="showArtificerView">技师列表
</el-button>
<el-table :data="userTableData.list" style="width: 100%">
<el-table-column prop="userId" label="用户ID"></el-table-column>
<el-table-column prop="avatar" label="头像">
<template slot-scope="scope">
<img v-if="scope.row.avatar && scope.row.avatar != ''" :src="scope.row.avatar" width="40"
height="40" />
<span v-else>暂无图片</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="phone" label="手机号"></el-table-column>
<el-table-column label="操作" prop="id">
<template slot-scope="scope">
<el-button style="margin: 10px 0" size="mini" type="primary" icon="document"
@click="handleCancelInvitation(scope.row)">取消邀请
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination @size-change="handleUserSizeChange" @current-change="handleUserCurrentChange"
:page-size="userLimit" :current-page="userPage" layout="total, prev, pager, next,jumper"
:total="userTableData.totalCount"></el-pagination>
</div>
</el-dialog>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<用户列表<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< -->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 技师列表弹框 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<-->
<el-dialog title="技师列表" :visible.sync="dialogArtificerListFormVisible" width="60%" center
@close="closeInvitation">
<div style="margin-left: 10px; display: inline-block;">
<span>姓名:</span>
<el-input style="width: 200px" placeholder="请输入姓名" v-model="artificerName"></el-input>
</div>
<div style="margin-left: 10px; display: inline-block">
<span>手机号:</span>
<el-input style="width: 200px" placeholder="请输入手机号" v-model="artificerPhone"></el-input>
</div>
<el-button style="margin-left: 10px;" size="mini" type="primary" icon="document"
@click="handleSelectArtificer">查询
</el-button>
<el-button style="margin-left: 10px" size="mini" type="primary" icon="document"
@click="handleClearArtificers">重置
</el-button>
<el-table :data="artificerTableData.list" style="width: 100%">
<el-table-column prop="userId" label="用户ID"></el-table-column>
<el-table-column prop="avatar" label="头像">
<template slot-scope="scope">
<img v-if="scope.row.avatar && scope.row.avatar != ''" :src="scope.row.avatar" width="40"
height="40" />
<span v-else>暂无图片</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="phone" label="手机号"></el-table-column>
<el-table-column label="操作" prop="id">
<template slot-scope="scope">
<el-button style="margin: 10px 0" size="mini" type="primary" icon="document"
@click="handleInvitation(scope.row)">邀请
</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination @size-change="handleArtificerSizeChange" @current-change="handleArtificerCurrentChange"
:page-size="artificerLimit" :current-page="artificerPage" layout="total, prev, pager, next,jumper"
:total="artificerTableData.totalCount"></el-pagination>
</div>
</el-dialog>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<技师列表<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< -->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 佣金详细信息弹框 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<-->
<el-dialog title="佣金详细信息列表" :visible.sync="yjxxVisible" width="60%" center @close="yjxxVisible = false">
<el-table :data="moneyDetailData.list" style="width: 100%">
<el-table-column prop="createTime" label="日期"></el-table-column>
<el-table-column prop="money" label="金额"></el-table-column>
<el-table-column prop="title" label="详情"></el-table-column>
</el-table>
<div style="text-align: center; margin-top: 10px">
<el-pagination @size-change="handleyjxxSizeChange" @current-change="handleyjxxCurrentChange"
:page-size="yjxxLimit" :current-page="yjxxPage" layout="total, prev, pager, next,jumper"
:total="moneyDetailData.totalCount"></el-pagination>
</div>
</el-dialog>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<技师列表<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< -->
</div>
</template>
<script>
export default {
data() {
return {
apiUrl: "",
titles: "",
invitationCode: "",
tableDataLoading: false,
tableData: {},
userId: "",
avatar: "",
name: "",
phone: "",
startTime: "",
endTime: "",
page: 1,
limit: 10,
dialogUserListFormVisible: false,
userTableDataLoading: false,
userName: "",
userPhone: "",
userPage: 1,
userLimit: 10,
userTableData: {},
dialogArtificerListFormVisible: false,
artificerTableDataLoading: false,
artificerName: "",
artificerPhone: "",
artificerPage: 1,
artificerLimit: 10,
artificerTableData: {},
jsjb: [],//技师级别 判断大于minNumber 小于等于maxNumber 级别level 比例rate一个数没有单位
moneyDetailData: [],
yjxxVisible:false,
yjxxPage:1,
yjxxLimit:10,
yjxxUserId:''
};
},
methods: {
calcLevel(row) {
let result = []
if (row.artificerCount == 0) {
result = this.jsjb.filter(item => { return item.minNumber == 0 })
} else {
result = this.jsjb.filter(item => { return row.artificerCount > item.minNumber && row.artificerCount <= item.maxNumber })
}
return result[0] ? result[0].level : ''
},
calcRate(row) {
let result = []
if (row.artificerCount == 0) {
result = this.jsjb.filter(item => { return item.minNumber == 0 })
} else {
result = this.jsjb.filter(item => { return row.artificerCount > item.minNumber && row.artificerCount <= item.maxNumber })
}
return result[0] ? result[0].rate + '%' : ''
},
queryJsjb() {
return new Promise((resolve, reject) => {
this.$http({
url: this.$http.adornUrl("commission/jjrConfigLevel/findList"),
method: "get",
params: this.$http.adornParams({}),
}).then(({ data }) => {
if (data.code == 0) {
resolve(data.data);
} else {
reject([]);
}
}).catch(error => {
reject([]);
});
});
},
showDictValue(data, datas) {
const dictItem = datas.find(item => data === item.id);
return dictItem ? dictItem.value : '';
},
// 获取经纪人列表数据
handleSelect() {
this.tableDataLoading = true;
this.$http({
url: this.$http.adornUrl("commission/jjrData/findPage"),
method: "get",
params: this.$http.adornParams({
page: this.page,
limit: this.limit,
name: this.name,
phone: this.phone,
startTime: this.startTime,
endTime: this.endTime,
}),
}).then(({ data }) => {
if (data.code == 0) {
this.tableData = data.data;
console.log(this.tableData);
} else {
this.$notify({
title: "提示",
duration: 1800,
message: data.msg,
type: "warning",
});
}
this.tableDataLoading = false;
});
},
// 重置
handleClear() {
this.name = "";
this.phone = "";
this.startTime = "";
this.endTime = "";
this.page = 1;
this.handleSelect();
},
//分页
handleSizeChange(val) {
this.limit = val;
this.handleSelect();
},
//翻页
handleCurrentChange(val) {
this.page = val;
this.handleSelect();
},
closeUserList() {
this.handleClear();
},
handleInvitationView(row) {
this.invitationCode = row.invitationCode;
this.handleSelectUsers();
this.dialogUserListFormVisible = true;
},
moneyDetail(row) {
if(row){
this.yjxxPage = 1
this.yjxxLimit = 10
this.yjxxUserId = row.userId
}
this.$http({
url: this.$http.adornUrl("commission/jjrData/moneyDetail"),
method: "get",
params: this.$http.adornParams({
page: this.yjxxPage,
limit: this.yjxxLimit,
userId: this.yjxxUserId
}),
}).then(({ data }) => {
this.moneyDetailData = data.data
this.yjxxVisible = true
})
},
handleSelectUsers() {
this.userTableDataLoading = true;
this.$http({
url: this.$http.adornUrl("commission/jjrData/invitationArtificerPage"),
method: "get",
params: this.$http.adornParams({
page: this.userPage,
limit: this.userLimit,
invitationCode: this.invitationCode,
name: this.userName,
phone: this.userPhone
}),
}).then(({ data }) => {
if (data.code == 0) {
this.userTableData = data.data;
} else {
this.$notify({
title: "提示",
duration: 1800,
message: data.msg,
type: "warning",
});
}
this.userTableDataLoading = false;
});
},
//分页
handleUserSizeChange(val) {
this.userLimit = val;
this.handleSelectUsers();
},
//翻页
handleUserCurrentChange(val) {
this.userPage = val;
this.handleSelectUsers();
},
//取消邀请
handleCancelInvitation(row) {
let userId = row.userId;
this.$http({
url: this.$http.adornUrl("commission/jjrData/cancelInvitation"),
method: "post",
params: this.$http.adornParams({
artificerUserId: userId,
}),
}).then(({ data }) => {
if (data.code == 0) {
this.$message({
message: "取消成功",
type: "success",
duration: 1500,
onClose: () => {
},
});
this.handleSelectUsers()
} else {
this.$message({
message: data.msg,
type: "warning",
duration: 1500,
onClose: () => {
},
});
}
});
},
// 重置
handleClearUsers() {
this.userName = "";
this.userPhone = "";
this.userPage = 1;
this.userLimit = 10;
this.handleSelectUsers();
},
showArtificerView() {
this.handleSelectArtificer();
this.dialogArtificerListFormVisible = true;
},
handleSelectArtificer() {
this.artificerTableDataLoading = true;
this.$http({
url: this.$http.adornUrl("commission/jjrData/artificerPage"),
method: "get",
params: this.$http.adornParams({
page: this.artificerPage,
limit: this.artificerLimit,
name: this.artificerName,
phone: this.artificerPhone
}),
}).then(({ data }) => {
if (data.code == 0) {
this.artificerTableData = data.data;
} else {
this.$notify({
title: "提示",
duration: 1800,
message: data.msg,
type: "warning",
});
}
this.artificerTableDataLoading = false;
});
},
//分页
handleyjxxSizeChange(val) {
this.yjxxLimit = val;
this.moneyDetail();
},
//翻页
handleyjxxCurrentChange(val) {
this.yjxxPage = val;
this.moneyDetail();
},
//分页
handleArtificerSizeChange(val) {
this.artificerLimit = val;
this.handleSelectArtificer();
},
//翻页
handleArtificerCurrentChange(val) {
this.artificerPage = val;
this.handleSelectArtificer();
},
// 重置
handleClearArtificers() {
this.artificerName = "";
this.artificerPhone = "";
this.artificerPage = 1;
this.artificerLimit = 10;
this.handleSelectArtificer();
},
handleInvitation(row) {
let userId = row.userId;
this.$http({
url: this.$http.adornUrl("commission/jjrData/modifyJjr"),
method: "post",
params: this.$http.adornParams({
artificerUserId: userId,
invitationCode: this.invitationCode,
}),
}).then(({ data }) => {
if (data.code == 0) {
this.$message({
message: "邀请成功",
type: "success",
duration: 1500,
onClose: () => {
},
});
this.handleSelectArtificer()
} else {
this.$message({
message: data.msg,
type: "warning",
duration: 1500,
onClose: () => {
},
});
}
});
},
closeInvitation() {
this.handleClearUsers();
},
},
async mounted() {
let a = await this.queryJsjb()
if (a) this.jsjb = a
this.handleSelect();
},
};
</script>
<style>
.customWidth {
width: 80% !important;
}
.el-dialog--center {
text-align: center;
margin-top: 1vh !important;
}
.el-tooltip__popper {
width: 200px;
padding: 10px;
color: #000 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
background-color: #fff !important;
}
.adver_main.box a {
display: flex;
justify-content: center;
height: 150px;
line-height: 150px;
text-decoration: none;
}
.bannerManin span {
display: inline-block;
margin-left: 5px;
}
.bannerManin img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.bannerbtn a {
flex: 1;
text-align: center;
color: #3e8ef7 !important;
text-decoration: none;
}
.imgs {
position: relative;
border-radius: 6px;
width: 148px;
height: 148px;
margin-right: 10px;
display: inline-block;
}
.dels {
position: absolute;
top: 0;
left: 0;
display: none;
}
.dels .el-icon-delete {
line-height: 148px;
padding-left: 58px;
font-size: 25px;
color: #fff;
}
.imgs:hover .dels {
width: 100%;
height: 100%;
background: #000;
display: block;
opacity: 0.5;
}
.bqList {
padding: 4px 14px;
margin: 4px;
border: 1px solid #efefef;
font-size: 12px;
color: #999;
border-radius: 4px;
margin-right: 15px;
}
.delss {
display: none;
position: relative;
}
.delss .el-icon-delete {
position: absolute;
top: 0;
}
.bqList:hover .delss {
display: initial;
opacity: 0.5;
}
.tj {
padding: 6px !important;
margin: 4px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>