372 lines
9.7 KiB
Vue
372 lines
9.7 KiB
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="/static/images/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="/static/images/icon_notification_unread.png" mode="aspectFill"></image>
|
||
<view class="point"></view>
|
||
</view>
|
||
<image v-else class="icon" src="/static/images/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="/static/images/icon_delete.png" mode="aspectFill"></image>
|
||
</view>
|
||
<button open-type="getPhoneNumber" style="display:none" id="phone" @getphonenumber="getphonenumber"></button>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions, mapState } from 'pinia'
|
||
import { useNotificationStore } from '@/stores/notification'
|
||
import { useBasicStore } from '@/stores/basic'
|
||
import { timeFormat } from 'uview-plus'
|
||
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 result = await this.phoneLogin({
|
||
encryptedData: data.detail.encryptedData,
|
||
iv: data.detail.iv
|
||
})
|
||
if(!result) {
|
||
uni.showToast({
|
||
title: '登录失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
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 {
|
||
overflow: inherit !important;
|
||
width: 700rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding-bottom: 140rpx !important;
|
||
}
|
||
|
||
.u-swipe-action-item {
|
||
overflow: inherit !important;
|
||
border-radius: 32rpx !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.u-swipe-action-item__right {
|
||
margin-top: 32rpx;
|
||
border-radius: 32rpx !important;
|
||
}
|
||
|
||
.u-swipe-action-item__content {
|
||
border-radius: 32rpx !important;
|
||
margin-left: 25rpx;
|
||
}
|
||
|
||
.u-swipe-action-item__right__button {
|
||
border-radius: 32rpx !important;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.item {
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
.notification {
|
||
border-radius: 32rpx;
|
||
margin-top: 32rpx;
|
||
display: flex;
|
||
width: 636rpx;
|
||
padding: 32rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
|
||
.icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.point {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background-color: #ff0000;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 41rpx;
|
||
left: 72rpx;
|
||
}
|
||
|
||
.content {
|
||
width: 550rpx;
|
||
font-size: 28rpx;
|
||
color: #6c6c6c;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #6c6c6c;
|
||
margin-top: 5rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.delete {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
background-color: #5db5aa;
|
||
position: fixed;
|
||
bottom: 80rpx;
|
||
right: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.delete-image {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
}
|
||
|
||
.empty-list {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
margin: 400rpx auto 20rpx 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.empty-list-text {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.tips {
|
||
margin-top: 40vh;
|
||
padding: 32rpx 0;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.button-login {
|
||
border-radius: 46rpx;
|
||
width: 650rpx;
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
text-align: center;
|
||
margin-left: 50rpx;
|
||
background: #63b8af;
|
||
color: #ffffff;
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|