uni-app 96获取群聊相关信息（二）

<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;"  @click="openMail">
        <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">{{detail.name}}</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';
  import $H from '@/common/free-lib/request.js';
  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, // 邀请确认
        }
      }
    },
    methods: {
      openMail(){
        uni.navigateTo({
          url:'/pages/mail/mail/mail?type=createGroup'
        })
      }
    },
    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;
      if(this.detail.chat_type === 'group'){
        $H.get('/group_info/'+this.detail.id).then(res=>{
          this.list = res.group_users.map(item=>{
            return {
              id:item.user_id,
              name:item.nickname || item.user.nickname || item.user.username,
              avatar:item.user.avatar
            }
          })
        }).catch(err=>{
          uni.navigateBack({
            delta:1,
          })
        })
      }
    }
  }
</script>
<style>
</style>

<template>
  <view>
    <view :class="getClass">
      <!-- 状态栏 -->
      <view :style="'height:'+statusBarHeight+'px'"></view>
      <!-- 导航 -->
      <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
        <!-- 左边 -->
        <view class="flex align-center">
          <!-- 返回按钮 -->
          <!-- #ifndef MP -->
          <free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md">&#xe60d;</text></free-icon-button>
          <!-- #endif -->
          <!-- 标题 -->
          <slot>
            <text v-if="title" class="font-md ml-3">{{getTitle}}</text>
          </slot>
        </view>
        <!-- 右边 -->
        <view class="flex align-center" v-if="showRight">
          <slot name="right">
            <free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
            <free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
          </slot>
        </view>
      </view>
    </view>
    <!-- 占位 -->
    <view v-if="fixed" :style="fixedStyle"></view>
    
    <!-- 扩展菜单 -->
    <free-popup v-if="showRight" ref="extend" :bodyWidth="320" :bodyHeight="525"
    bodyBgColor="bg-dark" transformOrigin="right top">
      <view class="flex flex-column" 
      style="width: 320rpx;height: 525rpx;">
        <view class="flex-1 flex align-center" 
        hover-class="bg-hover-dark"
        v-for="(item,index) in menus"
        :key="index"
        @click="clickEvent(item)">
          <text class="iconfont pl-3 pr-2 font-md text-white">{{item.icon}}</text>
          <text class="font-md text-white">{{item.name}}</text>
        </view>
      </view>
    </free-popup>
    
    
  </view>
</template>
<script>
  import freeIconButton from "./free-icon-button.vue"
  import freePopup from "./free-popup.vue"
  export default {
    props: {
      showBack:{
        type:Boolean,
        default:false
      },
      backEvent:{
        type:Boolean,
        default:true
      },
      title: {
        type: [String,Boolean],
        default:false 
      },
      fixed:{
        type:Boolean,
        default:true
      },
      noreadnum:{
        type:[Number,String],
        default:0
      },
      bgColor:{
        type:String,
        default:"bg-light"
      },
      showRight:{
        type:Boolean,
        default:true
      }
    },
    components:{
      freeIconButton,
      freePopup
    },
    data() {
      return {
        statusBarHeight:0,
        navBarHeight:0,
        menus:[
          {
            name:"发起群聊",
            event:"navigateTo",
            path:"/pages/mail/mail/mail?type=createGroup",
            icon:"\ue633"
          },
          {
            name:"添加好友",
            event:"navigateTo",
            path:"/pages/common/search/search",
            icon:"\ue65d"
          },
          // #ifndef H5
          {
            name:"扫一扫",
            event:"",
            icon:"\ue614"
          },
          // #endif
          {
            name:"收付款",
            event:"",
            icon:"\ue66c"
          },
          {
            name:"帮助与反馈",
            event:"",
            icon:"\ue66c"
          }
        ],
      }
    },
    mounted() {
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    },
    computed: {
      fixedStyle() {
        return `height:${this.navBarHeight}px`
      },
      getTitle(){
        let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : ''
        return this.title + noreadnum
      },
      getClass(){
        let fixed = this.fixed?'fixed-top':''
        return `${fixed} ${this.bgColor}` 
      }
    },
    methods: {
      openExtend() {
        this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150))
      },
      // 返回
      back(){
        if(this.backEvent){
          return uni.navigateBack({
            delta: 1
          });
        }
        this.$emit('back')
      },
      search(){
        uni.navigateTo({
          url: '/pages/common/search/search'
        });
      },
      clickEvent(item){
        this.$refs.extend.hide()
        switch (item.event){
          case 'navigateTo':
          uni.navigateTo({
            url: item.path,
          });
            break;
          default:
          uni.showToast({
            title: '靓仔，自己发挥',
            icon: 'none'
          });
            break;
        }
      }
    },
  }
</script>
<style>
</style>