需要添加客服，二维码，扫码功能

2026-01-14 23:38:29 +08:00
parent db1b797b68
commit 220b12e945
21 changed files with 721 additions and 182 deletions
--- a/pages/anchor/index.nvue
+++ b/pages/anchor/index.nvue
@@ -27,7 +27,8 @@
            <image class="participant-avatar" :src="user?.avatarURL || defaultAvatarURL" mode="aspectFill" />
          </view>
          <view class="participant-count">
-            <text class="count-text">{{ audienceCount }}</text>
+             <text v-if="topNUmber" class="count-text">{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}</text>
+              <text v-else class="count-text">{{ audienceCount }}</text>
          </view>
        </view>
        <view class="control-icons">
@@ -159,6 +160,7 @@
  import { useLiveSummaryState } from '@/uni_modules/tuikit-atomic-x/state/LiveSummaryState'
  import ActionSheet from '@/components/ActionSheet.nvue'
  import Activity from './components/activity.nvue'
+  import { LIVE_BUSINESS } from '@/constants/live-keys'

  const dom = uni.requireNativePlugin('dom')
  const { loginUserInfo } = useLoginState();
@@ -180,6 +182,8 @@
  const { summaryData } = useLiveSummaryState(uni.$liveID)
  const defaultCoverURL = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
  const defaultAvatarURL = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png';
+
+ const topNUmber = ref('')
  const audienceCount = computed(() => audienceList.value.length);
  const isShowEndSheet = ref(false)
  const endSheetTitle = ref('')
@@ -252,6 +256,17 @@
    }
  }, { immediate: true, deep: true });

+    // 监听自定义消息列表更新
+  watch(messageList, (newMessages) => {
+    if (newMessages && newMessages.length > 0) {
+      console.log('弹幕消息列表更新:', newMessages);
+      if (newMessages.some(v => v.businessID === LIVE_BUSINESS.ADMIN)) {
+        console.log('管理员消息====================', newMessages.find(v => v.businessID === LIVE_BUSINESS.ADMIN))
+        topNUmber.value = newMessages.find(v => v.businessID === LIVE_BUSINESS.ADMIN).data;
+      }
+    }
+  });
+
  const editCover = (data : string) => {
    coverURL.value = data
  };
--- a/pages/audience/index.nvue
+++ b/pages/audience/index.nvue
@@ -36,7 +36,7 @@
              <image class="participant-avatar" :src="user?.avatarURL || defaultAvatarURL" mode="aspectFill" />
            </view>
            <view class="participant-count">
-             <text v-if="topNUmber" class="count-text">{{ audienceList.length }}</text>
+             <text v-if="topNUmber" class="count-text">{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}</text>
              <text v-else class="count-text">{{ audienceList.length }}</text>
            </view>
          </view>
--- a/pages/my-index/personal-center/index.vue
+++ b/pages/my-index/personal-center/index.vue
@@ -5,6 +5,7 @@
  import { chooseImage } from '@/utils/media.js'
  import { uploadSingleFile } from '@/utils/uploadFile'
  import { useUserStore } from '@/stores/user'
+  import { navigateTo } from '../../../utils/router'

  const { updateUserInfo } = useUserStore()

