Zlpt_Portal_h5/src/pages/my/index.vue

<template>
    <!-- 我的 -->
    <view class="h5-container">
        <view class="user-info">
            <view style="text-align: right; padding: 15px 15px 0 0">
                <van-icon name="setting" size="22" @click="onJumpToMySetting" />
            </view>

            <view class="header-user">
                <van-image
                    round
                    fit="cover"
                    width="68px"
                    height="68px"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                />

                <view class="right-name">
                    <view class="name-box">
                        <text class="name"> {{ userInfo?.nickName }} </text>
                        <text class="company"> {{ userCompanyName }} </text>
                    </view>

                    <view> {{ userInfo?.phonenumber }} </view>
                </view>
            </view>

            <van-cell-group inset>
                <h2>我的订单</h2>

                <van-grid clickable :column-num="2" :gutter="10">
                    <van-grid-item>
                        <navigator url="/pages/order-details/index?type=1">
                            <van-icon name="cart" />
                            <text>出租订单</text>
                        </navigator>
                    </van-grid-item>
                    <van-grid-item>
                        <navigator url="/pages/order-details/index?type=2">
                            <van-icon name="cart" />
                            <text>租赁订单</text>
                        </navigator>
                    </van-grid-item>
                </van-grid>
            </van-cell-group>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores/index.js'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const userInfo = ref(null)
const userCompanyName = ref(null)
const onLogout = () => {
    uni.navigateTo({ url: '/pages/login/index' })
}

const onJumpToMySetting = () => {
    uni.navigateTo({ url: '/pages/my-setting/index' })
}

onLoad(() => {
    userInfo.value = memberStore.userInfo
    userCompanyName.value = memberStore.userCompanyName
})
</script>

<style lang="scss" scoped>
.user-info {
    flex: 1;
    padding: 10px;
    color: #333;
    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);

    .header-user {
        display: flex;
        align-items: center;
        padding: 20px;

        .right-name {
            padding-left: 15px;
            font-size: 14px;

            .name-box {
                padding: 10px 0;
                display: flex;
                align-items: center;
            }

            .name {
                font-size: 18px;
                font-weight: bold;
            }

            .company {
                padding: 2px 8px;
                margin-left: 10px;
                background-color: #c4fbf5;
                font-size: 13px;
                color: #32b1a2;
                border-radius: 4px;
            }
        }
    }
}

:deep(.van-cell-group--inset) {
    margin: 0;
    padding: 15px 0;

    h2 {
        padding: 0 15px;
        font-size: 16px;
    }
}

.van-grid {
    margin-top: 15px;

    :deep(.van-grid-item__content) {
        padding: 0;
    }

    navigator {
        width: 100%;
        padding: 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e8f2ef;
        color: #4a4949;

        text {
            margin-left: 8px;
        }
    }
}

.van-hairline--top {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}
</style>