cmoit

src/assets/styles/common.scss

@@ -52,4 +52,11 @@ img {
 .van-search__content{
     border: 1px solid $border-color;
     background: #ffff !important;
+}
+
+// 列表无数据占位图
+.list-empty-img{
+    width: 400px;
+    display: block;
+    margin: 0 auto;
 }

src/views/myETA/ChartList.vue

@@ -95,7 +95,7 @@ function goChartDetail(item){
                     <div class="list-item" @click="goChartDetail(item)">
                         <img class="img" :src="item.ChartImage" alt="">
                         <div class="con-box">
-                            <div class="van-multi-ellipsis--l2 name">{{item.ChartName}}</div>
+                            <div class="van-ellipsis name">{{item.ChartName}}</div>
                             <div class="time">创建时间：{{item.CreateTime.slice(0,10)}}</div>
                         </div>
                     </div>
@@ -115,27 +115,31 @@ function goChartDetail(item){
     background-color: #fff;
     z-index: 99;
 }
-.empty-img{
-    width: 400px;
-    display: block;
-    margin: 0 auto;
-}
 .list-item{
     display: flex;
-    padding: 20px $page-padding;
+    padding-top: 20px;
+    padding-left: $page-padding;
     .img{
-        width: 137px;
-        height: 137px;
+        width: 160px;
+        height: 108px;
         object-fit: contain;
         margin-right: 20px;
+        border: 1px solid $border-color;
+        border-radius: 4px;
+        overflow: hidden;
     }
     .con-box{
+        padding-bottom: 20px;
+        padding-right: $page-padding;
         flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+        // display: flex;
+        // flex-direction: column;
+        // justify-content: space-between;
+        border-bottom: 1px solid $border-color;
+        overflow: hidden;
         .time{
             color: $font-grey_999;
+            margin-top: 30px;
         }
     }
 }

src/views/myETA/ChooseChart.vue

@@ -82,6 +82,11 @@ function handleTypeChange(item){
     refreshList()
 }
 
+// 只看我的状态切换
+function handleShowMeChange(){
+    refreshList()
+}
+
 // 搜索
 function onSearch(){
     refreshList()
@@ -100,47 +105,74 @@ async function getMyClassifyList(){
     const res=await apiMyClassifyList()
     if(res.Ret===200){
         const arr=res.Data.List||[]
-        classifyList.value=arr.map(item=>{
-            return {
-                ...item,
-                isSelect:false//用于选择的时候
-            }
-        })
+        classifyList.value=arr
     }
 }
 getMyClassifyList()
 // 显示选择分类弹窗
 let showSelect=ref(false)
-let selectChartId=ref(0)
+let selectChartId=ref(0)//要加入的图id
+let cids=ref([])//已加入的分类id
+function handleAdd(item){
+    selectChartId.value=item.ChartInfoId
+    cids.value=item.MyChartClassifyId?item.MyChartClassifyId.split(',').map(e => Number(e)):[]
+    showSelect.value=true
+}
+
+function handleChooseClassify(item){
+    if(cids.value.includes(item.MyChartClassifyId)){
+        const index=cids.value.indexOf(item.MyChartClassifyId)
+        cids.value.splice(index,1)
+    }else{
+        cids.value.push(item.MyChartClassifyId)
+    }
+}
 
 // 确认将图加入选择的分类
 function handleConfirmAddChart(){
-    let arr=[]
-    classifyList.value.forEach(item=>{
-        if(item.isSelect){
-            arr.push(item.MyChartClassifyId)
-        }
-    })
-    if(arr.length===0){
+    
+    if(cids.value.length===0){
         showToast('请选择分类')
         return
     }
     apiMyChartAdd({
         ChartInfoId:selectChartId.value,
-        MyChartClassifyId:arr
+        MyChartClassifyId:cids.value
     }).then(res=>{
         if(res.Ret===200){
             showToast('添加成功！')
+            showSelect.value=false
+            // 更新列表中的MyChartClassifyId
+            listState.list.forEach(item=>{
+                if(item.ChartInfoId==selectChartId.value){
+                    item.MyChartClassifyId=cids.value.join(',')
+                }
+            })
         }
     })
 }
 
+// 添加分类
+let showAddClassify=ref(false)
+let addClassifyName=ref('')
+async function handleConfirmEditClassify(){
+    if(!addClassifyName.value){
+        showToast('请填写分类名称！')
+        return
+    }
+    const res=await apiAddClassify({MyChartClassifyName:addClassifyName.value})
+    if(res.Ret===200){
+        showAddClassify.value=false
+        getMyClassifyList()
+    }
+}
 
 
 </script>
 
 <template>
     <div class="choose-chart-list-page">
+        <div class="sticky-box">
         <div class="search-box">
             <van-search
                 shape="round"
@@ -152,19 +184,24 @@ function handleConfirmAddChart(){
         </div>
         <div class="type-box">
             <span 
-                class="opt" 
+                :class="['opt',type==item.type?'active':'']" 
                 v-for="item in typeOpt" 
                 :key="item.type"
                 @click="handleTypeChange(item)"
             >{{item.name}}</span>
         </div>
-
+        </div>
+        <!-- 只看我的 -->
+        <div class="only-me-box" v-if="type!=1">
+            <van-checkbox v-model="isShowMe" @change="handleShowMeChange">只看我的</van-checkbox>
+        </div>
         <van-list
             v-model:loading="listState.loading"
             :finished="listState.finished"
-            finished-text="没有更多了"
+            :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
             @load="onLoad"
         >
+        <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
         <ul class="list-wrap">
             <li class="item" v-for="item in listState.list" :key="item.ChartInfoId">
                 <div class="van-multi-ellipsis--l2 name">{{item.ChartName}}</div>
@@ -175,42 +212,93 @@ function handleConfirmAddChart(){
                     :src="item.ChartImage"
                 />
                 <div>
-                    <span class="time">最新更新:{{item.ModifyTime.substr(0,10)}}</span>
+                    <span class="time">{{item.ModifyTime.substr(0,10)}}</span>
+                    <img class="add-icon" src="@/assets/imgs/icon01.png" alt="" @click="handleAdd(item)">
                 </div>
             </li>
         </ul>
         </van-list>
     </div>
+    <!-- 返回顶部 -->
+    <van-back-top offset="2000"/>
     <!-- 选择分类弹窗 -->
     <van-popup 
         v-model:show="showSelect" 
         position="bottom"
         round
+        closeable
     >
         <div class="select-classify-wrap">
             <div class="top-box">
+                <span class="add-btn" @click="showAddClassify=true,addClassifyName=''">添加分类</span>
                 <span class="title">选择分类</span>
-                <span class="confirm-btn" @click="handleConfirmAddChart">确定</span>
             </div>
             <ul class="classify-list">
                 <li 
-                    :class="['item',item.isSelect?'active':'']" 
+                    :class="['item',cids.includes(item.MyChartClassifyId)?'active':'']" 
                     v-for="item in classifyList" 
                     :key="item.MyChartClassifyId"
-                    @click="item.isSelect=!item.isSelect"
+                    @click="handleChooseClassify(item)"
                 >{{item.MyChartClassifyName}}</li>
             </ul>
+            <van-button 
+                type="primary" 
+                block 
+                round 
+                class="confirm-btn" 
+                @click="handleConfirmAddChart"
+            >确定</van-button>
         </div>
     </van-popup>
+    <!-- 添加我的分类弹窗 -->
+    <van-dialog 
+        v-model:show="showAddClassify" 
+        title="添加分类" 
+        show-cancel-button
+        confirmButtonText="确定"
+        @confirm="handleConfirmEditClassify"
+    >
+        <div class="rename-wrap">
+            <input type="text" placeholder="请输入分类名称！" v-model="addClassifyName">
+        </div>
+    </van-dialog>
 </template>
 
 <style lang="scss" scoped>
+.sticky-box{
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    background-color: #fff;
+}
 .type-box{
+    padding: 60px 40px 26px 40px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
     .opt{
         display: inline-block;
-        margin-right: 20px;
+        margin-right: 40px;
+        color: $font-grey_999;
+        &.active{
+            color: #333;
+            position: relative;
+            &::after{
+                content: '';
+                display: block;
+                width: 50px;
+                height: 6px;
+                background-color: $theme-color;
+                position: absolute;
+                bottom: -26px;
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 3px;
+            }
+        }
     }
 }
+.only-me-box{
+    padding: 40px 36px 0 36px;
+}
 .list-wrap{
     padding: $page-padding;
     display: flex;
@@ -218,33 +306,45 @@ function handleConfirmAddChart(){
     justify-content: space-between;
     .item{
         box-sizing: border-box;
-        border: 1px solid $border-color;
-        padding: 20px;
+        padding: 14px;
         width: 48%;
         margin-bottom: 30px;
+        border: 1px solid $border-color;
+        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.03);
+        border-radius: 4px;
+        position: relative;
         .name{
             min-height: 60px;
         }
         .img{
             width: 100%;
-            height: 200px;
-            margin: 20px 0;
+            height: 220px;
+            margin: 14px 0;
         }
         .time{
-            font-size: 12px;
-            color: $font-grey;
+            font-size: 24px;
+            color: $font-grey_999;
+        }
+        .add-icon{
+            position: absolute;
+            right: 14px;
+            bottom: 14px;
+            width: 36px;
+            height: 36px;
         }
     }
 }
 .select-classify-wrap{
     .top-box{
-        padding: 20px 0;
+        padding: 30px 0;
         text-align: center;
-        border-bottom: 1px solid $border-color;
         position: relative;
-        .confirm-btn{
+        .title{
+            font-size: 32px;
+        }
+        .add-btn{
             position: absolute;
-            right: 34px;
+            left: $page-padding;
             top: 50%;
             transform: translateY(-50%);
             color: $theme-color;
@@ -254,12 +354,47 @@ function handleConfirmAddChart(){
         height: 40vh;
         overflow-y: auto;
         .item{
-            padding: 20px 24px;
-            border-bottom: 1px solid $border-color;
+            padding: 20px $page-padding;
+            color: $font-grey;
         }
         .active{
             color: $theme-color;
+            position: relative;
+            &::after{
+                content: '';
+                display: block;
+                width: 36px;
+                height: 36px;
+                background-image: url('@/assets/imgs/icon_select2.png');
+                background-size: cover;
+                background-repeat: no-repeat;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: $page-padding;
+            }
         }
     }
+    .confirm-btn{
+        width: calc(100% - 2*$page-padding);
+        margin: 32px auto;
+    }
+}
+.rename-wrap{
+    display: flex;
+    align-items: center;
+    padding: 50px 30px;
+    span{
+        flex-shrink: 0;
+        margin-right: 20px;
+    }
+    input{
+        flex: 1;
+        line-height: 70px;
+        padding: 0 30px;
+        border-radius: 70px;
+        border: 1px solid $border-color;
+        width: 150px;
+    }
 }
 </style>