343 lines
9.2 KiB
Vue
343 lines
9.2 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;
|
|
if(Number(agentType) <= 5){
|
|
menuList.push({
|
|
title: '供应商邀请二维码',
|
|
type: 'supplier_qr_code',
|
|
url: '',
|
|
icon: 'iconfont icon-erweima1',
|
|
});
|
|
}
|
|
|
|
|
|
|
|
return menuList;
|
|
},
|
|
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
|
|
},
|
|
data() {
|
|
return {
|
|
// 登录相关
|
|
isAuto: false, //没有授权的不会自动授权
|
|
isShowAuth: false,//是否隐藏授权
|
|
// 代理信息
|
|
agent_list: {},
|
|
agent_info: {},
|
|
// 二维码
|
|
qrCode: '',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// 判断：是否登录
|
|
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 = {
|
|
is_get_self: 1,
|
|
not_page: 1
|
|
};
|
|
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;
|
|
}
|
|
|
|
return title;
|
|
},
|
|
// 点击菜单 进行对应的操作
|
|
clickMenu(menu){
|
|
let _this = this;
|
|
switch (menu.type) {
|
|
// 邀请供应商入驻
|
|
case 'supplier_qr_code':
|
|
inviteSupplierJoinQrCode({agent_id: _this.agent_info.id}).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;
|
|
}
|
|
},
|
|
// 关闭二维码弹框
|
|
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>
|