117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="detail-page">
|
||
|
|
<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"></image>
|
||
|
|
</view>
|
||
|
|
<view class="detail tn-p tn-radius tn-shadow" :style="{'marginTop':!articleData.image?'200rpx':''}">
|
||
|
|
<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" />
|
||
|
|
</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 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
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.message,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
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 {
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 450rpx;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail {
|
||
|
|
background-color: #fff;
|
||
|
|
|
||
|
|
.info {
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary {
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|