187 lines
3.9 KiB
Vue
187 lines
3.9 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view class="message-page">
|
|
<!-- 列表 -->
|
|
<scroll-view style="width: 100%;height: 92vh;" @scrolltolower="onScrollTolower" scroll-y="true">
|
|
<view class="message-item" v-for="(item, index) in messageList" :key="index">
|
|
<!-- 左侧图标 -->
|
|
<view class="icon-wrapper" style="background-color: #b5bec9;">
|
|
<u-icon name="email" color="#fff" size="24"></u-icon>
|
|
</view>
|
|
<!-- 消息内容 -->
|
|
<view class="content">
|
|
<view class="title-box">
|
|
<view class="title">{{item.createBy}}</view>
|
|
</view>
|
|
<view class="desc">{{ item.content }}</view>
|
|
<view class="img-box">
|
|
<view v-for="(imgItem,imgIndex) in item.suggestionPictures" :key="imgIndex" style="width: 110rpx;height: 110rpx;margin-right: 20rpx;">
|
|
<image :src="imgItem.imgUrl" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
|
</view>
|
|
</view>
|
|
<view class="time">{{ item.createTime }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import UTabs from '../../../uni_modules/uview-ui/components/u-tabs/u-tabs.vue'
|
|
// import Tabs from '../../components/Tabs.vue'
|
|
// import UIcon from '../../../uni_modules/uview-ui/components/u-icon/u-icon.vue'
|
|
import { getqueryPlaintApi } from '@/api/mine/index'
|
|
|
|
export default {
|
|
name: 'index',
|
|
// components: { UIcon, Tabs, UTabs },
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
searchText: '',
|
|
currentTab: 0,
|
|
// tabList: ['全部', '已查看', '未查看'],
|
|
tabList: ['通知列表'],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
messageList: [],
|
|
messageNumber:0
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.getNoticeList()
|
|
},
|
|
methods: {
|
|
// 翻页
|
|
onScrollTolower(){
|
|
console.log(this.messageList.length)
|
|
if(this.total>this.messageList.length){
|
|
this.pageNum++
|
|
this.getNoticeList()
|
|
}
|
|
},
|
|
//获取通知消息
|
|
async getNoticeList() {
|
|
let param = {
|
|
"userId":uni.getStorageSync("userId"),
|
|
// "userId":1,
|
|
"pageNum": this.pageNum,
|
|
"pageSize": this.pageSize,
|
|
}
|
|
const res = await getqueryPlaintApi(param)
|
|
console.log(res)
|
|
// this.messageList = res
|
|
this.total = Number(res.total);
|
|
if(this.pageNum==1){
|
|
this.messageList = res.rows
|
|
}else{
|
|
this.messageList.push(...res.rows)
|
|
}
|
|
},
|
|
|
|
handleTabChange(index) {
|
|
console.log('?? ~ changeTab ~ index:', index)
|
|
this.currentTab = index
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background: #fff;
|
|
}
|
|
.message-page {
|
|
min-height: 94vh;
|
|
background-color: #f5f5f5;
|
|
background: #fff;
|
|
padding: 12px;
|
|
}
|
|
|
|
.message-list {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.message-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
margin-bottom: 12px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.upgrade {
|
|
background-color: #2ed573;
|
|
}
|
|
|
|
.warning {
|
|
background-color: #ff7f50;
|
|
}
|
|
|
|
.read {
|
|
background-color: #b5bec9;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
margin-right: 12px;
|
|
}
|
|
.title-box{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
|
|
}
|
|
|
|
.desc {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
// padding: ;
|
|
}
|
|
.img-box{
|
|
width: 94%;
|
|
margin: 10px auto;
|
|
display: flex;
|
|
height: auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.right-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 4px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.unread-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #ff0000;
|
|
}
|
|
</style> |