wangjunxiao/crmchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
feng0207
2026-08-11 22:22:10 +08:00
commit 5e312c1266
6985 changed files with 1061169 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/pages/view/customerServer/customerMessage.vue
+336
View File
@@ -0,0 +1,336 @@
<template>
<div class="container">
<lay-out titleName="客户信息" headerColor="#fff">
<!-- <div slot="hander_handle">
<div @click="changeInputRadio"><span class="iconfont" :class="{ selected: inputRadio }">&#xe6b2;</span></div>
</div> -->
<div slot="content" class="content">
<div class="content_header">
<div class="content_header_avar"><image :src="userDetilsData.avatar" mode="widthFix"></image></div>
<div class="content_header_userName">
<span>{{ userDetilsData.nickname }}</span>
</div>
<div class="content_header_tag">
<span>{{ formType[userDetilsData.type] }}</span>
</div>
</div>
<div class="content_message">
<div class="content_message_item">
<div class="content_message_item_label"><span>备注昵称</span></div>
<div class="content_message_item_value">
<input type="text" v-model="userDetilsData.remark_nickname" placeholder="请输入备注昵称" v-if="inputRadio" />
<span v-else>{{ userDetilsData.remark_nickname ? userDetilsData.remark_nickname : '暂无数据' }}</span>
</div>
</div>
<div class="content_message_item">
<div class="content_message_item_label"><span>手机号</span></div>
<div class="content_message_item_value">
<input type="text" v-model="userDetilsData.phone" placeholder="请输入客户联系方式" v-if="inputRadio" />
<span v-else>{{ userDetilsData.phone ? userDetilsData.phone : '暂无数据' }}</span>
</div>
</div>
<div class="content_message_item">
<div class="content_message_item_label"><span>性别</span></div>
<div class="content_message_item_value" v-if="inputRadio">
<picker mode="selector" :range="sexArr" range-key="label" @change="changeSex">
<view>{{ sexType[userDetilsData.sex] }}</view>
</picker>
</div>
<div class="content_message_item_value" v-else>
<span>{{ sexType[userDetilsData.sex] }}</span>
</div>
</div>
<div class="content_message_item">
<div class="content_message_item_label"><span>备注</span></div>
<div class="content_message_item_value">
<input type="text" v-model="userDetilsData.remarks" placeholder="请输入备注" v-if="inputRadio" />
<span v-else>{{ userDetilsData.remarks ? userDetilsData.remarks : '暂无数据' }}</span>
</div>
</div>
<div class="content_message_item" @click="openUserTag">
<div class="content_message_item_label"><span>用户标签</span></div>
<div class="content_message_item_value flex">
<div class="tag_list">
<span v-for="(item, index) in userDetilsData.label" :key="index">{{ item.label }}</span>
</div>
<div class="to_link" v-if="inputRadio"><span class="iconfont font">&#xe6c3;</span></div>
</div>
</div>
<div class="content_message_item" @click="editGroup">
<div class="content_message_item_label"><span>分组</span></div>
<div class="content_message_item_value">
<span>{{ userGroupConcat[userDetilsData.group_id] }}</span>
</div>
<div class="to_link" v-if="inputRadio"><span class="iconfont">&#xe6c3;</span></div>
</div>
<div class="content_message_item">
<div class="content_message_item_label"><span>用户类型</span></div>
<div class="content_message_item_value">
<span>{{ formType[userDetilsData.type] }}</span>
</div>
</div>
<!-- <div class="content_message_item">
<div class="content_message_item_label"><span>生日</span></div>
<div class="content_message_item_value"><span>9月5号</span></div>
</div> -->
<div class="content_message_item marginTop16" @click="handelComplaint">
<div class="content_message_item_label"><span>投诉</span></div>
<div class="content_message_item_value">
<span>{{ formType[userDetilsData.type] }}</span>
</div>
</div>
<div class="content_message_item marginTop16" @click="handelblock">
<div class="content_message_item_label"><span>拉黑</span></div>
<div class="content_message_item_value">
<span>{{ formType[userDetilsData.type] }}</span>
</div>
</div>
</div>
<!-- <div class="userTag_container_handle" v-if="inputRadio" @click="handleEditUserMessage">
<div class="userTag_container_handle_button"><span>确认修改</span></div>
</div> -->
<!-- <div class="userTag_container_handle" @click="toMessage">
<div class="userTag_container_handle_button"><span>发消息</span></div>
</div> -->
</div>
</lay-out>
<uni-popup ref="userTagModel" type="center" animation>
<div class="userTag_container">
<div class="userTag_container_title">
<div class="userTag_container_title_message"><span>用户标签</span></div>
<div class="closeModel" @click="closeUserTagModel"><span class="iconfont">&#xe6c6;</span></div>
</div>
<div class="userTag_container_list">
<div class="userTag_container_list_item" :class="{ mg40: index == 0 }" v-for="(item, index) in userTagList" :key="index">
<div class="userTag_container_list_item_label">
<span>{{ item.name }}</span>
</div>
<div class="userTag_container_list_item_value">
<span :class="{ select: val.disabled }" v-for="(val, i) in item.label" :key="i" @click="selectTags(val)">{{ val.label }}</span>
</div>
</div>
</div>
<div class="userTag_container_handle" @click="handleSetTags">
<div class="userTag_container_handle_button" ><span>确定</span></div>
</div>
</div>
</uni-popup>
<uni-popup ref="userGroupModel" type="center" animation>
<div class="userTag_container">
<div class="userTag_container_title">
<div class="userTag_container_title_message"><span>用户分组</span></div>
<div class="closeModel" @click="closeUserGroupModel"><span class="iconfont">&#xe6c6;</span></div>
</div>
<div class="userTag_container_list">
<div class="userTag_container_list_item">
<div class="userTag_container_list_item_value">
<span :class="{ select: val.id == selectGroupId }" v-for="(val, i) in userGroup" :key="i" @click="selectGroup(val)">{{ val.group_name }}</span>
</div>
</div>
</div>
<div class="userTag_container_handle" @click="handleSetGroup">
<div class="userTag_container_handle_button"><span>确定</span></div>
</div>
</div>
</uni-popup>
</div>
</template>
<script>
import { Toast, navigateTo, Modal } from 'pages/utils/uniApi.js';
import http from 'pages/api/index';
import api from 'pages/api/api.js';
export default {
data() {
return {
inputRadio: true,
selectGroupId: '',
userTagList: [],
formType: {
0: 'pc',
1: '微信',
2: '小程序',
3: 'H5'
},
sexType: {
0: '未知',
1: '男',
2: '女'
},
sexArr: [
{
value: 0,
label: '未知'
},
{
value: 1,
label: '男'
},
{
value: 2,
label: '女'
}
],
userGroup: [], // 用户分组
userGroupConcat: {},
queryUserData: {}, // url上挂载的参数
userDetilsData: {} // 用户详细信息
};
},
onLoad(opt) {
this.queryUserData = opt;
this.initUserGroup();
},
onNavigationBarButtonTap() {
this.handleEditUserMessage();
},
methods: {
// 拉黑
handelblock() {
Modal('拉黑用户', `"${this.userDetilsData.nickname}"将被拉黑，请问是否继续？`).then(() => {
http(api.putUserStatus, { userId: this.userDetilsData.user_id }).then(res => {
Toast('拉黑成功');
this.$store.commit('setRefresh', true);
navigateTo(4, '/pages/view/messageList/index');
});
});
},
// 点击投诉按钮，跳转投诉界面
handelComplaint() {
navigateTo(1, '/pages/view/customerServer/complaint?id='+this.userDetilsData.id);
},
// 获取用户详细信息
initData() {
console.log(this.queryUserData);
http(api.userInfo, this.queryUserData).then(res => {
this.userDetilsData = res;
this.selectGroupId = this.userDetilsData.group_id;
});
},
// inputRadio 为 true 时，可以修改客户信息
changeInputRadio() {
this.inputRadio = !this.inputRadio;
},
// 获取所有分组 ---> 获取详细信息
initUserGroup() {
http(api.UserGroup).then(res => {
this.userGroup = res;
this.userGroup.forEach(item => {
this.userGroupConcat[item.id] = item.group_name;
});
this.initData();
});
},
// 打开用户标签选择选项
openUserTag() {
if (!this.inputRadio) {
Toast('请打开修改开关');
return;
}
http(api.userLabelSelect, { id: this.queryUserData.user_id }).then(res => {
this.userTagList = res;
this.$refs.userTagModel.open('center');
});
},
// 选择标签
selectTags(item) {
this.$set(item, 'disabled', !item.disabled);
},
// 选择性别
changeSex(e) {
this.userDetilsData.sex = e.detail.value;
},
// 选择分组弹框
editGroup() {
if (!this.inputRadio) {
Toast('请打开修改开关');
return;
}
this.$refs.userGroupModel.open();
},
// 关闭选择分组
closeUserGroupModel() {
this.$refs.userGroupModel.close();
},
// 选择分组
selectGroup(item) {
if (this.selectGroupId == item.id) {
this.selectGroupId = '';
return;
}
this.selectGroupId = item.id;
},
// 确认选择分组
handleSetGroup() {
this.userDetilsData.group_id = this.selectGroupId;
http(api.setUserGroup, {
id: this.userDetilsData.group_id,
userId: this.userDetilsData.id
}).then(res => {
Toast('用户分组设置完成');
this.$refs.userGroupModel.close();
});
},
// 设置标签
handleSetTags() {
let postData = {
label_ids: [],
un_label_ids: [],
userId: this.queryUserData.user_id
},Label = [];
this.userTagList.forEach(item => {
item.label.forEach(val => {
if (val.disabled) {
postData.label_ids.push(val.id);
Label.push(val)
} else {
postData.un_label_ids.push(val.id);
}
});
});
http(api.putUserLabel, postData).then(res => {
this.$refs.userTagModel.close();
// this.initData();
this.selectGroupId = postData.label_ids
this.userDetilsData.label = Label
});
},
// 关闭用户标签选项
closeUserTagModel() {
this.$refs.userTagModel.close();
},
// 确认修改用户信息
handleEditUserMessage() {
http(api.userUpdateUser, { ...this.userDetilsData, userId: this.userDetilsData.id }).then(res => {
// this.inputRadio = !this.inputRadio;
this.initUserGroup();
Toast('修改成功');
});
},
toMessage() {
navigateTo('2', '/pages/view/customerServer/index', this.queryUserData);
}
}
};
</script>
<style scoped lang="less">
@import url('./less/customerMessage.less');
</style>