sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat: 暂存

Browse Source
This commit is contained in:
史典卓
2025-05-13 11:10:38 +08:00
parent 582e432e6a
commit fd74b7d4df
109 changed files with 8644 additions and 5205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
pages/msglog/msglog.vue
View File

@@ -1,132 +1,152 @@
<template>
<view class="app-container">
<view class="msg-AI">AI+就业服务程序</view>
<view class="msg-tab">
<view class="msg-tab-item" :class="{ actived: state.current === 0 }" @click="seemsg(0)">全部</view>
<view class="msg-tab-item" :class="{ actived: state.current === 1 }" @click="seemsg(1)">未读</view>
<view class="app-custom-root">
<view class="app-container">
<!-- 顶部头部区域 -->
<view class="container-header">
<view class="header-btnLf button-click" @click="changeType(0)" :class="{ active: state.current === 0 }">
已读消息
<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>
</view>
<!-- 主体内容区域 -->
<view class="container-main">
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
<swiper-item class="swiper-item" v-for="(_, index) in 2" :key="index">
<component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
</swiper-item>
</swiper>
</view>
</view>
<view class="msg-list">
<swiper class="swiper" :current="state.current" @change="changeSwiperMsgType">
<swiper-item class="list">
<view class="list-card">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/recommendday.png"></image>
</view>
<view class="card-info">
<view class="info-title">今日推荐</view>
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
</view>
<view class="card-time">刚才</view>
</view>
</swiper-item>
<swiper-item class="list">
<view class="list-card">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/recommendday.png"></image>
</view>
<view class="card-info">
<view class="info-title">今日推荐</view>
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
</view>
<view class="card-time">刚才</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- 自定义tabbar -->
<!-- <tabbar-custom :currentpage="3"></tabbar-custom> -->
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import readComponent from './read.vue';
import unreadComponent from './unread.vue';
const loadedMap = reactive([false, false]);
const swiperRefs = [ref(null), ref(null)];
const components = [readComponent, unreadComponent];
const state = reactive({
current: 0,
all: [{}],
});
onLoad(() => {});
onMounted(() => {
handleTabChange(state.current);
});
const handelComponentsRef = (el, index) => {
if (el) {
swiperRefs[index].value = el;
}
};
// 查看消息类型
function changeSwiperType(e) {
const index = e.detail.current;
state.current = index;
handleTabChange(index);
}
function changeType(index) {
state.current = index;
handleTabChange(index);
}
function handleTabChange(index) {
if (!loadedMap[index]) {
swiperRefs[index].value?.loadData();
loadedMap[index] = true;
}
}
// 查看消息类型
function changeSwiperMsgType(e) {
const currented = e.detail.current;
state.current = currented;
}
function seemsg(index) {
state.current = index;
}
</script>
<style lang="stylus" scoped>
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
.app-custom-root {
position: fixed;
z-index: 10;
width: 100vw;
height: calc(100% - var(--window-bottom));
overflow: hidden;
}
.app-container {
display: flex;
flex-direction: column;
.msg-AI
height: 42rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 35rpx;
color: #FFFFFF;
line-height: 41rpx;
padding: 85rpx 0 0 30rpx;
.msg-tab
padding: 85rpx 0 0 30rpx;
height: 100%;
width: 100%;
.container-header {
height: calc(88rpx - 14rpx);
text-align: center;
line-height: calc(88rpx - 14rpx);
font-size: 32rpx;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
color: #D9D9D9;
.msg-tab-item
margin-right: 40rpx;
.actived
font-size: 28rpx;
color: #FFFFFF;
text-shadow: 0rpx 14rpx 14rpx rgba(0,0,0,0.25);
.msg-list
flex: 1;
overflow: hidden;
.swiper
height: 100%;
.list
display: flex;
flex-direction: column;
.list-card
height: calc(119rpx - 26rpx - 26rpx);
width: calc(100% - 36rpx - 36rpx - 23rpx - 23rpx);
background: #FFFFFF;
border-radius: 17rpx;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 26rpx 36rpx;
margin: 36rpx 23rpx;
.card-img
width: 63rpx;
height: 63rpx;
background: #D9D9D9;
border-radius: 50%
display: grid;
place-items: center;
margin-right: 30rpx;
.card-img-flame
width: 100%;
height: 100%
.card-info
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
.info-title
font-weight: 400;
font-size: 28rpx;
color: #000000;
.info-text
font-size: 17rpx;
color: #606060;
.card-time
font-size: 17rpx;
color: #606060;
padding: 16rpx 44rpx 36rpx 44rpx;
background: url('@/static/icon/msgTopbg.png') 0 0 no-repeat;
background-size: 100% 100%;
.header-title {
color: #000000;
font-weight: bold;
}
.header-btnLf {
display: flex;
justify-content: flex-start;
align-items: center;
width: calc(60rpx * 3);
font-weight: 500;
font-size: 40rpx;
color: #696969;
margin-right: 44rpx;
position: relative;
.btns-wd{
position: absolute
top: 2rpx;
right: 2rpx
width: 16rpx;
height: 16rpx;
background: #F73636;
border-radius: 50%;
border: 4rpx solid #EEEEFF;
}
}
.active {
font-weight: 600;
font-size: 40rpx;
color: #000000;
}
}
}
.container-main {
flex: 1;
overflow: hidden;
background-color: #f4f4f4;
}
.main-scroll {
width: 100%
height: 100%;
}
.scrollmain{
padding: 28rpx
}
.swiper
height: 100%;
width: 100%
.list
width: 100%
display: flex;
flex-direction: column;
</style>