wx-starlock/pages/main/notificationList.vue

<template>
  <scroll-view
    v-if="deviceInfo"
    scroll-y="true"
    :style="{ height: deviceInfo.windowHeight + 'px' }"
    lower-threshold="100"
    @refresherrefresh="refresherList"
    :refresher-enabled="true"
    @scrolltolower="nextPage"
    :refresher-triggered="refresherTriggered"
    @scroll="scroll"
  >
    <view v-if="isLogin">
      <view class="list" v-if="requestFinished">
        <view v-if="notificationList.length === 0">
          <image
            class="empty-list"
            src="https://oss-lock.xhjcn.ltd/mp/background_empty_list.png"
            mode="aspectFill"
          ></image>
          <view class="empty-list-text">暂无数据</view>
        </view>
        <up-swipe-action v-else>
          <up-swipe-action-item
            class="item"
            ref="swipeItem"
            :options="options"
            v-for="(notification, index) in notificationList"
            :key="notification.id"
            :threshold="50"
            @click="deleteNotification(notification, index)"
            :index="index"
            :name="index"
          >
            <view class="notification" @click="toDetail(index, notification)">
              <view v-if="notification.readAt === 0">
                <image
                  class="icon"
                  src="https://oss-lock.xhjcn.ltd/mp/icon_notification_unread.png"
                  mode="aspectFill"
                ></image>
                <view class="point"></view>
              </view>
              <image
                v-else
                class="icon"
                src="https://oss-lock.xhjcn.ltd/mp/icon_notification_read.png"
                mode="aspectFill"
              ></image>
              <view>
                <view
                  class="content"
                  :style="{ color: notification.readAt === 0 ? '#000000' : '#6c6c6c' }"
                  >{{ notification.data }}</view
                >
                <view
                  class="time"
                  :style="{ color: notification.readAt === 0 ? '#000000' : '#6c6c6c' }"
                  >{{ timeFormat(notification.createdAt, 'yyyy-mm-dd h:M') }}</view
                >
              </view>
            </view>
          </up-swipe-action-item>
        </up-swipe-action>
      </view>
    </view>
    <view v-else>
      <view class="tips">因智能门锁与账号绑定，登录为手机号登录</view>
      <label for="phone">
        <view class="button-login">登录</view>
      </label>
    </view>
  </scroll-view>
  <view
    class="delete"
    @click="deleteAllNotification"
    v-if="isLogin && requestFinished && notificationList.length !== 0"
  >
    <image
      class="delete-image"
      src="https://oss-lock.xhjcn.ltd/mp/icon_delete.png"
      mode="aspectFill"
    />
  </view>
  <button
    open-type="getPhoneNumber"
    style="display: none"
    id="phone"
    @getphonenumber="getphonenumber"
  ></button>
</template>

