subject_gxj/xj_project_app_2024_2_18/pages/message/index.vue

<script setup>
  import {
    ref
  } from "vue";

  import {
    onLoad,
    onShow,
    onUnload,
  } from "@dcloudio/uni-app";

  import {
    getMessageList,
    getMessageCreateList,
    getMessageNum
  } from "@/api/work/message.js";
  import {
    toast,
    showConfirm,
    tansParams
  } from '@/utils/common'
  let isOver = ref(true)
  // 切换
  let switchActiveArr = ['未读', '已读', '自发'];
  let switchActive = ref('未读');
  const switchSetActive = function(val) {
    defaultCurrent.value = val;
    switchActive.value = switchActiveArr[val];
    searchInfo.value.pageNo = 1
    isOver.value = true
    if (switchActive.value === "已读") {
      searchInfo.value.read = true
      getList();
    }
    if (switchActive.value === "未读") {
      searchInfo.value.read = false
      getList();
    }
    if (switchActive.value === "自发") {
      getCreateList();
    }
  };

  // swiper
  let defaultCurrent = ref(0);
  const chgangeSwiperItem = function(e) {
    switchActive.value = switchActiveArr[e.detail.current];
  }

  // 数据
  let unReadList = ref([]);
  let readList = ref([]);
  let createList = ref([]);

  // 获取数据
  let searchInfo = ref({
    pageNo: 1,
    pageSize: 10,
    read: false,
    beginDate: '',
    endDate: '',
    userName: '',
    content: '',
  });



  function getList() {
    if (searchInfo.value.pageNo == 1) {
      readList.value = []
      unReadList.value = []
    }
    console.log(searchInfo.value, '列表请求参数');
    if (isOver.value) {
      getMessageList(searchInfo.value).then(res => {
        if (res.data.pageTotal == 0 || res.data.pageTotal <= searchInfo.value.pageNo) {
          isOver.value = false
        }
        if (searchInfo.value.read) {
          readList.value = readList.value.concat(res.data.list);
        } else {
          unReadList.value = unReadList.value.concat(res.data.list);
        }
      });
    }

  };

  let searchObj = {};

  function getCreateList() {
    if (searchInfo.value.pageNo == 1) {
      createList.value = []
    }
    console.log(searchInfo.value, '列表请求参数');
    if (isOver.value) {
      getMessageCreateList(searchInfo.value).then(res => {
        if (res.data.pageTotal == 0 || res.data.pageTotal <= searchInfo.value.pageNo) {
          isOver.value = false
        }
        createList.value = createList.value.concat(res.data.list);
      })
    }

  }

  // 跳转页面
  function goToPage(url) {
    uni.navigateTo({
      url
    })
  }

  // 去详情
  function goToDetail(type, id, userName, content) {
    if (type === "unread") {
      console.log(unReadList.value);
      let index = unReadList.value.findIndex(item => item.id === id);
      unReadList.value.splice(index, 1)
    }
    uni.navigateTo({
      url: `/pages/message/detail/index?type=${type}&id=${id}&userName=${userName}&content=${content}`
    })
  }

  // 改数量
  function getMessageCount() {
    getMessageNum().then(res => {
      if (res.data.count) {
        uni.setTabBarBadge({ //显示数字
          index: 1, //tabbar下标
          text: res.data.count //数字
        })
      } else {
        uni.removeTabBarBadge({ //显示数字
          index: 1, //tabbar下标
        })
      }
    })
  }

  //触底加载

  function onScrolltData() {
    searchInfo.value.pageNo++
    if (switchActive.value === "已读") {
      searchInfo.value.read = true
      getList();
    }
    if (switchActive.value === "未读") {
      searchInfo.value.read = false
      getList();
    }
    if (switchActive.value === "自发") {
      getCreateList();
    }
    if (!isOver.value) {
      toast('无更多消息')
    }
  }


  //跳转搜索
  function gotoSearch(e) {
    uni.$u.route({
      url: 'pages/message/search/index',
      params: searchInfo.value
    })
  }


  function search() {
    isOver.value = true
    searchInfo.value.pageNo = 1
    if (switchActive.value === "已读") {
      searchInfo.value.read = true
      getList();
    }
    if (switchActive.value === "未读") {
      searchInfo.value.read = false
      getList();
    }
    if (switchActive.value === "自发") {
      getCreateList();
    }
  }

  onLoad(() => {
    uni.$on('messageSearch', resolve => {
      searchInfo.value.pageNo = 1
      isOver.value = true
      searchInfo.value.content = resolve.content
      searchInfo.value.beginDate = resolve.beginDate
      searchInfo.value.endDate = resolve.endDate
      searchInfo.value.userName = resolve.userName
      search();

      console.log('执行搜索', resolve);
    })
    search()
  })

  onShow(() => {
    getMessageCount();
  })

  onUnload(() => {
    uni.$off('messageSearch');
  })
