<template>
|
<view class="container">
|
<header>
|
<u-input class="search" placeholder="搜索" type="text" v-model="search" />
|
<u-button type="primary" style="width: 100upx;margin-top: 20upx;" size="normal" text="搜索" shape="circle"
|
@click="onPageChange(1)"></u-button>
|
</header>
|
|
<view v-if="!loading && goodsList.length >0"
|
style="padding: 40upx;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="background-color: #f7f7f7;padding: 10upx;margin-bottom: 10upx;">
|
<view style="display: flex;justify-content: space-between;">
|
<view style="font-weight: 800px;color: #000;">{{ item.ArticleTitle }}</view>
|
<view style="width: auto;" @click.stop="star(item)">
|
<u-icon name="star-fill"
|
color="gold" size="28"></u-icon>
|
</view>
|
</view>
|
<view style="display: flex;justify-content: space-between;">
|
<view style="font-size: 22upx;line-height: 44upx;">{{ item.Platform }}</view>
|
<u-tag :text="item.PubTime.split(' ')[0]" plain size="mini" type="warning"></u-tag>
|
</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: 100upx;background-color: #fff;width: 100%;">
|
<Pagination :totalItems="total" :itemsPerPage="pageSize" :currentPage="pageIndex"
|
@page-change="onPageChange" />
|
</view>
|
</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: [],
|
|
showLocation: false,
|
locationList: [],
|
loading: false,
|
};
|
},
|
onLoad() {
|
this.GetArticleCollectionList()
|
|
},
|
methods: {
|
// 收藏
|
star(item) {
|
const userId = Number(uni.getStorageSync('userId'));
|
|
const data = {
|
ArticleId: item.Id,
|
UserId: userId
|
};
|
this.$http.post('/CollectArticle/DelCollectArticleDataById', data).then(res => {
|
if (res.Check) {
|
|
this.$msg('操作成功');
|
this.pageIndex = 1
|
this.GetArticleCollectionList()
|
} else {
|
this.$msg(res.Msg);
|
}
|
});
|
|
},
|
|
//
|
GetArticleCollectionList() {
|
this.loading = true
|
let data = {
|
Platform: '',
|
ArticleType: '',
|
Keyword: this.search,
|
PageNumber: this.pageIndex,
|
PageSize: this.pageSize,
|
UserId: uni.getStorageSync('userId')
|
}
|
this.$http.post('/ArticleData/GetArticleCollectionList', 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.GetArticleCollectionList()
|
}
|
|
}
|
}
|
</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;
|
display: flex;
|
color: #fff;
|
font-size: 14px;
|
|
.left {
|
width: 150upx;
|
height: 120upx;
|
line-height: 120upx;
|
text-align: left;
|
display: flex;
|
|
i {
|
font-size: 36upx;
|
}
|
}
|
|
.search {
|
flex: 1;
|
height: 80upx;
|
line-height: 80upx;
|
border-radius: 40upx;
|
background-color: #fff;
|
padding: 0 20upx;
|
margin: 20upx 0;
|
color: #236AF0;
|
|
i {
|
font-size: 26upx;
|
color: #ccc;
|
}
|
}
|
|
}
|
|
/* 分类 */
|
.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);
|
}
|
}
|
|
.u-page__tag-item {
|
height: 40upx;
|
line-height: 40upx;
|
min-width: 50upx;
|
text-align: center;
|
margin: 10upx;
|
}
|
</style>
|
