zdxtLawEnforcementCodeView/src/views/enforce/enforceNotice.vue

<template>
	<div class="shop app_content">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav
        :leftArrow="false"
				:titelText="`通知公告`"
			>
			</header-nav>
		</div>
    <van-search
    v-model="searchParam.searchText"
    show-action
    placeholder="请输入关键字查询"
    @search="onSearch"
    >
      <template #action>
        <div  @click="onClickButton">搜索</div>
      </template>
    </van-search>


		<!-- 中间 -->
		<div class="shop-center">
			<lodding-card :isLodding="isLodding">

     <div class="noticebox">
       <div class="notice-item"><i></i>
         <div class="item-cont">
           <span class="item-title">宝安区司法局</span>
           <span class="item-time">2024-02-15</span>
           <div class="item-text">2024年度宝安区新安街道年度行政执法检查计划</div>
         </div>
       </div>

       <div class="notice-item"><i></i>
         <div class="item-cont">
           <span class="item-title">龙华区司法局</span>
           <span class="item-time">2024-02-15</span>
           <div class="item-text">2024年度龙华区民治街道年度行政执法检查计划</div>
         </div>
       </div>

     </div>


			</lodding-card>
		</div>

		<!-- 底部 -->
		<div class="shop_footer_body">
			<footer-enforcement-nav></footer-enforcement-nav>
		</div>
	</div>
</template>

<script setup name="enforcementInspectionProgram">
import {queryEnforcementInspectionProgramList} from "@/api/enforce";
import { setGoodsNum } from "@/util/util";
const { useCommon, useShopCard } = $globalStore;

const router = useRouter();
let allchecked = ref(false); // 是否全选
let refreshLoad = ref(false); // 是否加载中

let searchParam = reactive({
  //搜索框
  searchText: ref(''),
  //日期查询
  searchDate: ref('')
});

const data = reactive({
  cartList: [],
  dataList: [],
  dateSearch: ref(),
  showDatePicker:false,
  currentDate:ref(['2024', '01']),
  minDate: new Date(2020, 0, 1),
  maxDate: new Date(2125, 5, 1),
  columnsType :['year', 'month'],
});

 // 设置初始值为当前时间
onMounted(() => {
  console.log(useCommon.enterpriseNumber);
	// getCard();
  searchParam.enterpriseNumber = useCommon.enterpriseNumber;
  console.log(useCommon.enterpriseNumber)
  queryList();
  data.dateSearch = nowDate(new Date());
});
const queryList = () =>{
  queryEnforcementInspectionProgramList(searchParam,success =>{
    console.log(success)
    data.dataList = success.data;
    freshMap.refreshLoad = false;
		freshMap.listLoading = false;
		freshMap.listFinished = true;
	  isLodding.value = false;
  },error =>{

  })
}

const onSearch = (val) => {
  queryEnforcementInspectionProgramList(
    {
      "searchText": searchParam.searchText
    }
    ,success =>{
    console.log(success)
    data.dataList = success.data;
  },error =>{

  })
};
const onClickButton = () =>{
  console.log(searchParam.searchText)
  queryList();
}

const toPdfView = (url) =>{
  console.log(url)
  router.push(
        { 
          path: "/pdfView",
          query: {
            url: url
            } 
      });
}
onActivated(() => {
});

onDeactivated(() => {

});

// 返回
const goBack = () => {
	router.go(-1);
};

let resetScroll = ref(0); // 滚动记录
let isLodding = ref(true); // 是否加载中
let freshMap = reactive({
	refreshLoad: false, // 是否刷新
	listLoading: false, // 是否加载中
	listFinished: false, // 是否加载完成标识
});


//下拉刷新
const onRefresh = () => {
	freshMap.listFinished = false;
	freshMap.listLoading = true;
	// getGoodslist();
  queryList();
};

// 触底加载
const onLoad = () => {
	freshMap.listFinished = true;
  freshMap.loading = false;
};