<script>
  import { mapActions, mapState } from 'pinia'
  import { timeFormat } from 'uview-plus'
  import { useNotificationStore } from '@/stores/notification'
  import { useBasicStore } from '@/stores/basic'
  import {
    deleteAllNotification,
    deleteNotification,
    markAsReadNotification
  } from '@/api/notification'
  import { useUserStore } from '@/stores/user'

  export default {
    data() {
      return {
        refresherTriggered: false,
        requestFinished: false,
        deviceInfo: null,
        options: [
          {
            text: '删除',
            style: {
              backgroundColor: '#f56c6c'
            }
          }
        ]
      }
    },
    computed: {
      ...mapState(useNotificationStore, [
        'notificationTotal',
        'notificationList',
        'notificationSearch'
      ]),
      ...mapState(useUserStore, ['isLogin'])
    },
    async onLoad() {
      this.deviceInfo = await this.getDeviceInfo()
      if (this.isLogin) {
        await this.getList()
      }
      this.requestFinished = true
    },
    methods: {
      timeFormat,
      ...mapActions(useNotificationStore, [
        'getNotificationList',
        'updateNotificationSearch',
        'updateNotificationItem',
        'deleteNotificationItem'
      ]),
      ...mapActions(useBasicStore, ['routeJump', 'getDeviceInfo', 'getNetworkType']),
      ...mapActions(useUserStore, ['phoneLogin']),
      async getList() {
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        const { code, message } = await this.getNotificationList(this.notificationSearch)
        uni.hideLoading()
        if (code !== 0) {
          uni.showToast({
            title: message,
            icon: 'none'
          })
        }
      },
      async getphonenumber(data) {
        if (data.detail.errMsg === 'getPhoneNumber:fail user deny') {
          return
        }

        const that = this
        uni.showLoading({
          title: '登录中'
        })
        uni.login({
          provider: 'weixin',
          async success(loginRes) {
            const result = await that.phoneLogin({
              encryptedData: data.detail.encryptedData,
              iv: data.detail.iv,
              code: loginRes.code
            })
            uni.hideLoading()
            if (!result) {
              uni.showToast({
                title: result.message,
                icon: 'none'
              })
            }
          },
          fail() {
            uni.hideLoading()
            uni.showToast({
              title: '登录失败，请重试'
            })
          }
        })
      },
      scroll() {
        this.$refs.swipeItem.forEach(item => {
          if (item.show) {
            item.closeHandler()
          }
        })
      },
      async deleteNotification(notification, index) {
        const netWork = await this.getNetworkType()
        if (!netWork) {
          return
        }

        this.$refs.swipeItem[index].closeHandler()
        uni.showModal({
          title: '提示',
          content: '确定要删除该通知吗？',
          success: async res => {
            if (res.confirm) {
              const { code, message } = await deleteNotification({
                id: notification.id
              })
              if (code === 0) {
                this.deleteNotificationItem(index)
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
              } else {
                uni.showToast({
                  title: message,
                  icon: 'none'
                })
              }
            }
          }
        })
      },
      deleteAllNotification() {
        uni.showModal({
          title: '提示',
          content: '确定要删除所有通知吗？',
          success: async res => {
            if (res.confirm) {
              const { code, message } = await deleteAllNotification()
              if (code === 0) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
                this.updateNotificationSearch({
                  pageNo: 1
                })
                await this.getNotificationList(this.notificationSearch)
              } else {
                uni.showToast({
                  title: message,
                  icon: 'none'
                })
              }
            }
          }
        })
      },
      toDetail(index, notification) {
        if (notification.readAt === 0) {
          notification.readAt = 1
          this.updateNotificationItem(index, notification)
          markAsReadNotification({
            id: notification.id
          })
        }
        this.routeJump({
          name: 'notificationDetail',
          params: {
            notification: JSON.stringify(notification)
          }
        })
      },
      async refresherList() {
        this.refresherTriggered = true
        this.updateNotificationSearch({
          pageNo: 1
        })
        const { code, message } = await this.getNotificationList(this.notificationSearch)
        if (code === 0) {
          uni.showToast({
            title: '刷新成功',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: message,
            icon: 'none'
          })
        }
        this.refresherTriggered = false
      },
      async nextPage() {
        if (
          this.notificationTotal <=
          this.notificationSearch.pageNo * this.notificationSearch.pageSize
        ) {
          return
        }
        const pageNo = this.notificationSearch.pageNo + 1
        const params = {
          ...this.notificationSearch,
          pageNo
        }
        const { code, message } = await this.getNotificationList(params)
        if (code === 0) {
          this.updateNotificationSearch({
            pageNo
          })
        } else {
          uni.showToast({
            title: message,
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }

  .u-swipe-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 700rpx;
    padding-bottom: 140rpx !important;
    overflow: inherit !important;
  }

  .u-swipe-action-item {
    overflow: inherit !important;
    background: transparent !important;
    border-radius: 32rpx !important;
  }

  .u-swipe-action-item__right {
    margin-top: 32rpx;
    border-radius: 32rpx !important;
  }

  .u-swipe-action-item__content {
    margin-left: 25rpx;
    border-radius: 32rpx !important;
  }

  .u-swipe-action-item__right__button {
    border-radius: 32rpx !important;
  }
</style>

<style lang="scss" scoped>
  .item {
    border-radius: 32rpx;
  }

  .notification {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 636rpx;
    padding: 32rpx;
    margin-top: 32rpx;
    border-radius: 32rpx;
    box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.3);

    .icon {
      width: 50rpx;
      height: 50rpx;
    }

    .point {
      position: absolute;
      top: 41rpx;
      left: 72rpx;
      width: 16rpx;
      height: 16rpx;
      background-color: #ff0000;
      border-radius: 50%;
    }

    .content {
      width: 550rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 28rpx;
      font-weight: bold;
      color: #6c6c6c;
      white-space: nowrap;
    }

    .time {
      margin-top: 5rpx;
      font-size: 24rpx;
      font-weight: bold;
      color: #6c6c6c;
    }
  }

  .delete {
    position: fixed;
    right: 30rpx;
    bottom: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100rpx;
    background-color: #5db5aa;
    border-radius: 50%;

    .delete-image {
      width: 45rpx;
      height: 45rpx;
    }
  }

  .empty-list {
    width: 150rpx;
    height: 150rpx;
    margin: 400rpx auto 20rpx 50%;
    transform: translateX(-50%);
  }

  .empty-list-text {
    font-size: 32rpx;
    color: #999999;
    text-align: center;
  }

  .tips {
    padding: 32rpx 0;
    margin-top: 40vh;
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }

  .button-login {
    width: 650rpx;
    height: 120rpx;
    margin-left: 50rpx;
    font-size: 48rpx;
    font-weight: bold;
    line-height: 120rpx;
    color: #ffffff;
    text-align: center;
    background: #63b8af;
    border-radius: 46rpx;
  }
</style>