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" />
            <view @click="onSearch" style="flex:1">
                <My_search placeholder="搜索全站关键字" disabled></My_search>
            </view>
        </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="item.path" :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">
            <template v-for="(item,index) in list2">
                <navigator class="option" :key="index" :url="item.path" hover-class="navigator-hover" open-type="navigate" v-if="item.path">
                    <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>
            </template>
        </view>
    </view>
</template>

<script>
import UserInfo from './userInfo.vue'
export default {
	components: { UserInfo },
    data() {
        return {
            updatePage: true,
            list: [{
                label: "预约名单",
                itemId: "cloud",
                name:'orderList'
            }, {
                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: "我的访问店铺",
                itemId: "cloud",
                name:'1'
            }, {
                label: "我的预约",
                itemId: "index",
                page: "活动",
                name:'selfOrder',
            }, {
                label: "收货地址",
                itemId: "index",
                page: "案例",
                name:'1',
            }, {
                label: "我的收藏",
                itemId: "index",
                page: "案例",
                name:'1',
            }, {
                label: "通讯录",
                itemId: "cloud",
                name:'1',
            }, {
                label: "考试成绩",
                itemId: "cloud",
                name:'1',
            }, {
                label: "问卷调查",
                name:'1',
            }, {
                label: "意见反馈",
                name:'1',
            }],
            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.list = this.dye(this.list, this.colors, 1)
            this.getUserInfo()
            this.handleAppRole()
            console.log(this.list,'应用');
            this.updatePage = false;
        },
        async getUserInfo () {
            let res = await this.$Http.basic({
                "id": "20240510104102",
                "content": {}
            })
            this.userInfoValue = res.data
            console.log(this.userInfoValue,'用户信息')
        },
        //处理权限
        handleAppRole () {
            this.roles = uni.getStorageSync("authList")
            let keys = Object.keys(this.roles.工作台)
            for (let index = 0; index < this.list.length; index++) {
                for (let index2 = 0; index2 < keys.length; index2++) {
                    if (this.roles.工作台[keys[index2]] && this.roles.工作台[keys[index2]].name == this.list[index].name) {
                        this.list[index] = Object.assign({},this.list[index],this.roles.工作台[keys[index2]])
                        break;
                    }
                }
            }

            let keys2 = Object.keys(this.roles.工作台)
            for (let index = 0; index < this.list2.length; index++) {
                for (let index2 = 0; index2 < keys2.length; index2++) {
                    if (this.roles.工作台[keys2[index2]] && this.roles.工作台[keys2[index2]].name == this.list2[index].name) {
                        this.list2[index] = Object.assign({},this.list2[index],this.roles.工作台[keys2[index2]])
                        break;
                    }
                }
            }
            console.log(this.roles,this.list2,'权限');
            
        },
        onSearch () {
            uni.navigateTo({
                url: '/cloud/globalSearch/index',
                // fail: (fail) => {
                //     viewImage(item.attinfos[0].url)
                // },
            })
        }
    },
}
</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>