xnzt/xnzt-h5/pages/index.vue
2024-11-11 10:27:27 +08:00

543 lines
12 KiB
Vue

<template>
<view class="content">
<view class="container">
<view class="bg">
<view class="banner">
<swiper class="swiper" circular autoplay>
<swiper-item v-for="(item,index) in TSwiperData" :key="index">
<view class="swiper-item">
<image :src="$config.imageBaseUrl + item.url" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="notice u-flex u-col-center u-row-between">
<view class="l u-flex u-col-center u-row-center">
<image src="@/static/images/index/notice.png" mode="aspectFill"></image>
<text>公告</text>
</view>
<view class="r">
<swiper class="swiper" vertical circular autoplay>
<swiper-item v-for="(item,index) in annList" :key="index">
<view class="swiper-item u-l-1">{{ item.messageContent }}</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="menu">
<view class="i" v-for="(item,index) in gridList" :key="index" @click="pageTo(item.link,item.type)">
<image :src="item.icon" mode="aspectFill"></image>
<text>{{item.title}}</text>
</view>
</view>
<!--内容-->
<view class="news">
<view class="news-top u-flex u-row-between u-col-center">
<view class="l">
<view class="i on u-flex u-col-center">
政策资讯
</view>
<view class="i u-flex u-col-center" @click="$pageTo('/pages/index/needList/sellList?type=0')">
销售需求
</view>
<view class="i ou-flex u-col-center" @click="$pageTo('/pages/index/needList/sellList?type=1')">
求购需求
</view>
</view>
<view class="r u-flex u-row-right u-col-center" @click="$pageTo('/pages/find/policyInformation/index')">
<text>更多</text>
<image src="../static/images/index/more.png" mode="aspectFill"></image>
</view>
</view>
<view class="list">
<view class="item u-flex u-row-between u-col-center" v-for="(item,index) in arctileList" :key="index"
@click="$pageTo(`/pages/find/policyInformation/policyForDetails?id=${item.id}`)">
<view class="l">
<view class="title u-l-2">
{{item.policyTitle}}
</view>
<view class="info">
<text class="type">{{getType(item.policySource)}}</text>
<text class="time">{{item.createTime.substring(0, 10)}}</text>
</view>
</view>
<view class="r">
<image src="../static/images/index/news.png" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import polInfComponent from "@/pages/find/policyInformation/polInfComponent/index";
import {
listPolicyPublish,getPolicyPublish,bannerList,announcement
} from "@/api/lef/policyPublish.js";
import { dict } from "@/api/lef/policyPublish";
import config from "@/config";
export default {
components: { polInfComponent },
data() {
return {
isPolicyPublish: false,
selectedEnv: "",
haveCreateCollection: false,
swiperDotIndex: 0,
current: 0,
total: 0,
reTotal: 0,
envList: [],
policyObject: {
policyType: "",
showTotal: 8,
loadMoreIf: false,
},
TSwiperData: [
{
image: "../static/images/index/xvYdfA.png",
},
{
image: "../static/images/index/xvYJeO.jpg",
},
{
image: "../static/images/index/xvYUFH.jpg",
},
],
// 九宫格图标
gridList: [
{
id: "1",
icon: "../static/images/index/i1.png",
title: "信息直报",
link: "/pages/accounts/dirRepInfo/index",
openType: "navigateTo",
type: 1
},
{
id: "",
icon: "../static/images/index/i2.png",
title: "信用查询",
link: "/pages/credit/index",
openType: "switchTab",
type: 2
},
{
id: "",
icon: "../static/images/index/i3.png",
title: "我的补贴",
link: "/pages/index/mySubsidies/index",
openType: "navigateTo",
type: 1
},
{
id: "",
icon: "../static/images/index/i4.png",
title: "我要培训",
link: "/pages/index/train/index",
openType: "navigateTo",
show: true,
type: 1
},
{
id: "",
icon: "../static/images/index/i5.png",
title: "我要贷款",
link: "/pages/index/needLoan/index",
openType: "navigateTo",
type: 1
},
{
id: "",
icon: "../static/images/index/i6.png",
title: "我要保险",
link: "/pages/index/needInsurance/index",
openType: "navigateTo",
type: 1
},
{
id: "",
icon: "../static/images/index/i7.png",
title: "我要服务",
link: "/pages/index/serviceList/index",
openType: "navigateTo",
show: true,
type: 1
},
{
icon: "../static/images/index/i8.png",
title: "我要买卖",
link: "/pages/index/tradeList/index",
openType: "navigateTo",
type: 1
},
],
// 公告列表
annList:[],
// 政策资讯
arctileList: [],
tabs: [
{
id: 1,
name: "政策资讯",
},
{
id: 2,
name: "销售需求",
},
{
id: 3,
name: "求购需求",
},
],
SalQueryParams: {
pageSize: 10,
},
PurQueryParams: {
pageSize: 10,
},
current: 0,
swiperDotIndex: 0,
tabCurrent: "tabNum1",
purchaseList: [],
saleList: [],
dicts: {},
goodsCategorys: [],
purTotal: 0,
salTotal: 0,
salLoadMoreStyle: "",
salLoadMorestatus: "more",
salLoadContentText: {
contentdown: "点击加载更多",
contentrefresh: "加载中",
contentnomore: "暂无更多",
},
purLoadMoreStyle: "",
purLoadMorestatus: "more",
purLoadContentText: {
contentdown: "点击加载更多",
contentrefresh: "加载中",
contentnomore: "暂无更多",
},
demandLoadSize: 8,
observer: null,
demandBox: null,
autoplay: true,
interval: 5000,
duration: 1000,
};
},
// 新版缓存方法
computed: {
getType() {
return (str) => {
if (str.length > 10) {
return str.substring(0, 10) + '...';
} else {
return str;
}
}
}
},
methods: {
pageTo(url, type) {
if (type == 1) {
uni.navigateTo({
url
})
} else {
uni.switchTab({
url
})
}
},
policyList(){
listPolicyPublish().then((res) => {
this.arctileList = res.rows[0].list
})
},
banner(){
bannerList().then(res=>{
this.TSwiperData = res.rows
})
this.announcementList()
},
announcementList(){
announcement({
pageNum:1,
pageSize:10,
isAnnouncement:1,
messageStatus:0
}).then(res=>{
this.annList = res.rows
})
}
},
watch: {
},
onLoad(option) {
this.banner()
this.policyList()
},
};
</script>
<style lang="scss">
$color: #4892FD;
.container {
padding-bottom: 100rpx;
background: #EFF5FF;
.bg {
background-color: #fff;
width: 100%;
padding: 20rpx 20rpx 0rpx 20rpx;
}
.banner {
width: 100%;
height: 310rpx;
border-radius: 10rpx;
overflow: hidden;
.swiper {
width: 100%;
height: 100%;
.swiper-item {
width: 100%;
height: 100%;
}
}
image {
width: 100%;
height: 100%;
}
}
.notice {
width: 100%;
margin-top: 30rpx;
height: 63rpx;
line-height: 63rpx;
.l {
width: 142rpx;
height: 63rpx;
line-height: 63rpx;
background: #EFF5FF;
border-radius: 32rpx;
image {
width: 36rpx;
height: 36rpx;
}
text {
font-size: 28rpx;
font-weight: bold;
color: #1B7AF5;
height: 63rpx;
line-height: 63rpx;
margin-left: 10rpx;
}
}
.r {
flex: 1;
width: 1rpx;
margin-left: 30rpx;
height: 63rpx;
line-height: 63rpx;
.swiper {
width: 100%;
height: 63rpx;
line-height: 63rpx;
.swiper-item {
font-size: 26rpx;
font-weight: 500;
color: #4D4D4D;
height: 63rpx;
line-height: 63rpx;
}
}
}
}
.menu {
margin-top: 25rpx;
background-color: #fff;
padding: 20rpx 40rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
.i {
padding: 20rpx 0;
width: 25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
image {
width: 100rpx;
height: 100rpx;
}
text {
margin-top: 20rpx;
font-size: 26rpx;
font-weight: 500;
color: #4D4D4D;
line-height: 40rpx;
height: 40rpx;
}
}
}
.news {
margin-top: 25rpx;
background-color: #fff;
width:100%;
.news-top {
border-bottom: 2rpx solid #eee;
padding: 10rpx 30rpx;
.l {
display: flex;
align-items: center;
.i {
font-size: 28rpx;
font-weight: 500;
color: #737373;
line-height: 80rpx;
height: 80rpx;
margin-right: 30rpx;
}
.on {
font-weight: 600;
font-size: 30rpx;
color: #333;
position: relative;
&::after {
content: '';
position: absolute;
bottom: -10rpx;
left: 50%;
margin-left: -27rpx;
width: 54rpx;
height: 8rpx;
background: #34A2FF;
border-radius: 4rpx;
}
}
}
.r {
image {
margin-left: 10rpx;
width: 20rpx;
height: 20rpx;
}
text {
font-size: 26rpx;
font-weight: 500;
color: #999999;
line-height: 34rpx;
height: 34rpx;
}
}
}
.list {
padding: 10rpx 30rpx;
.item {
border-bottom: 2rpx solid #eee;
padding: 35rpx 0;
&:last-child {
border-bottom: 0;
}
.l {
flex: 1;
width: 1rpx;
margin-right: 40rpx;
.title {
font-size: 28rpx;
width: 100%;
height: auto;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.info {
margin-top: 40rpx;
line-height: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
.type {
flex: 1;
font-size: 24rpx;
font-weight: 500;
color: $color;
}
.time {
margin-left: 20rpx;
font-size: 24rpx;
color: #999999;
width: 150rpx;
}
}
}
.r {
width: 200rpx;
height: 150rpx;
border-radius: 10rpx;
overflow: hidden;
image {
width: 100%;
height: 100%
}
}
}
}
}
}
</style>