123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464 |
- <!-- 消息列表 -->
- <template>
- <navigator style="margin-top: 100upx;" v-if="IS_TOURIST==1||isTrader2 == 1 " url="../login/index"
- class="main_btn_m get_phone to_login">
- {{isTrader2 == 1?'去登陆商户':'未登录'}}
- </navigator>
- <scroll-view v-else class="conversations" scroll-y="true">
- <view class="tab_status_box" style="margin-top: 10upx;">
- <view class="tab_status_box_focus">消息列表
- </view>
- <view style="position: relative;" class="tab_status_box_no_focus">
- <navigator url="./notice">平台消息</navigator>
- <view v-if="user_info.ss_notice_unreaded>0" class="num">{{user_info.ss_notice_unreaded}}</view>
- </view>
- </view>
- <view style="background-color: #f7f7f7;height: 10upx;margin-top: 0upx;"></view>
- <view v-if="conversations.length !=0">
- <view @click="navigateToChat(conversation)" class="scroll-item" v-for="(conversation, key) in conversations"
- :key="key">
- <view class="item-head">
- <image style="border-radius: 100%;overflow: hidden;"
- :src="conversation.data.avatar||'../../static/user.png'" class="head-icon"></image>
- <view class="item-head_unread" v-if="conversation.unread">{{conversation.unread}}</view>
- </view>
- <view class="scroll-item_info">
- <view class="item-info-top">
- <text style="max-width: 380upx;"
- class="item-info-top_name nowrap">{{conversation.data.name||'用户名称'}}</text>
- <view style="display: flex;align-items: center;">
- <view style="background-color: #00c3b8;color: #FFFFFF;margin-right: 10upx;font-size: 24upx;height: 32upx;line-height: 32upx;width: 106upx;text-align: center;" v-if="conversation.userId.indexOf('userlogin')==0">官方客服</view>
- <view class="item-info-top_time nowrap">{{formatDate(conversation.lastMessage.timestamp)}}
- </view>
- </view>
- <!-- <view class="item-info-top_time">{{(conversation.lastMessage.timestamp)}}</view> -->
- </view>
- <view class="item-info-bottom">
- <view class="item-info-bottom-item">
- <view class="item-info-top_content" v-if="conversation.lastMessage.type == 'text'">
- {{conversation.lastMessage.payload.text}}
- </view>
- <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'video'">
- [视频消息]</view>
- <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'audio'">
- [语音消息]</view>
- <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'image'">
- [图片消息]</view>
- <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'file'">
- [文件消息]</view>
- <view class="item-info-top_content" v-else-if="conversation.lastMessage.type == 'order'">
- [自定义消息:订单]</view>
- <view class="item-info-top_content" v-else>[[未识别内容]]</view>
- <view class="item-info-bottom_action" @click.stop="removeConversation(conversation)"></view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="no-conversation" v-else>
- 当前没有会话
- </view>
- <view class="action-container" v-if="action.show">
- <view class="layer" @click="action.show = false"></view>
- <view class="action-box">
- <view class="action-item" @click="topConversation">{{action.conversation.top ? '取消置顶' : '置顶聊天'}}</view>
- <view class="action-item" @click="removeConversation">删除聊天</view>
- </view>
- </view>
- </scroll-view>
- </template>
- <script>
- import commonData from '../../commonData.js'
- import commonFun from '../../commonFun.js'
- export default {
- data() {
- return {
- isTrader2: 2,
- IS_TOURIST: uni.getStorageSync('IS_TOURIST'), //获取游客模式
- formatDate: commonFun.formatDate,
- sys_role: commonData.sys_role, //角色
- unreadTotal: 0,
- conversations: [],
- action: {
- conversation: null,
- show: false,
- user_info: {},
- },
- user_info: {}
- }
- },
- onPullDownRefresh() {
- if (this.isTrader2 != 1 && this.IS_TOURIST != 1) {
- this.get_data()
- }else{
- uni.stopPullDownRefresh();
- }
- },
- onShow() {
- this.IS_TOURIST = uni.getStorageSync('IS_TOURIST')||0
- let isTrader2 = uni.getStorageSync('isTrader2') || 2 //设置isTrader2为是否是现场经理
- this.isTrader2 = isTrader2
- if (isTrader2 != 1 && this.IS_TOURIST != 1) {
- this.get_info(this.get_data())
- }
- },
- methods: {
- // 获取个人信息
- get_info(callback = () => {}) {
- commonFun.get_user_info(res => {
- this.user_info = res.data.Result
- console.log('消息页获取个人信息')
- console.log(this.user_info)
- callback()
- })
- },
- // 获取数据
- get_data() {
- //监听会话列表变化
- let self = this;
- commonFun.goEasy.im.on(commonFun.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, (content) => {
- self.renderConversations(content);
- });
- //加载会话列表
- uni.showLoading({
- title: "加载中...",
- mask: true
- });
- commonFun.goEasy.im.latestConversations({
- onSuccess: function(result) {
- console.log('加载会话列表成功')
- let content = result.content;
- console.log(content)
- self.renderConversations(content);
- uni.hideLoading();
- uni.stopPullDownRefresh();
- },
- onFailed: function(error) {
- uni.hideLoading()
- uni.stopPullDownRefresh();
- console.log("获取最新会话列表失败:, code:" + error.code + " content:" + error.content);
- }
- });
- },
- // 置顶/取消会话
- topConversation() {
- uni.showLoading({
- title: "加载中...",
- mask: true
- });
- let conversation = this.action.conversation;
- let failedDescription = conversation.top ? '取消置顶失败' : '置顶失败';
- this.action.show = false;
- if (conversation.type === commonFun.GoEasy.IM_SCENE.PRIVATE) {
- commonFun.goEasy.im.topPrivateConversation({
- userId: conversation.userId,
- top: !conversation.top,
- onSuccess: function() {
- uni.hideLoading();
- },
- onFailed: function(error) {
- uni.hideLoading();
- uni.showToast({
- title: failedDescription,
- icon: "none"
- });
- console.log(error);
- }
- });
- } else {
- commonFun.goEasy.im.topGroupConversation({
- groupId: conversation.groupId,
- top: !conversation.top,
- onSuccess: function() {
- uni.hideLoading();
- },
- onFailed: function(error) {
- uni.hideLoading();
- uni.showToast({
- title: failedDescription,
- icon: "none"
- });
- console.log(error);
- }
- });
- }
- },
- // 移除会话
- removeConversation(conversation) {
- uni.showModal({
- content: '确认删除?',
- success: (res) => {
- if (res.confirm) {
- uni.showLoading({
- title: "加载中...",
- mask: true
- });
- let failedDescription = "删除失败";
- // let conversation = this.action.conversation;
- // this.action.show = false;
- if (conversation.type === commonFun.GoEasy.IM_SCENE.PRIVATE) {
- commonFun.goEasy.im.removePrivateConversation({
- userId: conversation.userId,
- onSuccess: function() {
- uni.hideLoading();
- },
- onFailed: function(error) {
- uni.hideLoading();
- uni.showToast({
- title: failedDescription,
- icon: "none"
- });
- console.log(error);
- }
- });
- } else {
- commonFun.goEasy.im.removeGroupConversation({
- groupId: conversation.groupId,
- onSuccess: function() {
- uni.hideLoading()
- },
- onFailed: function(error) {
- uni.hideLoading();
- uni.showToast({
- title: failedDescription,
- icon: "none"
- });
- console.log(error);
- }
- });
- }
- }
- }
- })
- },
- // 渲染数据列表
- renderConversations(content) {
- // this.save_friends_info(content.conversations)
- // console.log(content.conversations)
- this.conversations = content.conversations || [];
- let unreadTotal = content.unreadTotal;
- this.setUnreadAmount(unreadTotal);
- },
- // 将基本信息存入本地(go_easy不会获取历史头像和姓名)
- // save_friends_info(data) {
- // let friends_info = uni.getStorageSync('friends_info') || []
- // let friends_info_new = []
- // data.map(item => {
- // if (item.data.name) {
- // friends_info_new.push(item)
- // } else {
- // friends_info.map(item2 => {
- // })
- // }
- // })
- // uni.setStorageSync('friends_info', friends_info_new)
- // },
- // 渲染icon右上角数字
- setUnreadAmount(unreadTotal) {
- commonFun.get_user_info(res => {
- let ss_notice_unreaded = res.data.Result.ss_notice_unreaded
- this.user_info = res.data.Result
- this.unreadTotal = Number(unreadTotal) + ss_notice_unreaded;
- if (this.unreadTotal > 0) {
- uni.setTabBarBadge({
- index: 1,
- text: this.unreadTotal.toString()
- });
- } else {
- uni.removeTabBarBadge({
- index: 1
- });
- }
- })
- },
- // 跳转到会话区
- navigateToChat(conversation) {
- console.log(conversation)
- uni.setStorageSync('targetUser', {
- ...conversation.data
- })
- uni.navigateTo({
- url: './chat?to=' + conversation.userId
- });
- },
- showAction(conversation) {
- this.action.conversation = conversation;
- this.action.show = true;
- }
- }
- }
- </script>
- <style>
- page {
- height: 100%;
- }
- .num {
- position: absolute;
- width: 40upx;
- height: 40upx;
- background: #FF0000;
- border-radius: 50%;
- color: #ffffff;
- text-align: center;
- line-height: 40upx;
- font-size: 22upx !important;
- right: -40upx;
- top: 0upx;
- }
- .conversations {
- width: 750rpx;
- overflow-x: hidden;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
- /* height: 100%; */
- padding-bottom: 100upx;
- }
- .conversations .scroll-item {
- height: 152rpx;
- display: flex;
- align-items: center;
- padding-left: 32rpx;
- border-bottom: 1px solid #EFEFEF;
- }
- .conversations .scroll-item .head-icon {
- width: 100rpx;
- height: 100rpx;
- margin-right: 28rpx;
- }
- .conversations .scroll-item_info {
- height: 151rpx;
- width: 590rpx;
- padding-right: 32rpx;
- box-sizing: border-box;
- }
- .conversations .scroll-item_info .item-info-top {
- padding-top: 20rpx;
- height: 60rpx;
- line-height: 60rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .conversations .item-info-top_name {
- font-size: 34rpx;
- color: #262628;
- }
- .conversations .item-info-top_time {
- font-size: 26rpx;
- color: rgba(179, 179, 179, 0.8);
- font-family: Source Han Sans CN;
- }
- .conversations .item-info-bottom {
- height: 40rpx;
- line-height: 40rpx;
- overflow: hidden;
- }
- .conversations .item-info-bottom-item {
- display: flex;
- justify-content: space-between;
- }
- .item-info-bottom .item-info-top_content {
- font-size: 30rpx;
- color: #b3b3b3;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .item-info-bottom .item-info-bottom_action {
- width: 50rpx;
- height: 50rpx;
- font-size: 20rpx;
- background: url("../../static/images_go/action.png") no-repeat center;
- background-size: 28rpx 30rpx;
- }
- .no-conversation {
- width: 100%;
- text-align: center;
- height: 80rpx;
- line-height: 80rpx;
- font-size: 28rpx;
- color: #9D9D9D;
- }
- .item-head {
- position: relative;
- }
- .item-head .item-head_unread {
- padding: 6rpx;
- background-color: #EE593C;
- color: #FFFFFF;
- font-size: 24rpx;
- line-height: 28rpx;
- border-radius: 24rpx;
- min-width: 24rpx;
- min-height: 24rpx;
- text-align: center;
- position: absolute;
- top: 0;
- right: 15rpx;
- }
- .action-container {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .action-container .layer {
- position: absolute;
- top: 0;
- left: 0;
- background: rgba(51, 51, 51, 0.5);
- width: 100%;
- height: 100%;
- z-index: 99;
- }
- .action-box {
- width: 400rpx;
- height: 240rpx;
- background: #ffffff;
- position: relative;
- z-index: 100;
- border-radius: 20rpx;
- overflow: hidden;
- }
- .action-item {
- text-align: center;
- line-height: 120rpx;
- font-size: 34rpx;
- color: #262628;
- border-bottom: 1px solid #EFEFEF;
- }
- </style>
|