182 lines
4.1 KiB
Vue
182 lines
4.1 KiB
Vue
<template>
|
||
<view class="IM-container">
|
||
<view class="IM-setting">
|
||
<view class="IM-status">
|
||
<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 name="photo">arrow-down</u-icon>
|
||
<u-icon name="photo">arrow-down</u-icon>
|
||
</view>
|
||
</view>
|
||
<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-block">
|
||
<scroll-view
|
||
class="uni-swiper-list"
|
||
scroll-y
|
||
:scroll-top="0"
|
||
enhanced
|
||
:show-scrollbar="false"
|
||
>
|
||
<view class="user-info-block">
|
||
<view class="user-img-content">
|
||
<view class="user-img-block">
|
||
<image class="img" src="../../static/logo.png" />
|
||
</view>
|
||
</view>
|
||
<view class="msg-info-block">
|
||
<view class="msg-title">昨日#3单 用户名sssssssss</view>
|
||
<view class="msg-info"
|
||
>老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tuiTabs from "../../components/tui-tabs.vue";
|
||
// import layui from './layui/layui.js'
|
||
import { GetImConfig } from "../../api/im";
|
||
export default {
|
||
components: {
|
||
tuiTabs,
|
||
},
|
||
data() {
|
||
return {
|
||
currentTab: 0,
|
||
tabs: [
|
||
{
|
||
name: "今日未回复",
|
||
num: 3,
|
||
},
|
||
{
|
||
name: "顾客消息",
|
||
},
|
||
{
|
||
name: "平台通知",
|
||
},
|
||
],
|
||
msgInfo:{
|
||
mine:{
|
||
user_nickname:'阿凡达'
|
||
}
|
||
},
|
||
msgList:[]
|
||
};
|
||
},
|
||
onShow(){
|
||
this.getImConfig();
|
||
},
|
||
onLoad(){
|
||
|
||
},
|
||
created(){
|
||
// this.getImConfig();
|
||
},
|
||
methods: {
|
||
async getImConfig(){
|
||
let res = await GetImConfig({type:'json',uid:10001});
|
||
console.log(res);
|
||
if(res && res.status == 200){
|
||
this.msgInfo = res.data;
|
||
this.msgList = res.data.friend[0].list;
|
||
}
|
||
},
|
||
handleTab(e) {
|
||
this.currentTab = e.index;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.IM-container {
|
||
.IM-setting {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 32rpx 40rpx;
|
||
|
||
.IM-status {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.setting-icon-block {
|
||
display: flex;
|
||
}
|
||
}
|
||
.tabs-block {
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.IM-msg-content {
|
||
.IM-msg-block {
|
||
padding: 40rpx;
|
||
background: #fff;
|
||
.uni-swiper-list {
|
||
height: calc(100vh - 190px);
|
||
|
||
.user-info-block {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
|
||
.user-img-content {
|
||
.user-img-block {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.msg-info-block {
|
||
margin-left: 24rpx;
|
||
|
||
.msg-title {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.msg-info {
|
||
color: #7f7f7f;
|
||
width: 38%; /* 设置容器宽度 */
|
||
white-space: nowrap; /* 防止文本换行 */
|
||
overflow: hidden; /* 隐藏溢出的文本 */
|
||
text-overflow: ellipsis; /* 显示省略号 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |