<template>
|
<view class="container">
|
<header>
|
<view class="left" @click="chooseLocation">
|
<text class="location">{{ address }}</text>
|
<u-icon name="arrow-down" color="#fff"></u-icon>
|
</view>
|
<view class="right">
|
<image src="/static/index/search.png" mode=""></image>
|
<input class="search" placeholder="请输入感兴趣的政策内容" type="text" v-model="search" />
|
<u-button type="primary" style="width: 100upx;border-radius: 18upx;" size="normal" text="搜索"
|
@click="onPageChange(1)"></u-button>
|
</view>
|
</header>
|
|
<view
|
style="padding: 0 20upx;background-color: #fff;display: flex;justify-content: space-between;">
|
<scroll-view scroll-x class="tabs-scroll" style="white-space: nowrap;">
|
<u-tabs :list="tabsList" @click="chooseArticleType" style="padding-left: 4px;" lineWidth="20"
|
lineColor="#6190E8" :activeStyle="{
|
color: '#6190E8',
|
transform: 'scale(1.05)'
|
}" :inactiveStyle="{
|
color: '#606266',
|
transform: 'scale(1)'
|
}" itemStyle="padding-left: 15px; padding-right: 15px; height: 54px;" :scrollable="true">
|
</u-tabs>
|
</scroll-view>
|
</view>
|
|
<view v-if="!loading && goodsList.length > 0"
|
style="padding: 20upx;background-color: #fff;margin-top: 20upx;color: #969799;font-size: 28upx;padding-bottom: 200upx;">
|
<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="godetail(item)">
|
<view style="border-bottom: 1px solid #DFDFDF;padding: 10upx;margin-bottom: 10upx;">
|
<view style="display: flex;justify-content: space-between;">
|
<view class="msg" style="flex:1;font-weight: 800px;color: #000;">{{ item.ArticleTitle }}</view>
|
|
<view style="width: 90px;" @click.stop="star(item)">
|
<u-icon style="float: right;" :name="item.FavoriteFlag == 1 ? 'star-fill' : 'star'"
|
:color="item.FavoriteFlag == 1 ? 'gold' : 'darkgray'" size="28"></u-icon>
|
</view>
|
</view>
|
<view style="display: flex;justify-content: space-between;font-size: 22upx;line-height: 44upx;">
|
<view >{{ item.Platform }}</view>
|
<!-- <u-tag :text="item.PubTime.split(' ')[0]" plain size="mini" type="warning"></u-tag> -->
|
<view>{{ item.PubTime ? item.PubTime.split(' ')[0] : item.PubTime }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view v-if="loading" style="margin-top: 100upx;">
|
<u-loading-icon></u-loading-icon>
|
</view>
|
<u-empty v-if="!loading && goodsList.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
|
</u-empty>
|
<view style="position: fixed;bottom: 0;background-color: #fff;width: 100%;">
|
<Pagination :totalItems="total" :itemsPerPage="pageSize" :currentPage="pageIndex"
|
@page-change="onPageChange" />
|
</view>
|
<u-popup :show="showLocation" :round="10" mode="bottom" @close="showLocation=!showLocation" :closeable="true">
|
<view style="padding: 40upx;display: flex;flex-wrap: wrap;">
|
<view class="u-page__tag-item" v-for="(item, index) in locationList" :key="index">
|
<u-tag :text="item.Region" :plain="item.Region != address" type="warning" :name="index"
|
@click="locationClick(item.Region)">
|
</u-tag>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import Pagination from '../../components/Pagination';
|
export default {
|
components: {
|
Pagination
|
},
|
data() {
|
return {
|
total: 0,
|
pageIndex: 1,
|
pageSize: 8,
|
|
search: '',
|
titleNViewBackground: '',
|
swiperCurrent: 0,
|
swiperLength: 0,
|
carouselList: [],
|
goodsList: [],
|
address: '上海市',
|
showLocation: false,
|
locationList: [],
|
tabsList: [
|
{
|
name: '综合',
|
ArticleType: '',
|
},
|
{
|
name: '申报通知',
|
ArticleType: '申报通知'
|
|
},
|
{
|
name: '公示公告',
|
ArticleType: '公示公告'
|
},
|
{
|
name: '政策',
|
ArticleType: '政策'
|
},
|
{
|
name: '法规',
|
ArticleType: '法规'
|
}
|
|
],
|
ArticleType: '',
|
loading: false,
|
};
|
},
|
onLoad() {
|
if (uni.getStorageSync('location')) {
|
this.address = uni.getStorageSync('location')
|
}
|
this.GetAreaDataList()
|
|
},
|
methods: {
|
// 收藏
|
star(item) {
|
const userId = Number(uni.getStorageSync('userId'));
|
if (item.FavoriteFlag == 0) {
|
const data = {
|
ArticleId: item.Id,
|
UserId: userId
|
};
|
this.$http.post('/CollectArticle/AddCollectArticleData', data).then(res => {
|
if (res.Check) {
|
item.FavoriteFlag = 1;
|
this.$msg('操作成功');
|
} else {
|
this.$msg(res.Msg);
|
}
|
});
|
} else if (item.FavoriteFlag == 1) {
|
const data = {
|
ArticleId: item.Id,
|
UserId: userId
|
};
|
this.$http.post('/CollectArticle/DelCollectArticleDataById', data).then(res => {
|
if (res.Check) {
|
item.FavoriteFlag = 0;
|
this.$msg('操作成功');
|
} else {
|
this.$msg(res.Msg);
|
}
|
});
|
}
|
},
|
|
// 获取地区AreaData/GetAreaDataList
|
GetAreaDataList() {
|
let data = {
|
City: this.address
|
}
|
this.locationList = [
|
{
|
City: null,
|
Id: 0,
|
Province: null,
|
Region: "全部"
|
},
|
{
|
City: null,
|
Id: 0,
|
Province: null,
|
Region: "国家部委"
|
},
|
{
|
City: null,
|
Id: 0,
|
Province: null,
|
Region: this.address
|
}
|
|
]
|
this.$http.post('/AreaData/GetAreaDataList', data).then(res => {
|
if (res.Check) {
|
for (let i = 0; i < res.Data.length; i++) {
|
this.locationList.push({
|
City: null,
|
Id: 0,
|
Province: null,
|
Region: res.Data[i].Region
|
})
|
}
|
this.getArticleDataList()
|
} else {
|
this.$msg(res.Msg)
|
}
|
})
|
},
|
|
//选择地区 弹窗
|
chooseLocation() {
|
this.showLocation = true
|
},
|
locationClick(name) {
|
this.address = name
|
// uni.setStorageSync('location', name)
|
this.getArticleDataList()
|
this.showLocation = false
|
},
|
chooseArticleType(e) {
|
console.log('item', e);
|
this.ArticleType = e.ArticleType
|
this.onPageChange(1)
|
|
},
|
//
|
getArticleDataList() {
|
this.loading = true
|
let data = {
|
Platform: this.address,
|
ArticleType: this.ArticleType,
|
Scope: '',
|
Keyword: this.search,
|
PageNumber: this.pageIndex,
|
PageSize: this.pageSize,
|
UserId: uni.getStorageSync('userId')||-1
|
}
|
this.$http.post('/ArticleData/GetArticleDataList', data).then(res => {
|
if (res.Check) {
|
this.goodsList = res.Data.Data
|
this.total = res.Data.TotalCount
|
this.loading = false
|
} else {
|
this.$msg(res.Msg)
|
this.goodsList = []
|
this.loading = false
|
}
|
})
|
},
|
godetail(item) {
|
// 手机浏览器跳转
|
window.open(item.ArticleUrl, "_blank");
|
},
|
onPageChange(e){
|
this.pageIndex = e
|
this.getArticleDataList()
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page {
|
background-color: #F7F7F7;
|
}
|
|
.mp-search-box {
|
position: absolute;
|
left: 0;
|
top: 30upx;
|
z-index: 9999;
|
width: 100%;
|
padding: 0 80upx;
|
|
.ser-input {
|
flex: 1;
|
height: 56upx;
|
line-height: 56upx;
|
text-align: center;
|
font-size: 28upx;
|
color: $font-color-base;
|
border-radius: 20px;
|
background: rgba(255, 255, 255, .6);
|
}
|
}
|
|
header {
|
padding: 0 30upx;
|
height: 120upx;
|
// background-color: #236AF0;
|
background: linear-gradient( 180deg, #314ABB 0%, #5277E0 100%);
|
display: flex;
|
color: #fff;
|
font-size: 14px;
|
|
.left {
|
// width: 150upx;
|
// height: 120upx;
|
line-height: 120upx;
|
// text-align: left;
|
display: flex;
|
|
i {
|
font-size: 36upx;
|
}
|
}
|
|
.right{
|
flex: 1;
|
display: flex;
|
align-items: center;
|
background-color: #fff;
|
border-radius: 20upx;
|
// height: 80upx;
|
// line-height: 80upx;
|
padding: 0 10upx 0 20upx;
|
margin: 20upx 0 20upx 20upx;
|
color: #236AF0;
|
image {
|
width: 28upx;
|
height: 28upx;
|
margin-right:10upx;
|
}
|
.search{
|
flex: 1;
|
}
|
}
|
|
}
|
/deep/.u-tabs__wrapper__nav__line{
|
bottom: 0;
|
}
|
/* 分类 */
|
.cate-section {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
flex-wrap: wrap;
|
padding: 30upx 22upx;
|
background: #fff;
|
|
.cate-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-size: $font-sm + 2upx;
|
color: $font-color-dark;
|
}
|
|
/* 原图标颜色太深,不想改图了,所以加了透明度 */
|
image {
|
width: 88upx;
|
height: 88upx;
|
margin-bottom: 14upx;
|
border-radius: 50%;
|
opacity: .7;
|
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
|
}
|
}
|
|
.msg{
|
white-space: nowrap; /* 强制文本不换行 */
|
overflow: hidden; /* 隐藏超出部分 */
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
}
|
.u-page__tag-item {
|
height: 40upx;
|
line-height: 40upx;
|
min-width: 50upx;
|
text-align: center;
|
margin: 10upx;
|
}
|
</style>
|
