110 lines
2.1 KiB
Vue
110 lines
2.1 KiB
Vue
<template>
|
|
<view class="app-container">
|
|
<HeaderBar :title="title" text-align="center" enable-back/>
|
|
|
|
<view class="article-list">
|
|
<view v-if="articleList.length > 0">
|
|
<view
|
|
v-for="item in articleList"
|
|
:key="item.id"
|
|
class="article-item"
|
|
@click="goToDetail(item)"
|
|
>
|
|
<view class="article-title">{{ item.title }}</view>
|
|
<view class="article-time">{{ item.createTime | dv }}</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="no-data">
|
|
<u-empty mode="data" text="暂无数据"></u-empty>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderBar from '@/components/HeaderBar.vue'
|
|
import { appGetArticleList } from '@/api/app/article'
|
|
export default {
|
|
components: {
|
|
HeaderBar
|
|
},
|
|
data() {
|
|
return {
|
|
articleList: [],
|
|
queryParams: {
|
|
type: '2' // 帮助中心文章类型
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
title() {
|
|
switch(this.queryParams.type) {
|
|
case '2':
|
|
return '帮助中心'
|
|
case '1':
|
|
return '通知公告'
|
|
default:
|
|
return '帮助中心'
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options) {
|
|
Object.assign(this.queryParams, options)
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getArticleList()
|
|
},
|
|
methods: {
|
|
getArticleList() {
|
|
appGetArticleList(this.queryParams).then(res => {
|
|
if (res.code === 200) {
|
|
this.articleList = res.data
|
|
}
|
|
})
|
|
},
|
|
goToDetail(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/article/detail?id=${item.id}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.article-list {
|
|
padding: 20rpx;
|
|
|
|
.article-item {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.article-title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.article-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.no-data {
|
|
padding: 100rpx 0;
|
|
}
|
|
}
|
|
</style> |