xyy-m/src/pages/chat/set-single.vue

<template>
  <div class="w-full h-[100vh] bg-[#F7F8FA]">
    <ChatHeaderBar title="聊天设置" />
    <div class="h-66"></div>
    <van-cell-group
      style="margin-bottom: 12px; padding-top: 12px; padding-left: 16px"
      class="box-border"
      inset
    >
      <van-row>
        <van-col style="width: 54px" span="4" class="mb-12 mr-10">
          <div class="w-40 h-40 rounded-full mx-auto overflow-hidden mb-4">
            <img class="w-full h-full object-cover" :src="itemData?.avatar" alt="" />
          </div>
          <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">
            {{ itemData?.nickname }}
          </p>
        </van-col>
        <van-col style="width: 54px" span="4" class="mb-12 mr-10">
          <div
            @click="navigateTo('/chat/single-add')"
            class="w-40 h-40 flex justify-center items-center bg-[#F3F3F3] rounded-full mx-auto overflow-hidden mb-4"
          >
            <span class="iconfont icon-plus text-black-6" style="font-size: 24px"></span>
          </div>
          <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">多人聊天</p>
        </van-col>
      </van-row>
    </van-cell-group>

    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        size="large"
        :title="item.title"
        :is-link="item.isLink"
        @click="item.fn"
      >
        <template #icon>
          <span
            :class="`iconfont ${item.icon} text-[#FF9300]  mr-12`"
            style="font-size: 24px"
          ></span>
        </template>
        <template v-if="item.vModel != null" #right-icon>
          <van-switch v-model="item.vModel" active-color="#FF9300" inactive-color="#dcdee0" />
        </template>
      </van-cell>
    </van-cell-group>

    <ChatDialog
      v-model:show="dialogParmas.show"
      v-model:title="dialogParmas.title"
      v-model:confirmText="dialogParmas.confirmText"
      v-model:cancelText="dialogParmas.cancelText"
      @confirm="confirm"
      @cancel="cancel"
    >
      <div class="w-full px-12 text-center mt-4">
        <p class="mx-auto w-[80%] text-sm text-black-9 mb-16">{{ dialogParmas.subTitle }}</p>

        <van-field
          class=""
          style="height: 40px; background: #f5f5f5; border-radius: 8px; margin-bottom: 30px"
          clearable
          :placeholder="dialogParmas.placeholder"
          v-model="dialogParmas.remark"
          maxlength="12"
        />
      </div>
    </ChatDialog>
  </div>
</template>
<script setup>
definePageMeta({
  layout: false
})

const itemData = ref(null)
const isNotDisturb = ref(false)
const isTop = ref(false)

const dialogParmas = reactive({
  show: false,
  title: '',
  placeholder: '',
  remark: '',
  subTitle: ''
})

// 弹窗确认的事件
const confirm = async () => {
  try {
    let { data } = await request('', {})
  } catch (error) {}
  dialogParmas.show = false
  itemData.value.remark = dialogParmas.remark
}

const cancel = () => {
  dialogParmas.show = false
}

// 修改备注名
const modifyNoteName = () => {
  dialogParmas.show = true
  dialogParmas.subTitle = '备注不得超过30个字'
  dialogParmas.placeholder = '请输入备注'

  if (itemData.value?.remark != '') {
    dialogParmas.title = '修改备注'
    dialogParmas.confirmText = '确认'
    dialogParmas.cancelText = '取消'
  } else {
    dialogParmas.title = '添加备注'
    dialogParmas.confirmText = '添加'
    dialogParmas.cancelText = '拒绝'
  }
}

// 查找聊天记录
const findChatHistory = () => {
  navigateTo('/chat/set-sub', {
    query: {
      objectType: 1,
      userId: itemData.value?.userId
    }
  })
}

// 消息免打扰
const notDisturb = () => {}

// 置顶聊天
const topChat = () => {}

// 举报该用户
const reportUser = () => {
  navigateTo('/chat/report', {
    query: {
      objectType: 1,
      userId: itemData.value?.userId
    }
  })
}

// 清空聊天记录
const clearChatHistory = () => {
  showConfirmDialog({
    width: 260,
    // title: '提示',
    message: '清空聊天记录',
    confirmButtonColor: '#FF9300'
  })
    .then(async () => {
      const { data } = await request('/tourMessage/clearGroupMessage', {
        query: {
          groupId: itemData.value?.groupId
        }
      })
      if (data) return
    })
    .catch(() => {})
}

const list = reactive([
  {
    title: '设置备注名',
    // icon: setting,
    icon: 'icon-setting-one',
    isLink: true,
    vModel: null,
    fn: modifyNoteName,
    value: ''
  },
  {
    title: '查找聊天记录',
    value: '',
    icon: 'icon-log',
    isLink: true,
    vModel: null,
    fn: findChatHistory
  },
  {
    title: '消息面打扰',
    value: '',

    icon: 'icon-close-remind',
    isLink: false,
    vModel: isNotDisturb.value,
    fn: notDisturb
  },
  {
    title: '置顶聊天',
    value: '',
    icon: 'icon-set-top',
    isLink: false,
    vModel: isTop.value,
    fn: topChat
  },
  {
    title: '举报该用户',
    value: '',
    icon: 'icon-jubaoguanli',
    isLink: true,
    vModel: null,
    fn: reportUser
  },
  {
    title: '清空聊天记录',
    value: '',
    icon: 'icon-delete-one',
    isLink: true,
    vModel: null,
    fn: clearChatHistory
  }
])

useSeoMeta({
  title: '我的消息'
})
</script>

<style lang="scss" scoped></style>