标签管理页面
This commit is contained in:
浅念
+152
-3
@@ -77,6 +77,14 @@
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Cstomertag')}}</view>
|
||||
<view class="right select" @click="showtag = true">
|
||||
<view class="" :class="['content2', { placeholder: !grade_name }]">{{grade_name || $t('customer.Cstomertaginput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Country')}}</view>
|
||||
<view class="right select" @click="showarea = true">
|
||||
@@ -118,7 +126,8 @@
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showcartype" @cancel="cancel('showcartype')" @close="close('showcartype')" :columns="carTypeList" keyName="name" @confirm="cartypesChange"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showgrade" @cancel="cancel('showgrade')" @close="close('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker>
|
||||
<!-- <u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showarea" @cancel="cancel('showarea')" @close="close('showarea')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker> -->
|
||||
<u-popup closeOnClickOverlay :show="showarea" mode="bottom" :round="10" @close="close('showarea')">
|
||||
<!-- 国家选择 -->
|
||||
<u-popup closeOnClickOverlay :show="showarea" mode="bottom" :round="10" @close="close('showarea')">
|
||||
<view class="text">
|
||||
<view class="qx" @click="close('showarea') ">{{$t('cancel')}}</view>
|
||||
<view class="qd" @click="arerfn">{{$t('confirm')}}</view>
|
||||
@@ -148,7 +157,26 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 客户标签 -->
|
||||
<u-popup closeOnClickOverlay :show="showtag" mode="bottom" :round="10" title="客户标签" @close="close('showtag')" :closeable="true" >
|
||||
<view class="popup-content">
|
||||
<scroll-view scroll-y class="tag-list">
|
||||
<view
|
||||
v-for="(item, index) in taglist"
|
||||
:key="index"
|
||||
class="tags"
|
||||
>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="row">
|
||||
<view class="col4 tagitem" v-for="(item1, index1) in item.child" :class="{ 'tagactive': isActive(item1.pid, item1.id) }" @click="tagSelect(item1)" :key="index1">
|
||||
{{ item1.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@@ -157,10 +185,12 @@
|
||||
data() {
|
||||
return {
|
||||
actives:'',
|
||||
activetags:'',
|
||||
searchKeyword: "", // 搜索关键词
|
||||
selectedLabel: "", // 选中的值（显示在输入框中）
|
||||
filteredOptions: [], // 过滤后的数据
|
||||
mapUrl: '',
|
||||
showtag: false,
|
||||
showmap: false,
|
||||
showmagnitude: false,
|
||||
showgrade: false,
|
||||
@@ -192,7 +222,87 @@
|
||||
lat:'',
|
||||
lng:'',
|
||||
},
|
||||
location:{}
|
||||
location:{},
|
||||
activeMap: {}, // 存储每个父级下选中的子项 { 父ID: 子ID }
|
||||
taglist:[
|
||||
{
|
||||
name:'客户价值',
|
||||
id:'1',
|
||||
child:[
|
||||
{name:'高价值',id:1,pid:1},
|
||||
{name:'中价值',id:2,pid:1},
|
||||
{name:'低价值',id:3,pid:1},
|
||||
{name:'潜在高价值',id:4,pid:1},
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'生命周期',
|
||||
id:'2',
|
||||
child:[
|
||||
{name:'新客户',id:5,pid:2},
|
||||
{name:'活跃',id:6,pid:2},
|
||||
{name:'沉默',id:7,pid:2},
|
||||
{name:'流失',id:8,pid:2},
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'行为标签',
|
||||
id:'3',
|
||||
child:[
|
||||
{name:'高频购买',id:9,pid:3},
|
||||
{name:'大单',id:10,pid:3},
|
||||
{name:'促销敏感',id:11,pid:3},
|
||||
{name:'忠诚',id:12,pid:3},
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'需求标签',
|
||||
id:'4',
|
||||
child:[
|
||||
{name:'价格敏感',id:13,pid:4},
|
||||
{name:'品质追求',id:14,pid:4},
|
||||
{name:'服务',id:15,pid:4},
|
||||
{name:'定制化',id:16,pid:4},
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'来源标签',
|
||||
id:'5',
|
||||
child:[
|
||||
{name:'线上',id:17,pid:5},
|
||||
{name:'线下',id:18,pid:5},
|
||||
{name:'推荐',id:19,pid:5},
|
||||
{name:'合作伙伴',id:20,pid:5},
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'风险标签',
|
||||
id:'6',
|
||||
child:[
|
||||
{name:'高',id:21,pid:6},
|
||||
{name:'中',id:22,pid:6},
|
||||
{name:'低',id:23,pid:6},
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'满意度标签',
|
||||
id:'7',
|
||||
child:[
|
||||
{name:'高',id:24,pid:7},
|
||||
{name:'中',id:25,pid:7},
|
||||
{name:'低',id:26,pid:7},
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'忠诚度标签',
|
||||
id:'8',
|
||||
child:[
|
||||
{name:'高',id:27,pid:8},
|
||||
{name:'中',id:28,pid:8},
|
||||
{name:'低',id:29,pid:8},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -354,6 +464,13 @@
|
||||
close(val){
|
||||
this[val] = false
|
||||
},
|
||||
//标签点击
|
||||
tagSelect(item) {
|
||||
this.$set(this.activeMap, item.pid, item.id);
|
||||
},
|
||||
isActive(parentId, childId) {
|
||||
return this.activeMap[parentId] === childId;
|
||||
},
|
||||
//提交保存
|
||||
saveFn(){
|
||||
if(this.form.contacts==''){
|
||||
@@ -524,4 +641,36 @@
|
||||
padding: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 标签弹框
|
||||
.tag-list{
|
||||
max-height: 900rpx;
|
||||
margin-top: 20rpx;
|
||||
.tags{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.name{
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.tagitem{
|
||||
background: #ECF2FF;
|
||||
border-radius: 8px;
|
||||
color: #3471FF;
|
||||
text-align: center;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
.row{
|
||||
width: 100%;
|
||||
}
|
||||
.col4{
|
||||
display: inline-block;
|
||||
margin: 4px 3px;
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
.tagactive{
|
||||
background: #3471FF !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -27,6 +27,22 @@
|
||||
<view class="btn" @click="editFn"><image src="/static/image/customer/edit.png" mode=""></image><text> {{$t('edtbtn')}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cells">
|
||||
<u-collapse :border="false">
|
||||
<u-collapse-item
|
||||
title="标签"
|
||||
name="Docs guide"
|
||||
:border="false"
|
||||
>
|
||||
<view class="">
|
||||
<view class="tags">潜在高价值</view>
|
||||
<view class="tags">活跃客户</view>
|
||||
<view class="tags">促销敏感</view>
|
||||
<view class="tags">促销敏</view>
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Cstomerfj')}}</view>
|
||||
<view class="right select" @click="showgrade = true">
|
||||
@@ -267,6 +283,16 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
::v-deep .u-cell__body{
|
||||
padding: 0px !important;
|
||||
|
||||
}
|
||||
::v-deep .u-collapse-item__content__text{
|
||||
padding: 10px 0px!important;
|
||||
}
|
||||
::v-deep .u-cell__title-text{
|
||||
font-size: 14px;
|
||||
}
|
||||
.u-m-lr-10{
|
||||
margin: 0px 10px;
|
||||
}
|
||||
@@ -290,11 +316,27 @@
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.cells{
|
||||
margin-bottom: 10px;
|
||||
background: #f6f6f6;
|
||||
padding:13px 15px;
|
||||
border-radius: 10px;
|
||||
.tags{
|
||||
display: inline-block;
|
||||
margin: 4px 3px;
|
||||
width: 31%;
|
||||
background: #ECF2FF;
|
||||
border-radius: 15px;
|
||||
color: #3471FF;
|
||||
text-align: center;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
}
|
||||
.cell{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 18px 20px;
|
||||
padding: 13px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
.item{
|
||||
@@ -315,6 +357,10 @@
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tagname{
|
||||
color: #726CFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
.content{
|
||||
padding: 10px 15px;
|
||||
background: #FFFFFF;
|
||||
|
||||
Reference in New Issue
Block a user