wxapp_shuibei/pages/users/customer_service_message/index.vue

<template>
  <view>
    <view class="message-list" v-if="customerList.length > 0">
      <!-- 客服消息 -->
      <view
        class="message-item"
        v-for="(item, index) in customerList"
        :key="index"
        @click="handleCustomerClick(item)"
      >
        <view class="message-avatar service-avatar">
          <uni-icons
            size="30"
            color="#ffffff"
            customPrefix="iconfont"
            type="icon-kefu2"
          />
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{ item.imTeamName }}</text>
            <!-- <text class="badge" >{{ item.count }}</text> -->
          </view>
          <!-- <text class="message-desc" v-show="item.newMsg">{{ item.newMsg }}</text> -->
        </view>
      </view>
    </view>
    <!-- 数据为空 -->
    <view class="not-data-wrapper" v-if="notDataFlag">
      <uni-icons type="info" size="70" color="#999999"></uni-icons>
      <p>暂无数据</p>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onPullDownRefresh } from "@dcloudio/uni-app";
import { getCustomerServiceList } from "@/api/customerService";
import { useAppStore } from "@/stores/app";
let customerList = ref([]); //客服列表
let notDataFlag = ref(false); //数据为空
const appStore = useAppStore();
onMounted(() => {
  getList();
});
onPullDownRefresh(() => {
  getList();
});
// 获取客服列表
function getList() {
  try {
    getCustomerServiceList()
      .then((res) => {
        if (res.data && res.data.list && res.data.list.length > 0) {
          customerList.value = res.data.list;
        } else {
          notDataFlag.value = true;
        }
      })
      .catch((err) => {
        notDataFlag.value = true;
      });
  } catch (error) {
    notDataFlag.value = true;
  }
}
// 点击客服
const handleCustomerClick = (item) => {
  // uni.navigateTo({ url: `/pages/message_customer/message_customer?code=${item.imTeamCode}` });
  let chatParam = ref({
    avatar: "",
    where: "teamServes",
  });
  chatParam.value.to = item.imTeamCode;
  chatParam.value.nickName = item.imTeamName || "客服";
  appStore.updata_userSelecChat(chatParam);
  uni.navigateTo({ url: `/pages/private_chat/index` });
};
</script>

<style lang="scss" scoped>
.message-list {
  .message-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20rpx 40rpx;
    margin-bottom: 8px;
    position: relative;
    &:active {
      background-color: #dedede;
    }

    .message-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 20px;

      &.activity-avatar {
        background-color: #2196f3;
        color: white;
      }

      &.service-avatar {
        background-color: #fc9145;
        color: white;
      }
    }

    .message-content {
      flex: 1;

      .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* margin-bottom: 4px; */
        position: relative;
        height: 20px;

        .message-title {
          font-size: 16px;
          /* font-weight: 500; */
          color: #333;
        }
      }

      .message-desc {
        font-size: 14px;
        color: #999;
      }
    }

    .message-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
    }

    .message-time {
      font-size: 14px;
      color: #999;
      margin-bottom: 10rpx;
    }

    .badge {
      background-color: #ff4757;
      color: white;
      border-radius: 50%;
      width: 38rpx;
      height: 38rpx;
      line-height: 38rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18rpx;
      font-weight: 500;
      padding: 0 4px;
      border: 2px solid #fff;
    }

    .unread-dot {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      background-color: #ff4757;
      border-radius: 50%;
    }
  }
}
</style>