flat: 消息

This commit is contained in:
史典卓
2025-05-15 14:17:51 +08:00
parent 5333254c58
commit a93907018c
40 changed files with 875 additions and 56 deletions

View File

@@ -4,12 +4,12 @@
<!-- 顶部头部区域 -->
<view class="container-header">
<view class="header-btnLf button-click" @click="changeType(0)" :class="{ active: state.current === 0 }">
已读消息
<view class="btns-wd"></view>
全部消息
<!-- <view class="btns-wd"></view> -->
</view>
<view class="header-btnLf button-click" @click="changeType(1)" :class="{ active: state.current === 1 }">
未读消息
<view class="btns-wd"></view>
<view class="btns-wd" v-if="unreadCount"></view>
</view>
</view>
@@ -39,7 +39,14 @@ import UnreadComponent from './unread.vue';
const loadedMap = reactive([false, false]);
const swiperRefs = [ref(null), ref(null)];
const components = [ReadComponent, UnreadComponent];
import { storeToRefs } from 'pinia';
import { useReadMsg } from '@/stores/useReadMsg';
const { unreadCount } = storeToRefs(useReadMsg());
onShow(() => {
// 获取消息列表
useReadMsg().fetchMessages();
});
const state = reactive({
current: 0,
all: [{}],

View File

@@ -1,16 +1,38 @@
<template>
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<scroll-view scroll-y class="main-scroll">
<view class="scrollmain">
<view class="list-card btn-feel" v-for="(item, index) in 20" :key="index">
<view
class="list-card btn-feel"
v-for="(item, index) in msgList"
:key="index"
@click="seeDetail(item, index)"
>
<view class="card-img">
<image class="card-img-flame" src="/static/icon/msgtype.png"></image>
<image
class="card-img-flame"
v-if="item.title === '招聘会预约提醒'"
src="/static/icon/msgtype.png"
></image>
<image
class="card-img-flame"
v-if="item.title === '职位上新'"
src="/static/icon/msgtype2.png"
></image>
<image
class="card-img-flame"
v-if="item.title === '系统通知'"
src="/static/icon/msgtype3.png"
></image>
<view class="subscript" v-if="item.notReadCount || !item.isRead">
{{ item.notReadCount || '' }}
</view>
</view>
<view class="card-info">
<view class="info-title">
<text>今日推荐</text>
<view class="card-time">刚才</view>
<text>{{ item.title }}</text>
<view class="card-time">{{ item.date }}</view>
</view>
<view class="info-text line_2">这里有9个职位很适合你快来看看吧</view>
<view class="info-text line_2">{{ item.subTitle || '消息' }}</view>
</view>
</view>
</view>
@@ -19,7 +41,12 @@
<script setup>
import { reactive, inject, ref } from 'vue';
const { $api, navTo, debounce } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import { useReadMsg } from '@/stores/useReadMsg';
const { msgList } = storeToRefs(useReadMsg());
const isLoaded = ref(false);
async function loadData() {
try {
if (isLoaded.value) return;
@@ -30,7 +57,22 @@ async function loadData() {
}
}
function handleScrollToLower() {}
function seeDetail(item, index) {
switch (item.title) {
case '职位上新':
useReadMsg().markAsRead(item, index);
navTo('/packageA/pages/newJobPosition/newJobPosition');
break;
case '招聘会预约提醒':
useReadMsg().markAsRead(item, index);
navTo('/packageA/pages/reservation/reservation');
break;
case '系统通知':
navTo('/packageA/pages/systemNotification/systemNotification');
break;
}
}
defineExpose({ loadData });
</script>
@@ -41,6 +83,9 @@ defineExpose({ loadData });
}
.scrollmain{
padding: 28rpx
}
.read{
}
.list-card
background: #FFFFFF;
@@ -57,9 +102,25 @@ defineExpose({ loadData });
display: grid;
place-items: center;
margin-right: 30rpx;
position: relative;
.card-img-flame
width: 100%;
height: 100%
.subscript
position: absolute;
right: 0;
top: 0;
min-width: 26rpx;
height: 26rpx;
padding: 0 8rpx; /* 横向内边距控制宽度自适应 */
border-radius: 1000rpx; /* 实现椭圆形/圆角 */
text-align: center;
line-height: 26rpx;
background: #F73636;
font-weight: 600;
font-size: 20rpx;
color: #FFFFFF;
box-sizing: border-box;
.card-info
flex: 1;
display: flex;

View File

@@ -1,16 +1,36 @@
<template>
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<scroll-view scroll-y class="main-scroll">
<view class="scrollmain">
<view class="list-card btn-feel" v-for="(item, index) in 20" :key="index">
<view
class="list-card btn-feel"
v-for="(item, index) in unreadMsgList"
:key="index"
@click="seeDetail(item)"
>
<view class="card-img">
<image class="card-img-flame" src="/static/icon/msgtype.png"></image>
<image
class="card-img-flame"
v-if="item.title === '招聘会预约提醒'"
src="/static/icon/msgtype.png"
></image>
<image
class="card-img-flame"
v-if="item.title === '职位上新'"
src="/static/icon/msgtype2.png"
></image>
<image
class="card-img-flame"
v-if="item.title === '系统通知'"
src="/static/icon/msgtype3.png"
></image>
<view class="subscript" v-if="item.notReadCount">{{ item.notReadCount }}</view>
</view>
<view class="card-info">
<view class="info-title">
<text>今日推荐</text>
<view class="card-time">刚才</view>
<text>{{ item.title }}</text>
<view class="card-time">{{ item.date }}</view>
</view>
<view class="info-text line_2">这里有9个职位很适合你快来看看吧</view>
<view class="info-text line_2">{{ item.subTitle || '消息' }}</view>
</view>
</view>
</view>
@@ -19,7 +39,12 @@
<script setup>
import { reactive, inject, ref } from 'vue';
const { $api, navTo, debounce } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import { useReadMsg } from '@/stores/useReadMsg';
const { unreadMsgList } = storeToRefs(useReadMsg());
const isLoaded = ref(false);
async function loadData() {
try {
if (isLoaded.value) return;
@@ -30,7 +55,10 @@ async function loadData() {
}
}
function handleScrollToLower() {}
function seeDetail(item) {
console.log(item);
}
defineExpose({ loadData });
</script>
@@ -41,6 +69,9 @@ defineExpose({ loadData });
}
.scrollmain{
padding: 28rpx
}
.read{
}
.list-card
background: #FFFFFF;
@@ -57,9 +88,25 @@ defineExpose({ loadData });
display: grid;
place-items: center;
margin-right: 30rpx;
position: relative;
.card-img-flame
width: 100%;
height: 100%
.subscript
position: absolute;
right: 0;
top: 0;
min-width: 26rpx;
height: 26rpx;
padding: 0 8rpx; /* 横向内边距控制宽度自适应 */
border-radius: 1000rpx; /* 实现椭圆形/圆角 */
text-align: center;
line-height: 26rpx;
background: #F73636;
font-weight: 600;
font-size: 20rpx;
color: #FFFFFF;
box-sizing: border-box;
.card-info
flex: 1;
display: flex;