增加聊天功能

pageChat/group-info/index.vue

@@ -0,0 +1,182 @@
+<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">群成员（22人）</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">{{ 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">
+        <text class="u-m-r-20">查看更多</text>
+        <up-icon name="arrow-down" size="24rpx" color="#666"></up-icon>
+      </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 = [];
+const userLists = ref([]);
+const hasMore = ref(false);
+function getMembers() {
+  chatApi.groupMembers({ group_id: options.group_id }).then((res) => {
+    allUser = res.user_list || [];
+    hasMore.value = allUser.length > 20;
+    userLists.value = allUser.slice(0, 20);
+  });
+}
+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>