You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
6.3 KiB
269 lines
6.3 KiB
<template>
|
|
<view class="article">
|
|
<view class="article-hd">
|
|
<view class="search">
|
|
<view class="box">
|
|
<image src="/static/news/icon-search.png" @click="getArticleList(1)"></image>
|
|
<input v-model="keyword" type="search" placeholder="请输入文章标题" />
|
|
</view>
|
|
<view class="add" @click="toDetail(2)">
|
|
<image src="/static/news/icon-add.png"></image>新增
|
|
</view>
|
|
</view>
|
|
<u-tabs :list="list" :is-scroll="false" v-model="current" @change="changeTab" active-color="#FF2525" inactive-color="#6F6F6F" font-size="30" ></u-tabs>
|
|
</view>
|
|
<view class="article-bd">
|
|
<u-swipe-action class="b" v-for="(a,i) in articleList" :index="i" @open="open" :key="i" @click="clickItem" :options="options">
|
|
<view class="item u-border-bottom">
|
|
<view class="pic" @click.stop="toDetail(1,a)">
|
|
<image mode="aspectFill" :src="a.image_url" />
|
|
</view>
|
|
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
|
|
<view class="info title-wrap" @click.stop="toDetail(1,a)">
|
|
<view class="title">{{a.title}}</view>
|
|
<view class="desc" v-html="a.content"></view>
|
|
</view>
|
|
</view>
|
|
</u-swipe-action>
|
|
</view>
|
|
<u-empty text="暂无信息" v-if="total == 0" mode="list"></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as ArticleApi from '@/api/article'
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: "",
|
|
isShow: false,
|
|
options: [
|
|
{
|
|
text: '编辑',
|
|
style: {
|
|
backgroundColor: '#FF8844'
|
|
}
|
|
},
|
|
{
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: '#FF564A'
|
|
}
|
|
}
|
|
],
|
|
articleList: [],
|
|
list: [],
|
|
total: 1,
|
|
pageNum: 1,
|
|
current: 0
|
|
};
|
|
},
|
|
onReady() {
|
|
this.getCategoryList();
|
|
},
|
|
onReachBottom() {
|
|
if(this.articleList.length <= this.total){
|
|
uni.showLoading({
|
|
title:"加载中"
|
|
})
|
|
this.pageNum ++;
|
|
this.getArticleList();
|
|
}
|
|
},
|
|
methods: {
|
|
toDetail(index,a){
|
|
if(index == 1){
|
|
uni.navigateTo({
|
|
url: "/pages/news/article/detail?articleId="+a.article_id
|
|
})
|
|
}else if(index == 2){
|
|
uni.navigateTo({
|
|
url: "/pages/news/article/add?type=1"
|
|
})
|
|
}
|
|
},
|
|
changeTab(i){
|
|
uni.showLoading({
|
|
title:"加载中"
|
|
})
|
|
this.current = i
|
|
this.pageNum = 1;
|
|
this.articleList = []
|
|
this.getArticleList();
|
|
},
|
|
async toDel(index,article_id){
|
|
const {status, message, data} = await ArticleApi.del({
|
|
article_id
|
|
});
|
|
if(status == 200){
|
|
uni.showToast({
|
|
title: "删除成功"
|
|
})
|
|
this.articleList.splice(index, 1);
|
|
}
|
|
},
|
|
// 获取文章分类数据
|
|
async getCategoryList(categoryId) {
|
|
const {status, message, data} = await ArticleApi.articleCatList();
|
|
if(status == 200){
|
|
this.list = data.list;
|
|
this.getArticleList();
|
|
}
|
|
},
|
|
/**
|
|
* 获取文章列表
|
|
*/
|
|
async getArticleList(type) {
|
|
if(type == 1){
|
|
this.pageNum = 1;
|
|
this.articleList = []
|
|
}
|
|
let {status, message, data} = await ArticleApi.list({
|
|
categoryId: this.list[this.current].category_id,
|
|
page: this.pageNum,
|
|
title: this.keyword
|
|
});
|
|
if(status == 200){
|
|
uni.hideLoading();
|
|
if(data.list.data && data.list.data.length > 0){
|
|
data.list.data.map(a=>{
|
|
a.show = false
|
|
})
|
|
}
|
|
this.articleList = this.articleList.concat(data.list.data)
|
|
this.total = data.list.total
|
|
console.log(this.articleList)
|
|
}
|
|
},
|
|
clickItem(index, index1){
|
|
console.log(index)
|
|
if(index1 == 0){
|
|
uni.navigateTo({
|
|
url: "/pages/news/article/add?type=2&articleId="+this.articleList[index].article_id
|
|
})
|
|
}else{
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
content: "确定要删除该信息？",
|
|
confirmColor: "#FF584D",
|
|
complete(res) {
|
|
if(res.confirm){
|
|
this.toDel(index,this.articleList[index].category_id);
|
|
}
|
|
// if(res.CategoryApi)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
|
|
open(index) {
|
|
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
|
|
// 原本为'false'，再次设置为'false'会无效
|
|
this.list[index].show = true;
|
|
this.list.map((val, idx) => {
|
|
if(index != idx) this.list[idx].show = false;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.article{
|
|
&-bd{
|
|
.uni-movable-area{
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.article{
|
|
&-hd{
|
|
background-color: #fff;
|
|
padding-bottom:20rpx;
|
|
.search{
|
|
width: 750rpx;
|
|
padding: 25rpx 35rpx;
|
|
border-bottom: 1px solid #F7F7F7;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.add{
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FF584D;
|
|
margin-left: 20rpx;
|
|
image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
.box{
|
|
padding: 15rpx 25rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #F3F3F3;
|
|
border-radius: 60rpx;
|
|
flex: 1;
|
|
image{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
input{
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-bd{
|
|
padding-bottom: 20rpx;
|
|
overflow: hidden;
|
|
.b{
|
|
margin-top: 20rpx;
|
|
}
|
|
.item{
|
|
padding: 30rpx 45rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
.pic{
|
|
width: 200rpx;
|
|
height: 160rpx;
|
|
margin-right: 20rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.info{
|
|
flex: 1;
|
|
max-width: 430rpx;
|
|
.title{
|
|
height: 50rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
}
|
|
.desc{
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|