lilishop-uniapp/pages/mine/im/list.vue

<template>
  <view class="content">
    <u-navbar
      class="my-title"
      title-size="32"
      :title="'消息(' + talkList.length + ')'"
      :fixed="true"
      :placeholder="true"
      :border="false"
      :auto-back="true"
    ></u-navbar>
    <scroll-view class="list-scroll-content" scroll-y @scrolltolower="fetchTalkList">
      
      <!-- 消息列表 -->
      <div class="iconBox">
        <view class="icon-list">
          <view class="icon-item" @click="clearUnreadMessages()">
            <div class="bag bag1">
              <u-icon name="trash" size="50" color="#fff"></u-icon>
            </div>
            <view>清除未读</view>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tabbar/home/title')">
            <div class="bag bag2">
              <u-icon name="bell" size="50" color="#fff"></u-icon>
            </div>
            <view>系统消息</view>
          </view>
        </view>
      </div>
      <u-search class="nav-search" v-model="userName" clearabled @change="fetchTalkList()" placeholder="搜索用户"
        :show-action="false"></u-search>
      <view class="talk-view" :key="index" v-for="(item, index) in talkList">
        <view>
          <view @click="onclickToTalkInfo(item)">
            <view class="talk-item-view">
              <view class="talk-img">
                <u-avatar :src="item.face" :text="item.face ? '' : item.name" bg-color="#DDDDDD"></u-avatar>
              </view>
              <view class="talk-info">
                <view class="talk-name u-line-2">{{ item.name }}
                  <u-tag class="talk-tag" size="mini" text="店铺" type="warning" v-if="item.storeFlag" />
                </view>
                <view class="talk-message">
                  <span v-if="item.lastMessageType == 'MESSAGE'">{{ item.lastTalkMessage }}</span>
                  <span v-if="item.lastMessageType == 'GOODS'">[商品链接]</span>
                  <span v-if="item.lastMessageType == 'ORDER'">[订单信息]</span>
                </view>
              </view>
              <view class="talk-time">
                <view>
                  {{ beautifyTime(item.lastTalkTime) }}
                </view>
                <view>
                  <u-badge type="error" absolute :offset="[45, 20]" :count="item.unread"></u-badge>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 空白页 -->
      <u-empty text="暂无信息" mode="list" v-if="talkList.length === 0"></u-empty>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { useStore } from '@/store'
import { getTalkList, clearmeaager } from '@/api/im.js'
import storage from '@/utils/storage.js'
import { beautifyTime } from '@/utils/filters.js'

const store = useStore()

const talkList = ref<any[]>([])
const userName = ref('')

onShow(() => {
  fetchTalkList()
})

onPullDownRefresh(() => {
  fetchTalkList()
  console.log('下拉事件')
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})

onReachBottom(() => {
  fetchTalkList()
})

function hideLoadingIfNeeded() {
  if (store.state.isShowToast) uni.hideLoading()
}

function onclickToTalkInfo(val: any) {
  storage.setTalkToUser(val)
  uni.navigateTo({
    url: '/pages/mine/im/index?talkId=' + val.id,
  })
}

function fetchTalkList() {
  const params = {
    userName: userName.value,
  }
  uni.showLoading({
    title: '加载中',
  })
  getTalkList(params).then((res) => {
    hideLoadingIfNeeded()
    if (res.data.success) {
      talkList.value = res.data.result
      console.log(talkList.value, 'this.talkListthis.talkList')
    }
  })
}

function navigateTo(url: string) {
  uni.navigateTo({
    url,
  })
}

function clearUnreadMessages() {
  clearmeaager().then((res) => {
    console.log(res)
    if (res.data.code == 200) {
      fetchTalkList()
      uni.showToast({
        icon: 'none',
        title: res.data.message,
      })
    }
  })
}
</script>
  
<style lang="scss" scoped>
.talk-view {
  border-radius: 20rpx;
  background-color: #fff;

  .talk-item-view {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 10rpx 20rpx;

    .talk-img {
      width: 100rpx;
      height: 100rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }

    .talk-info {
      padding-left: 30rpx;
      flex: 1;

      .talk-name {
        font-size: 28rpx;
        margin-bottom: 10rpx;
        font-weight: bold;
        color: #333333;
      }

      .talk-message {
        font-size: 28rpx;
        margin-top: 10rpx;
        color: #888787;

      }


      .talk-tag {
        margin-left: 10rpx;
      }
    }
  }
}

.talk-time {
  position: relative;
}

.iconBox {
  width: 94%;
  margin: 0 3%;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
  // transform: translateY(-30rpx);
}

.icon-list {
  height: 140rpx;
  text-align: center;
  font-size: $font-sm;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 3%;
  color: #999;

  .icon-item {
    position: relative;
    line-height: 2em;
    width: 96rpx;

    :first-child {
      font-size: 48rpx;
      margin-bottom: 10rpx;
    }
  }
}

.bag {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin: 0 auto;
}

.bag1 {
  background: #ff0015;
}

.bag2 {
  background: #73AF7C;
}
</style>
<style lang="scss" scoped>
@import "./index-app.scss";
</style>