【小程序】-- 新增我的收藏
This commit is contained in:
linjinyuan
parent
cc481438df
commit
30d46a37fc
|
|
@ -15,3 +15,38 @@ export function getArticleCate() {
|
|||
export function getArticleList(data: Record<string, any>) {
|
||||
return request.get({ url: '/article/list', data: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取文章详情
|
||||
* @param { number } id
|
||||
* @return { Promise }
|
||||
*/
|
||||
export function getArticleDetail(data: { id: number }) {
|
||||
return request.get({ url: '/article/detail', data: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 加入收藏
|
||||
* @param { number } articleId
|
||||
* @return { Promise }
|
||||
*/
|
||||
export function addCollect(data: { articleId: number }) {
|
||||
return request.post({ url: '/article/addCollect', data: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 取消收藏
|
||||
* @param { number } id
|
||||
* @return { Promise }
|
||||
*/
|
||||
export function cancelCollect(data: { articleId: number }) {
|
||||
return request.post({ url: '/article/cancelCollect', data: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取收藏列表
|
||||
* @return { Promise }
|
||||
*/
|
||||
export function getCollect() {
|
||||
return request.get({ url: '/article/collect' })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<navigator :url="`/pages/news_detail/news_detail?id=${item.id}`">
|
||||
<navigator :url="`/pages/news_detail/news_detail?id=${ newsId }`">
|
||||
<view class="news-card flex bg-white px-[20rpx] py-[32rpx]">
|
||||
<view class="mr-[20rpx]" v-if="item.image">
|
||||
<u-image :src="item.image" width="240" height="180"></u-image>
|
||||
|
|
@ -24,9 +24,11 @@
|
|||
import { ref } from 'vue';
|
||||
|
||||
const props = withDefaults(defineProps < {
|
||||
item: any
|
||||
item: any,
|
||||
newsId: number
|
||||
} > (), {
|
||||
item: {}
|
||||
item: {},
|
||||
newsId: ''
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,12 @@
|
|||
"navigationBarTitleText": "详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/collection/collection",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的收藏"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<z-paging ref="paging" v-model="collectData" @query="queryList" :fixed="false" height="100%"
|
||||
use-page-scroll>
|
||||
|
||||
<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in collectData" :key="item.id"
|
||||
@click="handleCollect" :options="options" btn-width="120">
|
||||
<news-card :item="item" :newsId="item.articleId"></news-card>
|
||||
</u-swipe-action>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, shallowRef } from 'vue';
|
||||
import { getCollect, cancelCollect } from "@/api/news"
|
||||
|
||||
|
||||
const paging = shallowRef()
|
||||
const options = reactive([{
|
||||
text: '取消收藏',
|
||||
style: {
|
||||
color: '#FFFFFF',
|
||||
backgroundColor: '#FF2C3C'
|
||||
}
|
||||
}])
|
||||
const collectData: any = ref([])
|
||||
|
||||
const queryList = async (pageNo, pageSize) => {
|
||||
const { lists } = await getCollect()
|
||||
lists.forEach(item => {
|
||||
item.show = false
|
||||
})
|
||||
collectData.value = lists
|
||||
paging.value.complete(lists);
|
||||
}
|
||||
|
||||
const handleCollect = async (index: number): Promise<void> => {
|
||||
try{
|
||||
const articleId: number = collectData.value[index].articleId
|
||||
await cancelCollect({ articleId })
|
||||
paging.value.reload()
|
||||
}catch(err){
|
||||
//TODO handle the exception
|
||||
console.log('取消收藏报错=>', err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<z-paging ref="paging" v-model="dataList" v-if="i == index" @query="queryList" :fixed="false" height="100%"
|
||||
use-page-scroll>
|
||||
<block v-for="(newsItem,newsIndex) in dataList" :key="newsIndex">
|
||||
<news-card :item="newsItem"></news-card>
|
||||
<news-card :item="newsItem" :newsId="newsItem.id"></news-card>
|
||||
</block>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,95 @@
|
|||
<template>
|
||||
</template>
|
||||
<view class="news-detail bg-white" >
|
||||
<!-- 标题信心 -->
|
||||
<view class="news-detail-header py-[20rpx] px-[30rpx]">
|
||||
<view class="text-3xl font-medium">{{ newsData.title }}</view>
|
||||
<view class="flex mt-[20rpx] text-xs">
|
||||
<view class="mr-[40rpx]" v-if="newsData.author">作者: {{ newsData.author }}</view>
|
||||
<view class="text-muted mr-[40rpx]">{{ newsData.createTime }}</view>
|
||||
<view class="flex items-center text-muted ">
|
||||
<image src="/static/images/icon_visit.png" class="w-[30rpx] h-[30rpx]"></image>
|
||||
<view class="ml-[10rpx]">{{ newsData.visit }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 咨询内容 -->
|
||||
<view class="news-detail-section bg-white p-[20rpx]">
|
||||
<!-- 摘要 -->
|
||||
<view class="summary p-[20rpx] text-base" v-if="newsData.summary">
|
||||
摘要: {{ newsData.summary }}
|
||||
</view>
|
||||
<!-- 封面 -->
|
||||
<view class="mt-[20rpx]" v-if="newsData.image">
|
||||
<image class="w-full" :src="newsData.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="mt-[20rpx]">
|
||||
<u-parse :html="newsData.content"></u-parse>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel-btn flex items-center px-[34rpx]" @click="handleAddCollect(newsData.id)">
|
||||
<u-icon :name="newsData.collect ? 'star-fill' : 'star'" size="36"></u-icon>
|
||||
<text class="ml-[10rpx]">收藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed } from "vue"
|
||||
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
|
||||
import { getArticleDetail, addCollect, cancelCollect } from "@/api/news"
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
const newsData = ref< any >({})
|
||||
let newsId = ''
|
||||
|
||||
|
||||
const getData = async (id) => {
|
||||
newsData.value = await getArticleDetail({ id })
|
||||
}
|
||||
|
||||
const handleAddCollect = async (articleId: number) => {
|
||||
try{
|
||||
if( newsData.value.collect ) {
|
||||
await cancelCollect({ articleId })
|
||||
} else await addCollect({ articleId })
|
||||
getData(newsId)
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options: any) => {
|
||||
newsId = options.id
|
||||
getData(newsId)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.news-detail {
|
||||
height: 100%;
|
||||
|
||||
&-header {
|
||||
border-bottom: 2rpx solid #F8F8F8;
|
||||
}
|
||||
|
||||
&-section {
|
||||
.summary {
|
||||
border-radius: 12rpx;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-btn {
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
height: 80rpx;
|
||||
bottom: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue