488 lines
11 KiB
Vue
488 lines
11 KiB
Vue
<template>
|
|
<view class="box flex flex-column align-items">
|
|
<view class="title_logo">
|
|
<image
|
|
src="/static/index/xiaoxilogo.png"
|
|
mode=""
|
|
style="width: 237rpx; height: 56rpx;"
|
|
></image>
|
|
</view>
|
|
<view class="box_center flex flex-column align-items">
|
|
<view class="top flex align-items justify-between" @click="toSystem">
|
|
<view class="flex align-items">
|
|
<image src="/static/index/xitongxiaoxi.png" mode="" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;"></image>
|
|
<span class="xtxiaoxi">系统消息</span>
|
|
</view>
|
|
<view class="flex align-items">
|
|
<span class="xtNum">{{ numbers }}</span>
|
|
<image src="/static/detail/zidong.png" mode="" style="width: 20rpx;height: 20rpx;margin-left: 20rpx;" ></image>
|
|
</view>
|
|
</view>
|
|
<span class="lines"></span>
|
|
<view class="center flex flex-column">
|
|
<!-- <span class="hui" v-if="unread.length != 0">未读消息</span> -->
|
|
<!-- @click="detail(item.id,item.params)" -->
|
|
<view class="list flex flex-column" v-for="(item,index) in alllist" :key="index">
|
|
|
|
<view class="flex align-items left" v-if="item.params.images.length > 0">
|
|
<image :src="item.params.images[0]" mode="" style="width: 80rpx;height: 80rpx;border-radius: 8rpx;"></image>
|
|
<span class="white-space title1">{{ item.params.title }}</span>
|
|
</view>
|
|
|
|
<view class="right flex flex-column">
|
|
<view class="flex align-items justify-between" style="margin-top: 30rpx;">
|
|
<span class="white-space title">{{item.title}}</span>
|
|
<span class="time">{{item.createtime_text}}</span>
|
|
</view>
|
|
<span class="white-space text">{{item.desc}}</span>
|
|
</view>
|
|
|
|
<!-- <span class="jiao">
|
|
<u-badge :isDot="true" type="success"></u-badge>
|
|
</span> -->
|
|
</view>
|
|
</view>
|
|
<!-- <u-loadmore :status="loadStatus" /> -->
|
|
<view class="flex flex-column flex-start align-items" v-if="alllist.length == 0" style="margin-top: 100rpx;">
|
|
<image src="/static/message/message.png" mode="" style="width: 256rpx;height: 240rpx;">
|
|
</image>
|
|
<view>暂无活动消息~</view>
|
|
</view>
|
|
</view>
|
|
<tab-bar :tabBarShow="tabBarShow"></tab-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex';
|
|
export default {
|
|
...mapActions(['number']),
|
|
data() {
|
|
return {
|
|
tabBarShow:null,
|
|
isFetching: false,
|
|
// selected: 'system,classes,order,activity',
|
|
selected: 'order',
|
|
alllist: [],// 活动订单所有消息
|
|
unread_number: '',
|
|
unread_system_number: '',
|
|
unread_activity_number: '',
|
|
keywords: '',
|
|
page: 1,
|
|
limit: 10,
|
|
loadStatus: 'loading',
|
|
status: '',
|
|
mini_type: '',
|
|
type: '',
|
|
list: [],
|
|
show: false,
|
|
id: '',
|
|
title: '标题'
|
|
};
|
|
},
|
|
onShow() {
|
|
this.resetLists();
|
|
this.number()
|
|
this.getinit()
|
|
this.fetchMessages(this.selected);
|
|
},
|
|
computed: {
|
|
numbers() {
|
|
return this.unread_system_number + this.unread_activity_number;
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
this.page++;
|
|
this.fetchMessages(this.selected);
|
|
},
|
|
methods: {
|
|
getinit() {
|
|
uni.$u.http.get('/api/index/init', {}).then(res => {
|
|
if (res.code == 1) {
|
|
if (res.data.base_info.miniapp_activity_swtich == 1) {
|
|
this.tabBarShow = 2;
|
|
} else {
|
|
this.tabBarShow = 1;
|
|
}
|
|
}
|
|
}).catch(error => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
// 获取时间
|
|
getFormattedDates() {
|
|
const today = new Date();
|
|
const startOfDay = new Date(today);
|
|
startOfDay.setHours(0, 0, 0, 0);
|
|
|
|
const endOfDay = new Date(today);
|
|
endOfDay.setHours(23, 59, 59, 999);
|
|
|
|
const yesterday = new Date(today);
|
|
yesterday.setDate(today.getDate() - 1);
|
|
const startOfYesterday = new Date(1970, 0, 1, 0, 0, 0, 0); // 1970/01/01 00:00:00
|
|
const endOfYesterday = new Date(yesterday);
|
|
endOfYesterday.setHours(23, 59, 59, 999);
|
|
|
|
const formatDate = (date) => {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
|
return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
|
|
};
|
|
|
|
return {
|
|
today: `${formatDate(startOfDay)}-${formatDate(endOfDay)}`,
|
|
yesterday: `${formatDate(startOfYesterday)}-${formatDate(endOfYesterday)}`
|
|
};
|
|
},
|
|
fetchMessages(status) {
|
|
// const dates = this.getFormattedDates();
|
|
this.getList(status, "alllist" ,'1,2','');
|
|
|
|
// this.getList(status, 'read', '2', dates.today);
|
|
},
|
|
toSystem(){
|
|
uni.navigateTo({
|
|
url:"/pages/activity/stationStemys"
|
|
})
|
|
},
|
|
// 消息详情
|
|
// detail(id,params){
|
|
// const message = JSON.parse(params);
|
|
// if (message.event == 'user_auth_need_after'){
|
|
// uni.navigateTo({
|
|
// url:"/packageA/my/settleIn?shop_id=" + message.shop_id + "&id=" + id
|
|
// })
|
|
// } else {
|
|
// uni.navigateTo({
|
|
// url:"/packageA/my/stationDetail?id=" + id
|
|
// })
|
|
// }
|
|
// },
|
|
|
|
// 消息未读
|
|
number() {
|
|
uni.$u.http.get('/api/school/message/message_count').then(res => {
|
|
if (res.code == 1) {
|
|
this.unread_system_number = res.data.unread_system_number;
|
|
this.unread_activity_number = res.data.unread_activity_number;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {});
|
|
},
|
|
// 一键已读
|
|
one() {
|
|
uni.$u.http.get('/api/school/message/batch', {
|
|
params: {
|
|
id: '*',
|
|
status: this.selected,
|
|
mini_type: '',
|
|
event: ''
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.resetLists();
|
|
this.number();
|
|
this.fetchMessages('system,classes,order');
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {});
|
|
},
|
|
// 获取消息列表
|
|
async getList(status,zt,type,time) {
|
|
uni.$u.http.get('/api/school/message/message_list', {
|
|
params: {
|
|
page: this.page,
|
|
limit: this.limit,
|
|
status: status,
|
|
// mini_type: '',
|
|
type: type,
|
|
},
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.updateList(zt, res.data.list, res.data.count);
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {});
|
|
|
|
|
|
},
|
|
// 更新列表
|
|
updateList(type, list, count) {
|
|
console.log(type, list, count)
|
|
const targetList = this[type];
|
|
this[type] = [...targetList, ...list];
|
|
console.log('this.loadStatus ',this.loadStatus )
|
|
this.loadStatus = targetList.length >= count ? 'nomore' : 'loading';
|
|
},
|
|
// 重置列表
|
|
resetLists() {
|
|
this.page = 1;
|
|
this.alllist = [];
|
|
this.loadStatus = 'loading'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
background-color: #F1F2F8;
|
|
background-image: url("https://naweigetetest2.hschool.com.cn/dyqc/bgx2.png");
|
|
background-size: 750rpx 797rpx;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.white-space {
|
|
overflow: hidden;
|
|
/* 确保超出容器的文本被隐藏 */
|
|
white-space: nowrap;
|
|
/* 确保文本在一行内显示 */
|
|
text-overflow: ellipsis;
|
|
/* 使用省略号表示被截断的文本 */
|
|
width: 100%;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.align-items {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-flow: column;
|
|
}
|
|
|
|
.justify-start {
|
|
justify-content: start;
|
|
}
|
|
.title_logo{
|
|
width: 690rpx;
|
|
margin-top: 110rpx;
|
|
display: flex;
|
|
}
|
|
.box_center{
|
|
margin-top: 30rpx;
|
|
width: 750rpx;
|
|
background: linear-gradient( 180deg, #FFFFFF 0%, #F7F7F7 23%);
|
|
// background: #F7F7F7;
|
|
min-height: 80vh;
|
|
border-radius: 44rpx;
|
|
.lines{
|
|
width: 690rpx;
|
|
height: 1rpx;
|
|
background: #F0F0F0;
|
|
}
|
|
.top{
|
|
width: 690rpx;
|
|
padding: 30rpx;
|
|
.xtxiaoxi{
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
line-height: 45rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
.xtNum{
|
|
width: 56rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
background: #FF4810;
|
|
border-radius: 84rpx;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
font-family: PingFang SC, PingFang SC;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.center {
|
|
width: 690rpx;
|
|
margin-bottom: 200rpx;
|
|
.list {
|
|
width: 690rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
|
|
.left {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
margin-top: 40rpx;
|
|
margin-left: 30rpx;
|
|
.title1 {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 34rpx;
|
|
color: #9C9C9C;
|
|
margin-left: 20rpx;
|
|
width: 460rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left:30rpx;
|
|
margin-right: 30rpx;
|
|
.title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-size: 30rpx;
|
|
color: #202020;
|
|
line-height: 34rpx;
|
|
width: 360rpx;
|
|
}
|
|
|
|
.time {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
|
|
}
|
|
|
|
.text {
|
|
margin-top: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #3D3D3D;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
|
|
// .jiao {
|
|
// position: absolute;
|
|
// left: 0;
|
|
// top: 0;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
.header {
|
|
width: 690rpx;
|
|
height: 50rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.s-header {
|
|
width: 152rpx;
|
|
height: 50rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #9E9E9E;
|
|
position: relative;
|
|
|
|
.numberPos {
|
|
// width: 45rpx;
|
|
// height: 50rpx;
|
|
position: absolute;
|
|
right: -10rpx;
|
|
top: -4px;
|
|
}
|
|
}
|
|
|
|
.s-header.selected {
|
|
width: 152rpx;
|
|
height: 50rpx;
|
|
background: #008CFF;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 26rpx;
|
|
}
|
|
}
|
|
|
|
.yidu {
|
|
border-top: #008CFF 1rpx solid;
|
|
width: 690rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 66rpx;
|
|
margin-top: 18rpx;
|
|
|
|
.news {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #9E9E9E;
|
|
}
|
|
|
|
.One {
|
|
width: 132rpx;
|
|
height: 40rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
border: 1rpx solid #9E9E9E;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #9E9E9E;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hui {
|
|
width: 132rpx;
|
|
height: 40rpx;
|
|
background: #E7E7E7;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #9E9E9E;
|
|
margin: 24rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style> |