</script>

<template>
  <view class="container" style="padding-top: 0 !important;">
    <view class="top-box">
      <view class="tabs-layer">
        <view class="tabs-search" @click="gotoSearch()">
          <image src="@/static/images/messageSearch.svg" mode=""></image>
          <text>查询</text>
        </view>
        <view class="tabs-box">
          <view class="switch-item" :class="switchActive === '未读'?'active':''" @click="switchSetActive(0)">未读
          </view>
          <view class="switch-item" :class="switchActive === '已读'?'active':''" @click="switchSetActive(1)">已读
          </view>
          <view class="switch-item" :class="switchActive === '自发'?'active':''" @click="switchSetActive(2)">自发
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <swiper class="swiper" :current="defaultCurrent" @change="chgangeSwiperItem">
        <swiper-item>
          <scroll-view class="swiper-item-content" scroll-y @scrolltolower="onScrolltData">
            <view class="card" v-for="(item,index) in unReadList" :key="index">
              <view class="card-status-message no-read">
                未读
              </view>
              <view class="card-massage-top">
                <view class="time">
                  {{item.createTime}}
                </view>
                <view class="view-btn" @click="goToDetail('unread',item.id,item.userName,item.content)">
                  查看
                </view>
              </view>
              <view class="card-massage-from">
                <view class="card-massage-from-item">
                  <view class="item-label">
                    发送人
                  </view>
                  <view class="item-text">
                    {{item.userName}}
                  </view>
                </view>
                <view class="card-massage-from-item">
                  <view class="item-label">
                    内&nbsp;&nbsp;&nbsp;容
                  </view>
                  <view class="item-text">
                    {{item.content}}
                  </view>
                </view>
              </view>
            </view>
            <view class="item-empty" v-if="unReadList.length === 0">
              <empty-show onlyText showText='暂无消息'></empty-show>
            </view>
          </scroll-view>
        </swiper-item>

        <swiper-item>
          <scroll-view class="swiper-item-content" scroll-y @scrolltolower="onScrolltData">
            <view class="card" v-for="(item,index) in readList" :key="index">
              <view class="card-status-message over-read">
                已读
              </view>
              <view class="card-massage-top">
                <view class="time">
                  {{item.createTime}}
                </view>
                <view class="view-btn" @click="goToDetail('read',item.id,item.userName,item.content)">
                  查看
                </view>
              </view>
              <view class="card-massage-from">
                <view class="card-massage-from-item">
                  <view class="item-label">
                    发送人
                  </view>
                  <view class="item-text">
                    {{item.userName}}
                  </view>
                </view>
                <view class="card-massage-from-item">
                  <view class="item-label">
                    内&nbsp;&nbsp;&nbsp;容
                  </view>
                  <view class="item-text">
                    {{item.content}}
                  </view>
                </view>
              </view>
            </view>
            <view class="item-empty" v-if="readList.length === 0">
              <empty-show onlyText showText='暂无消息'></empty-show>
            </view>
          </scroll-view>
        </swiper-item>

        <swiper-item>
          <scroll-view class="swiper-item-content" scroll-y @scrolltolower="onScrolltData">
            <view class="card" v-for="(item,index) in createList" :key="index">
              <view class="card-status-message no-read" v-if="item.status == '0'">
                未读
              </view>
              <view class="card-status-message over-read" v-if="item.status == '1'">
                已读
              </view>
              <view class="card-massage-top">
                <view class="time">
                  {{item.createTime}}
                </view>
                <!-- 								<view class="view-btn" @click="goToDetail('unread',item.id,item.userName,item.content)">
									查看
								</view> -->
              </view>
              <view class="card-massage-from">
                <view class="card-massage-from-item">
                  <view class="item-label">
                    接收人
                  </view>
                  <view class="item-text">
                    {{item.userName}}
                  </view>
                </view>
                <view class="card-massage-from-item">
                  <view class="item-label">
                    内&nbsp;&nbsp;&nbsp;容
                  </view>
                  <view class="item-text">
                    {{item.content}}
                  </view>
                </view>
              </view>
            </view>

            <view class="item-empty" v-if="createList.length === 0">
              <empty-show onlyText showText='暂无消息'></empty-show>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <view class="send-massage">
      <text @click="goToPage('/pages/message/send/index')">发送<br />消息</text>
    </view>

  </view>
