199 lines
4.4 KiB
Vue
199 lines
4.4 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.custName}}</view>
|
||
</view>
|
||
<view class="desc">{{ item.content }}</view>
|
||
<view class="img-box">
|
||
<view style="width: 110rpx;height: 110rpx;margin-right: 20rpx;" v-for="(imgItem,imgIndex) in item.complaintPictureList" :key="imgIndex">
|
||
<image :src="imgItem" mode="" style="width: 100rpx;height: 100rpx;" @click="opePopup(imgItem)"></image>
|
||
</view>
|
||
</view>
|
||
<view class="time">{{ item.crtime }}</view>
|
||
<view v-if="item.replyContent&&item.replyContent!=''">回复内容：{{item.replyContent}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
|
||
<u-popup :show="showPic" mode="center" @close="showPic=false">
|
||
<image :src="imagerUrl" mode="aspectFit" style="height: 100vh;width: 100vw;" @click="showPic=false"></image>
|
||
</u-popup>
|
||
</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,
|
||
showPic:false,
|
||
imagerUrl:""
|
||
}
|
||
},
|
||
onLoad(){
|
||
this.getNoticeList()
|
||
},
|
||
methods: {
|
||
// 翻页
|
||
onScrollTolower(){
|
||
console.log(this.messageList.length)
|
||
// if(this.total>this.messageList.length){
|
||
// this.pageNum++
|
||
// this.getNoticeList()
|
||
// }
|
||
},
|
||
//获取通知消息
|
||
async getNoticeList() {
|
||
let param = {
|
||
// "current": this.pageNum,
|
||
// "size": this.pageSize,
|
||
// "custId": uni.getStorageSync('custId'),
|
||
}
|
||
const res = await getqueryPlaintApi(param)
|
||
// console.log(res)
|
||
this.messageList = res
|
||
// this.total = res.total;
|
||
// if(this.pageNum==1){
|
||
// this.messageList = res.records
|
||
// }else{
|
||
// this.messageList.push(...res.records)
|
||
// }
|
||
},
|
||
handleTabChange(index) {
|
||
console.log('?? ~ changeTab ~ index:', index)
|
||
this.currentTab = index
|
||
},
|
||
opePopup(item){
|
||
this.imagerUrl = item;
|
||
this.showPic = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page {
|
||
background: #fff;
|
||
}
|
||
.message-page {
|
||
height: 96vh;
|
||
overflow-y: auto;
|
||
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;
|
||
align-items: center;
|
||
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> |