pointsMall/src/components/AppSidebar.vue

<template>
    <div class="index-nav" :class="{ 'index-nav-top': isActive }">
        <nav class="side-navigator-wrap">
            <div v-for="(item, index) in sideBarList" :key="index" class="nav-item-wrap">
                <div @click="removeTab" class="nav-item-content" :class="{ active: item.checked }">
                    <router-link :to="item.path" class="nav-item">
                        <i :class="item.icon"></i>
                        <span class="nav-item-text">{{ item.name }}</span>
                    </router-link>
                </div>
            </div>
        </nav>
        <div class="hot-list-container">
            <div class="hot-list-item">
                <!-- <div class="hot-item-header">
                    <div class="hot-title">
                        <img src="../assets/image/hot.png"
                            type="icon" alt="icon" class="hot-icon">
                        <span title="热门商品" class="title-text">热门商品</span>
                    </div>
                </div>
                <div class="divider" style="margin-bottom: 4px;">
                    <div class="content"></div>
                </div> -->
                <el-radio-group v-model="tabType" size="small" @change="tabChange">
                    <el-radio-button label="hot">热门商品</el-radio-button>
                    <el-radio-button label="new">商城新品</el-radio-button>
                </el-radio-group>
                <ul class="hot-item-body">
                    <div class="skeleton">
                        <li v-for="(item,index) in goodsList" :key="index" class="hot-item" style="cursor: pointer;" @click="handleClickExchange(item.skuId)">
                            <!-- <a href="/home/pointsMall"> -->
                                <img style="width: 150px;height: 150px;" :src="item.imgUrl" alt="">
                            <!-- </a> -->

                            <div class="hot-item-text" :class="tabType=='new'?'justifyCenter':'justifyBetween'">
                                <div class="body-index" v-if="tabType=='hot'">
                                    {{ index + 1 }}
                                </div> 
                                <div class="title-articles">
                                    <!-- <svg t="1681785345732" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="1220" width="200" height="200">
                                                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="1221">
                                                </path>
                                                <path
                                                    d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z"
                                                    fill="#FF7744" p-id="1222"></path>
                                                <path
                                                    d="M512 34.133333c176.878933 0 331.298133 96.085333 413.934933 238.933334-82.6368 142.848-237.056 238.933333-413.934933 238.933333S180.701867 415.914667 98.065067 273.066667C180.667733 130.2528 335.121067 34.133333 512 34.133333z"
                                                    fill="#FFAA44" p-id="1223"></path>
                                                <path
                                                    d="M496.605867 305.3568a17.066667 17.066667 0 0 1 30.788266 0L576.853333 408.917333a17.066667 17.066667 0 0 0 13.175467 9.557334l113.800533 15.018666a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018667a17.066667 17.066667 0 0 0-5.051733 15.496533l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090667l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090667l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496533l-83.217066-79.018667a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018666a17.066667 17.066667 0 0 0 13.175466-9.557334l49.425067-103.560533z"
                                                    fill="#FFFFFF" p-id="1224"></path>
                                            </svg> -->
                                            <!-- ￥ -->
                                            {{  item.price }}
                                </div> 
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
        <div class="hot-list-container sticky-block">
            <div class="hot-list-item">
                <!-- <div class="hot-item-header">
                    <div class="hot-title">
                        <img src="../assets/image/hot.png"
                            type="icon" alt="icon" class="hot-icon">
                        <span title="热门商品" class="title-text">热门商品</span>
                    </div>
                </div>
                <div class="divider" style="margin-bottom: 4px;">
                    <div class="content"></div>
                </div> -->
                <el-radio-group v-model="tabType" size="small" @change="tabChange">
                    <el-radio-button label="hot">热门商品</el-radio-button>
                    <el-radio-button label="new">商城新品</el-radio-button>
                </el-radio-group>
                <ul class="hot-item-body">
                    <div class="skeleton">
                        <li v-for="(item,index) in goodsList" :key="index" class="hot-item" style="cursor: pointer;" @click="handleClickExchange(item.skuId)">
                            <!-- <a href="/home/pointsMall"> -->
                                <img style="width: 150px;height: 150px;" :src="item.imgUrl" alt="">
                            <!-- </a> -->

                            <div class="hot-item-text" :class="tabType=='new'?'justifyCenter':'justifyBetween'">
                                <div class="body-index" v-if="tabType=='hot'">
                                    {{ index + 1 }}
                                </div> 
                                <div class="title-articles">
                                    ￥{{  item.price }}
                                </div> 
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
    </div>