//获取分类下的商品列表
const getGoodslist = async (onLoad) => {
	// const res = await useClassify.classifyGoods();
	// if (res?.code === 20000) {
	// 	goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
	// 	freshMap.refreshLoad = false;
	// 	freshMap.listLoading = false;
	// 	freshMap.listFinished = res?.listFinished;
	// 	if (goodsList.length > 50) {
	// 		freshMap.listFinished = true;
	// 	}
	// }
    freshMap.refreshLoad = false;
		freshMap.listLoading = false;
		freshMap.listFinished = true;
	  isLodding.value = false;
};

onMounted(async () => {
	// let res = await getClassify();
	// if (res && res?.length) {
	// 	classifyId = res?.[0]?.id;
	// 	classifyId && getGoodslist();
	// } else {
	// 	isLodding.value = false;
	// }
  queryList();
  isLodding.value = false;
});

const selectDate  = () =>{
  data.showDatePicker = true;
  console.log(data.showDatePicker)
}

const onDateConfirm = (value)=> {
      console.log(value);
      value.selectedValues.forEach((item,index) => {
        console.log(item);
      });
      data.dateSearch = value.selectedValues[0] + "/" + value.selectedValues[1]
      data.showDatePicker = false;
      searchParam.dateSearch = value.selectedValues[0] + "-" + value.selectedValues[1];
      queryList();
}
const nowDate = (time) => {
    var year = time.getFullYear(); // 年
    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
    var date = time.getDate().toString().padStart(2, '0'); // 日
    var hour = time.getHours().toString().padStart(2, '0'); // 时
    var minute = time.getMinutes().toString().padStart(2, '0'); // 分
    var second = time.getSeconds().toString().padStart(2, '0'); // 秒
    return (
      year + "/" + month
    )
}


const searchDateType = (val) =>{
  searchParam.dateType =  val;
  searchParam.isComplaint =  null;
  queryList();
}
const searchComplaint = (val) =>{
  searchParam.isComplaint =  val;
  searchParam.dateType =  null;
  queryList();
}

</script>

<style lang="less" scoped>
.shop {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #f4f4f4;

	.header_body {
		height: 50px;
	}

	.shop-center {
		flex: 1;
		overflow-y: scroll;
		position: relative;

		.goods_box {
			display: flex;
			background-color: #fff;
			margin: 6px;
			border-radius: 10px;

			.swipe_cell {
				width: 100%;
			}

			.card_box {
				display: flex;
				width: 100%;
        padding: 10px,0px;
        flex-direction: column;
				.card_body {
					background-color: #fff;
					border-radius: 10px;
					flex: 1;
				}
        .card_box_span{
          font-size: 13px;
          padding-left: 5%;
          height: 35px;
          align-items: center;
          display: flex;
          align-items: center;
        }
        .card_box_action{
          position: absolute;
          right: 4%;
        }
			}
		}
	}

	.shop_footer_body {
		height: 101px;
		position: relative;
		.footer-one-btn {
			height: 50px;
			bottom: 51px;
		}
	}
}

.search-button-list{
    height: 3%;
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    margin-top: 6px;
    align-items: end;
    .search-button{
        width: 15%;
        height: 80%;
    }
}
.search-button-date{
    height: 3%;
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    margin-top: 15px;
    align-items: end;
    position: relative;
    .date-select{
      font-size: 20px;
      margin-left: 2%;
    }
    .search-button{
        width: 15%;
        height: 80%;
        position: absolute;
        top: 1%;
        right: 1%;
    }
}

.noticebox {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 0.2rem;
}

.notice-item {
  display: flex;
  position: relative;
  margin: 3% 0.26rem;
  height: 10vh;
  align-items: center;
}

.notice-item > i {
  display: inline-block;
  margin: 5% 0.25rem;
  height: 90%;
  width: 1.75rem;
  background: url("../../assets/images/icon_notice2.png") no-repeat left center;
  background-size: auto 80%;
}

.item-cont {
  display: inline-block;
  width: calc(100% - 2.25rem);
}

.item-time {
  float: right;
  margin-right: 2%;
  color: #c1bfbf;
  font-size: 0.3rem;
  height: 0.75rem;
  line-height: 1rem;
}

.item-title, .item-text {
  float: left;
  width: calc(100% - 2.0rem);
  height: 0.75rem;
  font-size: 0.4rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-text {
  width: 100%;
  color: #999;
  font-size: 0.4rem;
  font-weight: normal;
}

</style>