yb11.6

src/api/hzyb/chart.js

@@ -59,4 +59,48 @@ export const apiChartRefresh=params=>{
  */
 export const apiMyChartDetail=params=>{
     return get('/my_chart/detail',params)
+}
+
+/**
+ * 图表是否收藏了
+ * @param unique_code
+ * @param authorization
+ */
+export const apiChartIsCollect=params=>{
+    return get('/my_chart/is_collect',params)
+}
+
+/**
+ * 收藏图表
+ * unique_code:string,
+    authorization:string,
+    report_id:number,
+    report_chapter_id:number
+ */
+
+export const apiChartCollect=params=>{
+    return post('/my_chart/collect',params)
+}
+
+/**
+ * 取消收藏
+ */
+export const apiChartCollectCancel=params=>{
+    return post('/my_chart/collect_cancel',params)
+}
+
+/**
+ * 我的图表中我的分类
+ */
+export const apiMyChartClassifyList=()=>{
+    return get('/my_chart_classify/list',{})
+}
+
+/**
+ * 我的图表关联分类
+ * @param my_chart_id
+ * @param classify_id
+ */
+export const apiMyChartRelateClassify=params=>{
+    return post('/my_chart/relate_classify',params)
 }

src/views/hzyb/chart/Detail.vue

@@ -2,6 +2,7 @@
 import chartBox from './component/chartBox.vue'
 import noAuth from './component/noAuth.vue'
 import sharePoster from '../components/SharePoster.vue'
+import collectBox from './component/collectBox.vue'
 import { Popup, Toast,Picker } from 'vant';
 import {ref,onMounted, reactive, watch,computed} from 'vue'
 import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
@@ -1416,8 +1417,17 @@ const posterParams=computed(()=>{
             <img class="icon" src="../../../assets/hzyb/chart/save.png" alt="" @click="handleSaveChart" v-if="canSave">
             <img class="icon" src="../../../assets/hzyb/chart/refresh.png" alt="" @click="handleRefreshChart">
         </div>
+        
+        <collectBox 
+            v-if="$route.query.source=='ybxcx_my_chart'"
+            :code="resData.ChartInfo.UniqueCode"
+            :myChartInfo="resData.MyChartInfo"
+        />
 
         <chartBox :options='chartData' v-if="!loading"></chartBox>
+
+        <div class="source-box" style="margin-top:5px" v-if="$route.query.source=='ybxcx_my_chart'">来源：{{resData&&resData.ChartInfo.ChartSource}}</div>
+
         <template v-if="$route.query.source!=='ybxcx_my_chart'">
         <div class="flex source-box">
             <div :style="{flex:resData&&resData.ChartInfo.ChartType===2?1:2}"><span v-if="resData&&resData.ChartInfo.ChartType!==2">来源：{{resData&&resData.ChartInfo.ChartSource}}</span></div>
@@ -1737,7 +1747,5 @@ const posterParams=computed(()=>{
         }
 
     }
-
-
 }
 </style>

src/views/hzyb/chart/component/chartBox.vue

@@ -231,5 +231,11 @@ watch(
         margin-right: 34px;
     }
 }
-
+@media (min-width: 768px){
+	.chart-wrap{
+		.chart-box{
+			height: 500px;
+		}
+	}
+}
 </style>

src/views/hzyb/chart/component/collectBox.vue

@@ -0,0 +1,226 @@
+<script setup>
+import {apiChartIsCollect,apiChartCollectCancel,apiChartCollect,apiMyChartClassifyList,apiMyChartRelateClassify} from '@/api/hzyb/chart'
+import { reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { Toast, Popup } from 'vant';
+
+const route=useRoute()
+
+const props = defineProps({
+  code: String,
+  myChartInfo:Object
+})
+
+watch(
+    ()=>props.code,
+    (n)=>{
+        if(n){
+            getIsCollect()
+        }
+    },
+    {
+        immediate:true
+    }
+)
+
+let isCollect=ref(false)
+async function getIsCollect(){
+    const res=await apiChartIsCollect({
+        unique_code:props.code,
+        authorization:route.query.token
+    })
+    if(res.code==200){
+        isCollect.value=res.data
+    }
+}
+
+function handleCollectStatusChange(){
+    if(isCollect.value){
+        collectChartCancel()
+    }else{
+        collectChart()
+    }
+}
+
+// 收藏
+async function collectChart(){
+    const res=await apiChartCollect({
+        unique_code:props.code,
+        authorization:route.query.token,
+        report_id:props.myChartInfo.report_id,
+        report_chapter_id:props.myChartInfo.report_chapter_id
+    })
+    if(res.code===200){
+        Toast('收藏成功')
+        isCollect.value=true
+    }
+}
+
+//取消收藏
+async function collectChartCancel(){
+    const res=await apiChartCollectCancel({
+        unique_code:props.code,
+        authorization:route.query.token
+    })
+    if(res.code===200){
+        Toast('取消收藏成功')
+        isCollect.value=false
+    }
+}
+
+let showTrans=ref(false)
+let showTransPc=ref(false)
+function handleShowTrans(type){
+    if(!isCollect.value){
+        Toast('您已经取消收藏,不可操作转移')
+        return
+    }
+    if(type==='mobile'){
+        showTrans.value=true
+    }else{
+        showTransPc.value=true
+    }
+    transData.selectId=props.myChartInfo.my_chart_classify_id||0
+    getClassify()
+}
+
+//获取分类数据
+let transData=reactive({
+    list:[],
+    selectId:0
+})
+async function getClassify(){
+    const res=await apiMyChartClassifyList()
+    if(res.code===200){
+        transData.list=res.data||[]
+    }
+}
+
+// 确定转移
+async function handleTrans(){
+    if(!transData.selectId){
+        Toast('请选择分类')
+        return
+    }
+    const res=await apiMyChartRelateClassify({
+        my_chart_id:props.myChartInfo.my_chart_id,
+        classify_id:transData.selectId
+    })  
+    if(res.code===200){
+        Toast('转移成功')
+        props.myChartInfo.my_chart_classify_id=transData.selectId
+        showTrans.value=false
+        showTransPc.value=false
+    }else{
+        Toast(res.msg)
+    }
+}
+
+
+</script>
+
+<template>
+    <div class="collect-box">
+        <span 
+            @click="handleCollectStatusChange"
+            :style="{color:isCollect?'#999999':'#E3B377'}"
+        >{{isCollect?'取消收藏':'收藏'}}</span>
+        <span class="trans" @click="handleShowTrans('mobile')">转移</span>
+        <span class="trans-pc" @click="handleShowTrans('pc')">转移</span>
+    </div>
+
+    <!-- 转移弹窗移动端 -->
+    <Popup
+        v-model:show="showTrans"
+        position="bottom"
+        closeable
+    >   
+        <div class="mobile-trans-box">
+            <div class="label">转移图表</div>
+            <div class="list">
+                <div 
+                    :class="['item',item.my_chart_classify_id==transData.selectId?'active':'']" 
+                    v-for="item in transData.list" 
+                    :key="item.my_chart_classify_id"
+                    @click="transData.selectId=item.my_chart_classify_id"
+                >{{item.my_chart_classify_name}}</div>
+            </div>
+            <div class="btn" @click="handleTrans">确定</div>
+        </div>
+    </Popup>
+</template>
+
+<style lang="scss" scoped>
+.collect-box{
+    padding: 20px 34px;
+    span{
+        margin-right: 60px;
+        vertical-align: middle;
+    }
+    .trans{
+        color: #E3B377;
+        &::before{
+            content: '';
+            display: inline-block;
+            width: 26px;
+            height: 26px;
+            background-image: url('@/assets/hzyb/chart/transf.png');
+            background-size: cover;
+            vertical-align: middle;
+            margin-right: 5px;
+        }
+    }
+    .trans-pc{
+        display: none;
+    }
+}
+@media (min-width: 768px){
+    .trans{
+        display: none;
+    }
+    .trans-pc{
+        display: inline-block !important;
+        color: #E3B377;
+        &::before{
+            content: '';
+            display: inline-block;
+            width: 26px;
+            height: 26px;
+            background-image: url('@/assets/hzyb/chart/transf.png');
+            background-size: cover;
+            vertical-align: middle;
+            margin-right: 5px;
+        }
+    }
+}
+
+.mobile-trans-box{
+    padding-top: 27px;
+    .label{
+        text-align: center;
+        font-size: 32px;
+        font-weight: 500;
+        padding-bottom: 40px;
+    }
+    .list{
+        height: 40vh;
+        overflow-y: auto;
+        padding: 0 34px;
+        .item{
+            padding: 24px;
+            border-bottom: 1px solid #ededed;
+        }
+        .active{
+            color: #E3B377;
+        }
+    }
+    .btn{
+        background-color: #333;
+        color: #E3B377;
+        text-align: center;
+        line-height: 80px;
+        letter-spacing: 4px;
+    }
+}
+
+</style>