heshanApp/pages_im/pages/conversation/groupSettings/components/GroupMemberRow.vue

<template>
  <view @click="toMemberList" class="member_row">
    <view @click="toMemberList" class="more">
      <text>群成员</text>
      <view class="more_right">
        <text>查看{{ memberCount }}名群成员</text>
        <u-icon name="arrow-right" color="#999" size="14" />
      </view>
    </view>
    <view class="member_list">
      <view class="member_item">
        <image style="width: 42px; height: 42px" @click.stop="inviteMember"
          src="../../../../static/images/group_setting_invite.png" alt="" />
      </view>
      <view class="member_item" v-if="isAdmin || isOwner">
        <image style="width: 42px; height: 42px;" @click.stop="kickMember"
          src="../../../../static/images/group_setting_remove.png" alt="" />
      </view>
      <view class="member_item" v-for="(member, index) in groupMemberList" :key="index">
        <my-avatar :src="member.faceURL" :desc="member.nickname" :key="member.userID" size="42" >
			 <image v-if="getRole(member)==1" class="taoj"  src="/static/svg/doctor.svg"></image>
			 <image v-if="getRole(member)==2" class="taoj"  src="/static/svg/guanjia.svg"></image>
		</my-avatar>
		
        <view class="ower" v-if="member.roleLevel === 100">群主</view>
        <!-- <text class="member_item_name">{{ member.nickname }}</text> -->
      </view>

    </view>

  </view>
</template>

<script>
import { mapGetters } from "vuex";
import IMSDK, { GroupMemberRole } from "openim-uniapp-polyfill";
import MyAvatar from "../../../../components/MyAvatar/index.vue";
import SettingItem from "../../../../components/SettingItem/index.vue";
import { ContactChooseTypes, GroupMemberListTypes } from "../../../../constant";
export default {
  name: "",
  components: {
    MyAvatar,
    SettingItem,
  },
  props: {
    isNomal: Boolean,
    memberCount: Number,
    groupID: String,
    groupMemberList: Array,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters([
      "storeCurrentConversation",
      "storeCurrentMemberInGroup",
      "storeCurrentGroup",
    ]),
    isOwner() {
      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
    },
    isAdmin() {
      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
    },
  },
  methods: {
		toMemberList() {
		  uni.navigateTo({
			url: `/pages_im/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Preview}&groupID=${this.groupID}`,
		  });
		},
		inviteMember() {
		  uni.navigateTo({
			url: `/pages_im/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
		  });
		},
		kickMember() {
		  uni.navigateTo({
			url: `/pages_im/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Kickout}&groupID=${this.groupID}`
		  });
		},
		getRole(member){
			let userType=0;
			let userId=member.userID;
			if(userId!=undefined  && (userId!="" || userId.length>0)){
				if(userId.indexOf('U')!==-1){
					userType=0;
				}
				if(userId.indexOf('D')!==-1){
					userType=1;
				}
				if(userId.indexOf('C')!==-1){
					userType=2;
				}
			}
			return userType;
		}
  },
};
</script>

<style lang="scss" scoped>
.member_row {
  @include colBox(false);
  padding: 24rpx;
  margin: 24rpx;
  background-color: #fff;
  color: $uni-text-color;
  border-radius: 6px;
  overflow: hidden;

  .member_title {
    @include btwBox();

    .member_desc {
      @include vCenterBox();
      font-size: 26rpx;
    }
  }

  .member_list {
    margin-top: 24rpx;
    @include vCenterBox();
    flex-wrap: wrap;

    .member_item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 8rpx 14rpx 8rpx 0;

      &_name {
        margin-top: 8rpx;
        font-size: 24rpx;
        color: #8e9ab0;
        max-width: 48px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .ower {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    font-size: 22rpx;
    position: absolute;
    color: #0089FF;
    background: #E8EAEF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
  }

  .more {
	    @include btwBox();
	   .more_right {
		  @include vCenterBox();
		  text {
			color: #757575;
		  }
	   }
  }
  
  .taoj {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
  	    height: 100%;
   }
  
  
}
</style>