355 lines
9.1 KiB
Vue
355 lines
9.1 KiB
Vue
<template>
|
|
<view class="polInfComponent">
|
|
<view class="list-box">
|
|
<uni-list class="content-list" v-if="isPolicyPublish === true">
|
|
<uni-list-item class="arctile-list" v-for="(policyItem, policyIndex) in policyPublishList" :key="'arct-' + policyIndex" >
|
|
<template v-slot:body>
|
|
<view class="arctile-list box" style="padding:0 20rpx;" @click="toPolicy(policyItem)">
|
|
<view class="box-left">
|
|
<view>
|
|
<text class="list-title">{{ policyItem.policyTitle }}</text>
|
|
</view>
|
|
<view class="boxlist-down">
|
|
<text class="section">{{ policyItem.policySource }}</text>
|
|
<text class="date">{{ policyItem.updateTime.substring(0, 10) }}</text>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<image class="list-img" src="@/static/images/index/news.png"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
</view>
|
|
<uni-load-more
|
|
v-if="loadMoreIf && policyPublishList.length > 8"
|
|
:style="style"
|
|
iconType="auto"
|
|
:status="status"
|
|
:contentText="contentText"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { listPolicyPublish } from "@/api/lef/policyPublish";
|
|
|
|
export default {
|
|
name: "polInfComponent",
|
|
props: {
|
|
pPolicyType: {
|
|
type: Object,
|
|
},
|
|
policyObject: {
|
|
type: Object,
|
|
default: function () {
|
|
return {
|
|
policyType: "",
|
|
showTotal: 8,
|
|
loadMoreIf: true,
|
|
loadMoreShow: true,
|
|
polInfStyle: "",
|
|
isReSearch: true,
|
|
};
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
pageWidth: 0,
|
|
maxFontSize: 3,
|
|
fontSizeUnit: "vw",
|
|
isMargin: true,
|
|
equals: false,
|
|
isReSearch: this.policyObject.isReSearch,
|
|
total: 0,
|
|
loadMore: false,
|
|
isPolicyPublish: false,
|
|
status: "more",
|
|
loadMoreIf: this.policyObject.loadMoreIf,
|
|
style:
|
|
this.policyObject.loadMoreShow === false
|
|
? "display: none"
|
|
: this.policyObject.polInfStyle !== "" &&
|
|
this.policyObject.polInfStyle !== undefined
|
|
? this.policyObject.polInfStyle
|
|
: "",
|
|
policyPublishList: [],
|
|
queryParams: {
|
|
policyType: this.policyObject.policyType,
|
|
params: {
|
|
showTotal: this.policyObject.showTotal,
|
|
},
|
|
},
|
|
arctileList: [
|
|
{
|
|
title: "坚持把解决好“三农”问题作为全党工作重中之重",
|
|
image: "./static/images/index/xvYhpn.jpg",
|
|
timeIcon: "./static/images/index/xvYH7F.png",
|
|
date: "2022-11-01",
|
|
},
|
|
{
|
|
title: "农业农村部关于推进农业经营主体信贷直通车常态化服务的通知",
|
|
image: "./static/images/index/xvY4lq.jpg",
|
|
timeIcon: "./static/images/index/xvYH7F.png",
|
|
date: "2022-11-03",
|
|
},
|
|
{
|
|
title: "2022年农产品产地冷藏保险设施建设补贴申报要点",
|
|
image: "./static/images/index/xvY70U.jpg",
|
|
timeIcon: "./static/images/index/xvYH7F.png",
|
|
date: "2022-11-04",
|
|
},
|
|
],
|
|
contentText: {
|
|
contentdown: "查看更多",
|
|
contentrefresh: "加载中",
|
|
contentnomore: "暂无更多",
|
|
},
|
|
dictLists: {},
|
|
polTypeTextWH: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
more() {},
|
|
},
|
|
methods: {
|
|
returnSet(val) {
|
|
this.style = val.style;
|
|
this.status = val.status;
|
|
},
|
|
toPolicy(policyItem) {
|
|
this.$tab.navigateTo(
|
|
"/pages/find/policyInformation/policyForDetails?id=" + policyItem.id
|
|
);
|
|
},
|
|
getList() {
|
|
this.status = "loading";
|
|
listPolicyPublish(this.queryParams)
|
|
.then((response) => {
|
|
const rows = response.rows;
|
|
rows.forEach((element, index) => {
|
|
this.policyPublishList = element.list;
|
|
if (this.policyPublishList.length > 0) {
|
|
this.isPolicyPublish = true;
|
|
}
|
|
this.total = element.total;
|
|
this.$emit("update:reTotal", this.total);
|
|
});
|
|
this.status =
|
|
this.total > this.queryParams.params.showTotal ? "more" : "noMore";
|
|
})
|
|
.catch((err) => {
|
|
// console.error(err);
|
|
});
|
|
},
|
|
async initializeDict() {
|
|
this.dictByType("policy_type");
|
|
},
|
|
dictByType(type) {
|
|
this.getDicts(type).then((response) => {
|
|
let dicts = [];
|
|
for (let dict of response.data) {
|
|
let element = {};
|
|
element["value"] = dict.dictValue;
|
|
element["text"] = dict.dictLabel;
|
|
element["label"] = dict.dictLabel;
|
|
dicts.push(element);
|
|
}
|
|
this.$set(this.dictLists, type, dicts);
|
|
});
|
|
},
|
|
},
|
|
watch: {
|
|
policyObject: {
|
|
handler: function (val) {
|
|
this.$set(this.queryParams.params, "showTotal", val.showTotal);
|
|
this.$set(this.queryParams, "policyType", val.policyType);
|
|
this.$set(this.queryParams, "policyType", val.policyType);
|
|
this.loadMoreIf = this.policyObject.loadMoreIf;
|
|
this.style =
|
|
this.policyObject.loadMoreShow === false ? "display: none" : "";
|
|
if (val.showTotal < this.total) {
|
|
this.getList();
|
|
} else if (
|
|
val.showTotal === this.total &&
|
|
(!this.equals || this.isReSearch)
|
|
) {
|
|
this.getList();
|
|
this.equals = true;
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
|
|
// 组件周期函数--监听组件挂载完毕
|
|
mounted() {
|
|
this.getList();
|
|
this.initializeDict();
|
|
this.$nextTick(function () {
|
|
let dimLimitPageWidth = 0;
|
|
let dimLimit = 0;
|
|
let dimLimitUnit = "";
|
|
let dimLimisMargin = true;
|
|
let DpolTypeTextWH = 0;
|
|
let dimLimitDom = uni.createSelectorQuery().select(".uni-list");
|
|
dimLimitDom
|
|
.fields({ size: true }, (data) => {
|
|
dimLimitPageWidth = data.width;
|
|
dimLimit = data.width > 800 ? 23 : 3;
|
|
dimLimitUnit = data.width > 800 ? "px" : "vw";
|
|
dimLimisMargin = data.width > 800 ? false : true;
|
|
})
|
|
.exec();
|
|
let policyTypeText = uni.createSelectorQuery().select(".list-img");
|
|
policyTypeText
|
|
.fields({ size: true }, (data) => {
|
|
DpolTypeTextWH = data.width;
|
|
})
|
|
.exec();
|
|
this.polTypeTextWH = DpolTypeTextWH;
|
|
this.pageWidth = dimLimitPageWidth;
|
|
this.maxFontSize = dimLimit;
|
|
this.fontSizeUnit = dimLimitUnit;
|
|
this.isMargin = dimLimisMargin;
|
|
});
|
|
},
|
|
// 组件周期函数--监听组件数据更新之前
|
|
beforeUpdate() {},
|
|
// 组件周期函数--监听组件数据更新之后
|
|
updated() {},
|
|
// 组件周期函数--监听组件激活(显示)
|
|
activated() {},
|
|
// 组件周期函数--监听组件停用(隐藏)
|
|
deactivated() {},
|
|
// 组件周期函数--监听组件销毁之前
|
|
beforeDestroy() {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.polInfComponent {
|
|
background-color: white;
|
|
height: calc(100%);
|
|
}
|
|
|
|
.list-box {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
// margin-top: 15rpx;
|
|
|
|
/deep/.content-list {
|
|
width: 100vw;
|
|
|
|
.uni-list-item__container {
|
|
padding: 30rpx 0px;
|
|
}
|
|
|
|
.arctile-list {
|
|
width: 100%;
|
|
// height: 20vw;
|
|
|
|
.box-left {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 80px;
|
|
float: left;
|
|
display: flex;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.list-img {
|
|
// width: 16vw;
|
|
// height: 12.12vw;
|
|
float: left;
|
|
// margin-left: 2vw;
|
|
// margin-right: 2vw;
|
|
// margin-top: 4vw;
|
|
width:200rpx;
|
|
height:150rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.arctile-list {
|
|
margin-top: 0rpx;
|
|
}
|
|
.list-title {
|
|
width: 100%;
|
|
height: auto;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.boxlist-down {
|
|
margin-top: 40rpx;
|
|
// padding-top: calc(1rem - 1vh);
|
|
// position:
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size:24rpx;
|
|
}
|
|
.dot {
|
|
// position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 100%;
|
|
background: #67c23a;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
|
// margin-top: 12rpx;
|
|
}
|
|
.list-time {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
float: left;
|
|
margin-left: 24rpx;
|
|
// margin-top: 8rpx;
|
|
}
|
|
.policy_type-tag {
|
|
float: right;
|
|
width: 16vw;
|
|
margin-left: 2vw;
|
|
margin-right: 2vw;
|
|
margin-top: 8rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
padding: 0px;
|
|
}
|
|
.policy_type-text {
|
|
white-space: nowrap;
|
|
font-size: var(--max-font-size);
|
|
transform: scale(var(--policy_type-text-scale));
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
.policy_type-text-margin {
|
|
background: unset !important;
|
|
background-color: #e8f4ff !important;
|
|
}
|
|
.section{
|
|
color:#4892fd;
|
|
}
|
|
.date {
|
|
// position: absolute;
|
|
// position: absolute;
|
|
color: #999;
|
|
padding-left: 10rpx;
|
|
// margin-top: 8rpx;
|
|
// padding-top: 8rpx;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
.box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|