Просмотр исходного кода

Merge branch 'master' into cygx9.7

bding 2 лет назад
Родитель
Сommit
aec99c32b1

+ 27 - 0
src/api/hzyb/chart.js

@@ -111,4 +111,31 @@ export const apiMyChartRelateClassify=params=>{
  */
  */
 export const apiMyChartClassifyAdd=params=>{
 export const apiMyChartClassifyAdd=params=>{
     return post('/my_chart_classify/add',params)
     return post('/my_chart_classify/add',params)
+}
+
+/**
+ * 获取商品价格曲线数据
+ * @param {*} ChartInfoId 
+ * @returns 
+ */
+export const apiCommonChartDetail = params => {
+    return get('/my_chart/common/detail',params)
+}
+
+/**
+ * 刷新商品价格图
+ * @param {*} ChartInfoId 
+ * @returns 
+ */
+export const apiCommonChartRefresh = params => {
+    return post('/my_chart/future_good/refreshChartInfo',params)
+}
+
+/**
+ * 保存商品价格图
+ * @param {*} ChartInfoId  LeftMin LeftMax
+ * @returns 
+ */
+export const apiCommonChartSave = params => {
+    return post('/my_chart/future_good/editChartInfo',params)
 }
 }

+ 2 - 2
src/api/hzyb/http.js

@@ -63,10 +63,10 @@ _axios.interceptors.response.use(
       data=response.data
       data=response.data
     }
     }
     // console.log(data);
     // console.log(data);
-    if(![200,403].includes(data.code)){
+    if(![200,403,4003].includes(data.code)){
       setTimeout(() => {
       setTimeout(() => {
         Toast(data.msg)
         Toast(data.msg)
-      }, 10);
+      }, 100);
     }
     }
     return data;
     return data;
   },
   },

+ 296 - 90
src/views/hzyb/chart/Detail.vue

@@ -9,7 +9,7 @@ import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
 import moment from 'moment'
 import moment from 'moment'
 import _ from 'lodash';
 import _ from 'lodash';
 import Highcharts from 'highcharts/highstock';
 import Highcharts from 'highcharts/highstock';
-import {apiChartInfo,apiChartList,apiChartSave,apiChartBeforeAndNext,apiChartRefresh,apiMyChartDetail} from '@/api/hzyb/chart.js'
+import {apiChartInfo,apiChartList,apiChartSave,apiChartBeforeAndNext,apiChartRefresh,apiMyChartDetail,apiCommonChartDetail,apiCommonChartRefresh,apiCommonChartSave} from '@/api/hzyb/chart.js'
 const router=useRouter()
 const router=useRouter()
 const route=useRoute()
 const route=useRoute()
 document.title='图表详情'
 document.title='图表详情'
