选品广场页面开发;我的分销成员列表筛选通过分销申请的;我的分销成员列表去掉第一栏绑定客户,团队数量的统计;
This commit is contained in:
parent
7d1cf9b39c
commit
a26f1f3cf4
|
|
@ -0,0 +1,149 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<!-- <view class="cu-bar search bg-white">
|
||||||
|
<view class="search-form round">
|
||||||
|
<text class="cuIcon-search"></text>
|
||||||
|
<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容"
|
||||||
|
confirm-type="search"></input>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
<view class="VerticalBox" :style="'height:calc(' + containerHeight + ')'">
|
||||||
|
<scroll-view class="VerticalNav nav">
|
||||||
|
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in list"
|
||||||
|
:key="index" @tap="tabSelect" :data-index="index" :data-id="item.goodsCategoryId"
|
||||||
|
:data-main-cur="item.child && item.child.length > 0 ? item.child[0].goodsCategoryId : -1">
|
||||||
|
{{item.goodsCategoryName}}
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<scroll-view class="VerticalMain">
|
||||||
|
<view class="padding-top padding-lr" v-for="(type, index1) in list[tabCur].child" :key="index1"
|
||||||
|
:id="'main-'+type.goodsCategoryId">
|
||||||
|
<view class="cu-bar bg-white bottom-border" @click="chooseNavItem(type)">
|
||||||
|
<view class="action">
|
||||||
|
<text class="cuIcon-title text-main-color"></text>{{type.goodsCategoryName}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-list menu">
|
||||||
|
<view class="cu-item"
|
||||||
|
:class="chosenCategoryIds.indexOf(subType.goodsCategoryId) >= 0 ? 'bg-main-color light' : ''"
|
||||||
|
v-for="(subType,index2) in type.child" :key="index2" @click="chooseNavItem(subType)">
|
||||||
|
<view class="content">
|
||||||
|
<text>{{subType.goodsCategoryName}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'multiselect-vertical-nav',
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
containerHeight: {
|
||||||
|
type: String,
|
||||||
|
default: '100vh'
|
||||||
|
},
|
||||||
|
isClick2ShowProducts: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabCur: 0,
|
||||||
|
chosenCategoryIds: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
this.loadData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadData() {
|
||||||
|
},
|
||||||
|
tabSelect(e) {
|
||||||
|
this.tabCur = e.currentTarget.dataset.index;
|
||||||
|
},
|
||||||
|
chooseNavItem(curNavItem) {
|
||||||
|
let index = this.chosenCategoryIds.indexOf(curNavItem.goodsCategoryId);
|
||||||
|
if (index >= 0) {
|
||||||
|
this.chosenCategoryIds.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
this.chosenCategoryIds.push(curNavItem.goodsCategoryId);
|
||||||
|
}
|
||||||
|
uni.$emit(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chosenCategoryIds);
|
||||||
|
},
|
||||||
|
// searchGoods(e) {
|
||||||
|
// uni.$emit(this.$globalFun.VERTICAL_NAV_SEARCH, e.detail.value);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.VerticalNav.nav {
|
||||||
|
width: 200upx;
|
||||||
|
white-space: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalNav.nav .cu-item {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalNav.nav .cu-item.cur {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalNav.nav .cu-item.cur::after {
|
||||||
|
content: "";
|
||||||
|
width: 8upx;
|
||||||
|
height: 30upx;
|
||||||
|
border-radius: 10upx 0 0 10upx;
|
||||||
|
position: absolute;
|
||||||
|
background-color: currentColor;
|
||||||
|
top: 0;
|
||||||
|
right: 0upx;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalBox {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalMain {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list>.cu-item {
|
||||||
|
transition: all 0.2s ease-in-out 0s;
|
||||||
|
-webkit-transform: translateX(0.5px);
|
||||||
|
transform: translateX(0rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list>.cu-item:last-child:after, .cu-list.menu>.cu-item:last-child:after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-border {
|
||||||
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -75,21 +75,40 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 屏蔽设置 模态框 -->
|
<!-- 屏蔽设置 模态框 -->
|
||||||
<view class="cu-modal" :class="isShowShieldSet?'show':''">
|
<view class="cu-modal" :class="modalName=='shieldSetModal'?'show':''">
|
||||||
<view class="cu-dialog">
|
<view class="cu-dialog">
|
||||||
<view class="cu-bar bg-white justify-end">
|
<view class="cu-bar bg-white justify-end">
|
||||||
<view class="content">屏蔽设置</view>
|
<view class="content">选品广场设置</view>
|
||||||
<view class="action" @tap="hideModal">
|
<view class="action" @tap="hideModal">
|
||||||
<text class="cuIcon-close text-bold text-red"></text>
|
<text class="cuIcon-close text-bold text-red"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="padding-xl">
|
<view class="padding-xl">
|
||||||
<view class="margin-bottom">对所有客户屏蔽有竞争关系区域的服务和商品类目</view>
|
<view class="flex align-start margin-bottom-xl padding-lr">
|
||||||
<view>
|
<view class="margin-right">选品广场:</view>
|
||||||
<text class="margin-right">屏蔽请勾选: </text>
|
<view class="margin-right">
|
||||||
<checkbox style="transform:scale(0.7)" class="round sm main-color" :value="agreeShield" :checked="agreeShield"
|
<view class="margin-bottom-sm">
|
||||||
@click="changeAgreeShield">
|
<text class="margin-right-xs">全选</text>
|
||||||
</checkbox>
|
<checkbox style="transform:scale(0.9)" class="main-color" :value="agreeShield" :checked="agreeShield === 0"
|
||||||
|
@click="changeAgreeShield(0)">
|
||||||
|
</checkbox>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<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>
|
||||||
|
<view class="text-left">
|
||||||
|
<view>逐条选品</view>
|
||||||
|
<view class="text-main-color" @tap="showModal('categoryModal')">去选品</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="text-main-color">(注:你所提供的服务及类目以你同手机号上架或入驻为准)</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="cu-bar bg-white">
|
<view class="cu-bar bg-white">
|
||||||
|
|
@ -99,22 +118,32 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 类目抽屉 -->
|
||||||
|
<view class="DrawerClose" :class="modalName=='categoryModal'?'show':''" @tap="showModal('shieldSetModal')">
|
||||||
|
<view class="cuIcon-roundcheckfill text-main-color"></view>
|
||||||
|
<view class="cuIcon-roundclosefill"></view>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y class="DrawerWindow bg-gray" :class="modalName=='categoryModal'?'show':''">
|
||||||
|
<multiselect-vertical-nav :list="categoryList" :containerHeight="'calc(100vh - 200rpx)'"></multiselect-vertical-nav>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
|
import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
|
||||||
|
import multiselectVerticalNav from '@/components/multi-level-nav/multiselect-vertical-nav.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
horizontalNameCard
|
horizontalNameCard,
|
||||||
|
multiselectVerticalNav
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myOperator: {},
|
myOperator: {},
|
||||||
operBtn: [{
|
operBtn: [{
|
||||||
code: 'ShieldSet',
|
code: 'ShieldSet',
|
||||||
name: '屏蔽设置'
|
name: '选品广场'
|
||||||
}, {
|
}, {
|
||||||
code: '',
|
code: '',
|
||||||
name: '加价申请'
|
name: '加价申请'
|
||||||
|
|
@ -129,14 +158,20 @@
|
||||||
name: '添加团队'
|
name: '添加团队'
|
||||||
}, {
|
}, {
|
||||||
code: '',
|
code: '',
|
||||||
name: '审批团队'
|
name: '组建/审批区域团队'
|
||||||
}],
|
}],
|
||||||
agreeShield: false,
|
agreeShield: 0,
|
||||||
isShowShieldSet: false
|
modalName: null,
|
||||||
|
categoryList: [],
|
||||||
|
chosenCategoryIds: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.loadData();
|
this.loadData();
|
||||||
|
this.bindEvent();
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
this.offBindEvent();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async loadData() {
|
async loadData() {
|
||||||
|
|
@ -145,7 +180,8 @@
|
||||||
this.loadMyInfo({
|
this.loadMyInfo({
|
||||||
customerId: this.curUserInfo.customerId,
|
customerId: this.curUserInfo.customerId,
|
||||||
isDistributor: true
|
isDistributor: true
|
||||||
});
|
});
|
||||||
|
this.loadCategory();
|
||||||
},
|
},
|
||||||
async loadMyInfo(params) {
|
async loadMyInfo(params) {
|
||||||
let res = await this.$request.qryCustomerList(params);
|
let res = await this.$request.qryCustomerList(params);
|
||||||
|
|
@ -156,15 +192,33 @@
|
||||||
desc: '合伙人'
|
desc: '合伙人'
|
||||||
}];
|
}];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hideModal(e) {
|
async loadCategory(params) {
|
||||||
this.isShowShieldSet = false
|
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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showModal(modalName) {
|
||||||
|
this.modalName = modalName;
|
||||||
|
},
|
||||||
|
hideModal() {
|
||||||
|
this.modalName = null
|
||||||
|
},
|
||||||
|
bindEvent() {
|
||||||
|
uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.tmpChooseCategory);
|
||||||
|
},
|
||||||
|
offBindEvent() {
|
||||||
|
uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
|
||||||
},
|
},
|
||||||
doSomething(e) {
|
doSomething(e) {
|
||||||
const cur = e.currentTarget.dataset.cur;
|
const cur = e.currentTarget.dataset.cur;
|
||||||
switch (cur) {
|
switch (cur) {
|
||||||
case 'ShieldSet':
|
case 'ShieldSet':
|
||||||
this.isShowShieldSet = !this.isShowShieldSet;
|
this.showModal('shieldSetModal')
|
||||||
break;
|
break;
|
||||||
case 'showTeamMembers':
|
case 'showTeamMembers':
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|
@ -175,8 +229,12 @@
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
changeAgreeShield() {
|
changeAgreeShield(agreeShield) {
|
||||||
this.agreeShield = !this.agreeShield;
|
this.agreeShield = agreeShield;
|
||||||
|
},
|
||||||
|
tmpChooseCategory(chosenCategoryIds) {
|
||||||
|
this.chosenCategoryIds = chosenCategoryIds;
|
||||||
|
console.log("chosenCategoryIds=" + JSON.stringify(this.chosenCategoryIds))
|
||||||
},
|
},
|
||||||
confirmShield(e) {},
|
confirmShield(e) {},
|
||||||
showCertificationForm() {
|
showCertificationForm() {
|
||||||
|
|
@ -211,5 +269,53 @@
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-left: 5%;
|
margin-left: 5%;
|
||||||
margin-right: 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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 人员下辖团队统计 -->
|
<!-- 人员下辖团队统计 -->
|
||||||
<view class="cu-list grid no-border col-4 solid-top margin-top-sm">
|
<!-- <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 member.analyseItems" v-if="index < 4 && item.type === 'common'">
|
<view class="cu-item" :class="index == 2 ? 'solid-left' : ''" v-for="(item, index) in member.analyseItems" v-if="index < 4 && item.type === 'common'">
|
||||||
<view class="margin-bottom-xs">{{item.title}}</view>
|
<view class="margin-bottom-xs">{{item.title}}</view>
|
||||||
<view class="text-red" v-if="item.unit === 'yuan'">
|
<view class="text-red" v-if="item.unit === 'yuan'">
|
||||||
|
|
@ -37,8 +37,8 @@
|
||||||
{{item.value}}{{item.unit}}
|
{{item.value}}{{item.unit}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="cu-list grid no-border col-4 solid-top">
|
<view class="cu-list grid no-border col-4 solid-top margin-top-sm">
|
||||||
<view class="cu-item" v-for="(item, index) in member.analyseItems" v-if="index >= 4 && item.type === 'common'">
|
<view class="cu-item" v-for="(item, index) in member.analyseItems" v-if="index >= 4 && item.type === 'common'">
|
||||||
<view class="margin-bottom-xs">{{item.title}}</view>
|
<view class="margin-bottom-xs">{{item.title}}</view>
|
||||||
<view class="text-red" v-if="item.unit === 'yuan'">
|
<view class="text-red" v-if="item.unit === 'yuan'">
|
||||||
|
|
@ -96,6 +96,7 @@
|
||||||
params.pageSize = this.pageSize;
|
params.pageSize = this.pageSize;
|
||||||
params.customerPlace = this.curUserInfo.customerId;
|
params.customerPlace = this.curUserInfo.customerId;
|
||||||
params.isDistributor = true;
|
params.isDistributor = true;
|
||||||
|
params.placeStatus = 2;
|
||||||
params.status = 0;
|
params.status = 0;
|
||||||
this.$refs.loadStatusBar.showLoading();
|
this.$refs.loadStatusBar.showLoading();
|
||||||
try {
|
try {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue