完善页面
This commit is contained in:
@ -7,36 +7,38 @@
|
||||
|
||||
|
||||
<template>
|
||||
<view class="page-container pb-100rpx">
|
||||
<!-- 顶部背景区域 -->
|
||||
<view class="top-bg fixed left-0 top-0 w-[100%]"
|
||||
:style="{ backgroundImage: `url('${OSS}images/chayishi/profile_bg.png')` }">
|
||||
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex items-center">
|
||||
<!-- 消息图标(带红点) -->
|
||||
<view class="nav-icon-item relative mr-24rpx" @click="My.handleToMessage">
|
||||
<wd-img :src="`${OSS}icon/icon_notify.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<view class="message-dot absolute right-6rpx top-10rpx h-16rpx w-16rpx border-2rpx border-[#fff] rounded-full border-solid bg-[#FF0000]" />
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
消息
|
||||
</text>
|
||||
</view>
|
||||
<!-- 设置图标 -->
|
||||
<view class="nav-icon-item relative mr-24rpx" @click="My.handleToSettings">
|
||||
<wd-img :src="`${OSS}icon/icon_setting.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
设置
|
||||
</text>
|
||||
</view>
|
||||
<view class="page-container pb-120rpx">
|
||||
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;" fixed>
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex items-center">
|
||||
<!-- 消息图标(带红点) -->
|
||||
<view class="nav-icon-item relative mr-30rpx" @click="router.navigateTo('/bundle/notice/notice')">
|
||||
<wd-img :src="`${OSS}icon/icon_notify.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<view class="message-dot absolute right-6rpx top-10rpx h-16rpx w-16rpx border-2rpx border-[#fff] rounded-full border-solid bg-[#FF0000]" />
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
消息
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<!-- 设置图标 -->
|
||||
<view class="nav-icon-item relative mr-24rpx" @click="router.navigateTo('/bundle/store/setting')">
|
||||
<wd-img :src="`${OSS}icon/icon_setting.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
设置
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<!-- 顶部背景区域 -->
|
||||
<view class="top-bg fixed left-0 top-0 w-[100%] h-500rpx"
|
||||
:style="{ backgroundImage: `url('${OSS}images/chayishi/profile_bg.png')` }">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: `${navbarHeight}px` }">
|
||||
@ -49,7 +51,7 @@
|
||||
mode="aspectFill" round />
|
||||
</view>
|
||||
<!-- 昵称和账号 -->
|
||||
<view class="ml-22rpx flex-1" @click="My.handleToProfile">
|
||||
<view class="ml-22rpx flex-1" @click="router.navigateTo('/bundle/profile/profile')">
|
||||
<view class="flex items-center">
|
||||
<text class="nickname text-36rpx text-[#303133] font-bold leading-50rpx">Jasmine</text>
|
||||
<view>
|
||||
@ -75,7 +77,7 @@
|
||||
</view>
|
||||
<!-- 提现按钮 -->
|
||||
<view class="withdraw-btn mt-8rpx rounded-8rpx bg-[#FF0000] px-24rpx py-6rpx"
|
||||
@click="My.handleToWithdraw">
|
||||
@click="router.navigateTo('/bundle/wallet/wallet')">
|
||||
<text class="text-24rpx text-[#fff] font-medium">去提现</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -153,6 +155,17 @@
|
||||
<view class="schedule-item flex items-start">
|
||||
<text class="label-text w-140rpx pt-4rpx text-24rpx text-[#606266] leading-40rpx">住址:</text>
|
||||
<text class="flex-1 text-24rpx text-[#303133] leading-40rpx">上海浦东新区新金桥路58号新银东大厦15楼F室</text>
|
||||
</view>
|
||||
<!-- 上下班状态 -->
|
||||
<view class="schedule-item flex items-center mt-20rpx">
|
||||
<view class="label-text w-140rpx pt-4rpx text-24rpx text-[#606266] leading-40rpx">上下班:</view>
|
||||
<view class="flex items-center">
|
||||
<view class="mt-20rpx">
|
||||
<wd-switch v-model="isWork" size="32rpx" active-color="#4C9F44"/>
|
||||
</view>
|
||||
<view class="text-28rpx text-[#606266] mt-6rpx font-bold ml-10rpx">{{ isWork ? '上班中' : '已下班' }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -185,7 +198,7 @@
|
||||
<text class="text-24rpx text-[#303133] leading-34rpx">工作时间</text>
|
||||
</view>
|
||||
<!-- 位置更新 -->
|
||||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('location')">
|
||||
<view class="service-item flex flex-col items-center" @click="router.navigateTo('/bundle/address/list')">
|
||||
<view
|
||||
class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
|
||||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/location_update.png`" />
|
||||
@ -193,7 +206,7 @@
|
||||
<text class="text-24rpx text-[#303133] leading-34rpx">位置更新</text>
|
||||
</view>
|
||||
<!-- 收入统计 -->
|
||||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('income')">
|
||||
<view class="service-item flex flex-col items-center" @click="router.navigateTo('/bundle/finance/finance')">
|
||||
<view
|
||||
class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
|
||||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/income.png`" />
|
||||
@ -246,6 +259,9 @@ const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 上下班切换
|
||||
const isWork = ref<boolean>(true)
|
||||
|
||||
// 模拟是否有个人信息(静态页面,后续可以替换为实际的API判断)
|
||||
const hasProfileInfo = ref(true) // 改为 false 可以测试跳转到填写页面
|
||||
|
||||
@ -380,6 +396,7 @@ page {
|
||||
.wallet-amounts {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.coin-decoration {
|
||||
|
||||
Reference in New Issue
Block a user