</template>
<script>
import { removeTab } from '@/utils/auth'
import { hotSkuList,newSkuList } from "@/api/allApi";
export default {
    name: 'AppSidebar',
    data() {
        return {
            tabType:'hot',
            goodsList:[],
            sideBarList: [
                {
                    value: 'index',
                    name: '首页',
                    path: '/home/index',
                    icon: 'icon-mall-tongzhi',
                    checked: false,
                },
                {
                    value: 'pointsMall',
                    name: '积分商城',
                    path: '/home/pointsMall',
                    icon: 'icon-mall-jifenshangcheng',
                    checked: false,
                },
                {
                    value: 'signIn',
                    name: '每日签到',
                    path: '/home/signIn',
                    icon: 'icon-mall-qiandao',
                    checked: false,
                },
                {
                    value: 'festiveEvents',
                    name: '活动列表',
                    path: '/home/festiveEvents',
                    icon: 'icon-mall-huodong',
                    checked: false,
                },
                // {
                //     value:'myMedal',
                //     name:'我的勋章',
                //     path:'/home/myMedal',
                //     icon:'icon-mall-xunzhang',
                //     checked:false,
                // },
                {
                    value: 'commend',
                    name: '员工表彰',
                    path: '/home/commend',
                    icon: 'icon-mall-rongyubiaozhang',
                    checked: false,
                },
                {
                    value: 'welfareList',
                    name: '福利领取',
                    path: '/home/welfareList',
                    icon: 'icon-mall-hongbao',
                    checked: false,
                },

                {
                    value: 'earnPoints',
                    name: '积分获取',
                    path: '/home/earnPoints',
                    icon: 'icon-mall-zuorenwuzhuanjifen',
                    checked: false,
                },
                {
                    value: 'postInteract',
                    name: '投票调研',
                    path: '/home/postInteract',
                    icon: 'icon-mall-neibuzhengyiguanli',
                    checked: false,
                },
                // {
                //     value:'myCenter',
                //     name:'个人中心',
                //     path:'/home/myCenter',
                //     icon:'icon-mall-gerenzhongxin',
                //     checked:false,
                // },
            ],
            employeeDynamics: false,
            pointsMall: false,
            welfareList: false,
            festiveEvents: false,
            isActive: false,
        };
    },
    methods: {
        handleClickExchange(id) {  
            this.$router.push({
                path: '/home/pointsMall/redeem',
                query: {
                    id: id,
                    name: 'goodsNotice',
                    type:36,
                }
            });
        },
        tabChange(val){
           this.getGoodsInfo(val);
        },
        getGoodsInfo(val){
            if(val=='hot'){
                hotSkuList().then(response=>{
                    this.goodsList = response.data.data.list;
                });
            }else{
                newSkuList().then(response=>{
                    this.goodsList = response.data.data.list;
                });
            } 
        },
        removeTab() {
            removeTab();
        },
        getRoute() {
            var path = this.$route.path;
            this.sideBarList.forEach(item => {
                if (path.indexOf(item.value) != -1) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
            });
        },
        // 保存滚动值，这是兼容的写法
        handleScroll() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop >= 1200) {
                this.isActive = true
            } else {
                this.isActive = false
            }
        },
    },
    watch: {
        $route: 'getRoute'
    },
    created() {
        this.getRoute();
        this.getGoodsInfo('hot');
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },

    destroyed() {
        // 离开该页面需要移除这个监听的事件，不然会报错
        window.removeEventListener('scroll', this.handleScroll)
    }
}
</script>
<style scoped>
.index-nav {
    width: 180px;
    /* position: -webkit-sticky;
    position: sticky;
    top: 80px; */
    margin-right: 20px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    /* max-height: calc(100vh - 101px); */
    /* overflow-x: hidden; */
}

