201 lines
4.7 KiB
Vue
201 lines
4.7 KiB
Vue
<template>
|
||
<AppLayout :title="title" :show-bg-image="false">
|
||
<view class="tab-container">
|
||
<view class="tab-item" :class="{ active: currentTab === 'train' }" @click="switchTab('train')">
|
||
培训公告
|
||
</view>
|
||
<view class="tab-item" :class="{ active: currentTab === 'evaluate' }" @click="switchTab('evaluate')">
|
||
评价公告
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
||
<view class="main-list" >
|
||
<view
|
||
:style="getBackgroundStyle('frame-activity.png')"
|
||
class="policy-list"
|
||
v-for="(item, index) in policyList"
|
||
:key="index"
|
||
@click="goPolicyDetail(item)" >
|
||
<view class="title">
|
||
{{ item.title }}
|
||
</view>
|
||
<view class="bottom-line">
|
||
<view>
|
||
<uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>
|
||
发布日期：{{ item.publishTime }}
|
||
</view>
|
||
</view>
|
||
<view >
|
||
<view class="gk-l-i-bottom" v-html="item.content"></view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { inject, ref, reactive, onMounted } from "vue";
|
||
const { $api, navTo, navBack, vacanciesTo } = inject("globalFunction");
|
||
import config from "@/config.js";
|
||
import AppLayout from "@/components/AppLayout/AppLayout.vue";
|
||
const title = ref("");
|
||
const baseUrl = config.imgBaseUrl;
|
||
const pageSize=ref(10)
|
||
const pageNum=ref(1)
|
||
const totalNum=ref(0)
|
||
// Tab 控制
|
||
const currentTab = ref("train"); // 默认显示培训公告
|
||
|
||
function switchTab(tabName) {
|
||
currentTab.value = tabName;
|
||
getPolicyData('refresh',currentTab)
|
||
}
|
||
const handleScrollToLower = () => {
|
||
getPolicyData('add',currentTab);
|
||
};
|
||
const getBackgroundStyle = (imageName) => ({
|
||
backgroundImage: `url(${baseUrl}/${imageName})`,
|
||
backgroundSize: "100% 100%", // 覆盖整个容器
|
||
backgroundPosition: "center", // 居中
|
||
backgroundRepeat: "no-repeat",
|
||
});
|
||
onMounted(() => {
|
||
getPolicyData('refresh',currentTab);
|
||
});
|
||
const policyList = ref([]);
|
||
function getPolicyData(type = 'add',currentTab='train') {
|
||
let current=ref('1')
|
||
if(currentTab.value=='train'){
|
||
current.value='1'
|
||
}else if(currentTab.value=='evaluate'){
|
||
current.value='2'
|
||
}
|
||
let maxPage=Math.ceil(totalNum.value/pageSize.value)
|
||
let params={}
|
||
if (type === 'refresh') {
|
||
pageNum.value = 1;
|
||
params={
|
||
pageSize:pageSize.value,
|
||
pageNum:pageNum.value,
|
||
type:current.value
|
||
}
|
||
$api.myRequest('/train/public/announcement/list', params).then((resData) => {
|
||
if(resData.code==200){
|
||
for(var i = 0;i<resData.rows.length;i++){
|
||
resData.rows[i].content = resData.rows[i].content.replace(/<[^>]+>/g,"");
|
||
}
|
||
policyList.value=resData.rows
|
||
totalNum.value=resData.total
|
||
}
|
||
|
||
});
|
||
}
|
||
if (type === 'add' && pageNum.value < maxPage) {
|
||
pageNum.value += 1;
|
||
params={
|
||
pageSize:pageSize.value,
|
||
pageNum:pageNum.value,
|
||
type:current.value
|
||
}
|
||
$api.myRequest('/train/public/announcement/list', params).then((resData) => {
|
||
if(resData.code==200){
|
||
for(var i = 0;i<resData.rows.length;i++){
|
||
resData.rows[i].content = resData.rows[i].content.replace(/<[^>]+>/g,"");
|
||
}
|
||
policyList.value=policyList.value.concat(resData.rows)
|
||
totalNum.value=resData.total
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function goPolicyDetail(item) {
|
||
uni.navigateTo({
|
||
url:`/packageB/notice/detail?id=${item.id}`
|
||
// url: `/packageRc/pages/policy/policyDetail?id=${item.id}`
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main-list {
|
||
// background-color: #ffffff;
|
||
// padding: 20rpx 25rpx 28rpx 25rpx;
|
||
margin: 0 30rpx 30rpx 30rpx;
|
||
// box-shadow: 0px 3px 20px 0px rgba(0, 105, 234, 0.1);
|
||
// border-radius: 12px;
|
||
}
|
||
.tab-container {
|
||
display: flex;
|
||
height: 80rpx;
|
||
background-color: #fff;
|
||
margin: 0 30rpx 20rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background-color: #ffffff;
|
||
color: #4c6efb;
|
||
font-weight: bold;
|
||
// box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
border-bottom: 2rpx solid #4c6efb;
|
||
}
|
||
.gk-l-i-bottom{
|
||
margin-top: 16px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.main-scroll {
|
||
width: 100%;
|
||
height: 90%;
|
||
}
|
||
|
||
.policy-list {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
color: #333333;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
margin-bottom: 24rpx;
|
||
padding: 28rpx 22rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #282828;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
}
|
||
|
||
|
||
.bottom-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #a2a2a2;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
</style> |