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" @selfCardClick="selfCardClick"></UserInfo>

        <view class="work-panel_signin">
            <text class="title">你已累计打卡{{ userInfoValue.signdays }}天</text>
            <navigator class="but" @click="toDailyYttendance" url="/packageA/dailyYttendance/index"
                hover-class="navigator-hover">
                每日一签
            </navigator>
        </view>
        <view class="work-panel_applist">
            <template v-for="(item, index) in list">
                <navigator @click="switchPage(item)" class="app" url="#" :key="item.name">
                    <view class="bg" :style="item.color">
                        <image class="image" :src="`/static/workbench/${item.name}.svg`" mode="widthFix"></image>
                    </view>
                    <text class="name">{{ item.remark }}</text>

                </navigator>
            </template>

        </view>
        <view class="work-panel_options">
            <template v-for="(item, index) in list2">
                <navigator @click="switchPage(item)" class="option" :key="index" url="#" hover-class="navigator-hover"
                    open-type="navigate">
                    <view class="box">
                        <text class="left">{{ item.remark }}</text>
                        <view class="right">
                            <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: [],
            list2: [],
            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: {
        selfCardClick () {
            this.$Http.refreshUserInfoData = function () {
                this.getUserInfo()
                delete this.$Http.refreshUserInfoData
            }.bind(this)
        },
        init(callBack) {
            callBack()
            this.list = Object.values(uni.getStorageSync('authList').工作台)
            this.list2 = Object.values(uni.getStorageSync('authList').工作台导航)
            this.list = this.dye(this.list, this.colors, 1)
            this.getUserInfo()
            this.updatePage = false;
        },
        async getUserInfo() {
            let res = await this.$Http.basic({
                "id": "20240510104102",
                "content": {}
            })
            this.userInfoValue = res.data
            console.log(this.userInfoValue, '用户信息')
        },
        toDailyYttendance() {
            this.$Http.updateUserInfo = this.getUserInfo.bind(this)
        },
        onSearch() {
            uni.navigateTo({
                url: '/cloud/globalSearch/index',
            })
        }
    },
}
</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;
        box-sizing: border-box;

        .app {
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 8px;
            padding: 15px;
            width: 25%;
            box-sizing: border-box;

            .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;
            }
        }
    }

    .work-panel_options {
        background: #ffffff;
        border-radius: 8px;
        font-family: Source Han Sans SC, Source Han Sans SC;

        .option {
            padding: 15px 0 0 10px;

            &:first-child {
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
            }

            &:last-child {
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;

                .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>