完善页面
This commit is contained in:
wangxiaowei
2
env/.env
vendored
2
env/.env
vendored
@ -1,5 +1,5 @@
|
||||
VITE_APP_TITLE = '茶艺师管理端'
|
||||
VITE_APP_PORT = 9002
|
||||
VITE_APP_PORT = 9003
|
||||
|
||||
VITE_UNI_APPID = '__UNI__932EB7D'
|
||||
VITE_WX_APPID = 'wx1a89a1b47d08b83e'
|
||||
|
||||
349
src/pages/my/my.bck.vue
Normal file
349
src/pages/my/my.bck.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="home-bg fixed left-0 top-0 w-[100%]"
|
||||
:style="{ backgroundImage: `url('${OSS}images/store/my/image2.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">
|
||||
<view class="mr-16rpx" @click="My.handleToSettings">
|
||||
<wd-icon name="setting" color="#fff" size="16px" />
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</view>
|
||||
|
||||
<!-- 门店视频/图片区域 -->
|
||||
<view class="bg-white px-30rpx">
|
||||
<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||
<!-- 门店视频/图片 -->
|
||||
门店图片
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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')
|
||||
})
|
||||
|
||||
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,
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到设置页面
|
||||
handleToSettings: () => {
|
||||
// TODO: 跳转到设置页面
|
||||
router.navigateTo('/bundle/store/setting')
|
||||
},
|
||||
|
||||
// 预览媒体（视频/图片）
|
||||
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,
|
||||
// })
|
||||
// }
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到钱包页面
|
||||
*/
|
||||
handleToWallet: () => {
|
||||
if (!isLogin.value) {
|
||||
router.navigateTo('/bundle/wallet/wallet')
|
||||
} else {
|
||||
router.navigateTo('/pages/login/login')
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化显示账号
|
||||
* @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;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
min-height: 450rpx;
|
||||
}
|
||||
|
||||
.user-info-bg {
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.store-info-card {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
min-width: 160rpx;
|
||||
height: 90rpx;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.right-slot {
|
||||
padding-right: v-bind(rightPadding);
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
|
||||
249
src/pages/my/profile-display.vue
Normal file
249
src/pages/my/profile-display.vue
Normal file
@ -0,0 +1,249 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部背景区域 -->
|
||||
<view class="top-bg fixed left-0 top-0 w-[100%]"
|
||||
:style="{ backgroundImage: `url('${OSS}images/chayishi/profile_top_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" @click="Profile.handleBack">
|
||||
<view
|
||||
class="back-btn h-64rpx w-64rpx flex items-center justify-center rounded-full bg-[#E5E5E5] bg-opacity-80">
|
||||
<wd-icon name="arrow-left" size="32rpx" color="#303133" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex items-center">
|
||||
<view class="nav-icon-item relative mr-24rpx">
|
||||
<wd-icon name="more" size="40rpx" color="#fff" />
|
||||
</view>
|
||||
<view class="nav-icon-item relative">
|
||||
<wd-icon name="target" size="40rpx" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: `300rpx` }">
|
||||
<!-- 个人信息卡片 -->
|
||||
<view class="profile-card relative mt-30rpx rounded-24rpx bg-white p-30rpx">
|
||||
<!-- 标题和评分 -->
|
||||
<view class="mb-24rpx flex items-center justify-between">
|
||||
<view class="flex-1">
|
||||
<view class="mb-16rpx text-36rpx text-[#303133] font-bold leading-50rpx">
|
||||
茶艺师的名字
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<view class="mr-12rpx flex items-center">
|
||||
<wd-icon name="star" size="32rpx" color="#FF0000" />
|
||||
<wd-icon name="star" size="32rpx" color="#FF0000" />
|
||||
<wd-icon name="star" size="32rpx" color="#FF0000" />
|
||||
<wd-icon name="star" size="32rpx" color="#FF0000" />
|
||||
<wd-icon name="star-half" size="32rpx" color="#FF0000" />
|
||||
</view>
|
||||
<text class="text-28rpx text-[#303133] leading-40rpx">4.5 推荐</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 修改按钮 - 绝对定位，右侧紧贴屏幕边缘 -->
|
||||
<view
|
||||
class="modify-btn absolute right-0 top-0 flex items-center rounded-l-24rpx bg-[#FF0000] py-12rpx pl-24rpx pr-30rpx"
|
||||
@click="Profile.handleEdit">
|
||||
<wd-icon name="edit" size="24rpx" color="#fff" class="mr-8rpx" />
|
||||
<text class="text-24rpx text-[#fff] font-medium">修改</text>
|
||||
</view>
|
||||
|
||||
<!-- 标签 -->
|
||||
<view class="mb-30rpx flex items-center">
|
||||
<view class="tag-item mr-16rpx flex items-center rounded-8rpx bg-[#FFE5E5] px-16rpx py-8rpx">
|
||||
<text class="text-24rpx text-[#FF6B6B] leading-34rpx">90后茶艺师</text>
|
||||
</view>
|
||||
<view class="tag-item flex items-center rounded-8rpx bg-[#E7F5E7] px-16rpx py-8rpx">
|
||||
<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/chayishi/vip.png`" class="mr-6rpx" />
|
||||
<text class="text-24rpx text-[#07C160] leading-34rpx">高级茶艺师</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 基本信息网格 -->
|
||||
<view class="info-grid grid grid-cols-4 mb-30rpx gap-16rpx">
|
||||
<view class="info-item text-center">
|
||||
<text class="label-text text-24rpx text-[#909399] leading-40rpx">性别</text>
|
||||
<text class="value-text mt-8rpx block text-28rpx text-[#303133] leading-40rpx">女</text>
|
||||
</view>
|
||||
<view class="info-item text-center">
|
||||
<text class="label-text text-24rpx text-[#909399] leading-40rpx">年龄</text>
|
||||
<text class="value-text mt-8rpx block text-28rpx text-[#303133] leading-40rpx">21岁</text>
|
||||
</view>
|
||||
<view class="info-item text-center">
|
||||
<text class="label-text text-24rpx text-[#909399] leading-40rpx">身高</text>
|
||||
<text class="value-text mt-8rpx block text-28rpx text-[#303133] leading-40rpx">165cm</text>
|
||||
</view>
|
||||
<view class="info-item text-center">
|
||||
<text class="label-text text-24rpx text-[#909399] leading-40rpx">体重</text>
|
||||
<text class="value-text mt-8rpx block text-28rpx text-[#303133] leading-40rpx">53kg</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 照片展示 -->
|
||||
<view class="mb-30rpx">
|
||||
<view class="photo-grid grid grid-cols-3 gap-16rpx">
|
||||
<view v-for="(item, index) in photoList" :key="index"
|
||||
class="photo-item aspect-square w-full overflow-hidden rounded-12rpx"
|
||||
@click="Profile.handlePreviewPhoto(index)">
|
||||
<wd-img width="100%" height="100%" :src="item" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 兴趣爱好 -->
|
||||
<view class="mb-30rpx">
|
||||
<view class="mb-16rpx flex items-center">
|
||||
<wd-img width="32rpx" height="32rpx" :src="`${OSS}images/chayishi/hobby.png`"
|
||||
class="mr-12rpx" />
|
||||
<text class="text-28rpx text-[#303133] font-bold leading-40rpx">兴趣爱好</text>
|
||||
</view>
|
||||
<view class="interest-text text-26rpx text-[#606266] leading-40rpx">
|
||||
爱好茶艺,喜欢旅游,把爱好当工作
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 费用说明 -->
|
||||
<view>
|
||||
<view class="mb-20rpx flex items-center justify-between">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="32rpx" height="32rpx" :src="`${OSS}images/chayishi/count.png`"
|
||||
class="mr-12rpx" />
|
||||
<text class="text-28rpx text-[#303133] font-bold leading-40rpx">费用说明</text>
|
||||
</view>
|
||||
<text class="text-24rpx text-[#909399] leading-34rpx">计费标准</text>
|
||||
</view>
|
||||
<view class="cost-item flex items-center justify-between">
|
||||
<text class="text-26rpx text-[#606266] leading-40rpx">服务费</text>
|
||||
<text class="text-26rpx text-[#303133] font-500 leading-48rpx">¥160/小时</text>
|
||||
</view>
|
||||
<view class="cost-item flex items-center justify-between">
|
||||
<text class="text-26rpx text-[#606266] leading-40rpx">车马费</text>
|
||||
<text class="text-26rpx text-[#303133] font-500 leading-48rpx">¥3.00/公里</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 photoList = ref([
|
||||
`${OSS}images/chayishi/photo1.png`,
|
||||
`${OSS}images/chayishi/photo2.png`,
|
||||
`${OSS}images/chayishi/photo3.png`,
|
||||
])
|
||||
|
||||
const Profile = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 跳转到编辑页面
|
||||
handleEdit: () => {
|
||||
router.navigateTo('/pages/my/profile-edit')
|
||||
},
|
||||
|
||||
// 预览照片
|
||||
handlePreviewPhoto: (index: number) => {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: photoList.value,
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.top-bg {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
min-height: 400rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.modify-btn {
|
||||
box-shadow: 0 4rpx 8rpx rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
.info-item {
|
||||
.label-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
.photo-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.interest-text {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cost-item {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
</style>
|
||||
330
src/pages/my/profile-edit.vue
Normal file
330
src/pages/my/profile-edit.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<view class="page-container pb-40rpx">
|
||||
<!-- 导航栏 -->
|
||||
<navbar title="个人介绍填写"></navbar>
|
||||
|
||||
<view class="content-wrapper">
|
||||
<!-- 基本信息 -->
|
||||
<view class="info-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
|
||||
<view class="mb-24rpx flex items-center">
|
||||
<text class="text-32rpx text-[#303133] font-bold leading-44rpx">基本信息</text>
|
||||
<text class="ml-8rpx text-32rpx text-[#FF0000] leading-44rpx">*</text>
|
||||
</view>
|
||||
|
||||
<!-- 姓名 -->
|
||||
<view class="form-item mb-24rpx">
|
||||
<text class="label-text mb-12rpx block text-28rpx text-[#303133] leading-40rpx">姓名</text>
|
||||
<wd-input v-model="formData.name" type="text" placeholder="请填写姓名" no-border
|
||||
custom-class="!bg-[#F5F7FA] !rounded-16rpx"
|
||||
custom-input-class="!h-88rpx !px-24rpx !text-28rpx" />
|
||||
</view>
|
||||
|
||||
<!-- 性别 -->
|
||||
<view class="form-item mb-24rpx">
|
||||
<text class="label-text mb-12rpx block text-28rpx text-[#303133] leading-40rpx">性别</text>
|
||||
<view class="gender-select rounded-16rpx bg-[#F5F7FA]">
|
||||
<wd-picker v-model="formData.gender" :columns="genderOptions" placeholder="请选择性别"
|
||||
custom-class="!bg-transparent" @confirm="Profile.handleGenderConfirm">
|
||||
<wd-input :value="formData.gender || '请选择性别'" readonly no-border
|
||||
custom-class="!bg-transparent" custom-input-class="!h-88rpx !px-24rpx !text-28rpx">
|
||||
<template #suffix>
|
||||
<wd-icon name="arrow-down" size="24rpx" color="#C0C4CC" />
|
||||
</template>
|
||||
</wd-input>
|
||||
</wd-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 出生年月 -->
|
||||
<view class="form-item mb-24rpx">
|
||||
<text class="label-text mb-12rpx block text-28rpx text-[#303133] leading-40rpx">出生年月</text>
|
||||
<view class="date-select rounded-16rpx bg-[#F5F7FA]">
|
||||
<wd-datetime-picker v-model="formData.birthDate" type="year-month" placeholder="请选择出生年月"
|
||||
custom-class="!bg-transparent" @confirm="Profile.handleDateConfirm">
|
||||
<wd-input :value="formData.birthDate || '请选择出生年月'" readonly no-border
|
||||
custom-class="!bg-transparent" custom-input-class="!h-88rpx !px-24rpx !text-28rpx">
|
||||
<template #suffix>
|
||||
<wd-icon name="arrow-down" size="24rpx" color="#C0C4CC" />
|
||||
</template>
|
||||
</wd-input>
|
||||
</wd-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 身高和体重 -->
|
||||
<view class="form-item grid grid-cols-2 gap-24rpx">
|
||||
<view>
|
||||
<text class="label-text mb-12rpx block text-28rpx text-[#303133] leading-40rpx">身高</text>
|
||||
<view class="relative">
|
||||
<wd-input v-model="formData.height" type="number" placeholder="请输入身高" no-border
|
||||
custom-class="!bg-[#F5F7FA] !rounded-16rpx"
|
||||
custom-input-class="!h-88rpx !px-24rpx !text-28rpx" />
|
||||
<text
|
||||
class="unit-text absolute right-24rpx top-1/2 text-28rpx text-[#909399] -translate-y-1/2">cm</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="label-text mb-12rpx block text-28rpx text-[#303133] leading-40rpx">体重</text>
|
||||
<view class="relative">
|
||||
<wd-input v-model="formData.weight" type="number" placeholder="请输入体重" no-border
|
||||
custom-class="!bg-[#F5F7FA] !rounded-16rpx"
|
||||
custom-input-class="!h-88rpx !px-24rpx !text-28rpx" />
|
||||
<text
|
||||
class="unit-text absolute right-24rpx top-1/2 text-28rpx text-[#909399] -translate-y-1/2">kg</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 兴趣爱好 -->
|
||||
<view class="info-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
|
||||
<text class="mb-24rpx block text-32rpx text-[#303133] font-bold leading-44rpx">兴趣爱好</text>
|
||||
<wd-textarea v-model="formData.interests"
|
||||
:auto-height="true"
|
||||
no-border
|
||||
placeholder="茶艺: 你的茶艺兴趣爱好是什么? 比如茶艺研究、品鉴、茶道美学......快来分享一下吧!"
|
||||
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
|
||||
custom-textarea-class='!bg-[#F8F9FA] !min-h-[200rpx] !px-24rpx !py-24rpx' />
|
||||
</view>
|
||||
|
||||
<!-- 视频信息 -->
|
||||
<!-- <view class="info-card 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="upload-area flex flex-col items-center justify-center border-2rpx border-[#C0C4CC] rounded-16rpx border-dashed bg-[#F5F7FA] py-60rpx"
|
||||
@click="Profile.handleUploadVideo">
|
||||
<wd-icon name="video-camera" size="80rpx" color="#C0C4CC" />
|
||||
<text class="mt-24rpx text-28rpx text-[#909399] leading-40rpx">本人视频</text>
|
||||
</view>
|
||||
<view v-if="formData.video" class="mt-24rpx">
|
||||
<view class="relative">
|
||||
<wd-img width="100%" height="400rpx" :src="formData.video" mode="aspectFill"
|
||||
class="rounded-16rpx" />
|
||||
<view
|
||||
class="absolute right-24rpx top-24rpx h-60rpx w-60rpx flex items-center justify-center rounded-full bg-black bg-opacity-50"
|
||||
@click.stop="formData.video = ''">
|
||||
<wd-icon name="close" size="32rpx" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 照片信息 -->
|
||||
<view class="info-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">
|
||||
<text class="text-32rpx text-[#303133] font-bold leading-44rpx">照片信息</text>
|
||||
<text class="ml-8rpx text-32rpx text-[#FF0000] leading-44rpx">*</text>
|
||||
</view>
|
||||
<text class="text-24rpx text-[#909399] leading-34rpx">可上传1-5张照片</text>
|
||||
</view>
|
||||
<view class="photo-upload-grid grid grid-cols-3 gap-16rpx">
|
||||
<!-- 已上传的照片 -->
|
||||
<view v-for="(photo, index) in formData.photos" :key="index"
|
||||
class="photo-item relative aspect-square w-full overflow-hidden rounded-16rpx">
|
||||
<wd-img width="100%" height="100%" :src="photo" mode="aspectFill" />
|
||||
<view
|
||||
class="absolute right-8rpx top-8rpx h-40rpx w-40rpx flex items-center justify-center rounded-full bg-black bg-opacity-60"
|
||||
@click="Profile.handleRemovePhoto(index)">
|
||||
<wd-icon name="close" size="20rpx" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 上传按钮 -->
|
||||
<view v-if="formData.photos.length < 5"
|
||||
class="upload-btn aspect-square w-full flex flex-col items-center justify-center border-2rpx border-[#C0C4CC] rounded-16rpx border-dashed bg-[#F5F7FA]"
|
||||
@click="Profile.handleUploadPhoto">
|
||||
<wd-icon name="camera" size="48rpx" color="#C0C4CC" />
|
||||
<text class="mt-12rpx text-24rpx text-[#909399] leading-34rpx">本人照片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="fixed bottom-0 left-0 right-0 px-30rpx pb-40rpx pt-24rpx">
|
||||
<view class="save-btn h-88rpx rounded-16rpx bg-[#4C9F44] text-center leading-88rpx"
|
||||
@click="Profile.handleSave">
|
||||
<text class="text-32rpx text-[#fff] font-bold">保存</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="pb-160rpx" />
|
||||
</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 formData = ref({
|
||||
name: '',
|
||||
gender: '',
|
||||
birthDate: '',
|
||||
height: '',
|
||||
weight: '',
|
||||
interests: '',
|
||||
video: '',
|
||||
photos: [] as string[],
|
||||
})
|
||||
|
||||
// 性别选择器
|
||||
const genderOptions = ref(['男', '女'])
|
||||
|
||||
const Profile = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 选择性别
|
||||
handleGenderConfirm: (value: string) => {
|
||||
formData.value.gender = value
|
||||
},
|
||||
|
||||
// 选择日期
|
||||
handleDateConfirm: ({ value }: any) => {
|
||||
const d = new Date(value)
|
||||
const year = d.getFullYear()
|
||||
const month = d.getMonth() + 1
|
||||
formData.value.birthDate = `${year}年${month}月`
|
||||
},
|
||||
|
||||
// 上传视频
|
||||
handleUploadVideo: () => {
|
||||
// TODO: 实现视频上传功能
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera', 'album'],
|
||||
maxDuration: 60,
|
||||
camera: 'back',
|
||||
success: (res) => {
|
||||
console.log('选择视频:', res)
|
||||
// 这里应该上传视频到服务器
|
||||
formData.value.video = res.tempFilePath
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 上传照片
|
||||
handleUploadPhoto: () => {
|
||||
const maxCount = 5 - formData.value.photos.length
|
||||
uni.chooseImage({
|
||||
count: maxCount,
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
// TODO: 这里应该上传照片到服务器
|
||||
formData.value.photos.push(...res.tempFilePaths)
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 删除照片
|
||||
handleRemovePhoto: (index: number) => {
|
||||
formData.value.photos.splice(index, 1)
|
||||
},
|
||||
|
||||
// 保存
|
||||
handleSave: () => {
|
||||
// TODO: 实现保存逻辑
|
||||
console.log('保存数据:', formData.value)
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success',
|
||||
})
|
||||
setTimeout(() => {
|
||||
router.navigateBack()
|
||||
}, 1500)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.form-item {
|
||||
.label-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.gender-select,
|
||||
.date-select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
cursor: pointer;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.photo-upload-grid {
|
||||
.photo-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
cursor: pointer;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-wrapper {
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
331
src/pages/my/profile.bck.vue
Normal file
331
src/pages/my/profile.bck.vue
Normal file
@ -0,0 +1,331 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { IUserResult } from '@/api/types/user'
|
||||
import { updateUserInfo } from '@/api/user'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { router } from '@/utils/tools'
|
||||
import { uploadFileUrl, useUpload } from '@/utils/uploadFile'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
|
||||
// 用户信息相关
|
||||
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: '',
|
||||
})
|
||||
|
||||
// Action Sheet 相关
|
||||
const showAvatarActionSheet = ref(false)
|
||||
const avatarActions = ref([
|
||||
{
|
||||
name: '拍照',
|
||||
value: 'camera',
|
||||
},
|
||||
{
|
||||
name: '从手机相册选择',
|
||||
value: 'album',
|
||||
},
|
||||
])
|
||||
|
||||
// 编辑昵称相关
|
||||
const showEditNicknamePopup = ref(false)
|
||||
const nicknameInput = ref('')
|
||||
|
||||
console.log(`${OSS}images/store/my/image1.png`)
|
||||
/**
|
||||
* 上传头像文件
|
||||
*/
|
||||
function handleUploadAvatar(filePath: string) {
|
||||
const { run: uploadFile } = useUpload<string>(
|
||||
uploadFileUrl.USER_AVATAR,
|
||||
{},
|
||||
{
|
||||
maxSize: 5,
|
||||
onSuccess: async (res) => {
|
||||
try {
|
||||
const avatarUrl = typeof res === 'string' ? res : (res as any).uri || (res as any).url
|
||||
await updateUserInfo({ field: 'avatar', value: avatarUrl })
|
||||
user.value.avatar = avatarUrl
|
||||
toast.info('头像上传成功')
|
||||
}
|
||||
catch (error) {
|
||||
console.error('更新头像失败:', error)
|
||||
toast.info('头像上传失败')
|
||||
}
|
||||
},
|
||||
onError: (err) => {
|
||||
console.error('上传失败:', err)
|
||||
toast.info('头像上传失败')
|
||||
},
|
||||
},
|
||||
filePath,
|
||||
)
|
||||
uploadFile()
|
||||
}
|
||||
|
||||
/**
|
||||
* 掩码处理手机号
|
||||
*/
|
||||
const maskedMobile = computed(() => {
|
||||
if (!user.value.mobile || user.value.mobile.length !== 11)
|
||||
return '+86 155****5456'
|
||||
// 只处理11位手机号
|
||||
return `+86 ${user.value.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')}`
|
||||
})
|
||||
|
||||
/**
|
||||
* 验证昵称是否有效（1-10字符，一个汉字为一个字符）
|
||||
*/
|
||||
const isNicknameValid = computed(() => {
|
||||
const trimmed = nicknameInput.value.trim()
|
||||
return trimmed.length >= 1 && trimmed.length <= 10
|
||||
})
|
||||
|
||||
const Profile = {
|
||||
/**
|
||||
* 初始化用户信息
|
||||
*/
|
||||
handleInit: () => {
|
||||
// getUserInfo().then((res) => {
|
||||
// user.value = res
|
||||
// })
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑头像 - 显示选择面板
|
||||
*/
|
||||
handleEditAvatar: () => {
|
||||
showAvatarActionSheet.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理头像选择
|
||||
*/
|
||||
handleSelectAvatarAction: (item: any) => {
|
||||
showAvatarActionSheet.value = false
|
||||
|
||||
if (item.value === 'camera') {
|
||||
// 拍照
|
||||
Profile.handleChooseImage(['camera'])
|
||||
}
|
||||
else if (item.value === 'album') {
|
||||
// 从相册选择
|
||||
Profile.handleChooseImage(['album'])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择图片
|
||||
*/
|
||||
handleChooseImage: (sourceType: ('camera' | 'album')[]) => {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType,
|
||||
success: (res) => {
|
||||
const file = res.tempFiles[0]
|
||||
if (file) {
|
||||
handleUploadAvatar(file.tempFilePath)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败:', err)
|
||||
if (err.errMsg && !err.errMsg.includes('cancel')) {
|
||||
toast.info('选择图片失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType,
|
||||
success: (res) => {
|
||||
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
||||
handleUploadAvatar(res.tempFilePaths[0])
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败:', err)
|
||||
if (err.errMsg && !err.errMsg.includes('cancel')) {
|
||||
toast.info('选择图片失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑昵称 - 显示弹窗
|
||||
*/
|
||||
handleEditNickname: () => {
|
||||
nicknameInput.value = user.value.nickname || ''
|
||||
showEditNicknamePopup.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭编辑昵称弹窗
|
||||
*/
|
||||
handleCloseEditNickname: () => {
|
||||
showEditNicknamePopup.value = false
|
||||
nicknameInput.value = ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存昵称
|
||||
*/
|
||||
handleSaveNickname: async () => {
|
||||
const trimmed = nicknameInput.value.trim()
|
||||
if (!trimmed || trimmed.length < 1 || trimmed.length > 10) {
|
||||
toast.info('昵称限制1-10字符')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await updateUserInfo({ field: 'nickname', value: trimmed })
|
||||
user.value.nickname = trimmed
|
||||
showEditNicknamePopup.value = false
|
||||
toast.info('昵称修改成功')
|
||||
}
|
||||
catch (error) {
|
||||
console.error('更新昵称失败:', error)
|
||||
toast.info('昵称修改失败')
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 修改手机号
|
||||
*/
|
||||
handleEditMobile: () => {
|
||||
router.navigateTo('/pages/login/mobile?type=edit')
|
||||
},
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
handleEditPassword: () => {
|
||||
// TODO: 实现修改密码功能
|
||||
console.log('修改密码')
|
||||
},
|
||||
|
||||
/**
|
||||
* 修改绑定用户
|
||||
*/
|
||||
handleEditBoundUser: () => {
|
||||
// TODO: 实现修改绑定用户功能
|
||||
console.log('修改绑定用户')
|
||||
},
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
Profile.handleInit()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view>
|
||||
<navbar title="个人信息" custom-class="!bg-white">
|
||||
<template #right />
|
||||
</navbar>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx mt-20rpx">
|
||||
<wd-cell-group>
|
||||
<!-- 头像 -->
|
||||
<wd-cell is-link title="头像" @click="Profile.handleEditAvatar">
|
||||
<template #value>
|
||||
<wd-img width="64rpx" height="64rpx"
|
||||
:src="(user.avatar && typeof user.avatar === 'string' && user.avatar.trim()) ? user.avatar : `${OSS}images/store/my/image1.png`"
|
||||
mode="aspectFill" round />
|
||||
</template>
|
||||
</wd-cell>
|
||||
|
||||
<!-- 昵称 -->
|
||||
<wd-cell is-link title="昵称" :value="(user.nickname || '昵称名字')" @click="Profile.handleEditNickname" />
|
||||
|
||||
<!-- 修改手机号 -->
|
||||
<wd-cell is-link title="修改手机号" :value="maskedMobile" @click="Profile.handleEditMobile" />
|
||||
|
||||
<!-- 修改密码 -->
|
||||
<wd-cell is-link title="修改密码" @click="Profile.handleEditPassword" />
|
||||
|
||||
<!-- 修改绑定用户 -->
|
||||
<wd-cell is-link title="修改绑定用户" @click="Profile.handleEditBoundUser" />
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
|
||||
<!-- 头像选择 Action Sheet -->
|
||||
<wd-action-sheet v-model="showAvatarActionSheet" :actions="avatarActions" cancel-text="取消"
|
||||
@close="showAvatarActionSheet = false" @select="Profile.handleSelectAvatarAction" />
|
||||
|
||||
<!-- 编辑昵称弹窗 -->
|
||||
<wd-popup v-model="showEditNicknamePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
|
||||
position="bottom" @close="Profile.handleCloseEditNickname">
|
||||
<view class="relative bg-white px-30rpx pb-78rpx pt-50rpx">
|
||||
<!-- 关闭按钮 -->
|
||||
<view class="absolute right-30rpx top-18rpx" @click="Profile.handleCloseEditNickname">
|
||||
<wd-icon name="close" size="20px" color="#C0C4CC" />
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class="mb-40rpx text-center text-36rpx text-[#121212] leading-50rpx">
|
||||
修改昵称
|
||||
</view>
|
||||
|
||||
<!-- 输入框 -->
|
||||
<view class="mb-20rpx">
|
||||
<view class="mb-20rpx text-30rpx text-[#303133] leading-44rpx">
|
||||
昵称:
|
||||
</view>
|
||||
<wd-input v-model="nicknameInput" type="text" placeholder="请输入昵称" no-border
|
||||
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||||
custom-input-class="!px-32rpx !h-104rpx" :maxlength="10" />
|
||||
</view>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<view class="mb-40rpx text-24rpx text-[#606266] leading-34rpx">
|
||||
昵称限制1-10字符,一个汉字为一个字符
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="h-90rpx rounded-8rpx bg-[#4C9F44] text-center text-[#fff] leading-90rpx"
|
||||
:class="{ 'opacity-40': !isNicknameValid }"
|
||||
@click="isNicknameValid && Profile.handleSaveNickname()">
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f6f7f8;
|
||||
}
|
||||
</style>
|
||||
182
src/pages/my/service-method.vue
Normal file
182
src/pages/my/service-method.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 导航栏 -->
|
||||
<!-- <wd-navbar safe-area-inset-top title="服务方式" :bordered="false">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" @click="ServiceMethod.handleBack">
|
||||
<wd-icon name="arrow-left" size="32rpx" color="#303133" />
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar> -->
|
||||
<navbar title="服务方式"></navbar>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: `0px` }">
|
||||
<!-- 勾选服务方式 -->
|
||||
<view class="info-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
|
||||
<view class="mb-24rpx flex items-center justify-between">
|
||||
<text class="text-32rpx text-[#303133] font-bold leading-44rpx">勾选服务方式</text>
|
||||
<text class="text-24rpx text-[#909399] leading-34rpx">可多选</text>
|
||||
</view>
|
||||
<!-- 服务选项 -->
|
||||
<view class="service-options-row flex items-center gap-48rpx">
|
||||
<!-- 上门服务 -->
|
||||
<view class="service-option-item flex items-center"
|
||||
@click="ServiceMethod.handleToggleService('door')">
|
||||
<view
|
||||
class="checkbox-wrapper mr-16rpx h-40rpx w-40rpx flex items-center justify-center rounded-4rpx"
|
||||
:class="serviceMethods.door ? 'bg-[#4C9F44]' : 'border-2rpx border-solid border-[#DCDFE6] bg-[#fff]'">
|
||||
<wd-icon v-if="serviceMethods.door" name="check" size="24rpx" color="#fff" />
|
||||
</view>
|
||||
<text class="text-28rpx text-[#303133] leading-40rpx">上门服务</text>
|
||||
</view>
|
||||
<!-- 到店服务 -->
|
||||
<view class="service-option-item flex items-center"
|
||||
@click="ServiceMethod.handleToggleService('store')">
|
||||
<view
|
||||
class="checkbox-wrapper mr-16rpx h-40rpx w-40rpx flex items-center justify-center rounded-4rpx"
|
||||
:class="serviceMethods.store ? 'bg-[#4C9F44]' : 'border-2rpx border-solid border-[#DCDFE6] bg-[#fff]'">
|
||||
<wd-icon v-if="serviceMethods.store" name="check" size="24rpx" color="#fff" />
|
||||
</view>
|
||||
<text class="text-28rpx text-[#303133] leading-40rpx">到店服务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 是否免费出行 -->
|
||||
<view class="info-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex-1">
|
||||
<text class="text-32rpx text-[#303133] font-bold leading-44rpx">是否免费出行</text>
|
||||
<view class="mt-12rpx text-24rpx text-[#909399] leading-34rpx">
|
||||
开启免费出行,可以获得更多流量扶持
|
||||
</view>
|
||||
</view>
|
||||
<wd-switch v-model="isFreeTravel" size="40rpx" active-color="#4C9F44" custom-class="!mr-0" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="pb-160rpx" />
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="fixed bottom-0 left-0 right-0 px-30rpx pb-40rpx pt-24rpx">
|
||||
<view class="save-btn h-88rpx rounded-16rpx bg-[#4C9F44] text-center leading-88rpx"
|
||||
@click="ServiceMethod.handleSave">
|
||||
<text class="text-32rpx text-[#fff] font-bold">保存</text>
|
||||
</view>
|
||||
</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 serviceMethods = ref({
|
||||
door: true, // 上门服务
|
||||
store: false, // 到店服务
|
||||
})
|
||||
|
||||
// 是否免费出行
|
||||
const isFreeTravel = ref(false)
|
||||
|
||||
const ServiceMethod = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 切换服务方式
|
||||
handleToggleService: (type: 'door' | 'store') => {
|
||||
serviceMethods.value[type] = !serviceMethods.value[type]
|
||||
},
|
||||
|
||||
// 保存
|
||||
handleSave: () => {
|
||||
// TODO: 实现保存逻辑
|
||||
console.log('保存服务方式:', {
|
||||
serviceMethods: serviceMethods.value,
|
||||
isFreeTravel: isFreeTravel.value,
|
||||
})
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success',
|
||||
})
|
||||
router.navigateBack(1, 1500)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
// .content-wrapper {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.service-option-item {
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-wrapper {
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
251
src/pages/my/travel-record.vue
Normal file
251
src/pages/my/travel-record.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateStr: string) {
|
||||
const date = new Date(dateStr)
|
||||
const day = date.getDate()
|
||||
const month = date.getMonth() + 1
|
||||
return {
|
||||
day: day.toString(),
|
||||
month: `${month}月`,
|
||||
}
|
||||
}
|
||||
|
||||
// 行程记录数据
|
||||
const travelRecords = ref([
|
||||
{
|
||||
date: '2024-09-21',
|
||||
appointments: [
|
||||
{
|
||||
id: '1',
|
||||
title: '苓苑共享茶室空间',
|
||||
time: '15:00-18:00',
|
||||
location: '上海浦东新区新金桥路58号新银东大厦15楼F室',
|
||||
status: 'completed', // 'completed' | 'pending' | 'in-service'
|
||||
statusText: '完成',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '苓苑共享茶室空间',
|
||||
time: '15:00-18:00',
|
||||
location: '上海浦东新区新金桥路58号新银东大厦15楼F室',
|
||||
status: 'pending',
|
||||
statusText: '待服务',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '韩梅梅预约单',
|
||||
time: '15:00-18:00',
|
||||
location: '上海浦东新区新金桥路58号新银东大厦151111111111111楼F室',
|
||||
status: 'in-service',
|
||||
statusText: '服务中',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2024-09-22',
|
||||
appointments: [
|
||||
{
|
||||
id: '4',
|
||||
title: '苓苑共享茶室空间',
|
||||
time: '15:00-18:00',
|
||||
location: '上海浦东新区新金桥路58号新银东大厦15楼F室',
|
||||
status: 'pending',
|
||||
statusText: '待服务',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
const TravelRecord = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 点击预约单
|
||||
handleAppointmentClick: (appointment: any) => {
|
||||
// TODO: 跳转到预约单详情
|
||||
console.log('点击预约单:', appointment)
|
||||
},
|
||||
|
||||
// 点击操作按钮
|
||||
handleActionClick: (appointment: any) => {
|
||||
// TODO: 处理操作（如导航、联系等）
|
||||
console.log('点击操作:', appointment)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 导航栏 -->
|
||||
<wd-navbar safe-area-inset-top title="行程记录" :bordered="false">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" @click="TravelRecord.handleBack">
|
||||
<wd-icon name="arrow-left" size="32rpx" color="#303133" />
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: `0px` }">
|
||||
<!-- 按日期分组的行程记录 -->
|
||||
<view v-for="record in travelRecords" :key="record.date" class="date-section">
|
||||
<!-- 日期标题 -->
|
||||
<view class="date-header mx-30rpx mb-20rpx mt-30rpx flex items-center justify-between">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}images/chayishi/date.png`" class="mr-12rpx" />
|
||||
<view class="date-label-wrapper flex flex-col items-center justify-center">
|
||||
<text class="text-28rpx text-[#303133] font-bold leading-32rpx">{{ formatDate(record.date).day }}</text>
|
||||
<text class="text-24rpx text-[#303133] font-bold leading-32rpx">{{ formatDate(record.date).month }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="text-24rpx text-[#909399] leading-40rpx">有 {{ record.appointments.length }} 条预约单</text>
|
||||
</view>
|
||||
|
||||
<!-- 预约单列表 -->
|
||||
<view class="appointment-list mx-30rpx mb-20rpx">
|
||||
<view
|
||||
v-for="appointment in record.appointments"
|
||||
:key="appointment.id"
|
||||
class="appointment-card relative mb-20rpx rounded-16rpx bg-[#F5F7FA] p-24rpx"
|
||||
@click="TravelRecord.handleAppointmentClick(appointment)"
|
||||
>
|
||||
<!-- 状态标签 -->
|
||||
<view
|
||||
class="status-badge absolute right-24rpx top-24rpx text-24rpx leading-32rpx"
|
||||
:class="{
|
||||
'text-[#909399]': appointment.status === 'completed',
|
||||
'text-[#4C9F44]': appointment.status === 'pending',
|
||||
'text-[#409EFF]': appointment.status === 'in-service',
|
||||
}"
|
||||
>
|
||||
{{ appointment.statusText }}
|
||||
</view>
|
||||
|
||||
<!-- 预约单图标和标题 -->
|
||||
<view class="appointment-header mb-16rpx flex items-center">
|
||||
<wd-img width="32rpx" height="32rpx" :src="`${OSS}images/chayishi/order-icon.png`" class="mr-12rpx" />
|
||||
<text class="text-24rpx text-[#4C9F44] font-medium leading-34rpx">预约单</text>
|
||||
</view>
|
||||
|
||||
<!-- 茶室名称 -->
|
||||
<text class="mb-16rpx block text-32rpx text-[#303133] font-bold leading-44rpx">{{ appointment.title }}</text>
|
||||
|
||||
<!-- 时间 -->
|
||||
<view class="info-row mb-12rpx flex items-center">
|
||||
<wd-icon name="clock" size="28rpx" color="#909399" class="mr-12rpx" />
|
||||
<text class="text-26rpx text-[#606266] leading-36rpx">{{ appointment.time }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 地址 -->
|
||||
<view class="info-row mb-16rpx flex items-start">
|
||||
<wd-icon name="location" size="28rpx" color="#909399" class="mr-12rpx mt-4rpx flex-shrink-0" />
|
||||
<view class="address-text flex-1 text-26rpx text-[#606266] leading-36rpx">
|
||||
{{ appointment.location }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-btn absolute bottom-24rpx right-24rpx h-56rpx w-56rpx flex items-center justify-center rounded-full bg-white" @click.stop="TravelRecord.handleActionClick(appointment)">
|
||||
<wd-img width="32rpx" height="32rpx" :src="`${OSS}images/chayishi/send2.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="pb-40rpx" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.date-section {
|
||||
.date-header {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.appointment-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.appointment-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
361
src/pages/my/upload-data.vue
Normal file
361
src/pages/my/upload-data.vue
Normal file
@ -0,0 +1,361 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 页面状态：'add' | 'edit' | 'pending' | 'view'
|
||||
// 可以通过路由参数或API获取状态，这里使用静态数据模拟
|
||||
const pageStatus = ref<'add' | 'edit' | 'pending' | 'view'>('add')
|
||||
|
||||
// 资料数据
|
||||
const documents = ref({
|
||||
businessLicense: '', // 营业执照
|
||||
qualification: '', // 资质证书
|
||||
healthCert: '', // 健康证
|
||||
})
|
||||
|
||||
// 审核状态：'approved' | 'pending' | 'rejected' | 'none'
|
||||
const auditStatus = ref({
|
||||
businessLicense: 'approved', // 'approved' | 'pending' | 'rejected' | 'none'
|
||||
qualification: 'none',
|
||||
healthCert: 'pending',
|
||||
})
|
||||
|
||||
// 初始化：根据实际情况判断页面状态
|
||||
onLoad((options: any) => {
|
||||
// 如果有状态参数，使用参数
|
||||
if (options.status) {
|
||||
pageStatus.value = options.status as 'add' | 'edit' | 'pending' | 'view'
|
||||
}
|
||||
// TODO: 否则根据API数据判断状态
|
||||
// 如果已提交且在审核中，显示pending
|
||||
// 如果已审核通过，显示view
|
||||
// 如果有数据但需要编辑，显示edit
|
||||
// 如果无数据，显示add
|
||||
})
|
||||
|
||||
const UploadData = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
handleUploadImage: (type: 'businessLicense' | 'qualification' | 'healthCert') => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
// TODO: 上传图片到服务器
|
||||
console.log('选择图片:', res)
|
||||
documents.value[type] = res.tempFilePaths[0]
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
handleDeleteImage: (type: 'businessLicense' | 'qualification' | 'healthCert') => {
|
||||
documents.value[type] = ''
|
||||
},
|
||||
|
||||
// 提交
|
||||
handleSubmit: () => {
|
||||
// TODO: 实现提交逻辑
|
||||
console.log('提交资料:', documents.value)
|
||||
// 提交后设置为申请中状态
|
||||
pageStatus.value = 'pending'
|
||||
},
|
||||
|
||||
// 修改信息
|
||||
handleEdit: () => {
|
||||
pageStatus.value = 'edit'
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 导航栏 -->
|
||||
<wd-navbar safe-area-inset-top :title="pageStatus === 'view' ? '资料信息' : pageStatus === 'edit' ? '资料修改' : '上传资料'" :bordered="false">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" @click="UploadData.handleBack">
|
||||
<wd-icon name="arrow-left" size="32rpx" color="#303133" />
|
||||
</view>
|
||||
</template>
|
||||
<!-- <template #right>
|
||||
<view class="right-slot mr-16rpx flex items-center">
|
||||
<view class="nav-icon-item relative mr-24rpx">
|
||||
<wd-icon name="more" size="40rpx" color="#303133" />
|
||||
</view>
|
||||
<view class="nav-icon-item relative">
|
||||
<wd-icon name="target" size="40rpx" color="#303133" />
|
||||
</view>
|
||||
</view>
|
||||
</template> -->
|
||||
</wd-navbar>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: `${navbarHeight}px` }">
|
||||
<!-- 申请中状态 -->
|
||||
<template v-if="pageStatus === 'pending'">
|
||||
<view class="pending-status-wrapper min-h-[70vh] flex flex-col items-center justify-center px-30rpx pt-120rpx">
|
||||
<!-- 图标区域 -->
|
||||
<view class="pending-icon-wrapper relative mb-60rpx">
|
||||
<wd-img width="300rpx" height="300rpx" :src="`${OSS}images/chayishi/apply.png`" mode="aspectFit" />
|
||||
</view>
|
||||
<!-- 提示文字 -->
|
||||
<text class="mb-24rpx text-36rpx text-[#303133] font-bold leading-50rpx">您的信息已成功提交</text>
|
||||
<text class="text-center text-28rpx text-[#909399] leading-40rpx">目前正在审核中,请您耐心等待</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 查看状态 -->
|
||||
<template v-else-if="pageStatus === 'view'">
|
||||
<!-- 温馨提示 -->
|
||||
<view class="tip-card mx-30rpx mt-30rpx rounded-16rpx bg-[#FFF7E6] p-24rpx">
|
||||
<text class="text-26rpx text-[#E6A23C] leading-40rpx">
|
||||
*请确保信息真实、准确。平台会进行核查,若因信息不实导致任何责任或损失,由提交者自行承担。
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 营业执照 -->
|
||||
<view class="info-card 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 v-if="documents.businessLicense" class="relative w-[200rpx]">
|
||||
<wd-img width="200rpx" height="200rpx" :src="documents.businessLicense" mode="aspectFill" class="rounded-12rpx" />
|
||||
<!-- 审核状态标签 -->
|
||||
<view v-if="auditStatus.businessLicense === 'approved'" class="status-badge absolute right-8rpx top-8rpx">
|
||||
<wd-img width="80rpx" height="80rpx" :src="`${OSS}images/chayishi/success.png`" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-state flex flex-col items-center justify-center py-60rpx">
|
||||
<wd-img width="120rpx" height="120rpx" :src="`${OSS}images/chayishi/text.png`" />
|
||||
<text class="mt-24rpx text-28rpx text-[#909399] leading-40rpx">暂未提交信息</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 资质证书 -->
|
||||
<view class="info-card 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 v-if="documents.qualification" class="relative w-[200rpx]">
|
||||
<wd-img width="200rpx" height="200rpx" :src="documents.qualification" mode="aspectFill" class="rounded-12rpx" />
|
||||
<!-- 审核状态标签 -->
|
||||
<view v-if="auditStatus.qualification === 'rejected'" class="status-badge absolute right-8rpx top-8rpx">
|
||||
<wd-img width="80rpx" height="80rpx" :src="`${OSS}images/chayishi/fail.png`" />
|
||||
</view>
|
||||
<view v-else-if="auditStatus.qualification === 'pending'" class="status-badge absolute right-8rpx top-8rpx">
|
||||
<wd-img width="80rpx" height="80rpx" :src="`${OSS}images/chayishi/applying.png`" />
|
||||
</view>
|
||||
<view v-else-if="auditStatus.qualification === 'approved'" class="status-badge absolute right-8rpx top-8rpx">
|
||||
<wd-img width="80rpx" height="80rpx" :src="`${OSS}images/chayishi/success.png`" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-state flex flex-col items-center justify-center py-60rpx">
|
||||
<wd-img width="120rpx" height="120rpx" :src="`${OSS}images/chayishi/text.png`" />
|
||||
<text class="mt-24rpx text-28rpx text-[#909399] leading-40rpx">暂未提交信息</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 健康证 -->
|
||||
<view class="info-card 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 v-if="documents.healthCert" class="relative w-[200rpx]">
|
||||
<wd-img width="200rpx" height="200rpx" :src="documents.healthCert" mode="aspectFill" class="rounded-12rpx" />
|
||||
<!-- 审核状态标签 -->
|
||||
<view v-if="auditStatus.healthCert === 'approved'" class="status-badge absolute right-8rpx top-8rpx">
|
||||
<wd-img width="80rpx" height="80rpx" :src="`${OSS}images/chayishi/success.png`" />
|
||||
</view>
|
||||
<view v-else-if="auditStatus.healthCert === 'pending'" class="status-badge absolute right-8rpx top-8rpx">
|
||||
<wd-img width="80rpx" height="80rpx" :src="`${OSS}images/chayishi/applying.png`" />
|
||||
</view>
|
||||
<view v-else-if="auditStatus.healthCert === 'rejected'" class="status-badge absolute right-8rpx top-8rpx">
|
||||
<wd-img width="80rpx" height="80rpx" :src="`${OSS}images/chayishi/fail.png`" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-state flex flex-col items-center justify-center py-60rpx">
|
||||
<wd-img width="120rpx" height="120rpx" :src="`${OSS}images/chayishi/text.png`" />
|
||||
<text class="mt-24rpx text-28rpx text-[#909399] leading-40rpx">暂未提交信息</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 修改信息按钮 -->
|
||||
<view class="mx-30rpx mb-40rpx mt-40rpx">
|
||||
<view class="edit-btn h-88rpx rounded-16rpx bg-[#4C9F44] text-center leading-88rpx" @click="UploadData.handleEdit">
|
||||
<text class="text-32rpx text-[#fff] font-bold">修改信息</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 新增/编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 营业执照 -->
|
||||
<view class="info-card 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 v-if="documents.businessLicense" class="relative mb-24rpx w-[200rpx]">
|
||||
<wd-img width="200rpx" height="200rpx" :src="documents.businessLicense" mode="aspectFill" class="rounded-12rpx" />
|
||||
<view class="delete-btn absolute right-8rpx top-8rpx h-48rpx w-48rpx flex items-center justify-center rounded-full bg-black bg-opacity-60" @click="UploadData.handleDeleteImage('businessLicense')">
|
||||
<wd-icon name="close" size="24rpx" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="upload-area flex flex-col items-center justify-center border-2rpx border-[#C0C4CC] rounded-16rpx border-dashed bg-[#F5F7FA]" @click="UploadData.handleUploadImage('businessLicense')">
|
||||
<wd-icon name="camera" size="80rpx" color="#C0C4CC" />
|
||||
<text class="mt-24rpx text-28rpx text-[#909399] leading-40rpx">营业执照</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 资质证书 -->
|
||||
<view class="info-card 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 v-if="documents.qualification" class="relative mb-24rpx w-[200rpx]">
|
||||
<wd-img width="200rpx" height="200rpx" :src="documents.qualification" mode="aspectFill" class="rounded-12rpx" />
|
||||
<view class="delete-btn absolute right-8rpx top-8rpx h-48rpx w-48rpx flex items-center justify-center rounded-full bg-black bg-opacity-60" @click="UploadData.handleDeleteImage('qualification')">
|
||||
<wd-icon name="close" size="24rpx" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="upload-area flex flex-col items-center justify-center border-2rpx border-[#C0C4CC] rounded-16rpx border-dashed bg-[#F5F7FA]" @click="UploadData.handleUploadImage('qualification')">
|
||||
<wd-icon name="camera" size="80rpx" color="#C0C4CC" />
|
||||
<text class="mt-24rpx text-28rpx text-[#909399] leading-40rpx">茶艺师资格证</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 健康证 -->
|
||||
<view class="info-card 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 v-if="documents.healthCert" class="relative mb-24rpx w-[200rpx]">
|
||||
<wd-img width="200rpx" height="200rpx" :src="documents.healthCert" mode="aspectFill" class="rounded-12rpx" />
|
||||
<view class="delete-btn absolute right-8rpx top-8rpx h-48rpx w-48rpx flex items-center justify-center rounded-full bg-black bg-opacity-60" @click="UploadData.handleDeleteImage('healthCert')">
|
||||
<wd-icon name="close" size="24rpx" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="upload-area flex flex-col items-center justify-center border-2rpx border-[#C0C4CC] rounded-16rpx border-dashed bg-[#F5F7FA]" @click="UploadData.handleUploadImage('healthCert')">
|
||||
<wd-icon name="camera" size="80rpx" color="#C0C4CC" />
|
||||
<text class="mt-24rpx text-28rpx text-[#909399] leading-40rpx">健康证</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<view class="tip-text mx-30rpx mb-40rpx mt-30rpx">
|
||||
<text class="text-24rpx text-[#909399] leading-40rpx">
|
||||
*感谢您提交信息表!我们的工作人员将在3个工作日内完成审核,请您耐心等待并通过平台关注审核结果。
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="pb-160rpx" />
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮（仅在新增/编辑状态显示） -->
|
||||
<view v-if="pageStatus === 'add' || pageStatus === 'edit'" class="save-btn-wrapper fixed bottom-0 left-0 right-0 bg-white px-30rpx pb-40rpx pt-24rpx">
|
||||
<view class="save-btn h-88rpx rounded-16rpx bg-[#4C9F44] text-center leading-88rpx" @click="UploadData.handleSubmit">
|
||||
<text class="text-32rpx text-[#fff] font-bold">提交</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.pending-status-wrapper {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
border: 1rpx solid #ffe58f;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
cursor: pointer;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-wrapper {
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
460
src/pages/my/work-time.vue
Normal file
460
src/pages/my/work-time.vue
Normal file
@ -0,0 +1,460 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 工作日选择弹窗 -->
|
||||
<wd-popup v-model="showWorkdayPicker" position="bottom" custom-style="border-radius: 32rpx 32rpx 0 0;">
|
||||
<view class="relative pb-26rpx ">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showWorkdayPicker = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择工作日</view>
|
||||
<view class="px-32rpx">
|
||||
<view class="workday-grid grid grid-cols-3 gap-24rpx ">
|
||||
<view v-for="(day, index) in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']" :key="index"
|
||||
class="w-216rpx h-64rpx text-center leading-64rpx rounded-8rpx text-28rpx"
|
||||
:class="workdays.includes(day) ? 'bg-[#E7F5E7] text-[#4C9F44]' : 'bg-[#F5F7FA] text-[#909399]'"
|
||||
@click="WorkTime.handleToggleWorkday(day)">
|
||||
{{ day }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="save-btn h-88rpx rounded-8rpx bg-[#4C9F44] text-center leading-88rpx mt-160rpx"
|
||||
@click="WorkTime.handleConfirmWorkdays(workdays)">
|
||||
<text class="text-32rpx text-[#fff] font-bold">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="workday-picker-popup">
|
||||
<view class="picker-header flex items-center justify-between px-30rpx pb-24rpx pt-30rpx">
|
||||
<text class="text-36rpx text-[#303133] font-bold leading-50rpx">选择工作日</text>
|
||||
<view class="close-btn h-60rpx w-60rpx flex items-center justify-center rounded-full bg-[#F5F7FA]"
|
||||
@click="showWorkdayPicker = false">
|
||||
<wd-icon name="close" size="32rpx" color="#909399" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="workday-grid grid grid-cols-3 gap-24rpx px-30rpx pb-30rpx">
|
||||
<view v-for="(day, index) in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']" :key="index"
|
||||
class="workday-item h-88rpx flex items-center justify-center rounded-16rpx text-28rpx leading-40rpx"
|
||||
:class="workdays.includes(day) ? 'bg-[#E7F5E7] text-[#4C9F44]' : 'bg-[#F5F7FA] text-[#909399]'"
|
||||
@click="WorkTime.handleToggleWorkday(day)">
|
||||
{{ day }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="px-30rpx pb-40rpx">
|
||||
<view class="confirm-btn h-88rpx rounded-16rpx bg-[#4C9F44] text-center leading-88rpx"
|
||||
@click="WorkTime.handleConfirmWorkdays(workdays)">
|
||||
<text class="text-32rpx text-[#fff] font-bold">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</wd-popup>
|
||||
|
||||
<!-- 时间选择弹窗 -->
|
||||
<wd-popup v-model="showTimePicker" position="bottom" custom-style="border-radius: 32rpx 32rpx 0 0;">
|
||||
<view class="relative pb-26rpx ">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showWorkdayPicker = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择每日工作时间</view>
|
||||
|
||||
<view class="">
|
||||
<view class="time-tabs flex items-center px-30rpx pb-24rpx">
|
||||
<view class="time-tab flex-1 rounded-8rpx py-16rpx text-center text-28rpx leading-40rpx"
|
||||
:class="timePickerType === 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F5F7FA] text-[#909399]'"
|
||||
@click="timePickerType = 'start'">
|
||||
开始时间
|
||||
</view>
|
||||
<view class="time-tab ml-16rpx flex-1 rounded-8rpx py-16rpx text-center text-28rpx leading-40rpx"
|
||||
:class="timePickerType === 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F5F7FA] text-[#909399]'"
|
||||
@click="timePickerType = 'end'">
|
||||
结束时间
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="time-picker-wrapper px-30rpx pb-30rpx">
|
||||
<wd-datetime-picker-view type="time" v-model="time.start" label="开始时间" v-if="timePickerType == 'start'"/>
|
||||
<wd-datetime-picker-view type="time" v-model="time.end" label="结束时间" v-if="timePickerType == 'end'"/>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center gap-24rpx px-30rpx pb-40rpx mt-50rpx">
|
||||
<view class="reset-btn h-88rpx flex-1 rounded-16rpx bg-[#F5F7FA] text-center leading-88rpx"
|
||||
@click="WorkTime.handleResetTime">
|
||||
<text class="text-32rpx text-[#303133]">重置</text>
|
||||
</view>
|
||||
<view class="confirm-btn h-88rpx flex-1 rounded-16rpx bg-[#4C9F44] text-center leading-88rpx"
|
||||
@click="WorkTime.handleConfirmTime(timePickerType === 'start' ? timePickerValue.start : timePickerValue.end)">
|
||||
<text class="text-32rpx text-[#fff]">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="time-picker-popup">
|
||||
<view class="picker-header flex items-center justify-between px-30rpx pb-24rpx pt-30rpx">
|
||||
<text class="text-36rpx text-[#303133] font-bold leading-50rpx">选择每日工作时间</text>
|
||||
<view class="close-btn h-60rpx w-60rpx flex items-center justify-center rounded-full bg-[#F5F7FA]"
|
||||
@click="showTimePicker = false">
|
||||
<wd-icon name="close" size="32rpx" color="#909399" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="time-tabs flex items-center px-30rpx pb-24rpx">
|
||||
<view class="time-tab flex-1 rounded-8rpx py-16rpx text-center text-28rpx leading-40rpx"
|
||||
:class="timePickerType === 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F5F7FA] text-[#909399]'"
|
||||
@click="timePickerType = 'start'">
|
||||
开始时间
|
||||
</view>
|
||||
<view class="time-tab ml-16rpx flex-1 rounded-8rpx py-16rpx text-center text-28rpx leading-40rpx"
|
||||
:class="timePickerType === 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F5F7FA] text-[#909399]'"
|
||||
@click="timePickerType = 'end'">
|
||||
结束时间
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="time-picker-wrapper px-30rpx pb-30rpx">
|
||||
<picker-view class="time-picker-view"
|
||||
:value="timePickerType === 'start' ? [timePickerValue.start.hour, timePickerValue.start.minute] : [timePickerValue.end.hour, timePickerValue.end.minute]"
|
||||
@change="WorkTime.handleTimePickerChange">
|
||||
<picker-view-column>
|
||||
<view v-for="hour in 24" :key="hour - 1"
|
||||
class="time-picker-item flex items-center justify-center text-32rpx leading-44rpx">
|
||||
{{ String(hour - 1).padStart(2, '0') }}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="minute in 60" :key="minute - 1"
|
||||
class="time-picker-item flex items-center justify-center text-32rpx leading-44rpx">
|
||||
{{ String(minute - 1).padStart(2, '0') }}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
|
||||
<view class="time-picker-actions flex items-center gap-24rpx px-30rpx pb-40rpx">
|
||||
<view class="reset-btn h-88rpx flex-1 rounded-16rpx bg-[#F5F7FA] text-center leading-88rpx"
|
||||
@click="WorkTime.handleResetTime">
|
||||
<text class="text-32rpx text-[#303133] font-bold">重置</text>
|
||||
</view>
|
||||
<view class="confirm-btn h-88rpx flex-1 rounded-16rpx bg-[#4C9F44] text-center leading-88rpx"
|
||||
@click="WorkTime.handleConfirmTime(timePickerType === 'start' ? timePickerValue.start : timePickerValue.end)">
|
||||
<text class="text-32rpx text-[#fff] font-bold">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</wd-popup>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<navbar title="工作时间"></navbar>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: `0px` }">
|
||||
<!-- 每周工作日 -->
|
||||
<view class="info-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx"
|
||||
@click="WorkTime.handleSelectWorkdays">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex-1">
|
||||
<text class="text-32rpx text-[#303133] font-bold leading-44rpx">每周工作日</text>
|
||||
<view class="mt-12rpx text-28rpx text-[#303133] leading-40rpx">
|
||||
{{ workdays.join('、') }}
|
||||
</view>
|
||||
</view>
|
||||
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 每日工作时间 -->
|
||||
<view class="info-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx"
|
||||
@click="WorkTime.handleSelectTime('start')">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex-1">
|
||||
<text class="text-32rpx text-[#303133] font-bold leading-44rpx">每日工作时间</text>
|
||||
<view class="mt-12rpx text-28rpx text-[#303133] leading-40rpx">
|
||||
{{ workHours.start }}-{{ workHours.end }}
|
||||
</view>
|
||||
</view>
|
||||
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="pb-160rpx" />
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="fixed bottom-0 left-0 right-0 px-30rpx pb-40rpx pt-24rpx">
|
||||
<view class="save-btn h-88rpx rounded-8rpx bg-[#4C9F44] text-center leading-88rpx"
|
||||
@click="WorkTime.handleSave">
|
||||
<text class="text-32rpx text-[#fff] font-bold">保存</text>
|
||||
</view>
|
||||
</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 workdays = ref(['周一', '周二', '周三', '周四', '周五', '周六'])
|
||||
|
||||
// 工作时间
|
||||
const workHours = ref({
|
||||
start: '08:00',
|
||||
end: '20:00',
|
||||
})
|
||||
|
||||
// 显示工作日选择弹窗
|
||||
const showWorkdayPicker = ref(false)
|
||||
|
||||
// 显示时间选择弹窗
|
||||
const showTimePicker = ref(false)
|
||||
const timePickerType = ref<'start' | 'end'>('start') // 当前选择的是开始时间还是结束时间
|
||||
|
||||
// 时间选择器的值
|
||||
const timePickerValue = ref({
|
||||
start: { hour: 8, minute: 0 },
|
||||
end: { hour: 20, minute: 0 },
|
||||
})
|
||||
|
||||
const time = ref({
|
||||
start: '08:00',
|
||||
end: '20:00'
|
||||
})
|
||||
|
||||
const WorkTime = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 打开工作日选择
|
||||
handleSelectWorkdays: () => {
|
||||
showWorkdayPicker.value = true
|
||||
},
|
||||
|
||||
// 打开时间选择
|
||||
handleSelectTime: (type: 'start' | 'end') => {
|
||||
timePickerType.value = type
|
||||
showTimePicker.value = true
|
||||
},
|
||||
|
||||
// 确认工作日选择
|
||||
handleConfirmWorkdays: (selectedDays: string[]) => {
|
||||
workdays.value = selectedDays
|
||||
showWorkdayPicker.value = false
|
||||
},
|
||||
|
||||
// 确认时间选择
|
||||
handleConfirmTime: (time: { hour: number, minute: number }) => {
|
||||
const timeStr = `${String(time.hour).padStart(2, '0')}:${String(time.minute).padStart(2, '0')}`
|
||||
if (timePickerType.value === 'start') {
|
||||
workHours.value.start = timeStr
|
||||
timePickerValue.value.start = time
|
||||
}
|
||||
else {
|
||||
workHours.value.end = timeStr
|
||||
timePickerValue.value.end = time
|
||||
}
|
||||
showTimePicker.value = false
|
||||
},
|
||||
|
||||
// 切换工作日
|
||||
handleToggleWorkday: (day: string) => {
|
||||
const index = workdays.value.indexOf(day)
|
||||
if (index > -1) {
|
||||
workdays.value.splice(index, 1)
|
||||
}
|
||||
else {
|
||||
workdays.value.push(day)
|
||||
}
|
||||
},
|
||||
|
||||
// 时间选择器变化
|
||||
handleTimePickerChange: (e: any) => {
|
||||
const [hour, minute] = e.detail.value
|
||||
if (timePickerType.value === 'start') {
|
||||
timePickerValue.value.start = { hour, minute }
|
||||
}
|
||||
else {
|
||||
timePickerValue.value.end = { hour, minute }
|
||||
}
|
||||
},
|
||||
|
||||
// 重置时间
|
||||
handleResetTime: () => {
|
||||
time.value = {
|
||||
start: '08:00',
|
||||
end: '20:00'
|
||||
}
|
||||
},
|
||||
|
||||
// 保存
|
||||
handleSave: () => {
|
||||
// TODO: 实现保存逻辑
|
||||
console.log('保存工作时间:', {
|
||||
workdays: workdays.value,
|
||||
workHours: workHours.value,
|
||||
})
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success',
|
||||
})
|
||||
setTimeout(() => {
|
||||
router.navigateBack()
|
||||
}, 1500)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
// .content-wrapper {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-wrapper {
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.workday-picker-popup {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.picker-header {
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.workday-grid {
|
||||
.workday-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.time-picker-popup {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.time-tabs {
|
||||
.time-tab {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-picker-wrapper {
|
||||
height: 400rpx;
|
||||
position: relative;
|
||||
|
||||
.time-picker-view {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.time-picker-item {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.time-picker-actions {
|
||||
.reset-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1057
src/pages/order/detail.vue
Normal file
1057
src/pages/order/detail.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user