410 lines
11 KiB
Vue
410 lines
11 KiB
Vue
<template>
|
||
<view class="IM-container">
|
||
<status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
|
||
<view class="IM-setting">
|
||
<view class="IM-status">
|
||
<image
|
||
class="img"
|
||
:src="
|
||
msgInfo.mine.user_avatar ||
|
||
'../../static/images/chat/user-avatar.jpg'
|
||
"
|
||
/>
|
||
<text>{{ msgInfo.mine.user_nickname }}</text>
|
||
<!-- <text class="status-color"></text> -->
|
||
<!-- <u-icon name="arrow-down">arrow-down</u-icon> -->
|
||
</view>
|
||
<view class="setting-icon-block">
|
||
<u-icon
|
||
class="u-icon icon-kefu"
|
||
custom-prefix="custom-icon-kefu custom-icon"
|
||
size="24"
|
||
color="#666"
|
||
@click="openPhoneDial"
|
||
></u-icon>
|
||
<u-icon
|
||
class="u-icon icon-shezhi"
|
||
custom-prefix="custom-icon-shezhi custom-icon"
|
||
size="20"
|
||
color="#666"
|
||
@click="skipuIMsetting"
|
||
></u-icon>
|
||
</view>
|
||
</view>
|
||
<favorite-loading
|
||
class="IM-loading"
|
||
v-show="loading"
|
||
:color="'#fe4119'"
|
||
text=""
|
||
animation="spinner15"
|
||
></favorite-loading>
|
||
<view class="tabs-block">
|
||
<!-- <tui-tabs
|
||
:tabs="tabs"
|
||
:currentTab="currentTab"
|
||
bottom="50%"
|
||
:backgroundColor="'#f2f2f2'"
|
||
:width="300"
|
||
:itemWidth="'50%'"
|
||
:bold="true"
|
||
color="#000"
|
||
selectedColor="#fd806b"
|
||
:sliderWidth="180"
|
||
:sliderHeight="56"
|
||
sliderBgColor="#fff"
|
||
:unlined="true"
|
||
@change="handleTab"
|
||
></tui-tabs> -->
|
||
<view class="IM-msg-content">
|
||
<view class="IM-msg-node" v-if="msgList.length <= 0 && !loading">
|
||
<view class="IM-msg-node-bg"></view>
|
||
<view class="IM-msg-node-tips">暂无消息</view>
|
||
</view>
|
||
<view class="IM-msg-block">
|
||
<scroll-view
|
||
class="uni-swiper-list"
|
||
scroll-y
|
||
:scroll-top="0"
|
||
enhanced
|
||
:show-scrollbar="false"
|
||
>
|
||
<view
|
||
class="user-info-block"
|
||
v-for="(item, index) of msgList"
|
||
:key="index"
|
||
>
|
||
<view class="user-img-content">
|
||
<view class="user-img-block">
|
||
<image
|
||
class="img"
|
||
:src="
|
||
item.avatar || '../../static/images/chat/user-avatar.jpg'
|
||
"
|
||
/>
|
||
</view>
|
||
<u-badge
|
||
class="im-weidu-badge"
|
||
:show="true"
|
||
shape="horn"
|
||
:value="item.weidu || 0"
|
||
max="99"
|
||
></u-badge>
|
||
</view>
|
||
<view class="msg-info-block" @click="skiupMsg(item)">
|
||
<view class="msg-title">{{ item.username }}</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
<!-- <view class="msg-info"
|
||
>老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天</view
|
||
> -->
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<tabbar tabbarName="IM"></tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tuiTabs from "../../components/tui-tabs.vue";
|
||
// import layui from './layui/layui.js'
|
||
import { GetImConfig } from "../../api/im";
|
||
import statusBar from "../../components/status-bar.vue";
|
||
import { mapState } from "vuex";
|
||
import tabbar from "@/components/tabbar/tabbar.vue";
|
||
import favoriteLoading from "@/components/favorite-loading/favorite-loading.vue";
|
||
export default {
|
||
components: {
|
||
tuiTabs,
|
||
statusBar,
|
||
tabbar,
|
||
favoriteLoading,
|
||
},
|
||
data() {
|
||
return {
|
||
currentTab: 0,
|
||
tabs: [
|
||
{
|
||
name: "今日未回复",
|
||
num: 3,
|
||
},
|
||
{
|
||
name: "顾客消息",
|
||
},
|
||
{
|
||
name: "平台通知",
|
||
},
|
||
],
|
||
msgInfo: {
|
||
mine: {
|
||
user_nickname: "阿凡达",
|
||
},
|
||
},
|
||
msgList: [],
|
||
loading: false,
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getImConfig();
|
||
},
|
||
onLoad() {},
|
||
computed: {
|
||
...mapState("user", ["uid", "userInfo", "imWeidu", "getMsg"]),
|
||
},
|
||
watch: {
|
||
imWeidu: {
|
||
handler(newValue, oldValue) {
|
||
if (newValue) {
|
||
this.msgList = this.msgList.map((item) => {
|
||
if (this.imWeidu.hasOwnProperty(item.id) && item.id !== "userId") {
|
||
// 如果存在，则将obj中对应的值合并到当前项
|
||
return {
|
||
...item, // 保留原数组项的所有属性
|
||
...this.imWeidu[item.id], // 合并obj中对应id的值
|
||
};
|
||
}
|
||
return item;
|
||
});
|
||
}
|
||
},
|
||
deep: true,
|
||
},
|
||
getMsg: {
|
||
handler(newValue, oldValue) {
|
||
if (newValue) {
|
||
const exists = this.msgList.some((item) => item.id == newValue.id);
|
||
|
||
if (!exists) {
|
||
const newItem = {
|
||
user_id: newValue.user_id,
|
||
friend_id: newValue.friend_id,
|
||
username: newValue.username,
|
||
avatar: newValue.avatar,
|
||
user_nickname: newValue.username,
|
||
user_avatar: newValue.avatar,
|
||
rid: 2,
|
||
id: newValue.id,
|
||
weidu: 1,
|
||
};
|
||
|
||
this.msgList = [...this.msgList, newItem];
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
async getImConfig() {
|
||
this.loading = true;
|
||
let res = await GetImConfig({ type: "json", uid: this.uid });
|
||
|
||
console.log(res);
|
||
if (res && res.status == 200) {
|
||
this.msgInfo = res.data;
|
||
if (res.data.friend.length > 0) {
|
||
let _imWeiDu = uni.getStorageSync("imWeiDu");
|
||
if (_imWeiDu) {
|
||
this.msgList = res.data.friend[0].list.map((item) => {
|
||
if (_imWeiDu.hasOwnProperty(item.id) && item.id !== "userId") {
|
||
return {
|
||
...item,
|
||
..._imWeiDu[item.id],
|
||
};
|
||
}
|
||
return item;
|
||
});
|
||
} else {
|
||
this.msgList = res.data.friend[0].list;
|
||
}
|
||
}
|
||
// this.connectSocket(this.userInfo);
|
||
}
|
||
this.loading = false;
|
||
},
|
||
handleTab(e) {
|
||
this.currentTab = e.index;
|
||
},
|
||
skiupMsg(item) {
|
||
console.log(item);
|
||
this.$store.commit("user/REMOVE_IM_KEY", item.id.toString());
|
||
uni.navigateTo({
|
||
url: `/pages/IM/IMmsgContent?item=${JSON.stringify(item)}`,
|
||
});
|
||
},
|
||
//暂时不使用平台发信息给商家IM，暂时使用不了
|
||
senMsgAdmin() {
|
||
let item = {
|
||
user_friend_id: 36,
|
||
user_id: 10001,
|
||
friend_id: 10001,
|
||
friend_note: "",
|
||
user_friend_addtime: "2025-05-09 10:03:33",
|
||
friend_state: 2,
|
||
friend_invite: 2,
|
||
username: "系统客服",
|
||
avatar:
|
||
"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
|
||
sign: "",
|
||
level_name: "v1",
|
||
user_nickname: "系统客服",
|
||
user_avatar:
|
||
"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
|
||
user_sign: "",
|
||
user_level_name: "v1",
|
||
rid: 2,
|
||
id: 776395489,
|
||
};
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/IM/IMmsgContent?item=${JSON.stringify(item)}`,
|
||
});
|
||
},
|
||
openPhoneDial(){
|
||
uni.makePhoneCall({
|
||
phoneNumber: '17777525395',
|
||
// 可选：添加拨号失败回调
|
||
fail: (err) => {
|
||
console.log('拨号失败', err);
|
||
this.$refs.uToast.show({ title: '拨号失败，请稍后重试' });
|
||
}
|
||
});
|
||
},
|
||
skipuIMsetting() {
|
||
uni.navigateTo({
|
||
url: "/pages/IM/IMsetting",
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.IM-container {
|
||
.IM-setting {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12rpx 30rpx;
|
||
border-bottom: 1px solid rgba(238, 238, 238, 0.5);
|
||
background: #fff;
|
||
|
||
.IM-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
.img {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 100%;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.setting-icon-block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
}
|
||
}
|
||
.tabs-block {
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.IM-msg-content {
|
||
.IM-msg-block {
|
||
padding: 0;
|
||
background: #fff;
|
||
.uni-swiper-list {
|
||
height: calc(100vh - 120px);
|
||
|
||
.user-info-block {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 30rpx;
|
||
border-bottom: 1px solid rgba(238, 238, 238, 0.5);
|
||
padding-bottom: 30rpx;
|
||
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
|
||
.user-img-content {
|
||
position: relative;
|
||
.user-img-block {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
background: #eee;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.im-weidu-badge {
|
||
position: absolute;
|
||
right: -50%;
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.msg-info-block {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-left: 24rpx;
|
||
|
||
.msg-title {
|
||
// font-weight: bold;
|
||
}
|
||
|
||
.msg-info {
|
||
color: #7f7f7f;
|
||
width: 38%; /* 设置容器宽度 */
|
||
white-space: nowrap; /* 防止文本换行 */
|
||
overflow: hidden; /* 隐藏溢出的文本 */
|
||
text-overflow: ellipsis; /* 显示省略号 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.IM-msg-node {
|
||
display: flex;
|
||
flex-flow: column;
|
||
align-items: center;
|
||
margin-top: 20%;
|
||
background: #fff;
|
||
|
||
.IM-msg-node-bg {
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
background-image: url("../../static/no-im-msg.png");
|
||
background-size: 100% 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.IM-msg-node-tips {
|
||
color: #aaaaaa;
|
||
}
|
||
}
|
||
}
|
||
.u-icon {
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
.icon-kefu {
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.IM-loading {
|
||
margin: 60% auto;
|
||
display: flex;
|
||
}
|
||
}
|
||
</style>
|