第一次提交
This commit is contained in:
gxwebsoft
122
pages/article/article.vue
Normal file
122
pages/article/article.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- <view class="search-wrapper">
|
||||
<u-search :showAction="true" actionText="搜索" :animation="true" v-model="where.keywords" @search="onSearch"></u-search>
|
||||
</view> -->
|
||||
<view class="user-list">
|
||||
<u-list @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell
|
||||
@click="navTo('/pages/article/detail/detail',{id: item.articleId})">
|
||||
<u-avatar slot="icon" size="50" :src="item.image ? `https://file.wsdns.cn/thumbnail${item.image}` : item.userAvatar" shape="square"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<view slot="title">{{ item.title }}</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty
|
||||
v-if="list.length == 0"
|
||||
mode="search"
|
||||
icon="http://cdn.uviewui.com/uview/empty/search.png"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as ArticleApi from '@/api/article.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
page: 0,
|
||||
where: {},
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.where = options
|
||||
this.onRefreshList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 刷新会员列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
app.where.page = app.page
|
||||
app.where.categoryId = 55
|
||||
return new Promise((resolve, reject) => {
|
||||
ArticleApi.pageArticle(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list
|
||||
console.log("list: ",list);
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
console.log("app.list: ",app.list);
|
||||
if(result.data.count > app.list.length){
|
||||
app.canReset = true
|
||||
}else{
|
||||
app.canReset = false
|
||||
}
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
scrolltolower(e){
|
||||
console.log("e: ",e);
|
||||
},
|
||||
navTo(url,userId){
|
||||
this.$push(url,userId)
|
||||
},
|
||||
onFollow(e){
|
||||
console.log("e11: ",e);
|
||||
},
|
||||
onSearch(){
|
||||
this.list = []
|
||||
this.where.page = 1
|
||||
this.onRefreshList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
}
|
||||
.user-list{
|
||||
margin: 0rpx auto;
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 66rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
116
pages/article/detail/detail.vue
Normal file
116
pages/article/detail/detail.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view v-if="!isLoading" class="container b-f p-b">
|
||||
<!-- <view class="article-title">
|
||||
<text class="f-32">{{ detail.title }}</text>
|
||||
</view> -->
|
||||
<view class="article-little dis-flex flex-x-between m-top10">
|
||||
<!-- <view class="article-little__left">
|
||||
<text class="article-views f-24 col-8">{{ detail.show_views }}次浏览</text>
|
||||
</view> -->
|
||||
<view class="article-little__right">
|
||||
<text class="article-views f-24 col-8">{{ detail.view_time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-content m-top20">
|
||||
<mp-html :content="detail.content" />
|
||||
</view>
|
||||
<!-- 快捷导航 -->
|
||||
<!-- <shortcut /> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Shortcut from '@/components/shortcut'
|
||||
import * as ArticleApi from '@/api/article'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Shortcut
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 当前文章ID
|
||||
articleId: null,
|
||||
// 加载中
|
||||
isLoading: true,
|
||||
// 当前文章详情
|
||||
detail: null
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(e){
|
||||
const { id } = e
|
||||
console.log("id: ",id);
|
||||
this.articleId = id
|
||||
},
|
||||
|
||||
onShow(e) {
|
||||
// 获取文章详情
|
||||
this.getArticleDetail()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取文章详情
|
||||
getArticleDetail() {
|
||||
const app = this
|
||||
const { articleId } = this
|
||||
app.isLoading = true
|
||||
ArticleApi.getArticle(articleId)
|
||||
.then(result => {
|
||||
app.detail = result.data;
|
||||
|
||||
// 改写标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: app.detail.title
|
||||
})
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享当前页面
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
const app = this
|
||||
// 构建页面参数
|
||||
const params = app.$getShareUrlParams({ articleId: app.articleId });
|
||||
return {
|
||||
title: app.detail.title,
|
||||
path: "/pages/article/detail?" + params
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
||||
*/
|
||||
onShareTimeline() {
|
||||
const app = this
|
||||
// 构建页面参数
|
||||
const params = app.$getShareUrlParams({ articleId: app.articleId });
|
||||
return {
|
||||
title: app.detail.title,
|
||||
path: "/pages/article/detail?" + params
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 90vh;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.article-title{
|
||||
text-align: center;
|
||||
}
|
||||
.article-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user