xcxFront/pages/investIntro/detail/index.vue

<template>
	<view class="detail-page" v-if="flag">
		<TnNavbar fixed bg-color="rgba(255, 255, 255, 0.01)" :bottom-shadow="false" :placeholder="false"/>
		<view class="image tn-border-bottom tn-grey-disabled_border" v-if="articleData.image">
			<image :src="articleData.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="image tn-border-bottom tn-grey-disabled_border" v-else style="position: relative;height: 350rpx;" >
			<image :src="banner" mode="aspectFill" style="width: 100%;height: 100%;"></image>
			<view class="tn-text-3xl tn-text-bold" style="position: absolute;top:160rpx;left: 90rpx;color: #fff;letter-spacing: 10rpx;">
				招商推介
			</view>
		</view>
		<view class="detail tn-p tn-radius tn-shadow">
			<view class="title tn-text-center tn-text-xl tn-text-bold">
				{{articleData.title}}
			</view>
			<view class="info tn-flex tn-flex-center-around tn-pt tn-pb-sm tn-border-bottom tn-grey-disabled_border">
				<view class="origin">
					<TnIcon name="pushpin"></TnIcon>{{articleData.origin}}
				</view>
				<view class="time">
					<TnIcon name="clock"></TnIcon>{{dayjs(articleData.created_at).format('YYYY-MM-DD')}}
				</view>
			</view>
			<view class="summary tn-m tn-p tn-gray-light_bg tn-radius">
				{{articleData.summary}}
			</view>
			<view class="content tn-text-lg tn-pl tn-pr tn-radius">
				<mp-html :content="articleData.content" @linktap="downloadFile"/>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import baseUrl from '@/config/config';
	import dayjs from "dayjs";
	import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import onShare from '@/utils/share';

	const { onShareAppMessage, onShareTimeline } = onShare()

	const banner = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/28.jpg')
	
	const flag = ref(false)
	
	const shareParam = ref()

	const shareTitle = ref()

	const articleData = reactive({
		title: '',
		image: '',
		depart: '',
		park: '',
		summary: '',
		content: '',
		created_at: '',
		isTop: 0,
		origin: ''
	})

	const getDetail = (id : number) => {
		uni.request({
			url: baseUrl + '/front/article',
			method: "GET",
			data: { id: id },
			success: (res : any) => {
				if (res.data.code === 0) {
					Object.assign(articleData, res.data.data)
					shareParam.value = res.data.data.id
					shareTitle.value = res.data.data.title
					flag.value = true
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			}
		})
	}
	
	const downloadFile = (file:any) => {
		uni.downloadFile({
			url:file.href,
			success(res) {
				if (res.statusCode === 200) {
					uni.saveFile({
						tempFilePath: res.tempFilePath, //临时路径
						success: function(res) {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件已保存：' + res.savedFilePath, //保存路径
								duration: 3000,
							});
							setTimeout(() => {
								//打开文档查看
								uni.openDocument({
									filePath: res.savedFilePath,
									showMenu: true,
									success: function() {
										console.log('打开文档成功');
									}
								});
							}, 3000)
						}
					})
					console.log('下载成功');
				}
			},
			fail: (err) => {
				console.log(err);
				uni.showToast({
					icon: 'none',
					mask: true,
					title: '失败请重新下载',
				});
			},
		})
	}

	onShareAppMessage(() => {
		return {
			title: shareTitle.value,
			path: '/pages/report/article/detail/index?id=' + shareParam.value
		}
	})

	onShareTimeline(() => {
		return {
			title: shareTitle.value,
			path: '/pages/report/article/detail/index?id=' + shareParam.value
		}
	})

	onLoad((option) => {
		getDetail(option.id)
	})
</script>

<style lang="scss" scoped>
	.detail-page {
		.image {
			height: 450rpx;
			image {
				display: block;
			}
		}

		.detail {
			background-color: #fff;

			.info {
				border-radius: 0;
			}
		}

		.summary {
			color: #666;
		}
	}
</style>