标签功能
This commit is contained in:
+198
-39
@@ -24,24 +24,32 @@
|
||||
<view v-if="datas.describe!=''">备注: {{datas.describe}}</view>
|
||||
</view>
|
||||
<view class="edt">
|
||||
<!-- <view class="btn" @click="showtag = true"><image src="/static/image/customer/tagadd.png" mode=""></image><text> {{$t('addtag')}}</text></view> -->
|
||||
<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 class="top">
|
||||
<view class="item">{{$t('CustomerProfile')}}</view>
|
||||
<view class="right">
|
||||
<view class="btn"@click="showtag = true"><image src="/static/image/customer/tagadd.png" mode=""></image><text> {{$t('addtag')}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="datas.tags.length>0">
|
||||
<view class="conts" :class="{'expandeds':!expanded}">
|
||||
<view class="tags" v-for="(item, index) in datas.tags" :key="index">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="toggle" @click="expanded = !expanded">
|
||||
<text >
|
||||
{{ expanded ? $t('retract') : $t('expand') }}
|
||||
</text>
|
||||
<u-icon v-if="expanded" class="arrowright" name="arrow-up" size="16" color="#999999"></u-icon>
|
||||
<u-icon v-else class="arrowright" name="arrow-down" size="16" color="#999999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="nones">
|
||||
{{$t('CustomerProfilemag')}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Cstomerfj')}}</view>
|
||||
@@ -65,24 +73,34 @@
|
||||
<u-steps v-if="followList.length>0" :current="followList.length" direction="column" dot>
|
||||
<u-steps-item :title="item.type_txt" v-for="(item, index) in followList" :key="index">
|
||||
<view slot="desc" class="desc">
|
||||
<view class="" v-if="item.type==0">
|
||||
<view class="flex" v-if="item.type==0">
|
||||
<view class="">
|
||||
<view class="">
|
||||
<view class="lingh">
|
||||
{{$t('times')}} :{{item.created_at}}
|
||||
</view>
|
||||
<view class="">{{$t('address')}}:{{item.address}}</view>
|
||||
<view class="">{{$t('customer.Visitcontent')}}:{{item.audio_text}}</view>
|
||||
<view class="lingh">{{$t('customer.Visitcontent')}}:{{item.audio_text}}</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<image :src="item.oss_picture" mode=""></image>
|
||||
<!-- <image :src="item.oss_picture" mode=""></image> -->
|
||||
<u-album
|
||||
:urls="isurls(item.oss_picture)"
|
||||
:singleSize="80"
|
||||
keyName="src"
|
||||
></u-album>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<view class="">
|
||||
<view class="lingh">
|
||||
{{$t('times')}}:{{item.created_at}}
|
||||
</view>
|
||||
<view class="">
|
||||
<image :src="item.oss_picture" mode=""></image>
|
||||
<u-album
|
||||
:urls="isurls(item.oss_picture)"
|
||||
keyName="src"
|
||||
:singleSize="80"
|
||||
></u-album>
|
||||
<!-- <image :src="item.oss_picture" mode=""></image> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -91,23 +109,27 @@
|
||||
<empty :list="followList"></empty>
|
||||
</view>
|
||||
<view class="zw"></view>
|
||||
<!-- <view class="foot">
|
||||
<button class="btn" @click="nextFn">{{$t('submit')}}</button>
|
||||
</view> -->
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexfj" :show="showgrade" @cancel="cancel('showgrade')" @close="close('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker>
|
||||
|
||||
<!-- <u-popup :show="showmap" :round="10" mode="bottom" @close="mapclose">
|
||||
<view class="mapcont">
|
||||
<view class="header">
|
||||
<view class="cancel" @click="mapclose">取消</view>
|
||||
<view class="title">地图位置</view>
|
||||
<view class="confirm" @click="mapconfirm">确定</view>
|
||||
</view>
|
||||
<view class="map">
|
||||
<!-- 客户标签 -->
|
||||
<u-popup closeOnClickOverlay :show="showtag" mode="bottom" :round="10" @close="closetag('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.tags" :class="{ 'tagactive': isActive(item1.group_id, item1.id) }" @click="tagSelect(item1)" :key="index1">
|
||||
{{ item1.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup> -->
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -117,7 +139,9 @@
|
||||
data() {
|
||||
return {
|
||||
id:'',
|
||||
expanded:false,
|
||||
followList:[],
|
||||
showtag: false,
|
||||
showmap: false,
|
||||
showmagnitude: false,
|
||||
showgrade: false,
|
||||
@@ -131,7 +155,9 @@
|
||||
form: {
|
||||
grade:'',
|
||||
},
|
||||
datas:''
|
||||
datas:'',
|
||||
activeMap: {}, // 存储每个父级下选中的子项 { 父ID: 子ID }
|
||||
taglist:[]
|
||||
|
||||
}
|
||||
},
|
||||
@@ -141,6 +167,7 @@
|
||||
var that = this
|
||||
this.getGrade()
|
||||
this.customerdetailfn()
|
||||
this.tagGroup()
|
||||
|
||||
},
|
||||
onShow() {
|
||||
@@ -157,6 +184,13 @@
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
isurls(url){
|
||||
var urls=[]
|
||||
var obj={}
|
||||
obj.src = url
|
||||
urls.push(obj)
|
||||
return urls
|
||||
},
|
||||
gomap(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/map'
|
||||
@@ -182,6 +216,10 @@
|
||||
}
|
||||
}).then(res => {
|
||||
that.datas = res.data.data
|
||||
|
||||
that.datas.tags.forEach((item,index) => {
|
||||
that.$set(that.activeMap, item.group_id,item.id);
|
||||
})
|
||||
that.form = res.data.data
|
||||
that.select()
|
||||
})
|
||||
@@ -254,11 +292,49 @@
|
||||
close(val){
|
||||
this[val] = false
|
||||
},
|
||||
closetag(val){
|
||||
this[val] = false
|
||||
this.customerdetailfn()
|
||||
},
|
||||
editFn(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/editdetile?id='+this.id
|
||||
});
|
||||
},
|
||||
//标签
|
||||
tagGroup(){
|
||||
request({
|
||||
url:'tagGroup/list',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
this.taglist = res.data.data
|
||||
})
|
||||
},
|
||||
//标签点击
|
||||
tagSelect(item) {
|
||||
// 如果已选中则取消,否则设置选中
|
||||
this.$set(this.activeMap, item.group_id, this.activeMap[item.group_id] === item.id ? '' : item.id);
|
||||
console.log(this.activeMap)
|
||||
request({
|
||||
url:'tagGroup/updatePivot',
|
||||
method:'post',
|
||||
data:{
|
||||
customer_id: this.id,
|
||||
group_id:item.group_id,
|
||||
tag_id:this.activeMap[item.group_id]
|
||||
}
|
||||
}).then(res => {
|
||||
if(res.data.code!=0){
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
isActive(parentId, childId) {
|
||||
return this.activeMap[parentId] === childId;
|
||||
},
|
||||
nextFn(){
|
||||
request({
|
||||
url:'customer/save',
|
||||
@@ -316,20 +392,61 @@
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.expandeds{
|
||||
height: 33px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cells{
|
||||
margin-bottom: 10px;
|
||||
background: #f6f6f6;
|
||||
padding:13px 15px;
|
||||
border-radius: 10px;
|
||||
.top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #666666;
|
||||
}
|
||||
.btn{
|
||||
color: #3471FF;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
image{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.conts{
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.tags{
|
||||
display: inline-block;
|
||||
margin: 4px 3px;
|
||||
width: 31%;
|
||||
// width: 31%;
|
||||
background: #ECF2FF;
|
||||
border-radius: 15px;
|
||||
color: #3471FF;
|
||||
text-align: center;
|
||||
padding: 5px 0px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.toggle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
text{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.nones{
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.cell{
|
||||
@@ -372,6 +489,7 @@
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
image{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
@@ -448,10 +566,17 @@
|
||||
height:44px;
|
||||
}
|
||||
.desc{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
align-items: center;
|
||||
color: #999999;
|
||||
.lingh{
|
||||
line-height: 40px;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
@@ -473,4 +598,38 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签弹框
|
||||
.popup-content {
|
||||
padding: 20px;
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user