uni-app 166将某人踢出群聊（一）

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="选择" showBack :showRight="false">
      
    </free-nav-bar>
    <!-- 搜索框 -->
    <view class="p-3 bg-light position-fixed left-0 right-0" :style="'top:'+top+'px;'">
      <input type="text" value="" v-model="keyword" placeholder="搜索" class="bg-white rounded" placeholder-class="text-center" style="height: 80rpx;"/>
    </view>
    <view style="height:140rpx;"></view>
    <!-- 联系人列表 -->
    
    <view class="px-2 py-1 bg-light">
      <text class="font-sm text-muted">{{keyword ? '搜索结果' : '最近联系人'}}</text>
    </view>
    
    
    <free-list-item v-for="(item,index) in allList" :key="index" :title="item.name" :cover="item.avatar || '/static/images/userpic.png'" showRight :showRightIcon="false" @click="selectItem(item)">
      <view v-if="muliSelect" slot="right" class="border rounded-circle flex align-center" style="width: 40rpx;height: 40rpx;" >
        <view v-if="item.checked" class="main-bg-color rounded-circle" style="width: 39rpx;height: 39rpx;"> 
        </view>
      </view>
    </free-list-item>
    
    <view style="height:100rpx;" class="flex align-center justify-center" v-if="keyword !== '' && searchList.length === 0">
      <text class="font text-light-muted">暂无搜索结果</text>
    </view>
    
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import $H from '@/common/free-lib/request.js';
  export default {
    components:{
      freeNavBar,
      freeMainButton,
      freeListItem,
      freeAvatar
    },
    data() {
      return {
        keyword:'',
        muliSelect:false,
        top:0,
        list:[]
      }
    },
    computed:{
      // 最终列表
      allList(){
        return this.keyword === '' ? this.list : this.searchList;
      },
      // 搜索结果列表
      searchList(){
        if(this.keyword === ''){
          return [];
        }
        return this.list.filter(item=>{
          return item.name.indexOf(this.keyword) !== -1;
        })
      },
      // 选中列表
      selectList(){
        return this.list.filter(item=>item.checked)
      },
      // 选中数量
      selectCount(){
        return this.selectList.length;
      }
    },
    methods: {
      // 选中、取消选中
      selectItem(item){
        uni.showModal({
          content:'是否要踢出该成员？',
          success:(res)=>{
            if(res.confirm){
              console.log('踢出');
            }
          }
        })
      }
    },
    onLoad(e) {
      let res = uni.getSystemInfoSync();
      this.top = res.statusBarHeight + uni.upx2px(90);
      
      if(e.id){
        
          $H.get('/group_info/'+e.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
              }
            })
            
          })
      }
    }
  }
</script>
<style>
</style>

