ufutx_love_mp/src/pages/tabBar/news.wpy

<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
  background-color: #ffffff;
}

.ui-top-menu-list{
  padding: 0 20rpx;
  margin: 30rpx 0 20rpx 0;

  .ui-top-menu-item{
    width: 25%;

    .ui-top-menu-icon{
      width: 120rpx;
      height: 120rpx;

      .ui-top-menu-count{
        position: absolute;
        top: 12rpx;
        right: 2rpx;
        margin: auto;
        width: 36rpx;
        height: 36rpx;
        line-height: 30rpx;
        border-radius: 50%;
        font-size: 22rpx;
        color: #ffffff;
        background: #F1013D;
        border: 4rpx solid #ffffff;
      }
    }

    .ui-top-menu-title{
      margin-top: -20rpx;
    }
  }
}

.ui-container{
  .ui-no-data-box {
    text-align: center;
    .ui-no-data-icon {
      width: 440rpx;
      height: 360rpx;
      margin: 160rpx auto -10rpx auto;
    }
  }

  .ui-touch-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    padding: 24rpx 0 24rpx 30rpx;
  }

  .ui-content {
    width: 100%;
    margin-right: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    margin-left: -90px;
    overflow: hidden;
    position: relative;

    .ui-messageBox {
      margin-top: 2rpx;
      margin-left: 16rpx;

      .ui-is-top{
        margin-left: 16rpx;
        padding-left: 8rpx;
        width: 76rpx;
        height: 32rpx;
        background: linear-gradient(90deg, #FFD18D 0%, #FFA564 100%);
        border-radius: 8rpx;
        line-height: 32rpx;
      }

      .ui-name {
        width: 400rpx;
      }

      .ui-message {
        width: 524rpx;
      }
    }

    .ui-unreadBox {
      position: absolute;
      right: 30rpx;
      top: 0;
      overflow: hidden;

      .ui-lastTime {
        margin-top: 10rpx;
      }

      .ui-no-disturbing {
        width: 32rpx;
        height: 32rpx;
        margin-top: 12rpx;
      }

      .ui-unreadNum, .ui-unreadNum_1 {
        float: right;
        width: 28rpx;
        height: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        font-size: 20rpx;
        background: #f1013D;
        color: #fff;
        margin-top: 12rpx;
      }

      .ui-unreadNum_1 {
        width: 44rpx;
        border-radius: 14rpx;
      }
    }
  }

  .ui-del-box {
    background: #f1013D;
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }

  .touch-move-active .ui-content,
  .touch-move-active .ui-del-box {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
</style>
<template>
  <view class="ui-news">
    <cuCustom></cuCustom>
    <view class="ui-top-menu-list f-fbc">
      <view class="text-center ui-top-menu-item ui-relative" v-for="(item,index) in menuList" :key="index" @tap="jumpPath(item)">
        <image class="ui-top-menu-icon ui-relative" :src="item.icon" mode="aspectFit">
          <view class="ui-top-menu-count" v-if="item.count">{{item.count}}</view>
        </image>
        <view class="color666 font_24 ui-top-menu-title">{{item.title}}</view>
      </view>
    </view>
    <view class="ui-container">
      <view class="ui-no-data-box" v-if="loading && list.length == 0">
        <image class="ui-no-data-icon" src="https://image.fulllinkai.com/202410/08/d1bf2764cef610125120a0465f108e71.png" mode="widthFix"></image>
        <view class="font_32 color999">暂无聊天消息</view>
      </view>
      <block v-else>
        <view class="ui-touch-item" :class="{'touch-move-active' : item.isTouchMove}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" v-for="(item,index) in list" :key="index" @tap="jumpChatPath(item)">
          <view class="ui-content">
            <image class="cu-avatar round lg flo_l" :src="item.icon" mode="aspectFit" @tap.stop="jumpDetailPath(item)"></image>
            <view class="ui-messageBox flo_l">
              <view class="font_30 color333 ui-name ellipsis_1 f-fcl">
                {{item.title}}
                <view v-if="item.is_top == 1" class="ui-is-top font_20 white">已置顶</view>
              </view>
              <view class="ui-message ellipsis_1 font_24 color666">
                <span v-if="item.at_show" class="red">[有人@你]</span>
                {{item.content}}
              </view>
            </view>
            <view class="ui-unreadBox color999 text-right">
              <view class="ui-lastTime font_22">{{item.last_time}}</view>
              <block v-if="item.muteTeam">
                <image class="ui-no-disturbing" src="https://image.fulllinkai.com/202406/29/c682c95e835831195a5af75c303a9720.png" mode="widthFix"></image>
              </block>
              <block v-else>
                <view class="ui-unreadNum" v-if="item.new_count && item.new_count <= 99">{{item.new_count}}</view>
                <view class="ui-unreadNum_1" v-if="item.new_count && item.new_count > 99">{{item.new_count}}</view>
              </block>
            </view>
          </view>
          <view v-if="item.chat_type == 'linkmen'" class="ui-del-box" @tap="quitGroup(item, index)">退出</view>
          <view v-else class="ui-del-box" @tap="deleteList(item, index)">删除</view>
        </view>
      </block>
    </view>
    <loginDialog :loginShow="loginShow" @hiddenLogin="hiddenLogin"></loginDialog>
  </view>
</template>

<script>
import wepy from '@wepy/core'
import https from '../../mixins/https'
import base from '../../mixins/base'
import {service} from '../../config'

wepy.page({
  config: {},
  mixins: [https, base],

  data: {
    loginShow: false,
    loading: false,
    menuList: [
      {
        icon: 'https://image.fulllinkai.com/202201/21/a2a7445a8b70694056dd7795ef5ecc4e.png',
        title: '系统通知',
        path: '/pages/news/systemNews',
        count: ''
      },
      {
        icon: 'https://image.fulllinkai.com/202201/21/1d8c26aa4e48a965bab9eb000db8d054.png',
        title: '好友申请',
        path: '/pages/news/friendRequest',
        count: ''
      },
      {
        icon: 'https://image.fulllinkai.com/202201/21/1715406efd38dfe258b23f632b9c16eb.png',
        title: '访客/粉丝',
        path: '/pages/news/visitor?type=fans',
        count: ''
      },
      {
        icon: 'https://image.fulllinkai.com/202201/21/9571a0bdddf66ea097eecd5a4a601436.png',
        title: '我看过谁',
        path: '/pages/news/review?type=review&title=我看过谁',
        count: ''
      }
    ],
    index: null, // 滑动删除聊天消息下标
    groupSessionsCount: [], // 群聊消息未读数
    teamAtList: [], // 群聊@
    page: 1,
    no_more: false,
    list: [] // 消息列表数据
  },
  methods: {
    getList() {
      let vm = this
      let data = {
        page: vm.page
      }
      vm.$showLoading('加载中...')
      vm.$get({url: `${service.host}/chat/linkmen`, data}).then(({code, data}) => {
        if (code === 0) {
          vm.teamAtList = wx.getStorageSync('teamAtList') || []
          vm.groupSessionsCount = wx.getStorageSync('teamsSessionsCount') || []
          let arrList = []
          if (data.data && data.data.length > 0) {
            data.data.forEach((item) => {
              if (item.chat_type == 'group_chat') {
                arrList.push({
                  chat_type: item.chat_type,
                  icon: item.other_photo,
                  title: item.other_nickname,
                  is_top: item.is_top,
                  content: item.last_user_nickname + '：' + item.content,
                  last_time: item.last_time_str,
                  id: item.join_to_id,
                  hidden_profile: 'NONE',
                  msgId: item.id,
                  isTouchMove: false,
                  new_count: wx.getStorageSync('muteNotList') && wx.getStorageSync('muteNotList').length > 0 ? 0 : vm.getGroupCount(item.join_to_id)
                })
              } else {
                arrList.push({
                  chat_type: item.chat_type,
                  icon: item.other_photo,
                  title: item.other_nickname,
                  is_top: item.is_top,
                  content: item.content,
                  last_time: item.last_time_str,
                  id: item.join_to_id,
                  hidden_profile: '',
                  type: item.other_type,
                  msgId: item.last_id,
                  isTouchMove: false,
                  new_count: item.new_count
                })
              }
            })
          }
          vm.list = [...arrList]
          // 赋值所在群组已开启消息免打扰字段
          if (wx.getStorageSync('muteNotList') && wx.getStorageSync('muteNotList').length > 0) {
            let arr = wx.getStorageSync('muteNotList')
            arr.forEach((i) => {
              vm.list.forEach((j) => {
                if (j.chat_type == 'group_chat' && i.teamId == j.id && !j.muteState) {
                  j.new_count = 0
                  j.muteTeam = i.muteTeam
                  j.muteState = true
                } else if (j.chat_type == 'group_chat') {
                  j.new_count = vm.getGroupCount(j.id)
                }
              })
            })
          }
          console.log(vm.list, '777')
          if (vm.list.length < 15 || data.data.length < 15) {
            vm.no_more = true
          }
        }
        setTimeout(() => {
          vm.loading = true
        }, 500)
        wx.hideLoading()
      }).catch(err => {
        wx.hideLoading()
        vm.loading = true
        console.log(err)
      })
    },

    getNewCount() {
      let vm = this
      vm.$get({url: `${service.host}/notice/count`}).then(({code, data}) => {
        if (code === 0) {
          vm.menuList[0].count = data.system_count
          vm.menuList[1].count = data.friend_count
          vm.menuList[2].count = data.follow_count + data.visit_count
          let {notice_count} = data
          let groupCountList = wx.getStorageSync('teamsSessionsCount') || []
          let groupCount = 0
          if (groupCountList.length > 0) {
            for (let i = 0; i < groupCountList.length; i++) {
              groupCount += groupCountList[i].unread
            }
          }
          if ((notice_count + groupCount) > 0) {
            wx.setTabBarBadge({
              index: 2,
              text: `${notice_count + groupCount}`
            })
          } else {
            wx.removeTabBarBadge({
              index: 2
            })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },

    quitGroup (e, index) {
      let vm = this
      wx.showModal({
        title: '温馨提示',
        content: `是否确认退出${e.title}群聊？`,
        success: function (res) {
          if (res.confirm) {
            vm.$showLoading('')
            vm.$post({url: `${service.host}/team/${e.id}/leave`}).then(({code, data}) => {
              if (code == 0) {
                vm.$showToast(`已退出群聊`)
                vm.list.splice(index, 1)
              }
              wx.hideLoading()
            }).catch(() => {
              wx.hideLoading()
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },

    // 删除联系人列表
    deleteList (e, index) {
      let vm = this
      wx.showModal({
        title: '温馨提示',
        content: `是否确认删除？`,
        success: function (res) {
          if (res.confirm) {
            vm.$showLoading('')
            vm.$delete({url: `${service.host}/chat/linkmen/${e.id}`}).then(({code, data}) => {
              if (code == 0) {
                vm.$showToast(`已删除`)
                vm.list.splice(index, 1)
              }
              wx.hideLoading()
            }).catch(() => {
              wx.hideLoading()
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },

    // 获取群未读数
    getGroupCount(id) {
      let newCount = this.groupSessionsCount.filter(item => {
        return item.id == id
      })
      if (newCount.length === 0) {
        return 0
      }
      return newCount[0].unread
    },

    touchstart (e) {
      let vm = this
      vm.list.forEach(function (v, i) {
        if (v.isTouchMove) { v.isTouchMove = false }
      })
      vm.startX = e.changedTouches[0].clientX
      vm.startY = e.changedTouches[0].clientY
    },

    touchmove (e) {
      let vm = this
      vm.index = e.currentTarget.dataset.index
      let startX = vm.startX
      let startY = vm.startY
      let touchMoveX = e.changedTouches[0].clientX
      let touchMoveY = e.changedTouches[0].clientY
      let angle = vm.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY })
      vm.list.forEach(function (v, i) {
        v.isTouchMove = false
        if (Math.abs(angle) > 30) return
        if (i == vm.index) {
          v.isTouchMove = touchMoveX <= startX
        }
      })
    },

    angle(start, end) {
      let _X = end.X - start.X
      let _Y = end.Y - start.Y
      return 360 * Math.atan(_Y / _X) / (2 * Math.PI)
    },

    // 聊天对话
    jumpChatPath(e) {
      let vm = this
      // 校验是否完成注册资料
      if (!vm.$signInVerify()) {
        vm.loginShow = true
        return
      }
      let url = ``
      if (e.chat_type === 'group_chat') {
        url = `/pages/news/groupChitchat?id=${e.id}&name=${encodeURIComponent(e.title)}&pic=${e.icon}`
      } else {
        url = `/pages/news/chitchat?id=${e.id}&name=${encodeURIComponent(e.title)}&type=${e.type}&pic=${e.icon}`
      }
      wx.navigateTo({url: url})
    },
    // 用户详情
    jumpDetailPath(e) {
      let vm = this
      // 校验是否完成注册资料
      if (!vm.$signInVerify()) {
        vm.loginShow = true
        return
      }
      let url = ``
      if (e.chat_type === 'group_chat') {
        url = `/pages/news/groupChitchat?id=${e.id}&name=${encodeURIComponent(e.title)}&pic=${e.icon}`
      } else {
        url = `/pages/home/information?id=${e.id}`
      }
      wx.navigateTo({url: url})
    },
    jumpPath(e) {
      let vm = this
      // 校验是否完成注册资料
      if (!vm.$signInVerify()) {
        vm.loginShow = true
        return
      }
      wx.navigateTo({url: e.path})
    },
    hiddenLogin() {
      let vm = this
      vm.loginShow = false
    }
  },
  // 上拉获取更多数据
  onReachBottom() {
    let vm = this
    if (!vm.no_more) {
      vm.page++
      vm.getList()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    let vm = this
    vm.page = 1
    vm.no_more = false
    vm.getList()
  },
  onShow() {
    let vm = this
    vm.getNewCount()
    vm.getList()
  },
  onLoad() {}
})
</script>
<config>
{
navigationBarTitleText: '消息',
navigationStyle: 'custom',
enablePullDownRefresh: true,
backgroundColorTop: '#ffffff',
backgroundColorBottom: '#ffffff',
usingComponents: {
cuCustom: '~@/components/cuCustom',
loginDialog: '~@/components/loginDialog',
}
}
</config>