JM-MiniApp/pages/wikipedia/detail.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>&nbsp;测试内容222sdadd&nbsp;</p><figure class="image"><img src="https://jmyl-app.oss-cn-chengdu.aliyuncs.com/miniapp/uploads/2024-02-24/undone.png"/></figure></div>`
	// `<p>&nbsp;测试内容222sdadd&nbsp;</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>