.index-nav-top {
    /* top: 20px; */
    /* max-height: calc(100vh - 40px); */
}

li a {
    /* font-weight: bold; */
    color: #515767;
}

li a.router-link-active {
    color: #1e80ff;
}

.side-navigator-wrap {
    border-radius: 4px;
    background-color: #fff;
    min-width: 180px;
    box-sizing: border-box;
    padding: 8px;
    font-size: 16px;
    color: #515767;
    margin-bottom: 1.66rem;
}

.nav-item-wrap {
    display: flex;
    flex-direction: column;
}

.nav-item-content {
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.active {
    background-color: #eaf2ff;
    color: #1e80ff;
    font-weight: 500
}

.nav-item {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 10px 17px;
}

.nav-item i {
    vertical-align: middle;
    margin-right: 12px;
}

.nav-item-text {
    vertical-align: middle;
    position: relative;
}
/* .hot-list-container{
    margin-top: 20px
} */
.hot-list-item{
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 1.66rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 8px;
    overflow: hidden;
}
.hot-list-item .hot-item-header{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    align-items: center;
    padding: 0 8px;
}
.hot-list-item .hot-item-header .hot-title{
    font-weight: 500;
    font-size: 1rem;
    line-height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #252933;
}
.hot-list-item .hot-item-header .hot-icon{
    width: 1.33rem;
    height: 1.33rem;
    line-height: 0;
    margin-right: .66rem;
}
img {
    border-style: none;
}
.hot-list-item .divider {
    width: 100%;
    height: 1px;
    box-sizing: border-box;
}
.hot-list-item .divider .content {
    margin: 0 8px;
    height: 100%;
    background: rgba(228, 230, 235, 0.5);
}
.hot-list-item .hot-item-body {
    min-height: 7rem;
}
ul {
    padding: 0;
    margin: 0;
}
.hot-list-item .hot-item-body .hot-item-authors {
    height: 40px;
}
.hot-list-item .hot-item-body .hot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    /* border-radius: 4px; */
    border-bottom: 1.5px solid #dcdfe6;
    font-size: 1.16rem;
    line-height: 1.83rem;
}
.hot-item-body .hot-item:last-child { border-bottom:none; }
li {
    list-style: none;
}
.hot-list-item .hot-item-body .hot-item .body-index{
    width: 18px;
    height: 18px;
    font-size: 16px;
    border-radius: 50%;
    background-color: #f64242;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.hot-list-item .hot-item-body .hot-item .first-index{
    background: linear-gradient(180deg, #f64242 20%, rgba(246, 66, 66, .4) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hot-list-item .hot-item-body .hot-item .second-index{
    background: linear-gradient(180deg, #ff7426 20%, rgba(255, 116, 38, .4) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hot-list-item .hot-item-body .hot-item .third-index{
    background: linear-gradient(180deg, #ffac0c 20%, rgba(255, 172, 12, .4) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.justifyCenter{
    justify-content: center;
}
.justifyBetween{
    justify-content: space-between;
}
.hot-list-item .hot-item-body .hot-item .hot-item-text{
    width: 160px;
    display: flex;
    align-items: center;
}
.hot-list-item .hot-item-body .hot-item .title-articles{
    font-size: 16px;
    color: red;
    font-weight: bold;
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
   
    background-color: red;
    border-color: red;
    box-shadow: -1px 0 0 0 red;
}
::v-deep .el-radio-button__inner:hover {
    color: #606266;
}

.sticky-block {
    width: 180px;
    background-color: transparent;
    box-sizing: border-box;
    position: fixed;
    box-shadow: none;
    opacity: 0;
    transition: all .2s;
    z-index: -1;
    top: 67px;
    pointer-events: none;
}

.index-nav.index-nav-top .sticky-block {
    opacity: 1;
    top: 20px;
    z-index: 5;
    pointer-events: all;
}
</style>