</template>

<style lang="scss" scoped>
  .item-empty {
    width: 100%;
    height: calc(100% - 32rpx);
  }

  .send-massage {
    position: relative;
    position: fixed;
    bottom: calc(var(--window-bottom) + 16rpx);
    right: 8rpx;
    width: 160rpx;
    height: 160rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    background-image: url('@/static/massage-send-icon.svg');

    text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-58%, -55%);
    }
  }

  .top-box {
    height: calc(var(--status-bar-height) + 88rpx);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #002F69;
  }

  .tabs-layer {
    padding: 0 2.5% 0 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20rpx;
    width: 100%;
    background-color: #002F69;
    height: 88rpx;

    .tabs-search {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5rpx;
      width: 128rpx;
      height: 56rpx;
      // background: #FFFFFF;
      border: 2rpx solid #244B7E;
      border-radius: 12rpx;
      opacity: 0.9;
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      text {
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
      }
    }

    .tabs-box {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 72rpx;

      .switch-item {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }

  .active {
    font-size: 32rpx;
    color: #FFFFFF !important;
  }

  .over-read {
    background-color: #C7FDD9;
    color: #03872F;
  }

  .no-read {
    background-color: #FFCBC1 !important;
    color: #B00909;
  }

  .content {
    width: 100%;
    height: calc(100vh - var(--status-bar-height) - 88rpx - var(--window-bottom));

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-item-content {
        height: 100%;

        .line {
          width: 100%;
          height: 32rpx;
        }
      }
    }
  }

  .card {
    width: 95%;
    padding: 18rpx 44rpx !important;
    margin: auto;
    margin-top: 32rpx;

    .card-status-message {
      position: absolute;
      top: 18rpx;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 96rpx;
      height: 48rpx;
      background: #D3F4FF;
      border-radius: 16rpx 0rpx 0rpx 16rpx;
    }

    .card-massage-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-right: 80rpx;

      .time {
        font-size: 24rpx;
        font-weight: 300;
        color: #444444;
      }

      .view-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96rpx;
        height: 48rpx;
        background: #F6F6F6;
        border-radius: 16rpx;
        font-size: 28rpx;
        color: #275797;
        font-weight: 500;
      }
    }

    .card-massage-from {
      margin-top: 16rpx;
      padding-top: 28rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 14rpx;
      width: 100%;
      border-top: 1px dashed #DDDDDD;
      min-height: 150rpx;

      .card-massage-from-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20rpx;

        .item-label {
          width: 100rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #B5B5B5;
          white-space: nowrap;
        }

        .item-text {
          width: calc(100% - 140rpx);
          flex-grow: 1;
          font-size: 28rpx;
          font-weight: 500;
          color: #222222;
          line-break: anywhere;
        }
      }
    }

    .card-item-page {
      display: flex;
      width: 100%;
      padding: 20rpx 26rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: 400;


      .card-item-key {
        color: #939AA5;
        min-width: 140rpx;
      }

      .card-item-value {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: #343437;
        line-height: 46rpx;
        line-break: anywhere;
      }

      .card-item-look {
        color: #1763E7;
      }

      .card-item-read {
        width: 62rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        background-color: #C7FDD9;
        border-radius: 12rpx;
        font-size: 24rpx;
        color: #03872F;
      }

      .unread {
        background-color: #FFCBC1;
        color: #B00909;
      }
    }
  }
</style>