|
|
@@ -1,17 +1,48 @@
|
|
|
<template>
|
|
|
- <view class="report-detail-page">
|
|
|
+ <view class="report-detail-page" v-if="info">
|
|
|
+ <!-- 晨报、周报章节 -->
|
|
|
+ <view class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
|
|
|
+ <view class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
|
|
|
+ <view class="title">{{info.report_info.classify_name_first}}</view>
|
|
|
+ <view class="sub-title">{{info.report_info.title}}</view>
|
|
|
+ <view class="flex top-bot">
|
|
|
+ <view class="flex time-box">
|
|
|
+ <view class="day">{{formatChapterTime(info.report_info.publish_time,'day')}}</view>
|
|
|
+ <view>
|
|
|
+ <view>{{formatChapterTime(info.report_info.publish_time,'week')}}</view>
|
|
|
+ <view>{{formatChapterTime(info.report_info.publish_time,'year-month')}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="num">第{{info.report_info.stage}}期</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-box">
|
|
|
+ <view class="flex item" v-for="item in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
|
|
|
+ <image class="img" :src="item.banner_url" mode="aspectFill" />
|
|
|
+ <view class="con">
|
|
|
+ <view class="title">
|
|
|
+ {{item.report_chapter_type_name}}
|
|
|
+ <text class="tag" v-for="tag in item.trend.split(',')" :key="tag">{{tag}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="van-multi-ellipsis--l2 sub-title">{{item.title}}</view>
|
|
|
+ <view class="update-time">更新至：{{formatChapterTime(item.publish_time,'year-month-day')}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 报告详情 -->
|
|
|
- <view class="main-box" v-if="false">
|
|
|
- <view class="title">【第1期 | 原油周报】关注中美贸易政策</view>
|
|
|
+ <view class="main-box" v-else>
|
|
|
+ <view class="title">【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}</view>
|
|
|
<view class="flex time">
|
|
|
- <text>FICC团队</text>
|
|
|
- <text>2021.11.18 08:40:00</text>
|
|
|
+ <text>{{info.report_info.author}}</text>
|
|
|
+ <text>{{formatTime(info.report_info.publish_time)}}</text>
|
|
|
</view>
|
|
|
<view class="flex audio-wrap">
|
|
|
<image src="" mode="aspectFill"/>
|
|
|
<view>
|
|
|
- <view>关注中美贸易政策变化</view>
|
|
|
- <view style="color:#999999">1分31秒</view>
|
|
|
+ <view>{{info.report_info.video_name}}</view>
|
|
|
+ <view style="color:#999999">{{info.report_info.video_play_seconds|formatVoiceTime}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tips">
|
|
|
@@ -20,39 +51,12 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="rich-content">
|
|
|
- <mp-html :content="html"/>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 晨报、周报章节 -->
|
|
|
- <view class="chapter-list-wrap">
|
|
|
- <view class="top-box">
|
|
|
- <view class="title">晨报</view>
|
|
|
- <view class="sub-title">鲍威尔调控市场加息预期</view>
|
|
|
- <view class="flex top-bot">
|
|
|
- <view class="flex time-box">
|
|
|
- <view class="day">14</view>
|
|
|
- <view>
|
|
|
- <view>周三</view>
|
|
|
- <view>2022-03</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="num">第249期</view>
|
|
|
- </view>
|
|
|
+ <mp-html :content="info.report_info.content"/>
|
|
|
</view>
|
|
|
- <view class="list-box">
|
|
|
- <view class="flex item" v-for="item in 7" :key="item" @click="goChapterDetail">
|
|
|
- <image class="img" src="" mode="aspectFill" />
|
|
|
- <view class="con">
|
|
|
- <view class="title">宏观 <text class="tag">谨慎</text></view>
|
|
|
- <view class="van-multi-ellipsis--l2 sub-title">非美市场供应端呈不稳定性</view>
|
|
|
- <view class="update-time">更新至：2022-01-12</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 返回顶部 -->
|
|
|
- <image @click="handleBackTop" class="back-top-img" src="./static/back-top.png" mode="aspectFill"/>
|
|
|
+ <!-- 返回顶部 -->
|
|
|
+ <image v-if="" @click="handleBackTop" class="back-top-img" src="./static/back-top.png" mode="aspectFill"/>
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 免责声明 -->
|
|
|
<van-popup :show="showDisclaimers" @close="showDisclaimers=false" round closeable>
|
|
|
@@ -68,21 +72,58 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+const moment=require('@/utils/moment-with-locales.min')
|
|
|
+moment.locale('zh-cn');
|
|
|
+import {apiReportDetail} from '@/api/report'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
showDisclaimers:false,//显示免责声明
|
|
|
- html:'<h1>Hello World!</h1>'
|
|
|
+ html:'<h1>Hello World!</h1>',
|
|
|
+ reportId:0,
|
|
|
+ info:null,
|
|
|
+ chapterList:[]
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ onLoad(options) {
|
|
|
+ this.reportId=options.reportId
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ async getDetail(){
|
|
|
+ const res=await apiReportDetail({report_id:Number(this.reportId)})
|
|
|
+ if(res.code===200){
|
|
|
+ this.info=res.data
|
|
|
+ this.chapterList=res.data.report_chapter_list
|
|
|
+ uni.setNavigationBarTitle({ title: res.data.report_info.classify_name_first })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
handleBackTop(){
|
|
|
uni.pageScrollTo({ scrollTop: 0 })
|
|
|
},
|
|
|
|
|
|
- goChapterDetail(){
|
|
|
- uni.navigateTo({ url: '/pages-report/chapterDetail' })
|
|
|
+ goChapterDetail(item){
|
|
|
+ uni.navigateTo({ url: '/pages-report/chapterDetail?chapterId='+item.report_chapter_id })
|
|
|
+ },
|
|
|
+
|
|
|
+ formatTime(time){
|
|
|
+ return moment(time).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ },
|
|
|
+
|
|
|
+ formatChapterTime(time,type){
|
|
|
+ if(type==='day'){
|
|
|
+ return moment(time).format('DD')
|
|
|
+ }
|
|
|
+ if(type==='week'){
|
|
|
+ return moment(time).format('dddd')
|
|
|
+ }
|
|
|
+ if(type==='year-month'){
|
|
|
+ return moment(time).format('YYYY-MM')
|
|
|
+ }
|
|
|
+ if(type==='year-month-day'){
|
|
|
+ return moment(time).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -141,6 +182,7 @@ export default {
|
|
|
|
|
|
.rich-content{
|
|
|
line-height: 1.7;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
.back-top-img{
|
|
|
@@ -156,6 +198,7 @@ export default {
|
|
|
.top-box{
|
|
|
height: 418rpx;
|
|
|
background-color: rgba($color: #000000, $alpha: 0.7);
|
|
|
+ background-size: cover;
|
|
|
color: #fff;
|
|
|
position: relative;
|
|
|
.title{
|
|
|
@@ -205,7 +248,7 @@ export default {
|
|
|
.img{
|
|
|
width: 112rpx;
|
|
|
height: 112rpx;
|
|
|
- background-color: #f5f5f5;
|
|
|
+ // background-color: #f5f5f5;
|
|
|
flex-shrink: 0;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
jwyu