新增图表详情

src/api/modules/chart.js

@@ -3,7 +3,7 @@ import {get,post} from '@/api/index'
 export default{
   // 获取图表详情
   getChartDetail:params=>{
-    return get('/mychart/detail',params)
+    return get('/detail',params)
   },
   // 收藏图表
   chartCollect:params=>{

src/router/modules/chart.js

@@ -0,0 +1,10 @@
+export default[
+  {
+    path:'/chart/detail',
+    component:()=>import('@/views/chart/Detail.vue'),
+    name:'ChartDetail',
+    meta:{
+      title:'图表详情'
+    },
+  }
+]

src/views/chart/Detail.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { useRoute } from 'vue-router'
+import apiChart from '@/api/modules/chart'
+import apiCommon from '@/api/modules/common'
+import { Message } from 'tdesign-mobile-vue';
+
+const route = useRoute()
+let chartId=route.query.chartId
+
+
+// 获取配置
+const chartBaseUrl = ref('')
+function getSystemConfig() {
+  apiCommon.systemConfig().then(res => {
+    if (res.Ret === 200) {
+      const arr = res.Data || []
+      console.log(arr);
+      arr.forEach(item => {
+        if (item.ConfKey === 'ChartViewUrl') {
+          chartBaseUrl.value = item.ConfVal
+        }
+      });
+    }
+  })
+}
+getSystemConfig()
+
+const chartInfo = ref(null)
+function getChartDetail() {
+  chartInfo.value=null
+  apiChart.getChartDetail({
+    ChartInfoId:Number(chartId)
+  }).then(res => {
+    if (res.Ret === 200) {
+      chartInfo.value = res.Data
+    }
+  })
+}
+getChartDetail()
+
+async function handleCollect() {
+  const params={
+    UniqueCode:chartInfo.value.UniqueCode,
+    ChartName:chartInfo.value.ChartName,
+    ChartImage:chartInfo.value.ChartImage
+  }
+  const res=chartInfo.value.IsCollect?await apiChart.chartCollectCancel({
+    UniqueCode:chartInfo.value.UniqueCode,
+  }):await apiChart.chartCollect(params)
+  if(res.Ret===200){
+    Message.success(chartInfo.value.IsCollect?'取消收藏成功':'收藏成功')
+    chartInfo.value.IsCollect=!chartInfo.value.IsCollect
+    // 通知更新收藏列表
+    wx.miniProgram.postMessage({
+      data: 'refreshCollectList'
+    });
+  }
+}
+
+const chartRenderUrl = computed(() => {
+  return `${chartBaseUrl.value}/chart/preview?code=${chartInfo.value.UniqueCode}&source=etamini&token=${route.query.token}`
+})
+
+
+// 获取图列表切换用
+let changeChartList=ref([])
+async function getChangeChartList(){
+  if(route.query.fromPage!=='myCollect') return
+  let res=await apiChart.myChartLocate()
+  if(res.Ret===200){
+    changeChartList.value=res.Data||[]
+  }
+}
+getChangeChartList()
+
+// 切换上一张下一张
+function handleChangeChart(type){
+  const index=changeChartList.value.findIndex(e=>e.ChartInfoId==chartId)
+  if(type==='pre'){
+    if(index<1) return Message.warning('当前已是第一张')
+    const obj=changeChartList.value[index-1]
+    chartId=obj.ChartInfoId
+    getChartDetail()
+  }else{
+    if(index===changeChartList.value.length-1) return Message.warning('当前已是最后一张')
+    const obj=changeChartList.value[index+1]
+    chartId=obj.ChartInfoId
+    getChartDetail()
+  }
+}
+
+
+const isShowMZSM = ref(false)
+
+
+</script>
+<template>
+  <div class="chart-detail-page" v-if="chartInfo">
+    <div class="chart-title">{{chartInfo.ChartName}}</div>
+    <div class="mz-tips" @click="isShowMZSM = true">免责声明</div>
+    <!-- 图表渲染盒子 -->
+    <div class="chart-render-wrap">
+      <iframe :src="chartRenderUrl"></iframe>
+    </div>
+    <div v-if="chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).text"><span>来源：{{chartInfo.SourcesFrom?JSON.parse(chartInfo.SourcesFrom).text:''}}</span></div>
+
+    <div class="change-btns-box" v-if="changeChartList.length>1">
+      <div class="btn" @click="handleChangeChart('pre')">上一张</div>
+      <div class="btn" @click="handleChangeChart('next')">下一张</div>
+    </div>
+    <!-- 收藏 -->
+    <svg-icon @click="handleCollect" class="collect-icon" :name="chartInfo.IsCollect?'collected':'collect'" />
+  </div>
+  <!-- 免责声明 -->
+  <disclaimers-wrap v-model:show="isShowMZSM" />
+</template>
+
+<style lang="scss" scoped>
+.chart-detail-page {
+  background-color: #fff;
+  padding: var(--page-padding);
+  min-height: 100vh;
+  .chart-title {
+    font-size: 36px;
+    line-height: 44px;
+    margin-bottom: 20px;
+  }
+  .mz-tips {
+    text-align: right;
+    color: var(--primary-color);
+    font-size: var(--font-size-small);
+  }
+  .chart-render-wrap {
+    margin-top: 50px;
+    height: 800px;
+    margin-bottom: 40px;
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+  .change-btns-box {
+    position: fixed;
+    left: var(--page-padding);
+    right: var(--page-padding);
+    bottom: 69px;
+    display: flex;
+    justify-content: space-between;
+    .btn {
+      width: 48%;
+      height: 68px;
+      text-align: center;
+      border-radius: 68px;
+      line-height: 68px;
+      background-color: #f3f5f9;
+    }
+  }
+}
+.collect-icon {
+  position: fixed;
+  z-index: 99;
+  right: 34px;
+  bottom: 150px;
+  width: 100px;
+  height: 100px;
+}
+
+@media (min-width: 600px) {
+  .chart-detail-page {
+    min-height: 100vh;
+    .chart-title {
+      font-size: 18px;
+      line-height: 22px;
+      margin-bottom: 10px;
+    }
+    .chart-render-wrap {
+      margin-top: 25px;
+      height: 400px;
+    }
+    .change-btns-box{
+      bottom: 35px;
+      justify-content: center;
+      gap: 0 10px;
+      .btn{
+        max-width: 200px;
+        height: 34px;
+        border-radius: 34px;
+        line-height: 34px;
+      }
+    }
+  }
+  .collect-icon{
+    right: 17px;
+    bottom: 75px;
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>