完善页面
This commit is contained in:
wangxiaowei
@ -5,345 +5,419 @@
|
||||
}
|
||||
}</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="home-bg fixed left-0 top-0 w-[100%]"
|
||||
:style="{ backgroundImage: `url('${OSS}images/store/my/image2.png')` }">
|
||||
<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"/>
|
||||
<view class="ml-16rpx flex items-center" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx">
|
||||
<view class="mr-16rpx" @click="My.handleToSettings">
|
||||
<wd-icon name="setting" color="#fff" size="16px" />
|
||||
<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>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
|
||||
<view class="pb-0rpx" :style="{ paddingTop: `${navbarHeight}px` }">
|
||||
<!-- 账号昵称显示 -->
|
||||
<view class="user-info-bg relative z-10 ml-30rpx mr-30rpx flex items-center"
|
||||
:style="{ backgroundImage: `url('${OSS}images/store/my/image2.png')` }">
|
||||
<view class="relative z-10">
|
||||
<wd-img width="120rpx" height="120rpx" :src="(isLogin && user.avatar) ? user.avatar : `${OSS}images/store/my/image1.png`"
|
||||
mode="aspectFill" round />
|
||||
</view>
|
||||
<view class="relative z-10 ml-22rpx flex flex-1 items-center justify-between">
|
||||
<view class="flex-1" @click="My.handleToProfile">
|
||||
<view class="ml-8rpx flex items-center text-36rpx leading-50rpx text-[#fff]">
|
||||
{{ isLogin ? user.nickname || '暂无昵称' : '立即登录' }}
|
||||
<wd-icon v-if="isLogin" name="arrow-right" size="24rpx" color="#fff" class="ml-8rpx" />
|
||||
</view>
|
||||
<view v-if="isLogin" class="ml-8rpx mt-8rpx text-24rpx leading-34rpx text-[#fff]">
|
||||
账号: {{ My.handleFormatAccount(user.account || user.mobile) }}
|
||||
</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="relative ml-20rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
|
||||
<view class="h-148rpx w-300rpx">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`"
|
||||
mode="aspectFill" />
|
||||
<!-- 昵称和账号 -->
|
||||
<view class="ml-22rpx flex-1" @click="My.handleToProfile">
|
||||
<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="absolute bottom-12rpx left-24rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="text-30rpx text-[#303133] font-bold leading-36rpx">
|
||||
￥{{ isLogin ? user.user_money : '0.00' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-0rpx mt-4rpx text-20rpx text-[#909399] leading-28rpx" @click="My.handleToWallet">
|
||||
钱包余额
|
||||
</view>
|
||||
<view class="mt-8rpx text-24rpx text-[#303133] leading-34rpx">
|
||||
账号: 152****3412
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 门店信息区域 -->
|
||||
<view class="store-info-card mt-28rpx bg-white py-30rpx pl-30rpx">
|
||||
<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||
{{ storeInfo.name }}
|
||||
</view>
|
||||
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">门店ID:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.id }}</text>
|
||||
</view>
|
||||
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">门店地址:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.address || '-' }}</text>
|
||||
</view>
|
||||
<view class="relative mb-16rpx flex items-center">
|
||||
<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">营业时间:</text>
|
||||
<text class="flex-1 text-[#000]">{{ `${storeInfo.start_time }-${storeInfo.end_time }` || '-' }}</text>
|
||||
<!-- 钱包卡片区域 -->
|
||||
<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="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx"
|
||||
:style="{ backgroundImage: `url('${OSS}images/store/my/image3.png')` }"
|
||||
@click="router.navigateTo('/bundle/store/edit-store')">
|
||||
<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/store/my/image4.png`" class="mr-8rpx" />
|
||||
<text class="text-24rpx text-[#fff]">修改</text>
|
||||
<!-- 提现按钮 -->
|
||||
<view class="withdraw-btn mt-8rpx rounded-8rpx bg-[#FF0000] px-24rpx py-6rpx"
|
||||
@click="My.handleToWithdraw">
|
||||
<text class="text-24rpx text-[#fff] font-medium">去提现</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center text-24rpx text-[#606266] leading-40rpx" @click="My.handleCall(storeInfo.contact_phone)">
|
||||
<text class="w-140rpx">联系电话:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '-' }}</text>
|
||||
<!-- 金额信息 -->
|
||||
<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 class="bg-white px-30rpx">
|
||||
<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||
<!-- 门店视频/图片 -->
|
||||
门店图片
|
||||
<!-- 上班安排区域 -->
|
||||
<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>
|
||||
|
||||
<view class="grid grid-cols-3 gap-16rpx">
|
||||
<view v-for="(item, index) in storeMediaList" :key="index"
|
||||
class="relative aspect-square w-full overflow-hidden rounded-8rpx"
|
||||
@click="My.handlePreviewMedia(index)">
|
||||
<wd-img width="100%" height="100%" :src="item" mode="aspectFill" />
|
||||
<!-- 视频播放图标 -->
|
||||
<!-- <view v-if="item.type === 'video'" class="absolute inset-0 flex items-center justify-center">
|
||||
<wd-img width="60rpx" height="60rpx" :src="`${OSS}images/store/my/image5.png')`" />
|
||||
</view> -->
|
||||
<!-- 超出6张显示遮罩 -->
|
||||
<view v-if="mediaCount > 6 && index === 5"
|
||||
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<text class="text-32rpx text-[#fff] font-bold">+{{ Number(mediaCount - 6) }}</text>
|
||||
<!-- 更多服务区域 -->
|
||||
<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="My.handleServiceClick('location')">
|
||||
<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="My.handleServiceClick('income')">
|
||||
<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 type { IUserResult } from '@/api/types/user'
|
||||
import { getUserInfo, getUserBalance } from '@/api/user'
|
||||
import { useUserStore, useStoreStore } from '@/store'
|
||||
import { router } from '@/utils/tools'
|
||||
import { getStoreDetails } from '@/api/store'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
const useStore = useStoreStore()
|
||||
|
||||
// 登录信息相关
|
||||
const user = ref<IUserResult>({
|
||||
id: 0,
|
||||
sn: 0,
|
||||
sex: '未知',
|
||||
account: '',
|
||||
nickname: '',
|
||||
real_name: '',
|
||||
avatar: '',
|
||||
collect_count: 0,
|
||||
coupon_count: 0,
|
||||
create_time: '',
|
||||
has_auth: false,
|
||||
has_password: false,
|
||||
member: 0,
|
||||
mobile: '',
|
||||
user_money: '0.00',
|
||||
version: '',
|
||||
})
|
||||
const isLogin = ref<boolean>(false)
|
||||
|
||||
// 门店信息
|
||||
const storeInfo = ref({
|
||||
id: 0,
|
||||
name: '',
|
||||
address: '',
|
||||
business_hours: '',
|
||||
contact_phone: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
image_arr: []
|
||||
})
|
||||
|
||||
// 门店媒体列表（视频/图片）
|
||||
const storeMediaList = ref([])
|
||||
const mediaCount = ref<number>(0)
|
||||
|
||||
|
||||
onShow(async () => {
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
if (isLogin.value) {
|
||||
// 获取用户详情信息接口
|
||||
const res = await getUserInfo()
|
||||
user.value = res
|
||||
|
||||
// 获取用户余额
|
||||
const res2 = await getUserBalance(useStore.defaultStore.id)
|
||||
console.log("🚀 ~ res2:", res2)
|
||||
user.value.user_money = res2.store_msg.balance || '0.00'
|
||||
userStore.setUserMoney(Number(user.value.user_money))
|
||||
}
|
||||
else {
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
}
|
||||
|
||||
// 获取店铺详情
|
||||
My.handleGetStoreDetails()
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
uni.$on('clearUser', () => {
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('clearUser')
|
||||
})
|
||||
// 模拟是否有个人信息（静态页面，后续可以替换为实际的API判断）
|
||||
const hasProfileInfo = ref(true) // 改为 false 可以测试跳转到填写页面
|
||||
|
||||
const My = {
|
||||
/**
|
||||
* 获取店铺详情
|
||||
*/
|
||||
handleGetStoreDetails: async () => {
|
||||
const storeDetails = await getStoreDetails(useStore.defaultStore.id)
|
||||
// 只取前6条图片
|
||||
if (storeDetails.details.image_arr && Array.isArray(storeDetails.details.image_arr)) {
|
||||
storeMediaList.value = storeDetails.details.image_arr.slice(0, 6)
|
||||
}
|
||||
storeInfo.value = storeDetails.details
|
||||
mediaCount.value = storeInfo.value.image_arr.length
|
||||
},
|
||||
|
||||
// 跳转到个人信息
|
||||
handleToProfile: () => {
|
||||
if (!isLogin.value) {
|
||||
router.navigateTo('/pages/login/login')
|
||||
} else {
|
||||
router.navigateTo('/bundle/profile/profile')
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 拨打电话
|
||||
*/
|
||||
handleCall: (phone: string) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
})
|
||||
// 跳转到消息页面
|
||||
handleToMessage: () => {
|
||||
// TODO: 跳转到消息页面
|
||||
console.log('跳转到消息页面')
|
||||
},
|
||||
|
||||
// 跳转到设置页面
|
||||
handleToSettings: () => {
|
||||
// TODO: 跳转到设置页面
|
||||
router.navigateTo('/bundle/store/setting')
|
||||
console.log('跳转到设置页面')
|
||||
},
|
||||
|
||||
// 预览媒体（视频/图片）
|
||||
handlePreviewMedia: (index: number) => {
|
||||
const urls = storeInfo.value.image_arr.map(item => item)
|
||||
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls,
|
||||
})
|
||||
// if (item.type === 'video') {
|
||||
// // 播放视频
|
||||
// uni.previewMedia({
|
||||
// sources: [
|
||||
// {
|
||||
// url: item.url,
|
||||
// type: 'video'
|
||||
// }
|
||||
// ],
|
||||
// current: 0
|
||||
// })
|
||||
// }
|
||||
// else {
|
||||
// // 预览图片
|
||||
// const urls = storeMediaList.value
|
||||
// .filter(i => i.type === 'image' && !i.overlay)
|
||||
// .map(i => i.url)
|
||||
// uni.previewImage({
|
||||
// current: index,
|
||||
// urls,
|
||||
// })
|
||||
// }
|
||||
// 跳转到个人信息
|
||||
handleToProfile: () => {
|
||||
// TODO: 跳转到个人信息页面
|
||||
console.log('跳转到个人信息页面')
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到钱包页面
|
||||
*/
|
||||
handleToWallet: () => {
|
||||
if (!isLogin.value) {
|
||||
router.navigateTo('/bundle/wallet/wallet')
|
||||
} else {
|
||||
router.navigateTo('/pages/login/login')
|
||||
// 跳转到提现页面
|
||||
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)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化显示账号
|
||||
* @param account 账号
|
||||
*/
|
||||
handleFormatAccount: (account: string) => {
|
||||
if (!account)
|
||||
return ''
|
||||
if (account.length <= 7)
|
||||
return account
|
||||
return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
page {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
min-height: 450rpx;
|
||||
}
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.user-info-bg {
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
.top-bg {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
min-height: 450rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.store-info-card {
|
||||
.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;
|
||||
z-index: 10;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
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);
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
min-width: 160rpx;
|
||||
height: 90rpx;
|
||||
justify-content: space-around;
|
||||
.wallet-amounts {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.right-slot {
|
||||
padding-right: v-bind(rightPadding);
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user