YXGJ/pages/index/cloud/workbench.vue

<template>
    <view class="work-panel">
        <view class="work-panel_header">
            <image class="image" src="/static/c+unselected.svg" mode="widthFix" />
            <My_search placeholder="搜索全站关键字" :value="content.where.condition" @onSearch="onSearch">
                <view class="cancel" v-if="content.where.condition" hover-class="navigator-hover">
                    取消
                </view>
                <view v-else style="width: 5px;" />
            </My_search>
        </view>
        <!-- 用户信息 -->
        <UserInfo :userInfoValue="userInfoValue"></UserInfo>

        <view class="work-panel_signin">
            <text class="title">你已累计打卡{{userInfoValue.signdays}}天</text>
            <navigator class="but" url="/packageA/dailyYttendance/index" hover-class="navigator-hover">
                每日一签
            </navigator>
        </view>
        <view class="work-panel_applist"> 
            <template v-for="(item,index) in list" >
                <navigator class="app" url="#" :key="index" v-if="item.path">
                    <view class="bg" :style="item.color">
                        <image class="image" :src="`/static/workbench/${item.label}.svg`" mode="widthFix"></image>
                    </view>
                    <text class="name">{{item.label}}</text>
                </navigator>
            </template>
            
        </view>
        <view class="work-panel_options">
            <navigator class="option" v-for="(item,index) in list2" :key="index" url="#" hover-class="navigator-hover" open-type="navigate">
                <view class="box">
                    <text class="left">{{ item.label }}</text>
                    <view class="right">
                        <!-- <view class="tag">10</view> -->
                        <u-icon name="arrow-right" color="#999999"></u-icon>
                    </view>
                </view>
                
            </navigator>
        </view>
    </view>
</template>

<script>
import UserInfo from './userInfo.vue'
export default {
	components: { UserInfo },
    data() {
        return {
            updatePage: true,
            list: [{
                label: "报名信息",
                itemId: "cloud",
                name:'1'
            }, {
                label: "企业公告",
                itemId: "index",
                page: "活动",
                name:'1'
            }, {
                label: "设计实景",
                itemId: "index",
                page: "案例",
                params: {
                    active: '图库'
                },
                name:'1'
            }, {
                label: "商城订单",
                itemId: "index",
                page: "案例",
                params: {
                    active: '实景案例'
                },
                name:'1'
            }, {
                label: "订单提报",
                itemId: "cloud",
                name:'1'
            }, {
                label: "团队管理",
                itemId: "cloud",
            }, {
                label: "商品调整",
                name:'1'
            }, {
                label: "直播管理",
                name:'1'
            }, {
                label: "品质服务管理",
                name:'1'
            }, {
                label: "装修预算改价",
                name:"budget",
            }],
            list2: [{
                label: "我的访问店铺",
                introduce: "电器 / 吊顶 / 墙面 / 木制品 \n渠道 / 工程",
                itemId: "cloud"
            }, {
                label: "我的预约",
                introduce: "总部直通车  千万大返利",
                itemId: "index",
                page: "活动",
            }, {
                label: "收货地址",
                introduce: "电器 / 厨卫 / 阳台 / 背景墙 /顶墙",
                itemId: "index",
                page: "案例",
                params: {
                    active: '图库'
                }
            }, {
                label: "我的收藏",
                introduce: "总部精选 / 实景图 / 设计图",
                itemId: "index",
                page: "案例",
                params: {
                    active: '实景案例'
                }
            }, {
                label: "通讯录",
                introduce: "单品 / 通知 / 介绍 / 画册 / 物料\n视频 / 说明书等",
                itemId: "cloud",
            }, {
                label: "考试成绩",
                introduce: "产品 / 销售 / 管理 / 设计 / 考试等",
                itemId: "cloud",
            }, {
                label: "问卷调查",
                introduce: "装修报价 / 老房改造 / 精装房焕新\n品质服务",
                path: "/packageA/advertising/unshareable?id=505"
            }, {
                label: "意见反馈",
                introduce: "装修报价 / 老房改造 / 精装房焕新\n品质服务",
                path: "/packageA/advertising/unshareable?id=505"
            }],
            colors: ['background: linear-gradient( 225deg, #81AEF3 0%, #6787E7 100%)',
                "background: linear-gradient( 225deg, #F1AA68 0%, #EA895B 100%)",
                "background: linear-gradient( 225deg, #EEA6A4 0%, #E0605A 100%)",
                "background: linear-gradient( 225deg, #80D3EF 0%, #5DAAE6 100%)",
                "background: linear-gradient( 225deg, #EEA6A4 0%, #E0605A 100%)",
                "background: linear-gradient( 225deg, #80D3EF 0%, #5DAAE6 100%)",
                "background: linear-gradient( 225deg, #81AEF3 0%, #6787E7 100%)",
                "background: linear-gradient( 225deg, #F1AA68 0%, #EA895B 100%)",
                "background: linear-gradient( 225deg, #81AEF3 0%, #6787E7 100%)",
                "background: linear-gradient( 225deg, #F1AA68 0%, #EA895B 100%)"
            ],
            content: {
            "pageNumber": 1,
            "pageSize": 20,
                "where": {
                    "condition": "",
                    "isnew": '',
                    "class": ""
                }
            },
            userInfoValue:{},
            roles:[]
        }
    },
    methods: {
        init(callBack) {
            callBack()
            this.updatePage = false;
        },
        async getUserInfo () {
            let res = await this.$Http.basic({
                "id": "20240510104102",
                "content": {}
            })
            this.userInfoValue = res.data
            console.log(this.userInfoValue,'用户信息')
        },
        //处理权限
        handleAppRole () {
            let that = this
            uni.getStorage({
                key: 'authList',
                success: function (res) {
                    let keys = Object.keys(res.data.工作台)
                    for (let index = 0; index < that.list.length; index++) {
                        for (let index2 = 0; index2 < keys.length; index2++) {
                            if (res.data.工作台[keys[index2]] && res.data.工作台[keys[index2]].name == that.list[index].name) {
                                that.list[index] = Object.assign({},that.list[index],res.data.工作台[keys[index2]])
                                break;
                            }
                        }
                    }
                    that.roles = res.data
                    console.log(res.data,that.list,'权限');
                }
            })
            
        },
    },
    created () {
        this.list = this.dye(this.list, this.colors, 1)
        this.getUserInfo()
        this.handleAppRole()
        console.log(this.list,'应用');

    }
}
</script>

