eta_mobile_front/src/views/myETA/components/MobileClassifyWrap.vue

<script setup>
import { useRouter } from 'vue-router'
import {useClassify} from '../hooks/useClassify'

const router=useRouter()

const {
    classifyTypeOpt,
    classifyState,
    getMyClassify,
    getPubClassify,
    classifyTypeChange,
    handleAddClassify,
    handleConfirmEditClassify,

    handleShowOpt,
    handleClassifyShare,
    handleCopyClassify,
    handleClassifyDel,
    handleAddClassifyBeforeClose
}=useClassify()

getMyClassify()
getPubClassify()

function goMobileSearch() {
    router.push({
        path:'/myETA/searchlist'
    })
}


function goChartList(item){
    router.push({
        path:"/myETA/chartlist",
        query:{
            cid:item.MyChartClassifyId,
            cname:item.MyChartClassifyName,
            iscommon:classifyState.classifyTypeAct==1?false:true
        }
    })
}

function goChooseChart(){
    router.push({
        path:'/myETA/choosechart'
    })
}
</script>

<template>
    <div class="myETA-mobile-classify-wrap">
        <div class="sticky-top">
        <div class="search-box">
            <van-search 
                shape="round" 
                readonly 
                placeholder="请输入图表名称" 
                @click="goMobileSearch"
            />
        </div>
        <div class="classify-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>
        </div>
        <ul class="list-box">
            <li 
                class="item"
                v-for="item in classifyState.classifyTypeAct==1?classifyState.myClassifyList:classifyState.pubClassifyList"
                :key="item.MyChartClassifyId"
                @click="goChartList(item)"
            >
                <img class="left-icon" src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                <div style="flex:1">
                    <div class="van-ellipsis name">{{item.MyChartClassifyName}}</div>
                    <div class="share-user" v-if="classifyState.classifyTypeAct==2">分享人： {{item.RealName}}</div>
                </div>
                <img class="right-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="" @click.stop="handleShowOpt(item)">
            </li>
        </ul>
        <!-- 底部操作栏 -->
        <div class="fix-bot-box">
            <div class="item" @click="handleAddClassify('')">
                <img class="icon" src="@/assets/imgs/icon_file.png" alt="">
                <span>添加分类</span>
            </div>
            <div class="item" @click="goChooseChart">
                <img class="icon" src="@/assets/imgs/icon_select.png" alt="">
                <span>选择图表</span>
            </div>
        </div>
    </div>
    <!-- 添加我的分类弹窗 -->
    <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>

    <!-- 分类操作弹窗 -->
    <van-popup 
        v-model:show="classifyState.showClassifyOpt" 
        round
        position="bottom"
    >
        <div class="classify-opt-wrap">
            <div class="item border">
                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                <span>{{classifyState.activeClassifyVal.MyChartClassifyName}}</span>
            </div>
            <!-- 我的图库分类操作 -->
            <template v-if="classifyState.classifyTypeAct==1">
            <div class="item border blue" @click="handleAddClassify(classifyState.activeClassifyVal)">
                <img src="@/assets/imgs/ppt/ppt_icon_write.png" alt="">
                <span>重命名</span>
            </div>
            <div class="item border blue">
                <img src="@/assets/imgs/icon_user.png" alt="">
                <span>所有人可见</span>
                <van-switch
                    class="switch-box"
                    size="22px" 
                    :model-value="classifyState.activeClassifyVal.IsPublic?true:false"
                    @update:model-value="handleClassifyShare"
                />
            </div>
            <div class="item border red" @click="handleClassifyDel(classifyState.activeClassifyVal)">
                <img src="@/assets/imgs/icon_del.png" alt="">
                <span>删除</span>
            </div>
            </template>
            <!-- 公共图库分类操作 -->
            <template v-if="classifyState.classifyTypeAct==2">
            <div class="item border blue" @click="handleCopyClassify(classifyState.activeClassifyVal)">
                <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
                <span>复制</span>
            </div>
            </template>
        </div>

    </van-popup>
</template>

<style lang="scss" scoped>
.sticky-top{
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #fff;
}
.classify-type-box{
    padding: $page-padding;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
    .item{
        display: inline-block;
        font-size: 32px;
        color: $font-grey_999;
        margin-right: 40px;
        position: relative;
    }
    .active{
        color: #333;
        &::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{
    padding: $page-padding;
    padding-bottom: 130px;
    .item{
        padding: 20px 0;
        display: flex;
        .left-icon{
            width: 32px;
            height: 32px;
            margin-right: 20px;
            flex-shrink: 0;
        }
        .right-icon{
            flex-shrink: 0;
            width: 4px;
            height: 20px;
            margin-left: 20px;
        }
        .name{
            flex: 1;
        }
        .share-user{
            color: $font-grey_999;
            margin-top: 15px;
        }
    }
}
.fix-bot-box{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 99;
    .item{
        width: 304px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 32px;
        box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        background-color: $theme-color;
        .icon{
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
    }
}
.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;
    }
}
.classify-opt-wrap{
    .item{
        padding: 42px;
        display: flex;
        align-items: center;
        position: relative;
        img{
            width: 36px;
            height: 36px;
            margin-right: 20px;
        }
        .switch-box{
            position: absolute;
            right: 42px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .border{
        border-bottom: 1px solid $border-color;
    }
    .blue{
        color: $theme-color;
    }
    .red{
        color: $theme-red;
    }
}
</style>