ks-app-employment-service/packageB/notice/index.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>