完善页面
This commit is contained in:
wangxiaowei
@ -124,7 +124,7 @@ export default defineManifestConfig({
|
||||
es6: true,
|
||||
minified: true,
|
||||
},
|
||||
requiredPrivateInfos: ["getLocation" ],
|
||||
requiredPrivateInfos: ["getLocation", "chooseLocation"],
|
||||
optimization: {
|
||||
subPackages: true,
|
||||
},
|
||||
|
||||
269
src/bundle/address/add.vue
Normal file
269
src/bundle/address/add.vue
Normal file
@ -0,0 +1,269 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 消息弹窗 -->
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
|
||||
<navbar title="新增地址" :leftArrow="false" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
|
||||
<view class="bg-white mx-32rpx rounded-16rpx px-42rpx py-34rpx mt-32rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="text-30rpx leading-42rpx text-[#303133] w-200rpx">选择地区</view>
|
||||
<wd-picker :columns="cityColumns" v-model="form.city" use-default-slot>
|
||||
<view class="flex items-center">
|
||||
<wd-input readonly v-model="form.city" size="large" placeholder="请选择地区" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</wd-picker>
|
||||
</view>
|
||||
|
||||
<view class="h-2rpx bg-#F2F2F2 mt-20rpx"></view>
|
||||
|
||||
<view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-30rpx leading-42rpx text-#303133 w-200rpx">地址</view>
|
||||
<view @click="Add.handleChooseLocation" class="flex items-center">
|
||||
<wd-input readonly v-model="form.address" size="large" placeholder="请选择地址" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed bottom-70rpx left-0 right-0">
|
||||
<view
|
||||
v-if="addressId === 0"
|
||||
class="bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx"
|
||||
@click="Add.handleAddAddress">
|
||||
确定
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-between mx-30rpx" v-if="addressId > 0">
|
||||
<view class="w-330rpx h-90rpx leading-90rpx text-center bg-[#F6F7F8] text-#303133 rounded-8rpx mr-30rpx" @click="Add.handleDeleteAddress">删除地址</view>
|
||||
<view class="w-330rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] text-#FFFFFF rounded-8rpx" @click="Add.handleAddAddress">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import { useColPickerData } from '@/hooks/useColPickerData'
|
||||
// import { addUserAddress, IAddUserAddressParams, deleteUserAddress, userAddressDetails, editUserAddress } from '@/api/user'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { mobile } from '@/utils/test'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 弹出框
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
// 获取已开通城市
|
||||
const cityColumns = ref<Array<{ label: string; value: string }>>([
|
||||
{ label: '北京市', value: '110000' },
|
||||
{ label: '上海市', value: '310000' },
|
||||
{ label: '广州市', value: '440100' },
|
||||
{ label: '深圳市', value: '440300' },
|
||||
])
|
||||
|
||||
// 页面标题
|
||||
const title = ref<string>('新增地址')
|
||||
|
||||
// 地址id
|
||||
const addressId = ref<number>(0)
|
||||
|
||||
// 表单信息
|
||||
const form = ref({
|
||||
city: '',
|
||||
address: '',
|
||||
id: 0
|
||||
})
|
||||
|
||||
|
||||
onLoad((args) => {
|
||||
if (args.id) {
|
||||
// 编辑地址
|
||||
title.value = '修改地址'
|
||||
addressId.value = Number(args.id)
|
||||
// Add.handleGetAddressDetails()
|
||||
}
|
||||
})
|
||||
|
||||
const Add = {
|
||||
// // 确认省市区
|
||||
// handleConfirmAddress: (e) => {
|
||||
// form.province = e.selectedItems[0]?.label || ''
|
||||
// form.province_id = Number(e.selectedItems[0]?.value) || 0
|
||||
// form.city = e.selectedItems[1]?.label || ''
|
||||
// form.city_id = Number(e.selectedItems[1]?.value) || 0
|
||||
// form.district = e.selectedItems[2]?.label || ''
|
||||
// form.district_id = Number(e.selectedItems[2]?.value) || 0
|
||||
// },
|
||||
|
||||
// // 获取地址详情
|
||||
// handleGetAddressDetails: async () => {
|
||||
// const res = await userAddressDetails({
|
||||
// id: addressId.value
|
||||
// })
|
||||
// form.contact = res.address_details.contact
|
||||
// form.telephone = res.address_details.telephone
|
||||
// form.province = res.address_details.province
|
||||
// form.province_id = res.address_details.province_id
|
||||
// console.log("🚀 ~ form.province_id :", form.province_id )
|
||||
// form.city = res.address_details.city
|
||||
// form.city_id = res.address_details.city_id
|
||||
// form.district = res.address_details.district
|
||||
// form.district_id = res.address_details.district_id
|
||||
// form.address = res.address_details.address
|
||||
// form.is_default = res.address_details.is_default
|
||||
// isDefaultAddress.value = res.address_details.is_default === 1 ? true : false
|
||||
// address.value = [
|
||||
// String(res.address_details.province_id),
|
||||
// String(res.address_details.city_id),
|
||||
// String(res.address_details.district_id)
|
||||
// ]
|
||||
// console.log("🚀 ~ address.value:", address.value)
|
||||
// },
|
||||
|
||||
// // 删除地址
|
||||
// handleDeleteAddress: async () => {
|
||||
// console.log("🚀 ~ 删除地址:", message)
|
||||
|
||||
// message.confirm({
|
||||
// title: '删除地址',
|
||||
// msg: '确定要删除该地址吗？',
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// cancelButtonProps: {
|
||||
// customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
// },
|
||||
// confirmButtonProps: {
|
||||
// customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
// }
|
||||
// }).then(async (res) => {
|
||||
// // 点击确认按钮回调事件
|
||||
// await deleteUserAddress({
|
||||
// id: addressId.value
|
||||
// })
|
||||
// toast.info('删除成功')
|
||||
// uni.$emit('refreshAddressList')
|
||||
// router.navigateBack(500)
|
||||
// }).catch((res) => {
|
||||
// console.log("🚀 ~ res2:", res)
|
||||
// // 点击取消按钮回调事件
|
||||
// })
|
||||
|
||||
// },
|
||||
|
||||
/**
|
||||
* 选择地址
|
||||
*/
|
||||
handleChooseLocation: async () => {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
// res.address: "浙江省嘉兴市南湖区景宜路"
|
||||
// res.name: "嘉兴市南湖区人民政府(景宜路西)"
|
||||
// res.latitude: 30.74744
|
||||
// res.longitude: 120.78483
|
||||
form.value.address = res.address + res.name
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("🚀 ~ err:", err)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加地址
|
||||
*/
|
||||
handleAddAddress: async () => {
|
||||
// if (!form.address) {
|
||||
// toast.info('请填写地址信息')
|
||||
// return
|
||||
// }
|
||||
|
||||
// // form.is_default = isDefaultAddress.value ? 1 : 0
|
||||
|
||||
// if (addressId.value > 0 ) {
|
||||
// // 编辑地址
|
||||
// form.id = addressId.value
|
||||
// // await editUserAddress(form)
|
||||
// } else {
|
||||
// // await addUserAddress(form)
|
||||
// }
|
||||
|
||||
// uni.$emit('refreshAddressList')
|
||||
// router.navigateBack(500)
|
||||
}
|
||||
// // 添加地址
|
||||
// handleAddAddress: async () => {
|
||||
// if (!form.contact) {
|
||||
// toast.info('请填写联系人')
|
||||
// return
|
||||
// }
|
||||
|
||||
// if (!mobile(form.telephone)) {
|
||||
// toast.info('请填写正确手机号格式')
|
||||
// return
|
||||
// }
|
||||
|
||||
// if (!form.province || !form.city || !form.district) {
|
||||
// toast.info('请选择省市区')
|
||||
// return
|
||||
// }
|
||||
|
||||
// if (!form.address) {
|
||||
// toast.info('请填写具体地址')
|
||||
// return
|
||||
// }
|
||||
|
||||
// form.is_default = isDefaultAddress.value ? 1 : 0
|
||||
|
||||
// if (addressId.value > 0 ) {
|
||||
// // 编辑地址
|
||||
// form.id = addressId.value
|
||||
// await editUserAddress(form)
|
||||
// } else {
|
||||
// await addUserAddress(form)
|
||||
// }
|
||||
|
||||
// uni.$emit('refreshAddressList')
|
||||
// router.navigateBack(500)
|
||||
// },
|
||||
|
||||
// handleSleep: async (second: number = 1) => {
|
||||
// return new Promise((resolve) => {
|
||||
// setTimeout(() => {
|
||||
// resolve(true)
|
||||
// }, 1000 * second)
|
||||
// })
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.add-address {
|
||||
:deep() {
|
||||
.wd-cell {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
223
src/bundle/address/list.vue
Normal file
223
src/bundle/address/list.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 消息弹窗 -->
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
|
||||
<view>
|
||||
<navbar title="地址簿" custom-class='!bg-[#F6F7F8]' :leftArrow="false"></navbar>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<!-- 地址为空显示 -->
|
||||
<view class="text-center" v-if="addressList.length === 0">
|
||||
<view class="mt-318rpx">
|
||||
<wd-img width="260rpx" height='260rpx' :src="`${OSS}icon/icon_address_empty.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#8A94A3] mt-18rpx">还没有地址，请尽快新建地址</view>
|
||||
</view>
|
||||
|
||||
<!-- <wd-radio-group v-model="addressId" shape="button" >
|
||||
<wd-radio :value="1">沃特</wd-radio>
|
||||
<wd-radio :value="2">商家后台</wd-radio>
|
||||
</wd-radio-group> -->
|
||||
|
||||
<!-- 地址列表 -->
|
||||
<!-- <view class="mx-30rpx mt-20rpx" v-if="addressList.length > 0">
|
||||
<view class="bg-#fff rounded-16rpx px-30rpx py-36rpx flex items-center mb-20rpx" v-for="(item, index) in addressList" :key="index">
|
||||
<view @click="List.handleChooseAddress(item)">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-10rpx">
|
||||
<wd-tag color="#4C9F44" bg-color="#F3F3F3" custom-class="!rounded-4rpx !px-10rpx" v-if="item.is_default">默认</wd-tag>
|
||||
</view>
|
||||
<view class="text-30rpx leading-42rpx text-#303133">
|
||||
<text class="mr-16rpx">{{ item.contact}}</text>
|
||||
<text>{{ item.telephone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-562rpx line-1 text-26rpx leading-34rpx text-#909399 mt-10rpx">{{ item.address }}</view>
|
||||
</view>
|
||||
<view class="flex-1 ml-30rpx" @click="List.handleEditAddress(item.id)">
|
||||
<wd-icon name="edit-outline" size="32rpx" color="#666666"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="mx-30rpx mt-38rpx address-radio">
|
||||
<wd-radio-group v-model="addressId" shape="dot" >
|
||||
<view class="bg-white rounded-16rpx px-40rpx py-30rpx mb-20rpx" v-for="item in addressList" :key="item.id">
|
||||
<view class="">
|
||||
<wd-radio :value="item.id" checked-color="#4C9F44">
|
||||
<view class="flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_location5.png`" width="40rpx" height="40rpx"></wd-img>
|
||||
<view class="ml-16rpx text-30rpx leading-42rpx text-[#303133]">位置1</view>
|
||||
</view>
|
||||
</wd-radio>
|
||||
</view>
|
||||
<view class="line-2 text-26rpx leading-34rpx text-[#606266] mt-16rpx">
|
||||
北京市海淀区恒大新宏福苑西区20号楼2单元301
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-end mt-24rpx text-26rpx leading-34rpx text-[##303133]">
|
||||
<view class="w-112rpx h-48rpx bg-[#F6F7F8] text-center leading-48rpx mr-12rpx" @click="List.handleDeleteAddress(item.id)">删除</view>
|
||||
<view class="w-112rpx h-48rpx bg-[#F6F7F8] text-center leading-48rpx" @click="List.handleEditAddress(item.id)">修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view
|
||||
v-if="addressList.length == 0"
|
||||
class="fixed bottom-70rpx left-0 right-0 bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx"
|
||||
@click="router.navigateTo('/bundle/address/add')">新建地址</view> -->
|
||||
|
||||
<view
|
||||
class="bg-white fixed left-0 right-0 bottom-0 h-152rpx flex items-center px-30rpx"
|
||||
@click="router.navigateTo('/bundle/address/add')">
|
||||
|
||||
<view v-if="addressList.length == 0" class="w-630rpx bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx">新建地址</view>
|
||||
<view class="flex items-center justify-between w-full" v-if="addressList.length > 0">
|
||||
<view class="w-330rpx bg-[#F6F7F8] text-[#303133] h-90rpx text-center leading-90rpx rounded-8rpx" @click="router.navigateTo('/bundle/address/add')">新建地址</view>
|
||||
<view class="w-330rpx bg-[#4C9F44] text-[#FFFFFF] h-90rpx text-center leading-90rpx rounded-8rpx" @click="List.handleUpdateLocation">位置更新</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// import { getUserAddress } from '@/api/user'
|
||||
import type { IUserAddressListResult } from '@/api/types/user'
|
||||
import { router } from '@/utils/tools'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const from = ref<string>('')
|
||||
|
||||
// 弹出框
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
// 地址列表
|
||||
// const addressList = ref<IUserAddressListResult[]>([])
|
||||
|
||||
// 选中的地址ID
|
||||
const addressId = ref<number>(0)
|
||||
|
||||
const addressList = ref<Array<{id:number, address: string}>>([
|
||||
{
|
||||
id: 1,
|
||||
address: '浙江省杭州市西湖区文三路138号',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
address: '浙江省杭州市西湖区文三路138号',
|
||||
}
|
||||
])
|
||||
|
||||
onLoad((args) => {
|
||||
if (args.from) {
|
||||
from.value = args.from as string
|
||||
}
|
||||
|
||||
// 监听地址列表刷新
|
||||
uni.$on('refreshAddressList', () => {
|
||||
List.handleInit()
|
||||
})
|
||||
|
||||
// 初始化地址列表
|
||||
List.handleInit()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('refreshAddressList')
|
||||
})
|
||||
|
||||
const List = {
|
||||
/**
|
||||
* 初始化地址列表
|
||||
*/
|
||||
handleInit: async () => {
|
||||
const res = await getUserAddress()
|
||||
addressList.value = Array.isArray(res) ? res : []
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑地址
|
||||
* @param id 地址ID
|
||||
*/
|
||||
handleEditAddress: (id: number) => {
|
||||
router.navigateTo(`/bundle_b/pages/tea-specialist/address/add?id=${id}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择地址
|
||||
* @param item 地址内容
|
||||
*/
|
||||
handleChooseAddress(item: IUserAddressListResult) {
|
||||
if (from.value === 'reserve') {
|
||||
uni.$emit('chooseAddress', item)
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除地址
|
||||
*/
|
||||
handleDeleteAddress: (id: number) => {
|
||||
message.confirm({
|
||||
title: '删除地址',
|
||||
msg: '确定要删除该地址吗？',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
cancelButtonProps: {
|
||||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
},
|
||||
confirmButtonProps: {
|
||||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
}
|
||||
}).then(async (res) => {
|
||||
// // 点击确认按钮回调事件
|
||||
// await deleteUserAddress({
|
||||
// id: addressId.value
|
||||
// })
|
||||
// toast.info('删除成功')
|
||||
// uni.$emit('refreshAddressList')
|
||||
// router.navigateBack(500)
|
||||
}).catch((res) => {
|
||||
console.log("🚀 ~ res2:", res)
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新位置
|
||||
*/
|
||||
handleUpdateLocation: () => {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.address-radio {
|
||||
:deep() {
|
||||
.wd-radio-group {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -9,43 +9,127 @@
|
||||
<template>
|
||||
<view class="home-bg pb-80rpx">
|
||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||
<wd-navbar left-arrow safeAreaInsetTop title="财务管理" :bordered="false" custom-style="background-color: transparent !important;" @click-left="router.navigateBack()"></wd-navbar>
|
||||
<navbar title="收入统计" custom-class="!bg-[transparent]"></navbar>
|
||||
</view>
|
||||
|
||||
<view :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<view class="relative mx-30rpx mt-16rpx">
|
||||
<wd-img width="692rpx" height="334rpx" :src="`${OSS}images/store/finance/image1.png`" mode="aspectFit" />
|
||||
<wd-img width="692rpx" height="592rpx" :src="`${OSS}images/chayishi/finance_image1.png`"/>
|
||||
|
||||
<!-- 时间选择 -->
|
||||
<view class="absolute top-50rpx left-40rpx">
|
||||
<view class="font-400 text-26rpx text-[#B4CEFF] leading-36rpx">经营资产</view>
|
||||
<view class="mt-20rpx font-bold text-36rpx text-[#fff] leading-34rpx">{{ userFinance.total_amount }}</view>
|
||||
<view class="font-400 text-28rpx leading-40rpx text-[#fff]">本期时间</view>
|
||||
<view class="font-bold text-[#fff] datetime-picker">
|
||||
<wd-datetime-picker
|
||||
custom-value-class="!text-[#fff]"
|
||||
v-model="value"
|
||||
:maxDate="Date.now()"
|
||||
type="year-month"
|
||||
@confirm="Finance.handleConfirmDate">
|
||||
</wd-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-around w-100% absolute bottom-40rpx left-0 px-40rpx">
|
||||
<view class="flex items-center justify-around w-100% absolute top-238rpx left-0 px-40rpx">
|
||||
<view class="flex flex-col items-center justify-start">
|
||||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">已提现</view>
|
||||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-14rpx">{{ userFinance.total_reflect_amount }}</view>
|
||||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">本期业绩（元）</view>
|
||||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-14rpx">123</view>
|
||||
</view>
|
||||
<view class="h-98rpx">
|
||||
<wd-divider vertical color="#EAEEF2" custom-class="!h-98rpx"></wd-divider>
|
||||
</view>
|
||||
<view class="flex flex-col items-center justify-start">
|
||||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">待提现</view>
|
||||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-14rpx">{{ userFinance.balance }}</view>
|
||||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">本期收入(元）</view>
|
||||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-14rpx">345</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-2rpx bg-[#EAEEF2] w-647rpx absolute top-368rpx" style="left: 50%; transform:translateX(-50%)"></view>
|
||||
<view class="absolute top-388rpx">
|
||||
<view class="mx-36rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_pay.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<view class="font-bold text-28rpx leading-40rpx text-[#303133] mx-14rpx">实际收入</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-[#909399]">已扣除平台服务费</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-around w-674rpx mt-28rpx">
|
||||
<!-- 服务费 -->
|
||||
<view class="flex items-center">
|
||||
<view class="w-120rpx text-center">
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#303133]">500.00</view>
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#606266] mt-12rpx">服务费</view>
|
||||
</view>
|
||||
<view class="h-98rpx">
|
||||
<wd-divider vertical color="#EAEEF2" custom-class="!h-98rpx"></wd-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 车马费 -->
|
||||
<view class="flex items-center">
|
||||
<view class="w-120rpx text-center">
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#303133]">500.00</view>
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#606266] mt-12rpx">车马费</view>
|
||||
</view>
|
||||
<view class="h-98rpx">
|
||||
<wd-divider vertical color="#EAEEF2" custom-class="!h-98rpx"></wd-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 茶叶 -->
|
||||
<view class="flex items-center">
|
||||
<view class="w-120rpx text-center">
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#303133]">500.00</view>
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#606266] mt-12rpx">茶叶</view>
|
||||
</view>
|
||||
<view class="h-98rpx">
|
||||
<wd-divider vertical color="#EAEEF2" custom-class="!h-98rpx"></wd-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 打赏 -->
|
||||
<view class="flex items-center">
|
||||
<view class="w-120rpx text-center">
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#303133]">500.00</view>
|
||||
<view class="font-400 text-28rpx leading-34rpx text-[#606266] mt-12rpx">打赏</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 业绩明细表格 -->
|
||||
<view class="mt-30rpx">
|
||||
<view class="overflow-x-auto">
|
||||
<view class="min-w-[800rpx]">
|
||||
<!-- 表头 -->
|
||||
<view class="flex items-center rounded-t-12rpx" style="background: #EEEFF0;">
|
||||
<view class="flex-1 text-center py-18rpx text-26rpx font-bold w-120rpx">日期</view>
|
||||
<view class="flex-1 text-center py-18rpx text-26rpx font-bold">业绩</view>
|
||||
<view class="flex-1 text-center py-18rpx text-26rpx font-bold">服务费</view>
|
||||
<view class="flex-1 text-center py-18rpx text-26rpx font-bold">车马费</view>
|
||||
<view class="flex-1 text-center py-18rpx text-26rpx font-bold">茶叶</view>
|
||||
<view class="flex-1 text-center py-18rpx text-26rpx font-bold">打赏</view>
|
||||
</view>
|
||||
<!-- 示例数据行，可替换为v-for渲染 -->
|
||||
<view class="flex items-center border-b border-[#EEEFF0] bg-[#fff]" v-for="(item, idx) in 31" :key="idx">
|
||||
<view class="flex-1 text-center py-16rpx font-400 text-24rpx leading-36rpx border-r border-[#EEEFF0] text-[#303133]">2025-12-{{ idx+7 }}</view>
|
||||
<view class="flex-1 text-center py-16rpx font-400 text-24rpx leading-36rpx border-r border-[#EEEFF0] text-[#303133]">1000</view>
|
||||
<view class="flex-1 text-center py-16rpx font-400 text-24rpx leading-36rpx border-r border-[#EEEFF0] text-[#303133]">160</view>
|
||||
<view class="flex-1 text-center py-16rpx font-400 text-24rpx leading-36rpx border-r border-[#EEEFF0] text-[#303133]">30</view>
|
||||
<view class="flex-1 text-center py-16rpx font-400 text-24rpx leading-36rpx border-r border-[#EEEFF0] text-[#303133]">50</view>
|
||||
<view class="flex-1 text-center py-16rpx font-400 text-24rpx leading-36rpx">20</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="font-bold text-[#303133] datetime-picker">
|
||||
<wd-datetime-picker v-model="value" :maxDate="Date.now()" type="year-month" @confirm="Finance.handleConfirmDate"></wd-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-24rpx text-[#606266] leading-34rpx">
|
||||
收入￥{{ allPrice }}
|
||||
</view>
|
||||
|
||||
<!-- <view class="mx-30rpx">
|
||||
<view class="mt-20rpx">
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Finance.upCallback" :down="downOption" :up="upOption">
|
||||
<view class="bg-white rounded-16rpx px-16rpx py-28rpx mb-20rpx" v-for="item in list" :key="item.id" @click="router.navigateTo(`/bundle/finance/detail?id=${item.id}`)">
|
||||
@ -71,7 +155,7 @@
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -178,8 +262,14 @@
|
||||
.datetime-picker {
|
||||
:deep() {
|
||||
.wd-cell {
|
||||
padding-left: 0 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wd-datetime-picker__arrow {
|
||||
margin-top: 2rpx !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
104
src/bundle/notice/notice.vue
Normal file
104
src/bundle/notice/notice.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "消息",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="mt-24rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="Notice.upCallback" :up="upOption" fixed>
|
||||
<view class="mx-32rpx flex items-center justify-between">
|
||||
<view class="">
|
||||
<wd-img :src="`${OSS}icon/icon_notice.png`" width="72rpx" height="72rpx"></wd-img>
|
||||
</view>
|
||||
|
||||
<view class="flex-1 ml-20rpx">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="font-bold text-28rpx leading-48rpx text-[#171717]">上线邀约</view>
|
||||
<view class="font-400 text-24rpx leading-40rpx text-[#606266]">今天 08:22</view>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-26rpx leading-40rpx text-[#606266] mt-10rpx">
|
||||
[客户昵称]正向您发出上线邀约！要接收订单，请先将状态切换至「上班中」！
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useStoreStore } from '@/store'
|
||||
import { switchStore } from '@/api/store'
|
||||
import { router } from '@/utils/tools'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 读取仓库
|
||||
const useStore = useStoreStore()
|
||||
|
||||
// 店铺列表
|
||||
const storeList = ref<Array<any>>([])
|
||||
|
||||
// mescroll
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
empty: {
|
||||
icon : OSS + 'icon/icon_reserver_empty.png',
|
||||
tip: '暂无预约信息',
|
||||
},
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const orderStatus = ref<string>('')
|
||||
const list = ref<Array<any>>([]) // 茶室列表
|
||||
const keywords = ref<string>('') // 搜索关键词
|
||||
|
||||
onShow(async () => {
|
||||
// 获取店铺列表
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
console.log("🚀 ~ useStore.defaultStore:", useStore.defaultStore)
|
||||
})
|
||||
|
||||
const Notice = {
|
||||
/**
|
||||
* 筛选表
|
||||
*/
|
||||
upCallback: (mescroll) => {
|
||||
// const filter = {
|
||||
// level_id: selectedLevel.value.join(',') || '0',
|
||||
// page: mescroll.num,
|
||||
// size: mescroll.size,
|
||||
// latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
|
||||
// longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
|
||||
// search: keywords.value
|
||||
// }
|
||||
|
||||
// getTeaSpecialist(filter).then((res: ITeaSpecialistResult) => {
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
||||
// list.value = list.value.concat(curPageData) //追加新数据
|
||||
// mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
||||
// }).catch(() => {
|
||||
mescroll.endErr() // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -30,7 +30,7 @@
|
||||
</view>
|
||||
|
||||
<view class="mt-36rpx mx-30rpx">
|
||||
<view class="flex items-center justify-between" @click="router.navigateTo('/bundle/profile/profile')">
|
||||
<view class="flex items-center justify-between" @click="router.navigateTo('/pages/my/profile-display')">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="96rpx" height="96rpx" :src="`${OSS}icon/icon_info2.png`"></wd-img>
|
||||
<view class="font-400 text-30rpx text-[#171717] leading-48rpx ml-24rpx">个人信息</view>
|
||||
|
||||
@ -7,6 +7,9 @@
|
||||
|
||||
<template>
|
||||
<view class="pb-30rpx">
|
||||
<!-- 消息提示框 -->
|
||||
<wd-message-box selector="wd-message-box-slot" />
|
||||
|
||||
<view class="order-list">
|
||||
<navbar layoutLeft custom-class='!bg-[#F6F7F8]'>
|
||||
<template #left>
|
||||
@ -31,8 +34,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-70rpx ml-68rpx mr-60rpx">
|
||||
<view class="font-400 text-28rpx leading-40rpx text-[#303133]">余额</view>
|
||||
<view class="mt-20rpx ml-68rpx mr-60rpx">
|
||||
<view class="flex items-center justify-end" @click="Wallet.handleShowPrompt">
|
||||
<view class="font-400 text-26rpx leading-36rpx text-[#909399] mr-16rpx">不可提现金额200</view>
|
||||
<view class="">
|
||||
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_prompt.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-40rpx text-[#303133]">可提现金额</view>
|
||||
<view class="flex justify-between items-center mt-24rpx">
|
||||
<view>
|
||||
<price-format color="#000" :first-size="48" :second-size="48" :subscript-size="28" :price="userStore.userMoney"></price-format>
|
||||
@ -118,11 +127,13 @@
|
||||
import type { IUserResult } from '@/api/types/user'
|
||||
import { getUserInfo, getUserTransactionDetails } from '@/api/user'
|
||||
import { router } from '@/utils/tools'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 用户信息相关
|
||||
// 消息提示框
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
/* mescroll */
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
@ -219,6 +230,20 @@
|
||||
4: '团购核销'
|
||||
}
|
||||
return typeMap[type] || '其他'
|
||||
},
|
||||
|
||||
/**
|
||||
* 不可提现金额提示
|
||||
*/
|
||||
handleShowPrompt: () => {
|
||||
message.alert({
|
||||
title: '温馨提示',
|
||||
msg: '为保障您与平台的合作权益，我们将暂扣200元作为合作押金，感谢您的理解与支持。',
|
||||
confirmButtonText: '我知道了',
|
||||
confirmButtonProps: {
|
||||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -91,7 +91,8 @@
|
||||
},
|
||||
"usingComponents": true,
|
||||
"requiredPrivateInfos": [
|
||||
"getLocation"
|
||||
"getLocation",
|
||||
"chooseLocation"
|
||||
],
|
||||
"optimization": {
|
||||
"subPackages": true
|
||||
|
||||
@ -7,14 +7,12 @@
|
||||
|
||||
<template>
|
||||
<view class="login-bg">
|
||||
<!-- <view class="login-bg w-[100%] fixed top-0 left-0 z-100"> -->
|
||||
<wd-navbar safeAreaInsetTop :bordered="false"
|
||||
custom-style="background-color: transparent !important;"></wd-navbar>
|
||||
<!-- </view> -->
|
||||
<view class="px-68rpx">
|
||||
<view class="font-bold text-44rpx text-[#333333] leading-60rpx">你好，欢迎使用</view>
|
||||
<view class="font-bold text-44rpx text-[#333333] leading-60rpx mt-18rpx">茶址管理平台</view>
|
||||
<view class="mt-18rpx font-400 text-26rpx text-[#606266] leading-40rpx w-354rpx">此小程序仅供企业内部员工登录，请凭管理员账号密码登录
|
||||
<view class="font-bold text-44rpx text-[#333333] leading-60rpx mt-18rpx">茶艺师平台</view>
|
||||
<view class="mt-18rpx font-400 text-26rpx text-[#606266] leading-40rpx w-354rpx">此小程序仅供企业内部员工登录，请凭茶艺师账号密码登录
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -132,7 +130,7 @@
|
||||
|
||||
.login-bg {
|
||||
background-color: #fff;
|
||||
background-image: url(#{$OSS}images/store/login/image1.png);
|
||||
background-image: url(#{$OSS}images/chayishi/login_image1.png);
|
||||
background-size: 100% 420rpx;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@ -1,349 +0,0 @@
|
||||
<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>
|
||||
@ -7,36 +7,38 @@
|
||||
|
||||
|
||||
<template>
|
||||
<view class="page-container pb-100rpx">
|
||||
<!-- 顶部背景区域 -->
|
||||
<view class="top-bg fixed left-0 top-0 w-[100%]"
|
||||
:style="{ backgroundImage: `url('${OSS}images/chayishi/profile_bg.png')` }">
|
||||
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex items-center">
|
||||
<!-- 消息图标（带红点） -->
|
||||
<view class="nav-icon-item relative mr-24rpx" @click="My.handleToMessage">
|
||||
<wd-img :src="`${OSS}icon/icon_notify.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<view class="message-dot absolute right-6rpx top-10rpx h-16rpx w-16rpx border-2rpx border-[#fff] rounded-full border-solid bg-[#FF0000]" />
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
消息
|
||||
</text>
|
||||
</view>
|
||||
<!-- 设置图标 -->
|
||||
<view class="nav-icon-item relative mr-24rpx" @click="My.handleToSettings">
|
||||
<wd-img :src="`${OSS}icon/icon_setting.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
设置
|
||||
</text>
|
||||
</view>
|
||||
<view class="page-container pb-120rpx">
|
||||
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;" fixed>
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex items-center">
|
||||
<!-- 消息图标（带红点） -->
|
||||
<view class="nav-icon-item relative mr-30rpx" @click="router.navigateTo('/bundle/notice/notice')">
|
||||
<wd-img :src="`${OSS}icon/icon_notify.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<view class="message-dot absolute right-6rpx top-10rpx h-16rpx w-16rpx border-2rpx border-[#fff] rounded-full border-solid bg-[#FF0000]" />
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
消息
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<!-- 设置图标 -->
|
||||
<view class="nav-icon-item relative mr-24rpx" @click="router.navigateTo('/bundle/store/setting')">
|
||||
<wd-img :src="`${OSS}icon/icon_setting.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<text
|
||||
class="icon-label text-20rpx text-[#606266] top-20rpx">
|
||||
设置
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<!-- 顶部背景区域 -->
|
||||
<view class="top-bg fixed left-0 top-0 w-[100%] h-500rpx"
|
||||
:style="{ backgroundImage: `url('${OSS}images/chayishi/profile_bg.png')` }">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: `${navbarHeight}px` }">
|
||||
@ -49,7 +51,7 @@
|
||||
mode="aspectFill" round />
|
||||
</view>
|
||||
<!-- 昵称和账号 -->
|
||||
<view class="ml-22rpx flex-1" @click="My.handleToProfile">
|
||||
<view class="ml-22rpx flex-1" @click="router.navigateTo('/bundle/profile/profile')">
|
||||
<view class="flex items-center">
|
||||
<text class="nickname text-36rpx text-[#303133] font-bold leading-50rpx">Jasmine</text>
|
||||
<view>
|
||||
@ -75,7 +77,7 @@
|
||||
</view>
|
||||
<!-- 提现按钮 -->
|
||||
<view class="withdraw-btn mt-8rpx rounded-8rpx bg-[#FF0000] px-24rpx py-6rpx"
|
||||
@click="My.handleToWithdraw">
|
||||
@click="router.navigateTo('/bundle/wallet/wallet')">
|
||||
<text class="text-24rpx text-[#fff] font-medium">去提现</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -153,6 +155,17 @@
|
||||
<view class="schedule-item flex items-start">
|
||||
<text class="label-text w-140rpx pt-4rpx text-24rpx text-[#606266] leading-40rpx">住址:</text>
|
||||
<text class="flex-1 text-24rpx text-[#303133] leading-40rpx">上海浦东新区新金桥路58号新银东大厦15楼F室</text>
|
||||
</view>
|
||||
<!-- 上下班状态 -->
|
||||
<view class="schedule-item flex items-center mt-20rpx">
|
||||
<view class="label-text w-140rpx pt-4rpx text-24rpx text-[#606266] leading-40rpx">上下班:</view>
|
||||
<view class="flex items-center">
|
||||
<view class="mt-20rpx">
|
||||
<wd-switch v-model="isWork" size="32rpx" active-color="#4C9F44"/>
|
||||
</view>
|
||||
<view class="text-28rpx text-[#606266] mt-6rpx font-bold ml-10rpx">{{ isWork ? '上班中' : '已下班' }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -185,7 +198,7 @@
|
||||
<text class="text-24rpx text-[#303133] leading-34rpx">工作时间</text>
|
||||
</view>
|
||||
<!-- 位置更新 -->
|
||||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('location')">
|
||||
<view class="service-item flex flex-col items-center" @click="router.navigateTo('/bundle/address/list')">
|
||||
<view
|
||||
class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
|
||||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/location_update.png`" />
|
||||
@ -193,7 +206,7 @@
|
||||
<text class="text-24rpx text-[#303133] leading-34rpx">位置更新</text>
|
||||
</view>
|
||||
<!-- 收入统计 -->
|
||||
<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('income')">
|
||||
<view class="service-item flex flex-col items-center" @click="router.navigateTo('/bundle/finance/finance')">
|
||||
<view
|
||||
class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
|
||||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/income.png`" />
|
||||
@ -246,6 +259,9 @@ const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 上下班切换
|
||||
const isWork = ref<boolean>(true)
|
||||
|
||||
// 模拟是否有个人信息（静态页面，后续可以替换为实际的API判断）
|
||||
const hasProfileInfo = ref(true) // 改为 false 可以测试跳转到填写页面
|
||||
|
||||
@ -380,6 +396,7 @@ page {
|
||||
.wallet-amounts {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.coin-decoration {
|
||||
|
||||
@ -8,28 +8,16 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部背景区域 -->
|
||||
<view class="top-bg fixed left-0 top-0 w-[100%]"
|
||||
<wd-navbar safe-area-inset-top :bordered="false" :zIndex="20" fixed custom-style="background: transparent !important;">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" @click.stop="Profile.handleBack">
|
||||
<wd-img :src="`${OSS}icon/icon_arrow_left2.png`" width="48rpx" height="48rpx"></wd-img>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<view class="top-bg fixed left-0 top-0 w-[100%] h-416rpx"
|
||||
: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` }">
|
||||
@ -159,6 +147,7 @@
|
||||
const Profile = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
console.log("🚀 ~ Profile.handleBack:", 213)
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
@ -195,55 +184,55 @@ page {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
// .content-wrapper {
|
||||
// // position: relative;
|
||||
// // z-index: 10;
|
||||
// }
|
||||
|
||||
.right-slot {
|
||||
padding-right: v-bind(rightPadding);
|
||||
// .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;
|
||||
}
|
||||
}
|
||||
// .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);
|
||||
}
|
||||
// .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);
|
||||
}
|
||||
// .modify-btn {
|
||||
// box-shadow: 0 4rpx 8rpx rgba(255, 0, 0, 0.2);
|
||||
// }
|
||||
|
||||
.info-grid {
|
||||
.info-item {
|
||||
.label-text {
|
||||
display: block;
|
||||
}
|
||||
// .info-grid {
|
||||
// .info-item {
|
||||
// .label-text {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.value-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .value-text {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.photo-grid {
|
||||
.photo-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// .photo-grid {
|
||||
// .photo-item {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
|
||||
.interest-text {
|
||||
line-height: 1.6;
|
||||
}
|
||||
// .interest-text {
|
||||
// line-height: 1.6;
|
||||
// }
|
||||
|
||||
.cost-item {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
// .cost-item {
|
||||
// padding: 12rpx 0;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -1,331 +0,0 @@
|
||||
<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>
|
||||
@ -1,11 +1,98 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 导航栏 -->
|
||||
<navbar title="行程记录" custom-class="!bg-[#f5f7fa]"></navbar>
|
||||
<!-- <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">
|
||||
<!-- 按日期分组的行程记录 -->
|
||||
<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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
@ -16,236 +103,149 @@ 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 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: '待服务',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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()
|
||||
},
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 点击预约单
|
||||
handleAppointmentClick: (appointment: any) => {
|
||||
// TODO: 跳转到预约单详情
|
||||
console.log('点击预约单:', appointment)
|
||||
},
|
||||
// 点击预约单
|
||||
handleAppointmentClick: (appointment: any) => {
|
||||
// TODO: 跳转到预约单详情
|
||||
console.log('点击预约单:', appointment)
|
||||
},
|
||||
|
||||
// 点击操作按钮
|
||||
handleActionClick: (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;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.right-slot {
|
||||
padding-right: v-bind(rightPadding);
|
||||
padding-right: v-bind(rightPadding);
|
||||
|
||||
.nav-icon-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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);
|
||||
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);
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-weight: 500;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.appointment-header {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,203 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="page-container pb-10rpx">
|
||||
<!-- 导航栏 -->
|
||||
<navbar :title="pageStatus === 'view' ? '资料信息' : pageStatus === 'edit' ? '资料修改' : '上传资料'" custom-class="!bg-[#f5f7fa]"></navbar>
|
||||
|
||||
<view class="content-wrapper">
|
||||
<!-- 申请中状态 -->
|
||||
<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="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="UploadData.handleSubmit">
|
||||
<text class="text-32rpx text-[#fff] font-bold">提交</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
@ -16,346 +208,151 @@ const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 页面状态：'add' | 'edit' | 'pending' | 'view'
|
||||
// 可以通过路由参数或API获取状态，这里使用静态数据模拟
|
||||
const pageStatus = ref<'add' | 'edit' | 'pending' | 'view'>('add')
|
||||
const pageStatus = ref<'add' | 'edit' | 'pending' | 'view'>('view')
|
||||
|
||||
// 资料数据
|
||||
const documents = ref({
|
||||
businessLicense: '', // 营业执照
|
||||
qualification: '', // 资质证书
|
||||
healthCert: '', // 健康证
|
||||
businessLicense: '', // 营业执照
|
||||
qualification: '', // 资质证书
|
||||
healthCert: '', // 健康证
|
||||
})
|
||||
|
||||
// 审核状态：'approved' | 'pending' | 'rejected' | 'none'
|
||||
const auditStatus = ref({
|
||||
businessLicense: 'approved', // 'approved' | 'pending' | 'rejected' | 'none'
|
||||
qualification: 'none',
|
||||
healthCert: 'pending',
|
||||
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
|
||||
// 如果有状态参数，使用参数
|
||||
if (options.status) {
|
||||
pageStatus.value = options.status as 'add' | 'edit' | 'pending' | 'view'
|
||||
}
|
||||
// TODO: 否则根据API数据判断状态
|
||||
// 如果已提交且在审核中，显示pending
|
||||
// 如果已审核通过，显示view
|
||||
// 如果有数据但需要编辑，显示edit
|
||||
// 如果无数据，显示add
|
||||
})
|
||||
|
||||
const UploadData = {
|
||||
// 返回
|
||||
handleBack: () => {
|
||||
router.navigateBack()
|
||||
},
|
||||
// 返回
|
||||
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]
|
||||
},
|
||||
})
|
||||
},
|
||||
// 上传图片
|
||||
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] = ''
|
||||
},
|
||||
// 删除图片
|
||||
handleDeleteImage: (type: 'businessLicense' | 'qualification' | 'healthCert') => {
|
||||
documents.value[type] = ''
|
||||
},
|
||||
|
||||
// 提交
|
||||
handleSubmit: () => {
|
||||
// TODO: 实现提交逻辑
|
||||
console.log('提交资料:', documents.value)
|
||||
// 提交后设置为申请中状态
|
||||
pageStatus.value = 'pending'
|
||||
},
|
||||
// 提交
|
||||
handleSubmit: () => {
|
||||
// TODO: 实现提交逻辑
|
||||
console.log('提交资料:', documents.value)
|
||||
// 提交后设置为申请中状态
|
||||
pageStatus.value = 'pending'
|
||||
},
|
||||
|
||||
// 修改信息
|
||||
handleEdit: () => {
|
||||
pageStatus.value = 'edit'
|
||||
},
|
||||
// 修改信息
|
||||
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 {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.page-container {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.right-slot {
|
||||
padding-right: v-bind(rightPadding);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.pending-status-wrapper {
|
||||
min-height: 60vh;
|
||||
}
|
||||
.tip-card {
|
||||
border: 1rpx solid #ffe58f;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.upload-area {
|
||||
cursor: pointer;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
transition: all 0.3s;
|
||||
|
||||
.tip-card {
|
||||
border: 1rpx solid #ffe58f;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
cursor: pointer;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
transition: all 0.3s;
|
||||
.delete-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.status-badge {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.empty-state {
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
pointer-events: none;
|
||||
}
|
||||
.edit-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
.empty-state {
|
||||
min-height: 200rpx;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.save-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
.tip-text {
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user