|
|
|
|
@ -1,41 +1,43 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="article"> |
|
|
|
|
<template> |
|
|
|
|
<view class="article"> |
|
|
|
|
<view class="article-hd"> |
|
|
|
|
<view class="search"> |
|
|
|
|
<view class="box"> |
|
|
|
|
<image src="/static/news/icon-search.png"></image> |
|
|
|
|
<input type="search" placeholder="商品名称/编码" /> |
|
|
|
|
<image src="/static/news/icon-search.png" @click="getArticleList()"></image> |
|
|
|
|
<input :value="keyword" type="search" placeholder="商品名称/编码" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="add"> |
|
|
|
|
<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" active-color="#FF2525" inactive-color="#6F6F6F" font-size="30" ></u-tabs> |
|
|
|
|
<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="k in 5" :key="i" @click="clickItem(11)" :options="options"> |
|
|
|
|
<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"> |
|
|
|
|
<image mode="aspectFill" src="@/static/home/phone.jpg" /> |
|
|
|
|
<view class="pic" @click.stop="toDetail(1,a)"> |
|
|
|
|
<image mode="aspectFill" :src="a.image_url" /> |
|
|
|
|
</view> |
|
|
|
|
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 --> |
|
|
|
|
<view class="info title-wrap"> |
|
|
|
|
<view class="title">荣耀畅玩 40 Plus 全网通5G版 绿8GB+128GB</view> |
|
|
|
|
<view class="desc"> |
|
|
|
|
这是文章内容这是文章内容这是文章内容这是文章内容这是文章.. |
|
|
|
|
</view> |
|
|
|
|
<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> |
|
|
|
|
</view> |
|
|
|
|
<u-empty text="暂无信息" v-if="total == 0" mode="list"></u-empty> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import * as ArticleApi from '@/api/article' |
|
|
|
|
import * as CategoryApi from '@/api/article/category' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
keyword: "", |
|
|
|
|
isShow: false, |
|
|
|
|
options: [ |
|
|
|
|
{ |
|
|
|
|
text: '编辑', |
|
|
|
|
@ -49,33 +51,124 @@ |
|
|
|
|
backgroundColor: '#FF564A' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
list: [{ |
|
|
|
|
name: '全部' |
|
|
|
|
}, { |
|
|
|
|
name: '分类1' |
|
|
|
|
}, { |
|
|
|
|
name: '分类2' |
|
|
|
|
}, { |
|
|
|
|
name: '分类3' |
|
|
|
|
}, { |
|
|
|
|
name: '分类4' |
|
|
|
|
}, { |
|
|
|
|
name: '分类5' |
|
|
|
|
}, { |
|
|
|
|
name: '分类6' |
|
|
|
|
}], |
|
|
|
|
current: 1 |
|
|
|
|
], |
|
|
|
|
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 CategoryApi.del({ |
|
|
|
|
article_id |
|
|
|
|
}); |
|
|
|
|
if(status == 200){ |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "删除成功" |
|
|
|
|
}) |
|
|
|
|
this.articleList.splice(index, 1); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取文章分类数据 |
|
|
|
|
async getCategoryList(categoryId) { |
|
|
|
|
const {status, message, data} = await CategoryApi.list(); |
|
|
|
|
if(status == 200){ |
|
|
|
|
this.list = data.list; |
|
|
|
|
this.getArticleList(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 获取文章列表 |
|
|
|
|
*/ |
|
|
|
|
async getArticleList() { |
|
|
|
|
let {status, message, data} = await ArticleApi.list({ |
|
|
|
|
categoryId: this.list[this.current].category_id, |
|
|
|
|
page: this.pageNum, |
|
|
|
|
keyword: 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 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
.uni-movable-area{ |
|
|
|
|
background-color: transparent !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
@ -157,6 +250,14 @@ |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
zhouzhenyuan
10 months ago