@@ -35,6 +36,10 @@
    perSignature: ''
  })
  const upInfo = (key, value) => {
+    if (key === '1') {
+      navigateTo('/pages/my-index/qr-code/index')
+      return
+    }
    if (MODIFY_KEY.includes(key)) {
      const titleData = {
        3: '昵称',
@@ -46,6 +51,7 @@
      popupData.title = titleData
      popupData.name = userInfo.value[value]
      popupData.show = true
+      return
    }
  }

--- a/pages/my-index/qr-code/index.vue
+++ b/pages/my-index/qr-code/index.vue
@@ -0,0 +1,68 @@
+<script setup>
+  import { useAuthUser } from '@/composables/useAuthUser'
+
+  const { userInfo } = useAuthUser()
+</script>
+
+<template>
+  <view class="code-box">
+    <view class="top-img">
+      <image
+        v-if="userInfo.avatar"
+        :src="userInfo.avatar"
+        mode="aspectFill"
+        class="avatar"
+      ></image>
+      <uni-icons v-else type="contact-filled" size="60"></uni-icons>
+      <view class="right-box">
+        <text>{{ userInfo.userName }}</text>
+        <text>ID: {{ userInfo.userId }}</text>
+      </view>
+    </view>
+    <view class="code-img">二维码</view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .code-box {
+    margin-top: 10vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .top-img {
+      width: 480rpx;
+      display: flex;
+      align-items: center;
+      margin-bottom: 46rpx;
+      .avatar {
+        width: 110rpx;
+        height: 110rpx;
+        border-radius: 110rpx;
+      }
+      .right-box {
+        margin-left: 16rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        text {
+          font-size: 32rpx;
+          font-weight: 600;
+          color: #333333;
+          &:last-child {
+            margin-top: 10rpx;
+            font-weight: 500;
+            font-size: 24rpx;
+            color: #acacac;
+          }
+        }
+      }
+    }
+
+    .code-img {
+      background: rgb(165, 136, 136);
+      width: 480rpx;
+      height: 480rpx;
+    }
+  }
+</style>
--- a/pages/my-index/set-up/feedback.vue
+++ b/pages/my-index/set-up/feedback.vue
@@ -0,0 +1,81 @@
+<script setup>
+  import { reactive } from 'vue'
+  import CardInput from '../components/card-input.vue'
+  import { addUserFeedback } from '../../../api/my-index'
+  import { useUI } from '@/utils/use-ui'
+  import { navigateBack } from '../../../utils/router'
+
+  const list = [
+    { text: '功能建议', value: '1' },
+    { text: '问题反馈', value: '2' },
+    { text: '内容举报', value: '3' },
+    { text: '投诉建议', value: '4' },
+    { text: '其他', value: '5' }
+  ]
+
+  const { showDialog } = useUI()
+
+  const formData = reactive({
+    content: '',
+    images: '',
+    /** 反馈类型：1-功能建议 2-问题反馈 3-内容举报 4-投诉建议 5-其他 */
+    type: ''
+  })
+
+  const onConfirm = async () => {
+    await addUserFeedback(formData)
+    const show = await showDialog(
+      '提示',
+      '感谢您对我们的反馈意见，我们会尽快处理',
+      false
+    )
+    if (show) {
+      navigateBack()
+    }
+  }
+</script>
+
+<template>
+  <view class="fee-box">
+    <CardInput :is-input="false" title="反馈类型">
+      <uni-data-checkbox
+        mode="tag"
+        v-model="formData.type"
+        :localdata="list"
+      ></uni-data-checkbox>
+    </CardInput>
+
+    <CardInput :is-input="false" title="反馈描述">
+      <textarea
+        v-model="formData.content"
+        placeholder="说说您的建议或问题，以便我们提供更好的服务"
+        confirm-type="done"
+        @confirm="onConfirm"
+      />
+    </CardInput>
+
+    <CardInput :is-input="false" title="添加图片">
+      <cb-file-picker v-model="formData.images"></cb-file-picker>
+    </CardInput>
+
+    <!-- 底部按钮 -->
+    <bottom-view>
+      <cb-button
+        :disabled="!formData.content || !formData.type"
+        @click="onConfirm"
+      >
+        提交反馈
+      </cb-button>
+    </bottom-view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  page {
+    background: #f9f9f9;
+  }
+
+  .fee-box {
+    padding: 20rpx 32rpx;
+  }
+</style>
--- a/pages/my-index/set-up/font-settings.vue
+++ b/pages/my-index/set-up/font-settings.vue
@@ -0,0 +1,62 @@
+<script setup>
+  import { ref } from 'vue'
+  import { useUserStore } from '../../../stores/user'
+  import { useAuthUser } from '../../../composables/useAuthUser'
+
+  const { fontSizeData } = useAuthUser()
+  const { updateFontSize } = useUserStore()
+
+  const size = ref(fontSizeData.value)
+  const sliderChange = ({ detail }) => {
+    const data = {
+      1: '20',
+      2: '26',
+      3: '36',
+      4: '42',
+      5: '50',
+      6: '56'
+    }[detail.value]
+
+    size.value = data
+    updateFontSize(data)
+  }
+</script>
+
+<template>
+  <view class="font-settings">
+    <view class="top-text">
+      <text :style="{ 'font-size': `${size}rpx` }">预览字体大小</text>
+    </view>
+    <slider
+      :max="6"
+      :min="1"
+      :value="
+        { '20': 1, '26': 2, '36': 3, '42': 4, '50': 5, '56': 6 }[
+          fontSizeData
+        ]
+      "
+      @change="sliderChange"
+    />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  // 背景色
+  page {
+    background: #f9f9f9;
+  }
+
+  .font-settings {
+    padding: 20rpx 32rpx;
+
+    .top-text {
+      padding: 24rpx 20rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      margin-bottom: 100rpx;
+      text {
+        color: #333333;
+      }
+    }
+  }
+</style>
--- a/pages/my-index/set-up/index.vue
+++ b/pages/my-index/set-up/index.vue
@@ -1,29 +1,51 @@
 <script setup>
  import { useUserStore } from '@/stores/user'
  import { navigateTo } from '../../../utils/router'
+  import { useUI } from '../../../utils/use-ui'
+
+  const { showDialog, showToast } = useUI()

  // 基础设置
  const basicSetting = [
-    { name: '字体大小', value: '', url: '' },
+    {
+      name: '字体大小',
+      value: '',
+      url: '/pages/my-index/set-up/font-settings'
+    },
    // { name: '聊天背景', value: '', url: '' },
-    { name: '朋友圈设置', value: '', url: '' },
-    { name: '消息通知', value: '', url: '' },
+    // { name: '朋友圈设置', value: '', url: '' },
+    { name: '消息通知', value: '', url: '/pages/my-index/set-up/message/index' }
    // { name: '安全设置', value: '', url: '' },
    // { name: '群发消息', value: '', url: '' },
-    { name: '登录设备', value: '', url: '' }
+    // { name: '登录设备', value: '', url: '' }
  ]

  // 系统设置
  const systemSetting = [
-    { name: '隐私设置', value: '', url: '' },
-    { name: '清除缓存', value: '', url: '' },
-    { name: '意见反馈', value: '', url: '' },
+    // { name: '隐私设置', value: '', url: '' },
+    { name: '清除缓存', value: '2', url: '' },
+    {
+      name: '意见反馈',
+      value: '',
+      url: '/pages/my-index/set-up/feedback'
+    },
    { name: '关于我们', value: '', url: '/pages/discover/company' }
  ]

  const { clearUserInfo } = useUserStore()

  const onItem = item => {
+    if (item.value === '2') {
+      showDialog(
+        '确定要清理缓存吗',
+        '缓存是使用过程中的临时数据，清理缓存不会影响您正常使用软件'
+      ).then(show => {
+        if (show) {
+          showToast('清理成功', 'success')
+        }
+      })
+      return
+    }
    item.url && navigateTo(item.url)
  }
 </script>
--- a/pages/my-index/set-up/message/details.vue
+++ b/pages/my-index/set-up/message/details.vue
@@ -0,0 +1,55 @@
+<script setup>
+  import { ref } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { getUserNoticeDetail } from '../../../../api/my-index'
+
+  const viewData = ref({})
+  const loading = ref(true)
+  onLoad(async e => {
+    const res = await getUserNoticeDetail(e.id)
+    viewData.value = res.data
+    loading.value = false
+  })
+</script>
+
+<template>
+  <view v-if="!loading" class="notice-detail">
+    <view class="box">
+      <text>{{ viewData.title }}</text>
+      <text>{{ viewData.content }}</text>
+      <text>{{ viewData.createTime }}</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  page {
+    background: #f9f9f9;
+  }
+
+  .notice-detail {
+    padding: 20rpx 32rpx;
+    .box {
+      padding: 20rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      display: flex;
+      flex-direction: column;
+      text {
+        font-size: 32rpx;
+        color: #333333;
+        // 第二个
+        &:nth-child(2) {
+          font-size: 28rpx;
+          color: #353535;
+          margin: 10rpx 0;
+        }
+        // 最后一个
+        &:last-child {
+          font-size: 24rpx;
+          color: #999999;
+        }
+      }
+    }
+  }
+</style>
--- a/pages/my-index/set-up/message/index.vue
+++ b/pages/my-index/set-up/message/index.vue
@@ -0,0 +1,120 @@
+<script setup>
+  import { ref } from 'vue'
+  import { getUserNoticeList } from '@/api/my-index'
+  import { navigateTo } from '../../../../utils/router'
+
+  // 类型：1-系统 gear 2-消息 chatbubble 3-提醒 notification
+  const iconMap = [
+    { icon: 'gear', bg: '#05b0ff1f', color: '#05b0ff' },
+    { icon: 'chatbubble', bg: '#23c4311a', color: '#23c431' },
+    { icon: 'notification', bg: '#dcdf111f', color: '#dbdf11' }
+  ]
+
+  const paging = ref(null)
+  const dataList = ref([])
+  const getData = async (pageNum, pageSize) => {
+    try {
+      const res = await getUserNoticeList({
+        pageNum,
+        pageSize
+      })
+      paging.value.complete(res.rows)
+    } catch (error) {
+      paging.value.complete(false)
+    }
+  }
+
+  const onGo = item => {
+    navigateTo('/pages/my-index/set-up/message/details', { id: item.id })
+  }
+</script>
+
+<template>
+  <z-paging
+    ref="paging"
+    v-model="dataList"
+    safe-area-inset-bottom
+    use-safe-area-placeholder
+    :default-page-size="15"
+    :show-loading-more-no-more-view="false"
+    @query="getData"
+  >
+    <view
+      v-for="item in dataList"
+      :key="item.id"
+      class="card-box"
+      @click="onGo(item)"
+    >
+      <view
+        :style="{ background: iconMap[item.type - 1].bg }"
+        class="icon-box"
+      >
+        <uni-icons
+          :type="iconMap[item.type - 1].icon"
+          :color="iconMap[item.type - 1].color"
+          size="30"
+        ></uni-icons>
+      </view>
+      <view class="content-box">
+        <view class="top">
+          <text>{{ item.title }}</text>
+          <text>{{ item.createTime }}</text>
+        </view>
+        <text class="content">
+          {{ item.content }}
+        </text>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+  .card-box + .card-box {
+    border-top: 2rpx solid #f5f5f5;
+    padding-top: 18rpx !important;
+  }
+  .card-box {
+    padding: 20rpx 30rpx;
+    display: flex;
+    align-items: center;
+    .icon-box {
+      flex-shrink: 0;
+      width: 84rpx;
+      height: 84rpx;
+      border-radius: 84rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+    }
+    .content-box {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      .top {
+        display: flex;
+        justify-content: space-between;
+        text {
+          font-size: 32rpx;
+          color: #333333;
+          &:last-child {
+            font-size: 28rpx;
+            color: #a5a5a5;
+          }
+        }
+      }
+      .content {
+        margin-top: 6rpx;
+        font-size: 28rpx;
+        color: #979797;
+        // 超过1行显示省略号
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        line-clamp: 1;
+      }
+    }
+  }
+</style>