@@ -192,6 +192,7 @@ const calendarTypeChange=(val)=>{
 
 
 // 获取详情
 // 获取详情
 let ChartInfoId=route.query.ChartInfoId
 let ChartInfoId=route.query.ChartInfoId
+let chartSource = Number(route.query.chartSource); //图表来源 1 eta图 2商品价格图
 let chartData=ref({
 let chartData=ref({
     series:[],
     series:[],
     xAxis:[],
     xAxis:[],
@@ -208,12 +209,17 @@ const chartItemStyleArr = ref([
     { label: '散点图', key: 5 ,value: 'scatter'}
     { label: '散点图', key: 5 ,value: 'scatter'}
 ])//组合图配置时可选类型
 ])//组合图配置时可选类型
 
 
+let nodata=ref(false)
 let noauth=ref(false)
 let noauth=ref(false)
 let noAuthData=ref(null)
 let noAuthData=ref(null)
 // 如果type:init 则是初始化获取数据 
 // 如果type:init 则是初始化获取数据 
 const getChartInfo=async (type)=>{
 const getChartInfo=async (type)=>{
     // resData.value=null
     // resData.value=null
     loading.value=true
     loading.value=true
+
+    //商品价格曲线调另外的接口
+    if(chartSource===2) return getCommordityDetail();
+
     let res=null
     let res=null
     // 如果是从我的图库中来的
     // 如果是从我的图库中来的
     if(route.query.source=='ybxcx_my_chart'){
     if(route.query.source=='ybxcx_my_chart'){
@@ -274,6 +280,7 @@ const getChartInfo=async (type)=>{
             params:{
             params:{
                 chartInfoId:ChartInfoId,
                 chartInfoId:ChartInfoId,
                 searchVal:decodeURIComponent(route.query.searchVal)||'',
                 searchVal:decodeURIComponent(route.query.searchVal)||'',
+                chartSource,
                 MyChartId:route.query.MyChartId||'',
                 MyChartId:route.query.MyChartId||'',
                 MyChartClassifyId:route.query.MyChartClassifyId||'',
                 MyChartClassifyId:route.query.MyChartClassifyId||'',
             },
             },
@@ -283,10 +290,41 @@ const getChartInfo=async (type)=>{
         wx.miniProgram.postMessage({ data: postData });
         wx.miniProgram.postMessage({ data: postData });
         
         
 
 
+    }else if(res.code==403){
+        noauth.value=true
+        noAuthData.value=res.data
+    }else if(res.code===4003){//图表不存在
+        nodata.value=true
+    }
+}
+//获取商品价格曲线数据
+const getCommordityDetail = async() => {
+    const res = await apiCommonChartDetail({ChartInfoId})
+    loading.value=false
+    if(res.code===200){
+        resData.value=res.data
+
+        initCommodityData(res.data);
+
+        // 向小程序发送分享数据
+        let postData = {
+            params:{
+                chartInfoId:ChartInfoId,
+                searchVal:decodeURIComponent(route.query.searchVal)||'',
+                chartSource,
+                MyChartId:route.query.MyChartId||'',
+                MyChartClassifyId:route.query.MyChartClassifyId||'',
+            },
+            title: res.data.ChartInfo.ChartName,
+            shareImg:res.data.ChartInfo.ChartImage
+        };
+        wx.miniProgram.postMessage({ data: postData });
+
     }else if(res.code==403){
     }else if(res.code==403){
         noauth.value=true
         noauth.value=true
         noAuthData.value=res.data
         noAuthData.value=res.data
     }
     }
+
 }
 }
 getChartInfo('init')
 getChartInfo('init')
 
 
@@ -312,11 +350,225 @@ const initBarData = (data) => {
 
 
     setBarChart();
     setBarChart();
 }
 }
+/* 奇怪柱状图 和其他逻辑无公用点 依赖数据为单独的数据
+    x轴为指标名称的柱形图 以日期作为series
+*/
+const setBarChart = () => {
+    let seriesData = [];
+    const data = _.cloneDeep(barDateList.value);
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        categories: barXData.value,
+        tickWidth: 1,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+        },
+    }
+
+    const { leftMin,leftMax } = axisLimitData;
+    console.log(leftMin,leftMax)
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+        },
+        labels: {
+            formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+            },
+            align: 'center',
+        },
+        min: Number(leftMin),
+        max: Number(leftMax),
+        opposite: false,
+        tickWidth: 1,
+    }
+
+    //数据列
+    data.forEach(item => {
+        let serie_item = {
+            data: item.Value,
+            type: 'column',
+            yAxis: 0,
+            name: item.Name || item.Date,
+            color: item.Color,
+            chartType: 'linear',              
+            visible:true,
+        };
+        seriesData.push(serie_item)
+    })
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        plotOptions: {
+            column:{
+            stacking: null,
+            },
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis
+    }
+}
+
+
+/* 商品价格图 */
+const commodityChartData = ref([]);//商品价格图的绘图数据
+const commodityXData = ref([]);//商品价格图的x轴
+const commodityEdbList = ref([]);//商品价格图的表格数据 只用于取值
+ /* 商品价格曲线获取详情赋值 */
+const initCommodityData = (data) => {
+    const { XDataList,YDataList,EdbInfoList,ChartInfo } = data;
+
+    commodityEdbList.value = EdbInfoList;
+    commodityChartData.value = YDataList;
+    commodityXData.value = XDataList;
+
+    hasLeftAxis.value=true;
+    axisLimitData.leftMin=Number(ChartInfo.LeftMin)
+    axisLimitData.leftMax=Number(ChartInfo.LeftMax)
+
+    setCommodityChart();
+}
+/* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
+const setCommodityChart = () => {
+    
+    let seriesData = [];
+    const data = _.cloneDeep(commodityChartData.value);
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        categories: commodityXData.value.map(_ => _.Name),
+        tickWidth: 1,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+        },
+    }
+
+    const { leftMin,leftMax } = axisLimitData;
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text: commodityEdbList.value[0].Unit,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+        },
+        labels: {
+            formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+            },
+            align: 'center',
+        },
+        min: Number(leftMin),
+        max: Number(leftMax),
+        opposite: false,
+        tickWidth: 1,
+    }
+
+    //数据列
+    data.forEach(item => {
+        //处理首或/尾全是无效数据的以null填充
+        let filterData = filterInvalidData(item)
+
+        let serie_item = {
+            data: filterData,
+            type: 'spline',
+            yAxis: 0,
+            name: item.Name,
+            color: item.Color,
+            chartType: 'linear',
+            lineWidth: 3,
+            visible: true,
+            marker: {
+                enabled: false
+            }
+        };
+        seriesData.push(serie_item)
+    })
+
+    //tooltip
+    let tooltip = {
+        formatter: function() {
+            const ctx = this;
+            let str = '';
+            ctx.points.forEach(item => {
+              let obj_item = data.find(_ => _.Name === item.series.name);
+              let index = commodityXData.value.findIndex(_ => _.Name === ctx.x);
+
+              str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName }</b>`
+
+              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
+              }else {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
+              }
+            })
+            return str
+        },
+        shared: true
+    }
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis,
+        tooltip
+    }
+};
+/* 处理无效数据为null */
+const filterInvalidData = (item)=> {
+    let validateArr = item.XEdbInfoIdList.filter(_ =>!item.NoDataEdbList.includes(_));
+
+    let first_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[0]);
+    let last_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[validateArr.length-1]);
+    console.log('first_index',first_index)
+    console.log('last_index',last_index)
+
+    let arr = item.Value.map((item,index) => {
+    if(index < first_index || index > last_index) {
+        return null
+    }else {
+        return item
+    }
+    })
+
+    return arr;
+}
+
+
 
 
 // 路由改变 解决从搜索页返回数据不刷新问题
 // 路由改变 解决从搜索页返回数据不刷新问题
 onBeforeRouteUpdate((nval)=>{
 onBeforeRouteUpdate((nval)=>{
     console.log('路由改变',nval);
     console.log('路由改变',nval);
-    ChartInfoId=nval.query.ChartInfoId
+    ChartInfoId=nval.query.ChartInfoId;
+    chartSource= Number(nval.query.chartSource);
+    chartData.value = {}
     dateType.value=null
     dateType.value=null
     startDate.value=''
     startDate.value=''
     endDate.value=''
     endDate.value=''
@@ -1115,81 +1367,6 @@ const setScatterOptions = (dataList) => {
     }
     }
 }
 }
 
 
-/* 奇怪柱状图 和以上逻辑无公用点 依赖数据为单独的数据
-    x轴为指标名称的柱形图 以日期作为series
-*/
-const setBarChart = () => {
-    let seriesData = [];
-    const data = _.cloneDeep(barDateList.value);
-
-    //x轴
-    let xAxis = {
-        ...scatterXAxis,
-        categories: barXData.value,
-        tickWidth: 1,
-        title: {
-            text:  ``,
-            align: 'high',
-            rotation: 0,
-            x: 0,
-            offset: 20,
-        },
-    }
-
-    const { leftMin,leftMax } = axisLimitData;
-    console.log(leftMin,leftMax)
-    //y轴
-    let yAxis = {
-        ...basicYAxis,
-        title: {
-            text:  ``,
-            align: 'high',
-            rotation: 0,
-            y: -15,
-            offset: 0,
-        },
-        labels: {
-            formatter: function (ctx) {
-            let val = ctx.value;
-            return val;
-            },
-            align: 'center',
-        },
-        min: Number(leftMin),
-        max: Number(leftMax),
-        opposite: false,
-        tickWidth: 1,
-    }
-
-    //数据列
-    data.forEach(item => {
-        let serie_item = {
-            data: item.Value,
-            type: 'column',
-            yAxis: 0,
-            name: item.Name || item.Date,
-            color: item.Color,
-            chartType: 'linear',              
-            visible:true,
-        };
-        seriesData.push(serie_item)
-    })
-    
-    chartData.value = {
-        title: {
-            text:''
-        },
-        plotOptions: {
-            column:{
-            stacking: null,
-            },
-        },
-        series: seriesData,
-        yAxis: [ yAxis ],
-        xAxis
-    }
-}
-
 // 查询范围为1年内 x轴显示为月/日 否则默认年/月
 // 查询范围为1年内 x轴显示为月/日 否则默认年/月
 const xTimeDiffer=(minTime,maxTime)=>{
 const xTimeDiffer=(minTime,maxTime)=>{
     //年限差
     //年限差
@@ -1230,8 +1407,8 @@ watch(
         if(!showLimit.value) return
         if(!showLimit.value) return
         console.log('极值改变');
         console.log('极值改变');
 
 
-        //奇怪柱状图
-        if(resData.value.ChartInfo.ChartType === 7) {
+        //奇怪柱状图 商品价格图
+        if(resData.value.ChartInfo.ChartType === 7 || resData.value.ChartInfo.Source === 2) {
             chartData.value.yAxis[0].max = nval.leftMax;
             chartData.value.yAxis[0].max = nval.leftMax;
             chartData.value.yAxis[0].min = nval.leftMin;
             chartData.value.yAxis[0].min = nval.leftMin;
         }else {
         }else {
@@ -1290,6 +1467,7 @@ const pageChange=async (type)=>{
                     query:{
                     query:{
                         ...route.query,
                         ...route.query,
                         ChartInfoId:searchListData.value[index-1].ChartInfoId,
                         ChartInfoId:searchListData.value[index-1].ChartInfoId,
+                        chartSource: searchListData.value[index-1].Source
                     }
                     }
                 })
                 })
             }
             }
@@ -1304,6 +1482,7 @@ const pageChange=async (type)=>{
                     query:{
                     query:{
                         ...route.query,
                         ...route.query,
                         ChartInfoId:searchListData.value[index+1].ChartInfoId,
                         ChartInfoId:searchListData.value[index+1].ChartInfoId,
+                        chartSource: searchListData.value[index+1].Source
                     }
                     }
                 })
                 })
             }
             }
