You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
4.0 KiB
Vue
132 lines
4.0 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)
|
|
})
|
|
// 变量
|
|
let strings = `<div style="text-align: center; "><p> 测试内容222sdadd </p><figure class="image"><img src="https://jmyl-app.oss-cn-chengdu.aliyuncs.com/miniapp/uploads/2024-02-24/undone.png"/></figure></div>`
|
|
// `<p> 测试内容222sdadd </p><figure class="image"><img src="https://jmyl-app.oss-cn-chengdu.aliyuncs.com/miniapp/uploads/2024-02-24/undone.png"></figure>`
|
|
// strings = strings.replaceAll("figure", "div");
|
|
// strings = strings.replaceAll("<img", "<img style='width:100%'");
|
|
console.log(strings)
|
|
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
|
|
if(a_info.value.content) {
|
|
a_info.value.content = a_info.value.content.replaceAll("figure", "div");
|
|
a_info.value.content = a_info.value.content.replaceAll("<img", "<img style='width:100%'");
|
|
}
|
|
}
|
|
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">
|
|
<rich-text :nodes="a_info?.content"></rich-text>
|
|
</view> -->
|
|
<view v-if="a_info" 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> |