cashier_app/pageChat/group-info/index.vue

<template>
  <view class="min-page bg-f7 u-font-28">
    <view class="user-list bg-fff">
      <view class="u-flex u-row-between u-col-center">
        <text class="color-000">群成员（{{allUser.length}}人）</text>
        <text class="color-red" @click="showRemove = !showRemove">移除</text>
      </view>
      <view class="list u-m-t-26">
        <view
          class="u-flex u-flex-col u-row-center u-col-center relative"
          v-for="(item, index) in userLists"
          :key="index"
        >
          <up-avatar
            size="104rpx"
            shape="square"
            :src="item.avatar"
            round="8rpx"
          ></up-avatar>
          <view class="u-m-t-8 color-000 u-line-1" style="max-width: 104rpx;">{{ item.nick_name }}</view>
          <view
            class="remove u-absolute"
            v-if="showRemove && item.role != 1"
            @click="removeMember(item)"
          >
            <up-icon
              name="minus-circle-fill"
              size="24rpx"
              color="#FF2424"
            ></up-icon>
          </view>
        </view>
      </view>
      <view class="u-flex u-row-center color-666 u-m-t-30" v-if="hasMore">
        <view class="u-flex" @click="loadMore">
          <text class="u-m-r-20">查看更多</text>
          <up-icon name="arrow-down" size="24rpx" color="#666"></up-icon>
        </view>
      </view>
    </view>

    <view class="bottom">
      <view class="u-flex u-row-between default-padding bg-fff border-bottom">
        <text>群聊名称</text>
        <view class="u-flex color-666">
          <text>{{ groupInfo.name }}</text>
          <up-icon name="arrow-right" size="24rpx" color="#666"></up-icon>
        </view>
      </view>
      <view class="u-flex u-row-between default-padding bg-fff border-bottom">
        <view>
          <view>禁言</view>
          <view class="color-999 u-font-24">
            开启后，顾客将不能在群内发消息</view
          >
        </view>
        <up-switch
          v-model="groupInfo.is_mute"
          :active-value="1"
          :inactive-value="0"
          @change="groupMuteChange"
        ></up-switch>
      </view>
      <view
        class="u-flex u-row-between default-padding bg-fff"
        @click="
          go.to('PAGES_CHAT_COUPON_ACTIVITY', {
            group_id: options.group_id,
            session_id: options.session_id,
          })
        "
      >
        <text>优惠券领取记录</text>
        <view class="u-flex color-666">
          <text class="color-main">去查看</text>
          <up-icon name="arrow-right" size="24rpx" color="#318AFE"></up-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import go from "@/commons/utils/go.js";
import * as chatApi from "@/http/php/chat";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
const options = reactive({});
const groupInfo = ref({});
onLoad((opt) => {
  Object.assign(options, opt);
  chatApi
    .groupInfo({
      group_id: options.group_id,
    })
    .then((res) => {
      groupInfo.value = res || {};
    });
});
function groupMuteChange(e) {
  if (e) {
    chatApi
      .groupMute({
        group_id: options.group_id,
      })
      .then((res) => {
        if (res) {
          uni.showToast({
            title: "已禁言",
            icon: "none",
          });
        }
      });
    return;
  }
  chatApi
    .groupMunute({
      group_id: options.group_id,
    })
    .then((res) => {
      if (res) {
        uni.showToast({
          title: "禁言已取消",
          icon: "none",
        });
      }
    });
}
const showRemove = ref(false);
let allUser = ref([]);
const userLists = ref([]);
const hasMore = ref(false);
function getMembers() {
  chatApi.groupMembers({ group_id: options.group_id }).then((res) => {
    allUser.value = res.user_list || [];
    hasMore.value = allUser.value.length > 20;
    userLists.value = allUser.value.slice(0, 20);
  });
}

function loadMore() { 
  userLists.value=allUser.value
}
onShow(() => {
  getMembers();
});

function removeMember(item) {
  chatApi
    .groupKick({ group_id: options.group_id, target_uid: item.user_id })
    .then((res) => {
      if (res) {
        uni.showToast({
          title: "移除成功",
          icon: "none",
        });
        setTimeout(() => {
          getMembers();
        }, 1000);
      }
    });
}
</script>
<style lang="scss" scoped>
.user-list {
  padding: 32rpx 28rpx;
  .list {
    gap: 20rpx;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
}
.color-red {
  color: #ff2424;
}
.bottom {
  margin: 28rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.default-padding {
  padding: 32rpx 28rpx;
}
.relative {
  position: relative;
}
.remove {
  top: -6rpx;
  right: -6rpx;
}
</style>