424 lines
13 KiB
Vue
424 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">{{myOperator.level.name ? myOperator.level.name : '城市'}}运营商</block>
|
||
</cu-custom>
|
||
<view class="margin-top-sm margin-lr-sm padding bg-white name-card shadow-warp">
|
||
<!-- 个人名片 -->
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round"
|
||
:style="'background-image:url(' + myOperator.customerLogoUrl + '); width: 130rpx; height: 130rpx;'">
|
||
</view>
|
||
<view class="margin-left-sm flex-column-around">
|
||
<view class="text-black text-xl">{{myOperator.name}}</view>
|
||
<view class="">
|
||
<text class="margin-right-xs">角色：合伙人</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 实名及公告图标 -->
|
||
<view class="flex justify-end oper-bar">
|
||
<!-- <view class="text-center margin-right-sm" @click="showCertificationForm">
|
||
<view class="cuIcon-profilefill text-yellow"></view>
|
||
<view class="text-xs">实名认证</view>
|
||
</view> -->
|
||
<view class="text-center">
|
||
<view class="cuIcon-notice"></view>
|
||
<view class="text-xs">公告</view>
|
||
</view>
|
||
</view>
|
||
<!-- 团队人员统计 -->
|
||
<view class="cu-list grid no-border col-4 solid-top margin-top-sm">
|
||
<view class="cu-item" :class="index == 2 ? 'solid-left' : ''" v-for="(item, index) in myOperator.analyseItems" :key="index" v-if="index < 4 && item.type === 'common'">
|
||
<view class="margin-bottom-xs">{{item.title}}</view>
|
||
<view class="text-red" v-if="item.unit === 'yuan'">
|
||
￥{{item.value}}
|
||
</view>
|
||
<view v-else class="text-red">
|
||
{{item.value}}{{item.unit}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 团队订单统计 -->
|
||
<view class="margin-lr-sm margin-top-sm padding bg-white margin-bottom-with-bar">
|
||
<view class="cu-list grid no-border col-4">
|
||
<view class="cu-item" v-for="(item, index) in myOperator.analyseItems" :key="index" v-if="index >= 4 && item.type === 'dayAnalyse'">
|
||
<view class="margin-bottom-xs">{{item.title}}</view>
|
||
<view class="text-red" v-if="item.unit === 'yuan'">
|
||
￥{{item.value}}
|
||
</view>
|
||
<view v-else class="text-red">
|
||
{{item.value}}{{item.unit}}
|
||
</view>
|
||
</view>
|
||
<view class="cu-item" v-for="(item, index) in myOperator.analyseItems" :key="index" v-if="index >= 4 && item.type === 'common'">
|
||
<view class="margin-bottom-xs">{{item.title}}</view>
|
||
<view class="text-red" v-if="item.unit === 'yuan'">
|
||
￥{{item.value}}
|
||
</view>
|
||
<view v-else class="text-red">
|
||
{{item.value}}{{item.unit}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 操作栏 -->
|
||
<view class="bg-white padding margin-top-sm fixed-bottom-bar">
|
||
<view class="flex flex-wrap justify-between">
|
||
<view class="basis-df margin-tb-sm" v-for="(item, index) in operBtn" :key="item.name">
|
||
<button class="cu-btn long-btn shadow bg-main-color light" :data-cur="item.code"
|
||
@click="doSomething">{{item.name}}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 屏蔽设置 模态框 -->
|
||
<view class="cu-modal" :class="modalName=='shieldSetModal'?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="cu-bar bg-white justify-end">
|
||
<view class="content">选品广场设置</view>
|
||
<view class="action" @tap="hideModal">
|
||
<text class="cuIcon-close text-bold text-red"></text>
|
||
</view>
|
||
</view>
|
||
<view class="padding-xl">
|
||
<view class="flex align-start margin-bottom-xl padding-lr">
|
||
<view class="margin-right-sm">选品广场：</view>
|
||
<view class="margin-right-sm">
|
||
<!-- <view class="margin-bottom-sm">
|
||
<text class="margin-right-xs">全选</text>
|
||
<checkbox style="transform:scale(0.9)" class="main-color" :value="agreeShield" :checked="agreeShield === 1"
|
||
@click="changeAgreeShield(1)">
|
||
</checkbox>
|
||
</view> -->
|
||
<view class="margin-bottom-sm">
|
||
<text class="margin-right-xs">正选</text>
|
||
<checkbox style="transform:scale(0.9)" class="main-color" :value="agreeShield" :checked="agreeShield === 1"
|
||
@click="changeAgreeShield(1)">
|
||
</checkbox>
|
||
</view>
|
||
<view>
|
||
<text class="margin-right-xs">反选</text>
|
||
<checkbox style="transform:scale(0.9)" class="main-color" :value="agreeShield" :checked="agreeShield === 2"
|
||
@click="changeAgreeShield(2)">
|
||
</checkbox>
|
||
</view>
|
||
</view>
|
||
<view class="text-left">
|
||
<view>逐条选品</view>
|
||
<view>
|
||
<text class="text-main-color" @tap="showModal('categoryModal')">去选品</text>
|
||
<text v-if="chosenCategoryIds.length" style="color: red;font-size: 24upx;padding-left: 10upx;"> - 您已选品</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding-top-lg text-left text-sm">
|
||
<!-- <view class="margin-bottom-xs">全选：勾选后将运营代理所有供应链上的服务与商品，您的所有客户可见可选！</view> -->
|
||
<view class="margin-bottom-xs">正选：进行对类目逐条勾选，已勾选的服务与商品，您的所有客户可见可选！</view>
|
||
<view class="margin-bottom-xs">反选：所有人与我区域范围提供的服务和商品重叠的进行屏蔽！<text class="text-main-color">（注:需两端绑定的手机号一致)</text></view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white">
|
||
<view class="action margin-0 flex-sub text-black" @tap="hideModal">取消</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left"
|
||
@click="confirmShield">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 类目抽屉 -->
|
||
<view class="DrawerClose" :class="modalName=='categoryModal'?'show':''" @tap="showModal('shieldSetModal')">
|
||
<view class="cuIcon-roundcheckfill text-main-color" style="margin-top: 20upx;font-size: 70upx;"></view>
|
||
<view class="cuIcon-roundclosefill" style="margin-top: 20upx;font-size: 70upx;"></view>
|
||
</view>
|
||
<scroll-view scroll-y class="DrawerWindow bg-gray" :class="modalName=='categoryModal'?'show':''">
|
||
<multiselect-vertical-nav ref="multiSelectNav" :list="categoryList" :containerHeight="'calc(100vh - 270rpx)'" :allLevel3CategoryIds="allLevel3CategoryIds"></multiselect-vertical-nav>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
|
||
import multiselectVerticalNav from '@/components/multi-level-nav/multiselect-vertical-nav.vue';
|
||
|
||
export default {
|
||
components: {
|
||
horizontalNameCard,
|
||
multiselectVerticalNav
|
||
},
|
||
data() {
|
||
return {
|
||
myOperator: {},
|
||
operBtn: [{
|
||
code: 'ShieldSet',
|
||
name: '选品广场'
|
||
}, {
|
||
code: '',
|
||
name: '加价申请'
|
||
}, {
|
||
code: 'showTeamMembers',
|
||
name: '查看团队'
|
||
}, {
|
||
code: 'showCustomers',
|
||
name: '查看客户'
|
||
}, {
|
||
code: '',
|
||
name: '添加团队'
|
||
}, {
|
||
code: 'showMembers2Approval',
|
||
name: '组建/审批区域团队'
|
||
}],
|
||
agreeShield: 1,
|
||
modalName: null,
|
||
categoryList: [],
|
||
chosenCategoryIds: [],
|
||
allLevel3CategoryIds: [],
|
||
curUserInfo: {}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadData();
|
||
this.bindEvent();
|
||
},
|
||
onUnload() {
|
||
this.offBindEvent();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
this.curUserInfo = this.$request.getCurUserInfo();
|
||
// this.myOperator = await this.$api.data('myOperator');
|
||
this.loadMyInfo({
|
||
customerId: this.curUserInfo.customerId,
|
||
isDistributor: true
|
||
});
|
||
this.loadCategory();
|
||
},
|
||
async loadMyInfo(params) {
|
||
let res = await this.$request.qryCustomerList(params);
|
||
if (res && res.rows && res.rows.length == 1) {
|
||
this.myOperator = res.rows[0];
|
||
this.myOperator.extraInfos = [{
|
||
name: '角色：',
|
||
desc: '合伙人'
|
||
}];
|
||
}
|
||
},
|
||
async loadCategory(params) {
|
||
let res = await this.$request.getProductCategories(params);
|
||
res = res[1].data.data;
|
||
res.forEach(firstCategory => {
|
||
if (firstCategory.child && firstCategory.child.length) {
|
||
this.categoryList = this.categoryList.concat(firstCategory.child)
|
||
}
|
||
})
|
||
|
||
// 遍历得到所有的第三级类目
|
||
this.getTargetLevelCategory(res, 3, this.allLevel3CategoryIds);
|
||
},
|
||
async getTargetLevelCategory(list ,level, res = []) {
|
||
list.forEach(item => {
|
||
if (item.level !== level) {
|
||
if (item.child && item.child.length) {
|
||
this.getTargetLevelCategory(item.child, level, res);
|
||
}
|
||
} else {
|
||
res.push(item.goodsCategoryId);
|
||
}
|
||
})
|
||
},
|
||
showModal(modalName) {
|
||
this.modalName = modalName;
|
||
// 获取已选择项
|
||
if(modalName = 'shieldSetModal' && !this.chosenCategoryIds.length) {
|
||
this.goChooseItem()
|
||
}
|
||
},
|
||
hideModal() {
|
||
this.modalName = null;
|
||
this.$refs.multiSelectNav.clearChosenItem();
|
||
},
|
||
bindEvent() {
|
||
uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.tmpChooseCategory);
|
||
},
|
||
offBindEvent() {
|
||
uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
|
||
},
|
||
doSomething(e) {
|
||
const cur = e.currentTarget.dataset.cur;
|
||
let findItem, numberMember;
|
||
switch (cur) {
|
||
case 'ShieldSet':
|
||
this.showModal('shieldSetModal')
|
||
break;
|
||
case 'showTeamMembers':
|
||
findItem = this.myOperator.analyseItems.find(item => item.title === '团队')
|
||
numberMember = findItem ? findItem.value : 0
|
||
console.log(numberMember);
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-team-member?placeStatus=2&number='+numberMember
|
||
})
|
||
break;
|
||
case 'showCustomers':
|
||
findItem = this.myOperator.analyseItems.find(item => item.title === '客户数')
|
||
numberMember = findItem ? findItem.value : 0
|
||
console.log(numberMember);
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-team-member?number='+numberMember
|
||
})
|
||
case 'showMembers2Approval':
|
||
uni.navigateTo({
|
||
url: '/pages/my/member-approval'
|
||
})
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
changeAgreeShield(agreeShield) {
|
||
if(agreeShield === this.agreeShield) return
|
||
this.agreeShield = agreeShield;
|
||
// this.$refs.multiSelectNav.clearChosenItem();
|
||
this.goChooseItem()
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: '请重新进行逐条选品'
|
||
// })
|
||
},
|
||
tmpChooseCategory(chosenCategoryIds) {
|
||
this.chosenCategoryIds = chosenCategoryIds;
|
||
},
|
||
async goChooseItem() {
|
||
const res = await this.$request.getChooseCategories({
|
||
selectionType: this.agreeShield,
|
||
customerId: this.curUserInfo.customerId
|
||
})
|
||
console.log(res);
|
||
if(res[1].data.data.length) {
|
||
this.$refs.multiSelectNav.setChooseItems([...res[1].data.data])
|
||
}
|
||
// this.showModal('categoryModal')
|
||
},
|
||
|
||
async confirmShield(e) {
|
||
// console.log(this.agreeShield, this.chosenCategoryIds);
|
||
// return
|
||
if ((this.agreeShield === 2 || this.agreeShield === 1) && this.chosenCategoryIds.length === 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请至少选择一个类目'
|
||
})
|
||
return;
|
||
}
|
||
let chosenCategoryIds = this.chosenCategoryIds;
|
||
// if (this.agreeShield === 1 && this.chosenCategoryIds.length === 0) {
|
||
// // 全选，带上所有的类目id
|
||
// chosenCategoryIds = this.allLevel3CategoryIds;
|
||
// }
|
||
let res = await this.$request.addCustomerSelection({
|
||
customerId: this.curUserInfo.customerId,
|
||
deptCategoryIds: chosenCategoryIds,
|
||
selectionType: this.agreeShield == 3 ? 1 : this.agreeShield
|
||
});
|
||
if (res && res.code === 0) {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: '设置成功'
|
||
})
|
||
this.hideModal();
|
||
} else if (res && res.msg){
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg,
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '设置失败'
|
||
})
|
||
}
|
||
},
|
||
showCertificationForm() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/Certification'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cu-list.grid.no-border>.solid-left.cu-item:after {
|
||
border-left: 1rpx solid rgba(0, 0, 0, 0.1);
|
||
border-left-width: 0.5px;
|
||
border-left-style: solid;
|
||
border-left-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.name-card {
|
||
position: relative;
|
||
}
|
||
|
||
.name-card .oper-bar {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.long-btn {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
margin-right: 5%;
|
||
}
|
||
|
||
.DrawerWindow {
|
||
z-index: 9999;
|
||
position: absolute;
|
||
width: 85vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
transform: scale(0.9, 0.9) translateX(-100%);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.4s;
|
||
padding: 100upx 0;
|
||
}
|
||
|
||
.DrawerWindow.show {
|
||
transform: scale(1, 1) translateX(0%);
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.DrawerClose {
|
||
position: absolute;
|
||
width: 40vw;
|
||
height: 100vh;
|
||
right: 0;
|
||
top: 0;
|
||
color: transparent;
|
||
padding-bottom: 30upx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
||
letter-spacing: 5px;
|
||
font-size: 60upx;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.4s;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.DrawerClose.show {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
width: 15vw;
|
||
color: #fff;
|
||
}
|
||
</style>
|