<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 class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;"  @click="deleteUser">
        <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" @click="updateName()">
        <text slot="right" class="font text-muted">{{detail.name}}</text>
      </free-list-item>
      <free-list-item title="群二维码" showRight :showLeftIcon="false" @click="openCode">
        <text slot="right" class="iconfont font-md text-light-muted">&#xe647;</text>
      </free-list-item>
      <free-list-item title="群公告" showRight :showLeftIcon="false" @click="openGroupRemark"></free-list-item>
    </view>
    
    <free-divider></free-divider>
    <free-list-item title="查找聊天记录" showRight :showLeftIcon="false" @click="openHistory"></free-list-item>
    <free-divider></free-divider>
    <free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.nowarn" @change="updateChatItem($event,'nowarn')" color="#08C060" />
    </free-list-item>
    <free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.istop" @change="updateChatItem($event,'istop')" color="#08C060"/>
    </free-list-item>
    <free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.strongwarn" @change="updateChatItem($event,'strongwarn')" color="#08C060"/>
    </free-list-item>
    <free-divider></free-divider>
    <free-list-item title="清空聊天记录" showRight :showLeftIcon="false" @click="clear"></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" @click="updatenickName">
        <text slot="right" class="font text-muted">{{nickname}}</text>
      </free-list-item>
      <free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false">
        <switch slot="right" :checked="detail.shownickname" @change="updateChatItem($event,'shownickname')" 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 v-if="detail.chat_type === 'group'" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="quit">
      <text class="font-md text-danger">删除并退出</text>
    </view>
    
    <free-confirm :title="'修改'+confirmTitle" ref="confirm">
        <input type="text" class="border-bottom font-md" :placeholder="confirmTitle" v-model="confirmText"/>
    </free-confirm>
    
    <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 freeConfirm from '@/components/free-ui/free-confirm.vue';
  import auth from '@/common/mixin/auth.js';
  import { mapState } from 'vuex';
  import $H from '@/common/free-lib/request.js';
  export default {
    mixins:[auth],
    components:{
      freeNavBar,
      freeAvatar,
      freeDivider,
      freeListItem,
      freeConfirm
    },
    computed:{
      ...mapState({
        chat:state=>state.user.chat,
        user:state=>state.user.user
      }),
      confirmTitle(){
        return this.confirmType === 'name' ? '群名称' : '昵称';
      }
    },
    data() {
      return {
        list:[],
        confirmText:'',
        nickname:'',
        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: {
      clear(){
        uni.showModal({
          content:'是否要清空聊天记录？',
          success:(res)=>{
            if(res.confirm){
              this.chat.clearChatDetail(this.detail.id,this.detail.chat_type);
              uni.showToast({
                title:'清除成功',
                icon:'none'
              })
              uni.$emit('updateHistory');
            } 
          }
        })
      },
      openCode(){
        uni.navigateTo({
          url:'../../my/code/code?params='+encodeURIComponent(JSON.stringify({
            id:this.detail.id,
            name:this.detail.name,
            avatar:this.detail.avatar
          }))+'&type=group',
        })
      },
      updateChatItem(e,k){
        console.log(e.detail.value,k);
        this.detail[k] = e.detail.value;
        this.chat.updateChatItem({
          id:this.detail.id,
          chat_type:this.detail.chat_type
        },this.detail);
      },
      quit(){
        uni.showModal({
          content:'是否要删除或退出群聊？',
          success: (res) => {
            if(res.cancel) return;
            $H.post('/group/quit',{
              id:this.detail.id
            }).then(res=>{
              uni.showToast({
                title: '操作成功',
                icon:'none'
              });
              uni.navigateBack({
                delta:1
              })
            })
          }
        })
      },
      updatenickName(){
        this.confirmType = 'nickname';
        this.confirmText = this.nickname
          this.$refs.confirm.show((close)=>{
            if(this.confirmText == ''){
              return uni.showToast({
                title:'昵称不能为空',
                icon:'none'
              })
            }
            $H.post('/group/nickname',{
              id:this.detail.id,
              nickname:this.confirmText
            }).then(res=>{
              uni.showToast({
                title:'修改成功',
                icon:'none'
              });
              this.nickname = this.confirmText;
              close();
            })
          });
      },
      openGroupRemark(){
        uni.navigateTo({
          url: '../group-remark/group-remark?params='+encodeURIComponent(JSON.stringify({
            id:this.detail.id,
            remark:this.detail.remark
          }))
        });
      },
      openMail(){
        uni.navigateTo({
          url:'/pages/mail/mail/mail?type=createGroup'
        })
      },
      openHistory(){
        uni.navigateTo({
          url:`../chat-history/chat-history?chat_tpe=${this.detail.chat_type}&id=${this.detail.id}`,
        })
      },
      deleteUser(){
        uni.navigateTo({
          url:'../group-user/group-user?id='+this.detail.id
        })
      },
      updateName(){
        this.confirmText = this.detail.name
        this.$refs.confirm.show((close)=>{
          if(this.confirmText == ''){
            return uni.showToast({
              title:'群名称不能为空',
              icon:'none'
            })
          }
          $H.post('/group/rename',{
            id:this.detail.id,
            name:this.confirmText
          }).then(res=>{
            uni.showToast({
              title:'修改成功',
              icon:'none'
            });
            this.detail.name = this.confirmText;
            close();
          })
        });
      }
    },
    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.detail.remark = res.remark;
          this.list = res.group_users.map(item=>{
            if(item.user_id === this.user.id){
              this.nickname = item.nickname;
            }
            return {
              id:item.user_id,
              name:item.nickname || item.user.nickname || item.user.username,
              avatar:item.user.avatar
            }
          })
          
        })
      }
    }
  }
</script>
<style>
</style>