chart

api/chart.js

@@ -0,0 +1,23 @@
+// 图库模块
+
+import { httpGet, httpPost } from "@/utils/request.js";
+
+/**
+ * 图库列表
+ * @param Keywords 搜索关键词 
+ * @param ClassifyId 图表类型ID 
+ * @param Page 
+ * @param Limit
+ * @returns 
+ */
+export const apiChartList=params=>{
+    return httpGet('/my_chart/getChartList',params)
+}
+
+/**
+ * 图库分类
+ * @param Keywords 搜索关键词 
+ */
+export const apiChartClassifyList=params=>{
+    return httpGet('/my_chart/getChartChassify',params)
+}

components/chartClassifyItem/HM-dragSorts.vue

@@ -22,7 +22,7 @@
 									<!-- 内容  -->
 									<!-- <slot name="rowContent" :row="row"></slot> -->
 									<view class="chart-classify-item">
-										{{row.name}}
+										{{row.myChartClassifyName}}
 									</view>
 									<!-- 拖拽图标 -->
 									<view class="drag" :style="{'height': rowHeight+'px'}" 

pages-activity/noAuthority.vue

@@ -102,7 +102,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .noauthority-page{
     padding: 34rpx;
     text-align: center;

pages/chart/chart.vue

@@ -1,6 +1,6 @@
 <template>
     <page-meta :page-style="showFilter? 'overflow: hidden;' : ''" :scroll-top="pageMetaScrollTop" />
-    <view class="chart-page" @click="pageClick">
+    <view class="chart-page" v-if="true">
       <van-sticky style="background: #fff">
         <view class="flex search-wrap" id="search-wrap">
             <van-search
@@ -37,6 +37,9 @@
       
     
     </view>
+
+    <!-- 无权限 -->
+    <noAuth v-else></noAuth>
     
     <!-- 筛选弹窗 -->
       <van-popup 
@@ -54,7 +57,11 @@
           </view>
           <view class="filter-list">
             <view class="title">公共图库</view>
-            <view class="filter-item" v-for="item in 4" :key="item">分类以</view>
+            <view 
+              class="filter-item" 
+              v-for="item in pubClassifyList" 
+              :key="item.myChartClassifyName"
+            >{{item.myChartClassifyName}}</view>
 
             <view class="title">我的图库</view>
             <dragSorts
@@ -62,7 +69,6 @@
               :rowHeight="44"
               :listHeight="200"
             ></dragSorts>
-            <!-- <view class="filter-item" v-for="item in 5" :key="item">分类以</view> -->
           </view>
         </view>
       </van-popup>
@@ -71,15 +77,16 @@
 <script>
 import chartItem from './component/chartItem.vue'
 import dragSorts from '../../components/chartClassifyItem/HM-dragSorts.vue'
+import noAuth from './component/noAuth.vue'
+import {apiChartList,apiChartClassifyList} from '@/api/chart'
 export default {
     components: {
       'chart-item':chartItem,
-      dragSorts
+      dragSorts,
+      noAuth
     },
     data() {
         return {
-          showFilter:false,//显示筛选弹窗
-
           list:[],
           page:1,
           finished:false,
@@ -87,11 +94,15 @@ export default {
           pageMetaScrollTop:0,
           scrollTop:0,
 
-          myClassifyList:[{name:"分类1"},{name:"分类2"},{name:"分类3"},{name:"分类4"},{name:"分类5"},{name:"分类6"},],//我的图库分类数据
+          showFilter:false,//显示筛选弹窗
+          pubClassifyList:[],//公共图库分类数据
+          myClassifyList:[],//我的图库分类数据
+          selectClassifyId:0,//选中的分类id
+          isPublic:false,//是否当前显示的列表数据为公共图库数据
         }
     },
     onLoad() {
-      this.getList()
+      this.getClassifyList()
     },
     
     onReachBottom() {
@@ -104,20 +115,37 @@ export default {
     },
     methods: {
       // 获取列表
-      getList(){
-        if(this.page<3){
-          let arr=[]
-          for (let index = (this.page-1)*20; index < this.page*20; index++) {
-            arr.push({title:'标题'+index,src:'',dragId:'chart'+index,fixed: false})
+      async getList(){
+        const res=await apiChartList({Page:this.page,Limit:20})
+        if(res.code===200){
+          if(res.data){
+            let arr=res.data.map(item=>{
+              return {...item,dragId:item.UniqueCode,fixed: false}
+            })
+            this.list=[...this.list,...arr]
+            setTimeout(() => {
+              this.chartDragIns=this.$refs.chartDragIns
+              this.chartDragIns.init();// 初始化列表
+            }, 100);
+          }else{
+            this.finished=true
           }
-          this.list=[...this.list,...arr]
-          setTimeout(() => {
-            this.chartDragIns=this.$refs.chartDragIns
-            this.chartDragIns.init();
-          }, 100);
-        }else{
-          this.finished=true
         }
+
+
+        // if(this.page<3){
+        //   let arr=[]
+        //   for (let index = (this.page-1)*20; index < this.page*20; index++) {
+        //     arr.push({title:'标题'+index,src:'',dragId:'chart'+index,fixed: false})
+        //   }
+        //   this.list=[...this.list,...arr]
+        //   setTimeout(() => {
+        //     this.chartDragIns=this.$refs.chartDragIns
+        //     this.chartDragIns.init();
+        //   }, 100);
+        // }else{
+        //   this.finished=true
+        // }
         
       },
 
@@ -126,13 +154,14 @@ export default {
         // curIndex 为排序前元素所在位置  listData为排序后的数组
         let {curIndex,listData}=e.detail
         const moveTarget=this.list[curIndex]
-        console.log(moveTarget.title);
+        console.log(moveTarget.ChartName);
         this.list=listData
         setTimeout(() => {
           this.chartDragIns.init();
         }, 100);
         
       },
+
       // 点击某项
       chartClick(e){
         console.log(e.detail.data);
@@ -140,22 +169,43 @@ export default {
           url:'/pages-chart/chartDetail'
         })
       },
+
       // 移动时滚动
       chartScroll(e){
         this.pageMetaScrollTop=e.detail.scrollTop
       },
 
+      // 获取分类数据
+      async getClassifyList(){
+        const res=await apiChartClassifyList()
+        console.log(res);
+        if(res.code===200){
+          this.myClassifyList=res.data.private_classify||[]
+          this.pubClassifyList=res.data.public_classify||[]
+          if(res.data.private_classify){
+            this.selectClassifyId=res.data.private_classify[0]
+          }
+        }
+        this.getList()
+      },
+
+      // // 显示筛查弹窗
+      // async handleShowFilter(){
+      //   const res=await apiChartClassifyList()
+      //   console.log(res);
+      //   if(res.code===200){
+      //     this.myClassifyList=res.data.private_classify||[]
+      //     this.pubClassifyList=res.data.public_classify||[]
+      //   }
+      //   this.showFilter=true
+      // },
+
       // 跳转全部分类
       goAllTypes(){
         uni.navigateTo({ 
           url: '/pages-chart/allTypes'
         })
         this.showFilter=false
-      },
-
-      pageClick(){
-        const dom=this.createSelectorQuery()
-        console.log(dom.select('pop-title'));
       }
       
     }

pages/chart/component/chartItem.vue

@@ -2,12 +2,12 @@
   <view class="chart-item" :data-id="itemData.dragId" @click.stop="itemClick">
       <rich-text 
         class="van-multi-ellipsis--l2 title" 
-        :nodes="getTitle(itemData.title)"
+        :nodes="getTitle(itemData.ChartName)"
         @longpress.stop="chartTitle(itemData,$event)"
       ></rich-text>
-      <view class="pop-title" v-if="showPopTitle">{{title}}</view>
+      <view class="pop-title" v-if="showPopTitle">{{ChartName}}</view>
       <!-- <view class="van-multi-ellipsis--l2 title">{{itemData.title}}就发动机上课了发觉得凯撒尽快发动机卡JFK的撒尽快付款的撒娇离开了</view> -->
-      <image lazy-load class="img" src="" mode="aspectFill"/>
+      <image lazy-load class="img" :src="itemData.ChartImage" mode="aspectFill"/>
   </view>
 </template>
 
@@ -34,7 +34,7 @@ export default {
 
       // 格式化标题
       getTitle(e){
-        return `<span style="color:red">${e}</span>`
+        return `<span style="">${e}</span>`
       },
 
       // 长按标题

pages/chart/component/noAuth.vue

@@ -0,0 +1,34 @@
+<template>
+  <view class="chart-no-auth">
+        <image class="img" :src="globalImgUrls.activityNoAuth" mode="widthFix"></image>
+        
+        <view style="margin-bottom:15px">您暂无权限查看图库</view>
+        <view>若想查看请联系对口销售</view>
+        <view class="global-btn-yellow-change btn" style="margin-top:30px">立即申请</view>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-no-auth{
+    padding: 34rpx;
+    text-align: center;
+    font-size: $global-font-size-lg;
+    .img{
+        width: 100%;
+        margin-bottom: 50rpx;
+    }
+    .btn{
+        width: 380rpx;
+        line-height: 70rpx;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 40rpx;
+    }
+}
+</style>

utils/request.js

@@ -91,6 +91,16 @@ const http=(url,params,method)=>{
 				Authorization:store.state.user.token,
 			},
 			success(e) {
+				// 接口404
+				if(e.statusCode===404){
+					setTimeout(()=>{
+						uni.showToast({
+							title:'network:404',
+							icon:'none'
+						})
+					},0)
+					return
+				}
 				let res=JSON.parse(CryptoJS.Des3Decrypt(e.data));//解密
 				// let res=e.data
 				if(res.code!==200&&res.code!==403&&res.code!==4001&&res.code!==401){