486 lines
13 KiB
Vue
486 lines
13 KiB
Vue
<template>
|
||
<view class="main-content">
|
||
<!-- 顶部信息 -->
|
||
<view class="header">
|
||
<view class="header-box" @click="changeAgentPopupShow">
|
||
<span class='font line1'>{{ getAgentTypeText(agent_info, '暂无代理身份') }}</span>
|
||
<template v-if="Object.values(agent_list).length > 1">
|
||
<text class="iconfont icon-xiala1 spin"></text>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<!--操作内容-->
|
||
<view v-if="Object.values(menu_list).length > 0" class="menu-list">
|
||
<view @click="clickMenu(item)" class="listBox" v-for="(item,index) in menu_list">
|
||
<text :class="item.icon" class="businessIcon"></text>
|
||
<view>{{item.title}}</view>
|
||
</view>
|
||
</view>
|
||
<emptyPage v-else title="暂无任何操作权限~"></emptyPage>
|
||
<!--授权登录-->
|
||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
|
||
<!--切换代理身份-->
|
||
<uni-popup ref="changeAgent" type="bottom">
|
||
<view class="change-agent-content">
|
||
<scroll-view scroll-y="true">
|
||
<radio-group name="store_name" @change="changeAgent">
|
||
<template v-for="(item,index) in agent_list">
|
||
<div class="store-list">
|
||
<label :key="item.id" class="store-list-item">
|
||
<view class="text">{{ getAgentTypeText(item) }}</view>
|
||
<radio class="radio" :value="index" :checked="agent_info.id == item.id ? true : false" />
|
||
</label>
|
||
</div>
|
||
</template>
|
||
</radio-group>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
<!--二维码-->
|
||
<uni-popup ref="qrCodePopup" type="center">
|
||
<view class="qr-code-content">
|
||
<image class="image" :src="qrCode"></image>
|
||
<view class="close-qr-code" @click="closeQrCode()">关闭</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import emptyPage from '@/components/emptyPage.vue'
|
||
import {mapGetters} from "vuex";
|
||
import authorize from '@/components/Authorize';
|
||
import { myAgentList,inviteSupplierJoinQrCode } from "@/api/agent";
|
||
|
||
export default {
|
||
name: 'business',
|
||
components: {
|
||
authorize,
|
||
emptyPage,
|
||
},
|
||
computed: {
|
||
menu_list() {
|
||
let menuList = [];
|
||
let agentType = this.agent_info.agent_type || 0;
|
||
// 类型：1=总部发起人,2=省公司发起人,3=省合伙人(外勤),4=省合伙人(内勤),
|
||
// 5=区县运营商,6=区县合伙人,7=餐厅,8=配送商,9=总部外勤,10=总部内勤
|
||
if(Number(agentType) <= 5){
|
||
menuList.push({
|
||
title: '供应商邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'supplier'
|
||
}
|
||
});
|
||
}
|
||
if(Number(agentType) === 1){
|
||
menuList.push({
|
||
title: '总部外勤邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 9,
|
||
}
|
||
});
|
||
menuList.push({
|
||
title: '总部内勤邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 10,
|
||
}
|
||
});
|
||
}
|
||
if(Number(agentType) === 9){
|
||
menuList.push({
|
||
title: '省公司邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 2,
|
||
}
|
||
});
|
||
}
|
||
if(Number(agentType) === 2){
|
||
menuList.push({
|
||
title: '外勤合伙人邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 3,
|
||
}
|
||
});
|
||
menuList.push({
|
||
title: '内勤合伙人邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 4,
|
||
}
|
||
});
|
||
}
|
||
if(Number(agentType) === 3){
|
||
menuList.push({
|
||
title: '运营商邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 5,
|
||
}
|
||
});
|
||
}
|
||
if(Number(agentType) === 5){
|
||
menuList.push({
|
||
title: '合伙人邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 6,
|
||
}
|
||
});
|
||
}
|
||
if(Number(agentType) === 6){
|
||
menuList.push({
|
||
title: '餐厅邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 7,
|
||
}
|
||
});
|
||
menuList.push({
|
||
title: '配送商邀请码',
|
||
type: 'invite_qr_code',
|
||
url: '',
|
||
icon: 'iconfont icon-erweima1',
|
||
params: {
|
||
type: 'subordinate',
|
||
level: 8,
|
||
}
|
||
});
|
||
}
|
||
// 除内勤、餐厅、配送商外都有下级管理
|
||
if(!['4','7','8','10'].includes(String(agentType))){
|
||
menuList.push({
|
||
title: '下级管理',
|
||
type: 'link',
|
||
url: '/pages/agent/user/list',
|
||
icon: 'iconfont icon-yonghu1',
|
||
});
|
||
}
|
||
// 除内勤外都有佣金明细
|
||
if(!['4','10'].includes(String(agentType))){
|
||
menuList.push({
|
||
title: '佣金明细',
|
||
type: 'link',
|
||
url: '/pages/agent/user/commission',
|
||
icon: 'iconfont icon-yonghu1',
|
||
});
|
||
}
|
||
|
||
|
||
return menuList;
|
||
},
|
||
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
|
||
},
|
||
data() {
|
||
return {
|
||
// 登录相关
|
||
isAuto: false, //没有授权的不会自动授权
|
||
isShowAuth: false,//是否隐藏授权
|
||
// 代理信息
|
||
agent_list: {},
|
||
agent_info: {},
|
||
agent_id: '',
|
||
// 二维码
|
||
qrCode: '',
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.agent_id = options.agent_id || '';
|
||
// 判断：是否登录
|
||
if (!this.isLogin) {
|
||
// 未登录 授权登录
|
||
this.isAuto = true;
|
||
this.isShowAuth = true
|
||
}else{
|
||
// 已登录 获取信息
|
||
this.init();
|
||
}
|
||
},
|
||
methods: {
|
||
// 授权回调
|
||
onLoadFun() {
|
||
if(this.isLogin){
|
||
this.isShowAuth = false;
|
||
this.init();
|
||
}
|
||
},
|
||
// 授权关闭
|
||
authClose(e) {
|
||
this.isShowAuth = e
|
||
},
|
||
// 授权成功 初始化
|
||
init () {
|
||
this.getMyAgentList();
|
||
},
|
||
// 代理身份操作 - 获取当前登录用户的代理身份列表
|
||
getMyAgentList(){
|
||
let _this = this;
|
||
let params = {
|
||
uid: _this.uid,
|
||
not_page: 1,
|
||
id: _this.agent_id
|
||
};
|
||
myAgentList(params).then(res => {
|
||
if (res.status == 200) {
|
||
let data = res.data || {};
|
||
if(Object.values(data).length <= 0){
|
||
this.$util.Tips({
|
||
title: '无有效的代理身份！',
|
||
},{tab:1,url:'/pages/user/index'});
|
||
return false;
|
||
}else{
|
||
_this.agent_list = res.data;
|
||
_this.agent_info = res.data[0] || {};
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
this.$util.Tips({title: err});
|
||
});
|
||
},
|
||
// 代理身份操作 - 切换弹框显示
|
||
changeAgentPopupShow(){
|
||
if(Object.values(this.agent_list).length <= 1) return false;
|
||
this.$refs.changeAgent.open('bottom')
|
||
},
|
||
// 代理身份操作 - 切换弹框关闭
|
||
changeAgentPopupClose(){
|
||
this.$refs.changeAgent.close();
|
||
},
|
||
// 代理身份操作 - 切换代理
|
||
changeAgent(e){
|
||
let index = e.detail.value || e.target.value;
|
||
this.agent_info = this.agent_list[index] || {};
|
||
this.changeAgentPopupClose();
|
||
},
|
||
// 渲染类型信息
|
||
getAgentTypeText(info, title = '') {
|
||
switch (Number(info.agent_type)) {
|
||
case 1:
|
||
title = '总部发起人';
|
||
break;
|
||
case 2:
|
||
title = '省公司发起人';
|
||
// if(info.province_name) title += `(${info.province_name})`;
|
||
break;
|
||
case 3:
|
||
title = '省公司外勤';
|
||
// if(info.province_name) title += `(${info.province_name})`;
|
||
break;
|
||
case 4:
|
||
title = '省公司内勤';
|
||
// if(info.province_name) title += `(${info.province_name})`;
|
||
break;
|
||
case 5:
|
||
title = '区县运营商';
|
||
if(info.province_name || info.area_name || info.area_name) title += `(${info.province_name}${info.city_name}${info.area_name})`;
|
||
break;
|
||
case 6:
|
||
title = '区县合伙人';
|
||
if(info.province_name || info.area_name || info.area_name) title += `(${info.province_name}${info.city_name}${info.area_name})`;
|
||
break;
|
||
case 7:
|
||
title = '餐厅';
|
||
if(info.mer && info.mer.mer_name) title += `(${info.mer.mer_name})`;
|
||
break;
|
||
case 8:
|
||
title = '配送商';
|
||
break;
|
||
case 9:
|
||
title = '总部外勤';
|
||
break;
|
||
case 10:
|
||
title = '总部内勤';
|
||
break;
|
||
}
|
||
|
||
title = title.replace('市辖区', '');
|
||
|
||
return title;
|
||
},
|
||
// 点击菜单 进行对应的操作
|
||
clickMenu(menu){
|
||
let _this = this;
|
||
let params = menu.params || {};
|
||
params.agent_id = _this.agent_info.id || 0;
|
||
switch (menu.type) {
|
||
// 邀请入驻二维码
|
||
case 'invite_qr_code':
|
||
inviteSupplierJoinQrCode(params).then(res => {
|
||
if (res.status == 200) {
|
||
_this.qrCode = res.data.qr_code || '';
|
||
_this.$refs.qrCodePopup.open('center');
|
||
}
|
||
}).catch(err => {
|
||
this.$util.Tips({title: err});
|
||
});
|
||
break;
|
||
// 点击跳转
|
||
case 'link':
|
||
uni.navigateTo({
|
||
url: menu.url + '?agent_id=' + params.agent_id
|
||
})
|
||
break;
|
||
}
|
||
},
|
||
// 关闭二维码弹框
|
||
closeQrCode() {
|
||
this.$refs.qrCodePopup.close();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main-content{
|
||
// 顶部信息
|
||
.header {
|
||
height: 305rpx;
|
||
background: linear-gradient(180deg, #2291F8 0%, rgba(34,145,248,0) 100%);
|
||
position: fixed;
|
||
width: 100%;
|
||
text-align: center;
|
||
top: 0;
|
||
left: 0;
|
||
.header-box {
|
||
min-width: 360rpx;
|
||
width: max-content;
|
||
margin: 33rpx auto 0 auto;
|
||
position: relative;
|
||
padding: 10rpx;
|
||
background-color: rgba(0, 0, 0, .25);
|
||
border-radius: 30rpx;
|
||
color: #FFFFFF;
|
||
.font {
|
||
display: inline-block;
|
||
margin-left: 10rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
.spin {
|
||
display: inline-block;
|
||
transform: rotate(180deg);
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
// 操作菜单列表
|
||
.menu-list {
|
||
width: 100%;
|
||
padding: 0 calc((100% - (345rpx * 2)) / 3);
|
||
margin-top: 151rpx;
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
.listBox {
|
||
width: 345rpx;
|
||
height: 270rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 5rpx 15rpx rgba(142, 82, 77, 0.1);
|
||
border-radius: 20rpx;
|
||
z-index: 1;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
background: #F34C20;
|
||
}
|
||
}
|
||
.businessIcon {
|
||
color: #2291F8;
|
||
font-size: 80rpx;
|
||
display: inline-block;
|
||
margin-bottom: 29rpx;
|
||
}
|
||
}
|
||
// 切换代理
|
||
.change-agent-content{
|
||
width: 100vw!important;
|
||
min-height: 65vh!important;
|
||
background-color: #fff;
|
||
border-top-left-radius: 30rpx!important;
|
||
border-top-right-radius: 30rpx!important;
|
||
padding: 30rpx!important;
|
||
.store-list{
|
||
width: 100% !important;
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
.store-list-item{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.store-list-item:not(:last-child){
|
||
border-bottom: 2rpx solid #f6f6f6;
|
||
}
|
||
.title{
|
||
width: calc(100% - 80rpx) !important;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
/deep/ radio .wx-radio-input.wx-radio-input-checked, /deep/radio .uni-radio-input.uni-radio-input-checked {
|
||
border: 1px solid #2291F8 !important;
|
||
background-color: #2291F8 !important
|
||
}
|
||
}
|
||
// 二维码弹框
|
||
.qr-code-content{
|
||
width: 80vw;
|
||
.image{
|
||
width: 80vw;
|
||
height: 80vw;
|
||
}
|
||
.close-qr-code{
|
||
position: fixed;
|
||
top: 35rpx;
|
||
right: 70rpx;
|
||
color: #FFFFFF;
|
||
border: 2rpx solid #FFFFFF;
|
||
height: 40rpx;
|
||
line-height: 36rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|