<style lang="scss">
.work-panel {
    padding: 10px 10px 80px 10px;
    .work-panel_header {
        display: flex;
        align-items: center;
        .image{
            width: 40px;
            height: 20px;
            margin-right: 10px;
        }
    }
    
    .work-panel_signin {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 15px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        .title{
            font-weight: 400;
            font-size: 14px;
            color: #333333;
        }
        .but {
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            background: linear-gradient( 90deg, #C30D23 0%, #E3041F 100%);
            border-radius: 50px 50px 50px 50px;
            padding: 6px 15px;
        }
    }
    .work-panel_applist {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        padding: 16px 16px 0 16px;
        .app {
            margin-right: 33px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
            &:nth-child(4),&:nth-child(8) {
                margin-right: 0;
            }
            .bg {
                width: 44px;
                height: 44px;
                border-radius: 12px 12px 12px 12px;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                align-content: center;
                background: linear-gradient( 225deg, #81AEF3 0%, #6787E7 100%);
                .image{
                    align-self: center;
                    width: 24px;
                    height: 24px;
                }
            }
            
            .name{
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                margin-top: 10px;
                text-align: center;
                width: 56px;
            }
        }
    }
    .work-panel_options {
        background: #ffffff;
        border-radius: 8px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        .option {
            padding: 15px 0 0 10px;
            &:last-child {
                .box {
                    border: none;
                }
            }
            .box {
                padding-bottom:15px;
                padding-right:15px;
                border-bottom: 1px solid #DDDDDD;
                display: flex;
                justify-content: space-between;
                align-items: center;
                align-content: center;
                .left {
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                }
                .right{
                    display: flex;
                    align-items: center;
                    align-content: center;
                    .tag {
                        background: #BBBBBB;
                        border-radius: 50px 50px 50px 50px;
                        padding: 3px 12px;
                        margin-right: 10px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #FFFFFF;
                    }
                }
            }
        }
        
    }
}
</style>