JM-MiniApp/pages/wikipedia/detail.vue
2023-12-29 02:23:35 +08:00

119 lines
3.1 KiB
Vue

<script setup>
// 引入依赖
// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import { onLoad } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick} from "vue"
import {useStore} from '@/store/index.js'
import emptyCard from "@/components/emptyCard.vue"
import api from "@/api/index.js"
import util from "@/utils"
const store = useStore()
onLoad((e) => {
if(uni.getStorageSync('userInfo')) {
userInfo.value = JSON.parse( uni.getStorageSync('userInfo'))
}
// console.log(e)
// a_info.value = JSON.parse(decodeURIComponent(e.info))
if(!e.id) {
uni.showToast({
icon:"error",
title:"错误",
duration:2000
})
// a_info.value = null
return
}
getDetail(e.id)
})
// 变量
const userInfo = ref(null)
// const content = ref(null)
const a_info = ref(null)
// 函数
async function getDetail(id) {
const res = await api.getArticleDetail({id})
if(res.code == 0) {
a_info.value = res.data
}
else{
uni.showToast({
title:'获取失败',
icon:"error",
duration:2000
})
}
}
async function starFunc(type) { // 点击收藏
if(!userInfo.value) {
store.afterFailLogin(2000)
return
}
console.log(a_info.value)
if(type) { // 添加收藏
const res = await api.getArticleFavorite({
wz_id:a_info.value.ID,
userId:userInfo.value.userId,
cover:a_info.value.cover_img,
title:a_info.value.title,
introductions:''
},userInfo.value.userId)
}
else{ // 取消收藏
const res = await api.delArticleFavorite({
id:a_info.value.ID,
},userInfo.value.userId)
}
a_info.value.is_favorite = type
}
</script>
<template>
<view class="detailBox">
<view class="title">
{{a_info?.title}}
</view>
<view v-if="a_info" class="more-info small-text">{{util.timestampToDate(a_info?.CreatedAt)}}</view>
<view class="d-content" v-html="a_info?.content"></view>
<view class="action-box" v-if="a_info">
<view class="ab-item">
<uni-icons color="gray" type="eye" size="30"></uni-icons>
<view style="color: gray;">{{a_info?.reading_num}}</view>
</view>
<view class="ab-item">
<uni-icons color="#26758d" @tap="starFunc(0)" v-if="a_info?.is_favorite" type="star-filled" size="30"></uni-icons>
<uni-icons color="gray" @tap="starFunc(1)" v-else type="star" size="30"></uni-icons>
</view>
</view>
<emptyCard title="暂无内容" v-if="!a_info"></emptyCard>
</view>
</template>
<style scoped lang="scss">
.action-box{
margin-top: 20px;
display: flex;
justify-content: flex-end;
.ab-item{
display: flex;
align-items: center;
margin: 0 20rpx;
}
}
.detailBox{
.more-info{
text-align: right;
margin-bottom: 10rpx;
}
.title{
font-size: 32rpx;
font-weight: 900;
margin-bottom: 20rpx;
text-align: center;
}
padding: 40rpx;
.d-content{
line-height: 50rpx;
}
}
</style>