@@ -1338,6 +1517,7 @@ const pageChange=async (type)=>{
                     query:{
                     query:{
                         ...route.query,
                         ...route.query,
                         ChartInfoId:chartBeforeAndNextData.value.PrevChart.ChartInfoId,
                         ChartInfoId:chartBeforeAndNextData.value.PrevChart.ChartInfoId,
+                        chartSource: chartBeforeAndNextData.value.PrevChart.ChartInfoSource,
                         MyChartId:chartBeforeAndNextData.value.PrevChart.MyChartId,
                         MyChartId:chartBeforeAndNextData.value.PrevChart.MyChartId,
                         MyChartClassifyId:chartBeforeAndNextData.value.PrevChart.MyChartClassifyId,
                         MyChartClassifyId:chartBeforeAndNextData.value.PrevChart.MyChartClassifyId,
                         token:route.query.token
                         token:route.query.token
@@ -1362,6 +1542,7 @@ const pageChange=async (type)=>{
                     query:{
                     query:{
                         ...route.query,
                         ...route.query,
                         ChartInfoId:chartBeforeAndNextData.value.NextChart.ChartInfoId,
                         ChartInfoId:chartBeforeAndNextData.value.NextChart.ChartInfoId,
+                        chartSource: chartBeforeAndNextData.value.NextChart.ChartInfoSource,
                         MyChartId:chartBeforeAndNextData.value.NextChart.MyChartId,
                         MyChartId:chartBeforeAndNextData.value.NextChart.MyChartId,
                         MyChartClassifyId:chartBeforeAndNextData.value.NextChart.MyChartClassifyId,
                         MyChartClassifyId:chartBeforeAndNextData.value.NextChart.MyChartClassifyId,
                         token:route.query.token
                         token:route.query.token
@@ -1382,6 +1563,24 @@ onMounted(()=>{
 
 
 // 保存
 // 保存
 const handleSaveChart=async ()=>{
 const handleSaveChart=async ()=>{
+    let params = resData.value.ChartInfo.Source === 2
+        ? { 
+            ChartInfoId:resData.value.ChartInfo.ChartInfoId,
+            LeftMin: String(axisLimitData.leftMin),
+            LeftMax: String(axisLimitData.leftMax)
+          } 
+        : setChartParams()
+    
+    const res = resData.value.ChartInfo.Source === 2
+        ? await apiCommonChartSave(params)
+        : await apiChartSave(params)
+    if(res.code===200){
+        Toast.success('保存成功')
+    }
+}
+
+//设置请求参
+const setChartParams = () => {
     let params={}
     let params={}
     if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
     if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
         let arr=chartData.value.yAxis.map(item=>{
         let arr=chartData.value.yAxis.map(item=>{
@@ -1438,16 +1637,14 @@ const handleSaveChart=async ()=>{
             LeftMax: String(axisLimitData.leftMax),
             LeftMax: String(axisLimitData.leftMax),
         }
         }
     }
     }
-    const res=await apiChartSave(params)
-    if(res.code===200){
-        Toast.success('保存成功')
-    }
-
+    return params
 }
 }
 
 
 // 刷新图表
 // 刷新图表
 const handleRefreshChart=async ()=>{
 const handleRefreshChart=async ()=>{
-    const res=await apiChartRefresh({ChartInfoId:Number(ChartInfoId)})
+    const res = resData.value.ChartInfo.Source === 2
+        ? await apiCommonChartRefresh({ChartInfoId:Number(ChartInfoId)})
+        : await apiChartRefresh({ChartInfoId:Number(ChartInfoId)})
     if(res.code===200){
     if(res.code===200){
         setTimeout(() => {
         setTimeout(() => {
             Toast.success(res.msg)
             Toast.success(res.msg)
@@ -1491,6 +1688,7 @@ const code_scene=computed(()=>{
     let obj= {
     let obj= {
         chartInfoId:ChartInfoId,
         chartInfoId:ChartInfoId,
         searchVal:decodeURIComponent(route.query.searchVal)||'',
         searchVal:decodeURIComponent(route.query.searchVal)||'',
+        chartSource,
         MyChartId:route.query.MyChartId||'',
         MyChartId:route.query.MyChartId||'',
         MyChartClassifyId:route.query.MyChartClassifyId||'',
         MyChartClassifyId:route.query.MyChartClassifyId||'',
         from:'share'
         from:'share'
@@ -1509,10 +1707,10 @@ const posterParams=computed(()=>{
 </script>
 </script>
 
 
 <template>
 <template>
-    <div class="chart-detail" v-if="!loading&&!noauth">
+    <div class="chart-detail" v-if="!loading&&!noauth&&!nodata">
         <div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
         <div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
         <div class="top-box" v-if="$route.query.source!=='ybxcx_my_chart'">
         <div class="top-box" v-if="$route.query.source!=='ybxcx_my_chart'">
-            <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="resData.ChartInfo.ChartType !== 7">
+            <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="resData.ChartInfo.ChartType !== 7 &&resData.ChartInfo.Source===1">
                 <img src="../../../assets/hzyb/chart/calendar.png" alt="">
                 <img src="../../../assets/hzyb/chart/calendar.png" alt="">
                 <span class="date">{{startDate||'开始日期'}}</span>
                 <span class="date">{{startDate||'开始日期'}}</span>
                 <span style="margin:0 5px">至</span>
                 <span style="margin:0 5px">至</span>
@@ -1566,7 +1764,7 @@ const posterParams=computed(()=>{
         </div>
         </div>
 
 
         <!-- 最新值 -->
         <!-- 最新值 -->
-        <div class="latest-value-wrap" v-if="resData">
+        <div class="latest-value-wrap" v-if="resData&&resData.ChartInfo.Source===1">
             <p style="margin-bottom:10px">最新数值</p>
             <p style="margin-bottom:10px">最新数值</p>
             <ul class="list" v-if="sameOptionType.includes(resData.ChartInfo.ChartType)">
             <ul class="list" v-if="sameOptionType.includes(resData.ChartInfo.ChartType)">
                 <li v-for="item in chartData.series" :key="item.name">
                 <li v-for="item in chartData.series" :key="item.name">
@@ -1662,8 +1860,16 @@ const posterParams=computed(()=>{
         </Popup>
         </Popup>
     </div>
     </div>
     <!-- 无权限 -->
     <!-- 无权限 -->
-    <noAuth v-if="noauth" :data="noAuthData"></noAuth>
-
+    <noAuth v-if="noauth&&!nodata" :data="noAuthData"></noAuth>
+    <!-- 图表不存在 -->
+    <div class="chart-nodata" v-if="nodata">
+        <p style="text-align:center;padding-top:200px;font-size:16px">该图表已被删除!</p>
+        <collectBox 
+            v-if="$route.query.source=='ybxcx_my_chart'"
+            :code="$route.query.chartCode"
+            :isNodata="true"
+        />
+    </div>
 </template>
 </template>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

+ 1 - 0
src/views/hzyb/chart/Search.vue

@@ -26,6 +26,7 @@ const handleSelect=(item)=>{
         path:'/hzyb/chart/detail',
         path:'/hzyb/chart/detail',
         query:{
         query:{
             ChartInfoId:item.ChartInfoId,
             ChartInfoId:item.ChartInfoId,
+            chartSource: item.Source,
             token:route.query.token,
             token:route.query.token,
             searchVal:searchVal.value
             searchVal:searchVal.value
         }
         }

+ 13 - 2
src/views/hzyb/chart/component/collectBox.vue

@@ -9,7 +9,11 @@ const route=useRoute()
 
 
 const props = defineProps({
 const props = defineProps({
   code: String,
   code: String,
-  myChartInfo:Object
+  myChartInfo:Object,
+  isNodata:{
+      type:Boolean,
+      default:false
+  }
 })
 })
 
 
 watch(
 watch(
@@ -156,7 +160,14 @@ window.addEventListener('message',e=>{
 </script>
 </script>
 
 
 <template>
 <template>
-    <div class="collect-box">
+    <div v-if="props.isNodata" style="text-align:center">
+        <span 
+            @click="handleCollectStatusChange"
+            v-if="isCollect"
+            style="font-size:14px;display:inline-block;background:#E3B377;color:#fff;margin-top:20px;padding:8px 14px;border-radius:4px;line-height:1"
+        >取消收藏</span>
+    </div>
+    <div class="collect-box" v-else>
         <span 
         <span 
             @click="handleCollectStatusChange"
             @click="handleCollectStatusChange"
             :style="{color:isCollect?'#999999':'#E3B377'}"
             :style="{color:isCollect?'#999999':'#E3B377'}"