121 lines
2.8 KiB
Vue
121 lines
2.8 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { getUserNoticeList } from '@/api/my-index'
|
||
import { navigateTo } from '../../../../utils/router'
|
||
|
||
// 类型：1-系统 gear 2-消息 chatbubble 3-提醒 notification
|
||
const iconMap = [
|
||
{ icon: 'gear', bg: '#05b0ff1f', color: '#05b0ff' },
|
||
{ icon: 'chatbubble', bg: '#23c4311a', color: '#23c431' },
|
||
{ icon: 'notification', bg: '#dcdf111f', color: '#dbdf11' }
|
||
]
|
||
|
||
const paging = ref(null)
|
||
const dataList = ref([])
|
||
const getData = async (pageNum, pageSize) => {
|
||
try {
|
||
const res = await getUserNoticeList({
|
||
pageNum,
|
||
pageSize
|
||
})
|
||
paging.value.complete(res.rows)
|
||
} catch (error) {
|
||
paging.value.complete(false)
|
||
}
|
||
}
|
||
|
||
const onGo = item => {
|
||
navigateTo('/pages/my-index/set-up/message/details', { id: item.id })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<z-paging
|
||
ref="paging"
|
||
v-model="dataList"
|
||
safe-area-inset-bottom
|
||
use-safe-area-placeholder
|
||
:default-page-size="15"
|
||
:show-loading-more-no-more-view="false"
|
||
@query="getData"
|
||
>
|
||
<view
|
||
v-for="item in dataList"
|
||
:key="item.id"
|
||
class="card-box"
|
||
@click="onGo(item)"
|
||
>
|
||
<view
|
||
:style="{ background: iconMap[item.type - 1].bg }"
|
||
class="icon-box"
|
||
>
|
||
<uni-icons
|
||
:type="iconMap[item.type - 1].icon"
|
||
:color="iconMap[item.type - 1].color"
|
||
size="30"
|
||
></uni-icons>
|
||
</view>
|
||
<view class="content-box">
|
||
<view class="top">
|
||
<text>{{ item.title }}</text>
|
||
<text>{{ item.createTime }}</text>
|
||
</view>
|
||
<text class="content">
|
||
{{ item.content }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.card-box + .card-box {
|
||
border-top: 2rpx solid #f5f5f5;
|
||
padding-top: 18rpx !important;
|
||
}
|
||
.card-box {
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.icon-box {
|
||
flex-shrink: 0;
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 84rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
}
|
||
.content-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
text {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
&:last-child {
|
||
font-size: 28rpx;
|
||
color: #a5a5a5;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
margin-top: 6rpx;
|
||
font-size: 28rpx;
|
||
color: #979797;
|
||
// 超过1行显示省略号
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
line-clamp: 1;
|
||
}
|
||
}
|
||
}
|
||
</style>
|