441 lines
15 KiB
Vue
441 lines
15 KiB
Vue
<route lang="jsonc" type="page">{
|
||
"layout": "tabbar",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
|
||
|
||
<template>
|
||
<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>
|
||
<!-- 设置图标 -->
|
||
<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` }">
|
||
<!-- 个人资料区域 -->
|
||
<view class="profile-section px-30rpx pb-30rpx pt-40rpx">
|
||
<view class="flex items-center">
|
||
<!-- 头像 -->
|
||
<view class="avatar-wrapper">
|
||
<wd-img width="120rpx" height="120rpx" :src="`${OSS}images/chayishi/avatar.png`"
|
||
mode="aspectFill" round />
|
||
</view>
|
||
<!-- 昵称和账号 -->
|
||
<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>
|
||
<wd-icon name="arrow-right" size="24rpx" color="#303133" class="ml-8rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="mt-8rpx text-24rpx text-[#303133] leading-34rpx">
|
||
账号: 152****3412
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 钱包卡片区域 -->
|
||
<view class="wallet-card relative mx-30rpx mt-30rpx overflow-hidden rounded-24rpx px-30rpx py-10rpx"
|
||
:style="{ backgroundImage: `url('${OSS}images/chayishi/withdraw.png')` }">
|
||
<!-- 钱包标题和图标 -->
|
||
<view class="mb-32rpx flex items-center justify-between">
|
||
<view class="flex items-center">
|
||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/wallet.png`"
|
||
class="mr-12rpx" />
|
||
<text class="text-30rpx text-[#303133] font-bold">我的钱包</text>
|
||
</view>
|
||
<!-- 提现按钮 -->
|
||
<view class="withdraw-btn mt-8rpx rounded-8rpx bg-[#FF0000] px-24rpx py-6rpx"
|
||
@click="router.navigateTo('/bundle/wallet/wallet')">
|
||
<text class="text-24rpx text-[#fff] font-medium">去提现</text>
|
||
</view>
|
||
</view>
|
||
<!-- 金额信息 -->
|
||
<view class="wallet-amounts flex items-center justify-between">
|
||
<!-- 可提现金额 -->
|
||
<view class="flex-1 text-center">
|
||
<view class="">
|
||
<price-format color="#000000" :first-size="32" :second-size="32" :subscript-size="20" :price="23.02"></price-format>
|
||
</view>
|
||
<view class="mt-8rpx text-24rpx text-[#909399] leading-34rpx">
|
||
可提现金额
|
||
</view>
|
||
</view>
|
||
<!-- 不可提现金额 -->
|
||
<view class="flex-1 text-center">
|
||
<view>
|
||
<price-format color="#000000" :first-size="32" :second-size="32" :subscript-size="20" :price="23.02"></price-format>
|
||
</view>
|
||
<view class="mt-8rpx text-24rpx text-[#909399] leading-34rpx">
|
||
不可提现金额
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 装饰性金币图标（预留位置，右侧散落） -->
|
||
<view class="coin-decoration absolute right-20rpx top-30rpx">
|
||
<wd-img width="120rpx" height="120rpx" :src="`${OSS}images/my/coin_decor.png`" class="opacity-40" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上班安排区域 -->
|
||
<view :style="{
|
||
backgroundImage: `url('${OSS}images/chayishi/richeng.png')`,
|
||
backgroundSize: 'contain',
|
||
backgroundRepeat: 'no-repeat',
|
||
backgroundPosition: 'center top',
|
||
}" class="work-schedule-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
|
||
<!-- 标题和免费出行按钮 -->
|
||
<view class="mb-24rpx flex items-center justify-between">
|
||
<view class="flex items-center">
|
||
<wd-img width="32rpx" height="32rpx" :src="`${OSS}images/chayishi/work_task.png`"
|
||
class="mr-12rpx" />
|
||
<text class="text-32rpx text-[#303133] font-bold">上班安排</text>
|
||
</view>
|
||
<view @click="My.handleFreeTravel">
|
||
<wd-img width="180rpx" height="64rpx" :src="`${OSS}images/chayishi/free_go.png`"
|
||
class="mr-12rpx" />
|
||
</view>
|
||
</view>
|
||
<!-- 服务方式 -->
|
||
<view class="schedule-item mb-20rpx flex items-center">
|
||
<text class="label-text w-140rpx text-24rpx text-[#606266] leading-40rpx">服务方式:</text>
|
||
<view class="flex flex-1 items-center">
|
||
<view class="mr-16rpx flex items-center">
|
||
<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/chayishi/right.png`" />
|
||
<text class="text-24rpx leading-34rpx">上门服务</text>
|
||
</view>
|
||
<view class="flex items-center">
|
||
<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/chayishi/right.png`" />
|
||
<text class="text-24rpx leading-34rpx">到店服务</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 工作日 -->
|
||
<view class="schedule-item mb-20rpx flex items-center">
|
||
<text class="label-text w-140rpx text-24rpx text-[#606266] leading-40rpx">工作日:</text>
|
||
<text class="flex-1 text-24rpx text-[#303133] leading-40rpx">周一,周二,周三,周四,周五,周六</text>
|
||
</view>
|
||
<!-- 工作时间 -->
|
||
<view class="schedule-item mb-20rpx flex items-center">
|
||
<text class="label-text w-140rpx text-24rpx text-[#606266] leading-40rpx">工作时间:</text>
|
||
<text class="flex-1 text-24rpx text-[#303133] leading-40rpx">08:00~20:00</text>
|
||
</view>
|
||
<!-- 住址 -->
|
||
<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>
|
||
|
||
<!-- 更多服务区域 -->
|
||
<view class="more-services-section mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
|
||
<text class="mb-24rpx block text-32rpx text-[#303133] font-bold leading-44rpx">更多服务</text>
|
||
<view class="services-grid grid grid-cols-4 gap-10rpx">
|
||
<!-- 个人介绍 -->
|
||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('profile')">
|
||
<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/person_introduce.png`" />
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">个人介绍</text>
|
||
</view>
|
||
<!-- 服务方式 -->
|
||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('service')">
|
||
<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/cooperate.png`" />
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">服务方式</text>
|
||
</view>
|
||
<!-- 工作时间 -->
|
||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('worktime')">
|
||
<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/work_time.png`" />
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">工作时间</text>
|
||
</view>
|
||
<!-- 位置更新 -->
|
||
<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`" />
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">位置更新</text>
|
||
</view>
|
||
<!-- 收入统计 -->
|
||
<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`" />
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">收入统计</text>
|
||
</view>
|
||
<!-- 上传资料 -->
|
||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('upload')">
|
||
<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/data.png`" />
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">上传资料</text>
|
||
</view>
|
||
<!-- 行程记录 -->
|
||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('record')">
|
||
<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/path_record.png`" />
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">行程记录</text>
|
||
</view>
|
||
<!-- 分销赚钱 -->
|
||
<view class="service-item flex flex-col items-center"
|
||
@click="My.handleServiceClick('distribution')">
|
||
<view
|
||
class="service-icon-wrapper relative h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
|
||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/earn_money.png`" />
|
||
<!-- 角标 -->
|
||
<view
|
||
class="distribution-badge absolute right-8rpx top-8rpx flex items-center justify-center rounded-4rpx bg-[#FF0000] px-4rpx py-1rpx">
|
||
<text class="text-16rpx text-[#fff] font-medium leading-18rpx">赚钱</text>
|
||
</view>
|
||
</view>
|
||
<text class="text-24rpx text-[#303133] leading-34rpx">分销赚钱</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部留白 -->
|
||
<view class="pb-40rpx" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { router } from '@/utils/tools'
|
||
|
||
const OSS = inject('OSS')
|
||
const navbarHeight = inject('navbarHeight')
|
||
const rightPadding = inject('capsuleOffset')
|
||
|
||
// 上下班切换
|
||
const isWork = ref<boolean>(true)
|
||
|
||
// 模拟是否有个人信息（静态页面，后续可以替换为实际的API判断）
|
||
const hasProfileInfo = ref(true) // 改为 false 可以测试跳转到填写页面
|
||
|
||
const My = {
|
||
// 跳转到消息页面
|
||
handleToMessage: () => {
|
||
// TODO: 跳转到消息页面
|
||
console.log('跳转到消息页面')
|
||
},
|
||
|
||
// 跳转到设置页面
|
||
handleToSettings: () => {
|
||
// TODO: 跳转到设置页面
|
||
console.log('跳转到设置页面')
|
||
},
|
||
|
||
// 跳转到个人信息
|
||
handleToProfile: () => {
|
||
// TODO: 跳转到个人信息页面
|
||
console.log('跳转到个人信息页面')
|
||
},
|
||
|
||
// 跳转到提现页面
|
||
handleToWithdraw: () => {
|
||
// TODO: 跳转到提现页面
|
||
console.log('跳转到提现页面')
|
||
},
|
||
|
||
// 免费出行
|
||
handleFreeTravel: () => {
|
||
// TODO: 免费出行功能
|
||
console.log('免费出行')
|
||
},
|
||
|
||
// 服务点击事件
|
||
handleServiceClick: (type: string) => {
|
||
if (type === 'profile') {
|
||
// 如果有个人信息，跳转到展示页面；否则跳转到填写页面
|
||
if (hasProfileInfo.value) {
|
||
router.navigateTo('/pages/my/profile-display')
|
||
}
|
||
else {
|
||
router.navigateTo('/pages/my/profile-edit')
|
||
}
|
||
}
|
||
else if (type === 'service') {
|
||
// 跳转到服务方式页面
|
||
router.navigateTo('/pages/my/service-method')
|
||
}
|
||
else if (type === 'worktime') {
|
||
// 跳转到工作时间页面
|
||
router.navigateTo('/pages/my/work-time')
|
||
}
|
||
else if (type === 'upload') {
|
||
// 跳转到上传资料页面
|
||
router.navigateTo('/pages/my/upload-data')
|
||
}
|
||
else if (type === 'record') {
|
||
// 跳转到行程记录页面
|
||
router.navigateTo('/pages/my/travel-record')
|
||
}
|
||
else {
|
||
// TODO: 根据类型跳转到对应页面
|
||
console.log('点击服务:', type)
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.page-container {
|
||
min-height: 100vh;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.top-bg {
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: top center;
|
||
min-height: 450rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.content-wrapper {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.profile-section {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.right-slot {
|
||
padding-right: v-bind(rightPadding);
|
||
|
||
.nav-icon-item {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 60rpx;
|
||
|
||
.icon-label {
|
||
position: absolute;
|
||
bottom: -32rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wallet-card {
|
||
background-color: #ffb347;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
min-height: 240rpx;
|
||
position: relative;
|
||
|
||
.withdraw-btn {
|
||
box-shadow: 0 4rpx 8rpx rgba(255, 0, 0, 0.2);
|
||
}
|
||
|
||
.wallet-amounts {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.coin-decoration {
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.work-schedule-card {
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
|
||
.free-travel-btn {
|
||
box-shadow: 0 4rpx 8rpx rgba(7, 193, 96, 0.2);
|
||
}
|
||
|
||
.schedule-item {
|
||
.service-tag {
|
||
border: 1rpx solid #07c160;
|
||
}
|
||
}
|
||
}
|
||
|
||
.more-services-section {
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
|
||
.services-grid {
|
||
.service-item {
|
||
cursor: pointer;
|
||
|
||
.service-icon-wrapper {
|
||
transition: all 0.3s;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
background-color: #e5e7eb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|