|
|
@@ -1,30 +1,374 @@
|
|
|
<script setup name="MyETAIndex">
|
|
|
-import MobileClassifyWrap from './components/MobileClassifyWrap.vue'
|
|
|
-import PadClasssifyWrap from './components/PadClasssifyWrap.vue'
|
|
|
+import {ref,reactive} from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import {useClassify} from './hooks/useClassify'
|
|
|
+import {apiMyChartList,apiMyChartRemove} from '@/api/myETA'
|
|
|
+import { showConfirmDialog, showToast } from 'vant';
|
|
|
+import { useWindowSize } from '@vueuse/core'
|
|
|
+
|
|
|
+const { width, height } = useWindowSize()
|
|
|
+
|
|
|
+const router=useRouter()
|
|
|
+
|
|
|
+const {
|
|
|
+ classifyTypeOpt,
|
|
|
+ classifyState,
|
|
|
+ getMyClassify,
|
|
|
+ getPubClassify,
|
|
|
+ classifyTypeChange,
|
|
|
+ handleAddClassify,
|
|
|
+ handleConfirmEditClassify,
|
|
|
+
|
|
|
+ handleShowOpt,
|
|
|
+ handleClassifyShare,
|
|
|
+ handleCopyClassify,
|
|
|
+ handleClassifyDel,
|
|
|
+ handleAddClassifyBeforeClose
|
|
|
+}=useClassify()
|
|
|
+
|
|
|
+const showClassifyPop=ref(false)
|
|
|
+
|
|
|
+async function initPage(){
|
|
|
+ getPubClassify()
|
|
|
+ await getMyClassify()
|
|
|
+ listState.cid=classifyState.myClassifyList[0]?.MyChartClassifyId
|
|
|
+ listState.cname=classifyState.myClassifyList[0]?.MyChartClassifyName
|
|
|
+ listState.ctype='我的图库'
|
|
|
+ if(!listState.cid){
|
|
|
+ listState.finished=true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ getChartList()
|
|
|
+}
|
|
|
+initPage()
|
|
|
+
|
|
|
+
|
|
|
+const listState = reactive({
|
|
|
+ ctype:'我的图库',
|
|
|
+ cname:'',
|
|
|
+ cid:0,
|
|
|
+ list:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ finished:false,
|
|
|
+ loading:false,
|
|
|
+ total:0,
|
|
|
+})
|
|
|
+async function getChartList(){
|
|
|
+ const res=await apiMyChartList({
|
|
|
+ CurrentIndex:listState.page,
|
|
|
+ PageSize:listState.pageSize,
|
|
|
+ MyChartClassifyId:listState.cid
|
|
|
+ })
|
|
|
+ if(res.Ret===200){
|
|
|
+ listState.loading=false
|
|
|
+ if(!res.Data){
|
|
|
+ listState.finished=true
|
|
|
+ listState.total=0
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ listState.finished=res.Data.Paging.IsEnd
|
|
|
+ const arr=res.Data.List||[]
|
|
|
+ listState.list=[...listState.list,...arr]
|
|
|
+ listState.total=res.Data.Paging.Totals
|
|
|
+ }
|
|
|
+}
|
|
|
+function onLoad(){
|
|
|
+ listState.page++
|
|
|
+ getChartList()
|
|
|
+}
|
|
|
+
|
|
|
+// 切换分类
|
|
|
+function handleSwitchClassify(item){
|
|
|
+ listState.ctype=classifyState.classifyTypeAct==1?'我的图库':'公共图库'
|
|
|
+ listState.cid=item.MyChartClassifyId
|
|
|
+ listState.cname=item.MyChartClassifyName
|
|
|
+ listState.list=[]
|
|
|
+ listState.page=1
|
|
|
+ listState.finished=0
|
|
|
+ listState.total=0
|
|
|
+ getChartList()
|
|
|
+ showClassifyPop.value=false
|
|
|
+}
|
|
|
+
|
|
|
+//跳转选择图表
|
|
|
+function goChooseChart(){
|
|
|
+ router.push({
|
|
|
+ path:'/myETA/choosechart'
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//移除图表
|
|
|
+function handleRemoveChart(item,index){
|
|
|
+ showConfirmDialog({
|
|
|
+ title: '提示',
|
|
|
+ message:'是否确认移出？',
|
|
|
+ }).then(()=>{
|
|
|
+ apiMyChartRemove({
|
|
|
+ MyChartClassifyId:Number(listState.cid),
|
|
|
+ MyChartId:item.MyChartId
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.Ret===200){
|
|
|
+ setTimeout(() => {
|
|
|
+ showToast('移出成功')
|
|
|
+ }, 100);
|
|
|
+ listState.list.splice(index,1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(()=>{})
|
|
|
+}
|
|
|
+
|
|
|
+// 跳转详情
|
|
|
+function goDetail(item){
|
|
|
+ router.push({
|
|
|
+ path:"/myETA/chartdetail",
|
|
|
+ query:{
|
|
|
+ code:item.UniqueCode,
|
|
|
+ cid:listState.cid,
|
|
|
+ iscommon:classifyState.classifyTypeAct==1?false:true
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="myETA-index-page">
|
|
|
- <div class="myETA-index-page_mobile">
|
|
|
- <MobileClassifyWrap />
|
|
|
- </div>
|
|
|
- <div class="myETA-index-page_pad">
|
|
|
- <PadClasssifyWrap/>
|
|
|
+ <div class="top-sticky-wrap">
|
|
|
+ <div class="search-wrap">
|
|
|
+ <van-search
|
|
|
+ shape="round"
|
|
|
+ readonly
|
|
|
+ placeholder="请输入图表名称"
|
|
|
+ />
|
|
|
+ <img @click="goChooseChart" class="icon" src="@/assets/imgs/myETA/icon_select.png" alt="icon">
|
|
|
+ <img @click="showClassifyPop=true" class="icon" src="@/assets/imgs/myETA/icon_menu2.png" alt="icon">
|
|
|
+ </div>
|
|
|
+ <p class="des">{{listState.ctype}}/{{listState.cname}}（共{{listState.total}}张图表）</p>
|
|
|
</div>
|
|
|
+ <van-list
|
|
|
+ v-model:loading="listState.loading"
|
|
|
+ :finished="listState.finished"
|
|
|
+ :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
|
|
|
+ :immediate-check="false"
|
|
|
+ @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="chart-list-wrap">
|
|
|
+ <li
|
|
|
+ class="chart-list-item"
|
|
|
+ v-for="item,index in listState.list"
|
|
|
+ :key="item.ChartInfoId"
|
|
|
+ @click="goDetail(item)"
|
|
|
+ >
|
|
|
+ <div class="van-multi-ellipsis--l2 name">{{item.ChartName}}</div>
|
|
|
+ <img class="img" :src="item.ChartImage" alt="">
|
|
|
+ <div class="time">
|
|
|
+ <span>{{item.CreateTime.slice(0,10)}}</span>
|
|
|
+ <img v-if="listState.ctype==='我的图库'" class="remove-box" @click.stop="handleRemoveChart(item,index)" src="@/assets/imgs/myETA/icon_remove2.png" alt="">
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </van-list>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 分类 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showClassifyPop"
|
|
|
+ position="right"
|
|
|
+ :style="{ height: '100%',width:width>650?'400px':'80%' }"
|
|
|
+ >
|
|
|
+ <div class="classify-wrap">
|
|
|
+ <div class="type-box">
|
|
|
+ <span
|
|
|
+ :class="['item',item.type===classifyState.classifyTypeAct?'active':'']"
|
|
|
+ v-for="item in classifyTypeOpt"
|
|
|
+ :key="item.id"
|
|
|
+ @click="classifyTypeChange(item)"
|
|
|
+ >{{item.name}}</span>
|
|
|
+ </div>
|
|
|
+ <ul class="list-box">
|
|
|
+ <li
|
|
|
+ class="item"
|
|
|
+ v-for="item in classifyState.classifyTypeAct==1?classifyState.myClassifyList:classifyState.pubClassifyList"
|
|
|
+ :key="item.MyChartClassifyId"
|
|
|
+ @click="handleSwitchClassify(item)"
|
|
|
+ >
|
|
|
+ <div :class="['van-ellipsis name',item.MyChartClassifyId===listState.cid&&'active-name']">{{item.MyChartClassifyName}}</div>
|
|
|
+ <div class="icon-drag-box">
|
|
|
+ <img src="@/assets/imgs/icon_drag.png" alt="">
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="bot-btns">
|
|
|
+ <van-button type="primary" block @click="handleAddClassify('')">添加我的分类</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!-- 添加我的分类弹窗 -->
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="classifyState.showEidtClassifyName"
|
|
|
+ :title="classifyState.isAddClassifyName?'添加分类':'重命名'"
|
|
|
+ show-cancel-button
|
|
|
+ confirmButtonText="确定"
|
|
|
+ @confirm="handleConfirmEditClassify"
|
|
|
+ :before-close="handleAddClassifyBeforeClose"
|
|
|
+ >
|
|
|
+ <div class="rename-wrap">
|
|
|
+ <input type="text" placeholder="请输入分类名称！" v-model="classifyState.classifyNameVal">
|
|
|
+ </div>
|
|
|
+ </van-dialog>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.myETA-index-page_pad{
|
|
|
- display: none;
|
|
|
+.myETA-index-page{
|
|
|
+ padding: 0 $page-padding;
|
|
|
}
|
|
|
-@media screen and (min-width:$media-width){
|
|
|
- .myETA-index-page_mobile{
|
|
|
- display: none;
|
|
|
+.top-sticky-wrap{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ padding-top: 30px;
|
|
|
+ .search-wrap{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .van-search{
|
|
|
+ padding: 0;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .des{
|
|
|
+ margin-top: 30px;
|
|
|
+ color: $font-grey;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.chart-list-wrap{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: space-between;
|
|
|
+ .chart-list-item{
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 326px;
|
|
|
+ padding: 10px 14px;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 12px;
|
|
|
+ .name{
|
|
|
+ min-height: 70px;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 220px;
|
|
|
+ display: block;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-size: 28px;
|
|
|
+ color: $font-grey_999;
|
|
|
+ position: relative;
|
|
|
+ .remove-box{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.classify-wrap{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .type-box{
|
|
|
+ padding: $page-padding;
|
|
|
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ .item{
|
|
|
+ margin-right: 40px;
|
|
|
+ font-size: 32px;
|
|
|
+ color: $font-grey_999;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ position: relative;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: -$page-padding;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: block;
|
|
|
+ width: 50px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: $theme-color;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-box{
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: $page-padding;
|
|
|
+ .item{
|
|
|
+ padding: 23px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .name{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .active-name{
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
+ .icon-drag-box{
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bot-btns{
|
|
|
+ padding: $page-padding;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.rename-wrap{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 50px 30px;
|
|
|
+ span{
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
- .myETA-index-page_pad{
|
|
|
- display: block;
|
|
|
+ input{
|
|
|
+ flex: 1;
|
|
|
+ line-height: 70px;
|
|
|
+ padding: 0 30px;
|
|
|
+ border-radius: 70px;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ width: 150px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+@media screen and (min-width:$media-width){
|
|
|
+
|
|
|
+}
|
|
|
</style>
|
