uni-app 83获取当前会话详细资料

简介: uni-app 83获取当前会话详细资料


chat-set.vue

<template>
  <view style="background-color: #EDEDED;">
    <!-- 导航栏 -->
    <free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
    <view class="flex flex-wrap py-3 bg-white">
      <!-- 私聊 -->
      <view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
        <free-avatar :src="detail.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
        <text class="font text-muted mt-1" >{{detail.name}}</text>
      </view>
      <!-- 群聊 -->
      <view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" v-for="(item,index) in list" :key='index'>
        <free-avatar :src="item.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
        <text class="font text-muted mt-1" >{{item.name}}</text>
      </view>
      
      <view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
        <view class="flex align-center justify-center border" hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
          <text class="text-light-muted" style="font-size: 100rpx;">+</text>
        </view>
      </view>
    </view>
    
    <free-divider></free-divider>
    <view v-if="detail.chat_type==='group'">
      <free-list-item title="群聊名称" showRight :showLeftIcon="false">
        <text slot="right" class="font text-muted">我是群聊名称</text>
      </free-list-item>
      <free-list-item title="群二维码" showRight :showLeftIcon="false">
        <text slot="right" class="iconfont font-md text-light-muted">&#xe647;</text>
      </free-list-item>
      <free-list-item title="群公告" showRight :showLeftIcon="false"></free-list-item>
    </view>
    
    <free-divider></free-divider>
    <free-list-item title="查找聊天记录" showRight :showLeftIcon="false"></free-list-item>
    <free-divider></free-divider>
    <free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.nowarn" @change="" color="#08C060"/>
    </free-list-item>
    <free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.istop" @change="" color="#08C060"/>
    </free-list-item>
    <free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.strongwarn" @change="" color="#08C060"/>
    </free-list-item>
    <free-divider></free-divider>
    <free-list-item title="清空聊天记录" showRight :showLeftIcon="false"></free-list-item>
    <free-divider></free-divider>
    
    <view v-if="detail.chat_type==='group'">
      <free-divider></free-divider>
      <free-list-item title="我在本群的昵称" showRight :showLeftIcon="false">
        <text slot="right" class="font text-muted">昵称</text>
      </free-list-item>
      <free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false">
        <switch slot="right" :checked="detail.shownickname" @change="" color="#08C060"/>
      </free-list-item>
      </view>
    
    
    
    <free-divider></free-divider>
    <free-list-item title="投诉" showRight :showLeftIcon="false"></free-list-item>
    
    <free-divider></free-divider>
    <view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light">
      <text class="font-md text-danger">删除并退出</text>
    </view>
    
    <view style="height: 200rpx;"></view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import { mapState } from 'vuex';
  export default {
    components:{
      freeNavBar,
      freeAvatar,
      freeDivider,
      freeListItem
    },
    computed:{
      ...mapState({
        chat:state=>state.user.chat
      })
    },
    data() {
      return {
        list:[],
        detail:{
              id:0,  // 接收人/群 id
              chat_type:'user', // 接收类型 user 单聊 group群聊
              name:'', // 接收人/群 昵称
              avatar:"", // 接收人/群 头像
              type:'',// 最后一条消息类型
              
              istop:false, // 是否置顶
              shownickname:false, // 是否显示昵称
              nowarn:false, // 是否免打扰
              strongwarn:false, //  是否强提醒
              user_id:0,//管理员id,
              remark:'', // 群公告
              invite_confirm:0, // 邀请确认
        }
      }
    },
    onLoad(e) {
      if(!e.params){
        return this.backToast();
      }
      let detail = JSON.parse(e.params);
      // 获取当前会话的详细资料
      detail = this.chat.getChatListItem(detail.id,detail.chat_type);
      if(!detail){
        return this.backToast()
      }
      this.detail = detail;
    },
    methods: {
      
    }
  }
</script>
<style>
</style>

感谢大家观看,我们下次见

目录
相关文章
|
2月前
uni-app 135修改用户个人资料(一)
uni-app 135修改用户个人资料(一)
32 0
|
2月前
uni-app 136修改用户个人资料(二)
uni-app 136修改用户个人资料(二)
9 1
|
2月前
uni-app 106群资料设置功能
uni-app 106群资料设置功能
16 0
|
2月前
uni-app 105删除指定会话功能
uni-app 105删除指定会话功能
17 1
|
2月前
uni-app 81聊天类封装(十五)-读取会话功能
uni-app 81聊天类封装(十五)-读取会话功能
17 1
|
2月前
uni-app 76聊天类封装(十一)-更新会话列表(二)
uni-app 76聊天类封装(十一)-更新会话列表(二)
15 1
|
2月前
uni-app 75聊天类封装(十)-更新会话列表(一)
uni-app 75聊天类封装(十)-更新会话列表(一)
15 0
|
2月前
uni-app 78渲染和监听聊天会话列表
uni-app 78渲染和监听聊天会话列表
21 1
|
2月前
uni-app 18个人资料设置开发
uni-app 18个人资料设置开发
20 0
uni-app 18个人资料设置开发
|
10月前
|
存储 视频直播 API
娱乐直播游戏软件APP成品源码搭建必须要资料及重要性
在目前高速发展的娱乐游戏直播行业中,开发一款出色的直播App需要用到相关必需的资料及资源。下面我们就讲述东莞梦幻网络科技所提供的“娱乐直播游戏成品源码”为基础,解读搭建必须要资料及重要性。