添加页面
This commit is contained in:
wangxiaowei
@ -7,7 +7,7 @@
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="mt-26rpx">
|
||||
<view>
|
||||
<view>
|
||||
<navbar title="订单详情" custom-class="!bg-[transparent]"></navbar>
|
||||
</view>
|
||||
|
||||
241
src/bundle/profile/change-mobile.vue
Normal file
241
src/bundle/profile/change-mobile.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="mx-60rpx mt-20rpx">
|
||||
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
|
||||
修改手机号码
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">手机号一年内可修改2次</view>
|
||||
</view>
|
||||
<view class="mt-106rpx mx-48rpx">
|
||||
<wd-form ref="form" :model="model">
|
||||
<view>
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">手机号</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input
|
||||
v-model="model.mobile"
|
||||
type="text"
|
||||
placeholder="请输入手机号码"
|
||||
inputmode="numeric"
|
||||
no-border
|
||||
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||||
custom-input-class="!px-32rpx !h-104rpx"
|
||||
@input="mobile.handleInputMobile"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx">
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">验证码</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input type="text" placeholder="请输入验证码" v-model="model.code" inputmode="numeric" no-border custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" custom-input-class="!px-32rpx !h-104rpx">
|
||||
<template #suffix>
|
||||
<view class="flex items-center mr-34rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-divider color="#C9C9C9" vertical />
|
||||
</view>
|
||||
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-32rpx font-400 leading-44rpx" v-if="!startCountDown" @click="mobile.handleCountDown">发送验证码</view>
|
||||
<view class="!text-[#C9C9C9] text-32rpx font-400 leading-44rpx flex items-center" v-if="startCountDown">
|
||||
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="mobile.handleFinishCountDown"></wd-count-down>
|
||||
<view> S后重发</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</wd-form>
|
||||
</view>
|
||||
|
||||
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">登录</view>
|
||||
|
||||
<view class="flex items-center mx-52rpx mt-56rpx" v-if="pageType === 'login'">
|
||||
<view class="w-32rpx h-32rpx">
|
||||
<wd-checkbox v-model="agree" @change="mobile.handleAgree" checked-color="#4C9F44" size="large"> </wd-checkbox>
|
||||
</view>
|
||||
<view class="font-400 text-26rpx leading-40rpx text-[#8F959E] ml-14rpx flex-1" @click="agree = !agree">
|
||||
我已阅读并同意 <text class="text-[#4C9F44]" @click.stop="mobile.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="mobile.handleToPrivacy">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 手机号修改成功 -->
|
||||
<wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative pt-64rpx pb-74rpx">
|
||||
<view class="flex justify-center items-center">
|
||||
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
|
||||
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">手机号修改成功</view>
|
||||
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">{{ page.desc }}</view>
|
||||
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {mobile as testMobile} from '@/utils/test'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const toast = useToast()
|
||||
const disabled = ref<boolean>(true)
|
||||
|
||||
/** 页面 **/
|
||||
let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
|
||||
const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
|
||||
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
|
||||
const userId = ref<number>(0) // 用户ID，修改手机号时需要传
|
||||
|
||||
/** 验证码倒计时 **/
|
||||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||||
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
||||
const countDown = ref<any>(null) // 倒计时组件
|
||||
|
||||
/** 表单相关 **/
|
||||
const model = reactive<{
|
||||
mobile: string
|
||||
code: string
|
||||
}>({
|
||||
mobile: '',
|
||||
code: ''
|
||||
})
|
||||
/** 结束 **/
|
||||
|
||||
/** 服务协议和隐私政策 **/
|
||||
const agree = ref<boolean>(false)
|
||||
/** 结束 **/
|
||||
|
||||
onLoad((args) => {
|
||||
// 从个人登录页面进入
|
||||
if (args.type === 'edit') {
|
||||
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
|
||||
|
||||
page.value.title = '修改手机号'
|
||||
page.value.desc = '手机号一年内可修改2次'
|
||||
pageType = 'edit'
|
||||
}
|
||||
})
|
||||
|
||||
const mobile = {
|
||||
// 验证手机号
|
||||
handleInputMobile: (e: {value: string}) => {
|
||||
model.mobile = e.value
|
||||
disabled.value = !testMobile(model.mobile)
|
||||
},
|
||||
|
||||
// 发送验证码
|
||||
handleCountDown: () => {
|
||||
if (disabled.value) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '手机号码错误请重新输入',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
startCountDown.value = true
|
||||
nextTick(() => {
|
||||
countDown.value?.start()
|
||||
|
||||
// 发送验证码请求
|
||||
})
|
||||
},
|
||||
|
||||
// 验证码倒计时结束
|
||||
handleFinishCountDown: () => {
|
||||
startCountDown.value = false
|
||||
},
|
||||
|
||||
// 登录
|
||||
handleToLogin: () => {
|
||||
// TODO 如果是edit的话就是修改手机号
|
||||
|
||||
if (pageType === 'login' && !agree.value) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '请同意服务协议和隐私政策',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!testMobile(model.mobile)) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '手机号码错误请重新输入',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!model.code) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '验证码错误',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
router.navigateTo('/bundle/profile/set-password')
|
||||
},
|
||||
|
||||
// 获取手机号
|
||||
handleGetPhoneNumber: (e: object) => {
|
||||
console.log("🚀 ~ e:", e)
|
||||
},
|
||||
|
||||
handleAgree: (e: any) => {
|
||||
console.log('e', e)
|
||||
},
|
||||
|
||||
// 跳转到服务协议页面
|
||||
handleToService: () => {
|
||||
disabled.value = !disabled.value
|
||||
console.log("🚀 ~ disabled:", disabled)
|
||||
},
|
||||
|
||||
// 跳转到隐私政策页面
|
||||
handleToPrivacy: () => {
|
||||
|
||||
},
|
||||
|
||||
// 修改手机成功后返回
|
||||
handleToBack: () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.service {
|
||||
:deep() {
|
||||
.wd-checkbox {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
219
src/bundle/profile/change-password.vue
Normal file
219
src/bundle/profile/change-password.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="mx-60rpx mt-20rpx">
|
||||
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
|
||||
修改密码
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">需要验证绑定手机</view>
|
||||
</view>
|
||||
<view class="mt-106rpx mx-48rpx">
|
||||
<wd-form ref="form" :model="model">
|
||||
<view>
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">手机号</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input
|
||||
v-model="model.mobile"
|
||||
type="text"
|
||||
placeholder="请输入手机号码"
|
||||
inputmode="numeric"
|
||||
no-border
|
||||
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||||
custom-input-class="!px-32rpx !h-104rpx"
|
||||
@input="mobile.handleInputMobile"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx">
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">验证码</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input type="text" placeholder="请输入验证码" v-model="model.code" inputmode="numeric" no-border custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" custom-input-class="!px-32rpx !h-104rpx">
|
||||
<template #suffix>
|
||||
<view class="flex items-center mr-34rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-divider color="#C9C9C9" vertical />
|
||||
</view>
|
||||
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-32rpx font-400 leading-44rpx" v-if="!startCountDown" @click="mobile.handleCountDown">发送验证码</view>
|
||||
<view class="!text-[#C9C9C9] text-32rpx font-400 leading-44rpx flex items-center" v-if="startCountDown">
|
||||
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="mobile.handleFinishCountDown"></wd-count-down>
|
||||
<view> S后重发</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</wd-form>
|
||||
</view>
|
||||
|
||||
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">下一步</view>
|
||||
|
||||
<!-- 手机号修改成功 -->
|
||||
<wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative pt-64rpx pb-74rpx">
|
||||
<view class="flex justify-center items-center">
|
||||
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
|
||||
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">手机号修改成功</view>
|
||||
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">{{ page.desc }}</view>
|
||||
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {mobile as testMobile} from '@/utils/test'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const toast = useToast()
|
||||
const disabled = ref<boolean>(true)
|
||||
|
||||
/** 页面 **/
|
||||
let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
|
||||
const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
|
||||
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
|
||||
const userId = ref<number>(0) // 用户ID，修改手机号时需要传
|
||||
|
||||
/** 验证码倒计时 **/
|
||||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||||
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
||||
const countDown = ref<any>(null) // 倒计时组件
|
||||
|
||||
/** 表单相关 **/
|
||||
const model = reactive<{
|
||||
mobile: string
|
||||
code: string
|
||||
}>({
|
||||
mobile: '',
|
||||
code: ''
|
||||
})
|
||||
/** 结束 **/
|
||||
|
||||
/** 服务协议和隐私政策 **/
|
||||
const agree = ref<boolean>(false)
|
||||
/** 结束 **/
|
||||
|
||||
onLoad((args) => {
|
||||
// 从个人登录页面进入
|
||||
if (args.type === 'edit') {
|
||||
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
|
||||
|
||||
page.value.title = '修改手机号'
|
||||
page.value.desc = '手机号一年内可修改2次'
|
||||
pageType = 'edit'
|
||||
}
|
||||
})
|
||||
|
||||
const mobile = {
|
||||
// 验证手机号
|
||||
handleInputMobile: (e: {value: string}) => {
|
||||
model.mobile = e.value
|
||||
disabled.value = !testMobile(model.mobile)
|
||||
},
|
||||
|
||||
// 发送验证码
|
||||
handleCountDown: () => {
|
||||
if (disabled.value) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '手机号码错误请重新输入',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
startCountDown.value = true
|
||||
nextTick(() => {
|
||||
countDown.value?.start()
|
||||
|
||||
// 发送验证码请求
|
||||
})
|
||||
},
|
||||
|
||||
// 验证码倒计时结束
|
||||
handleFinishCountDown: () => {
|
||||
startCountDown.value = false
|
||||
},
|
||||
|
||||
// 登录
|
||||
handleToLogin: () => {
|
||||
// TODO 如果是edit的话就是修改手机号
|
||||
if (!testMobile(model.mobile)) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '手机号码错误请重新输入',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!model.code) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '验证码错误',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
},
|
||||
|
||||
// 获取手机号
|
||||
handleGetPhoneNumber: (e: object) => {
|
||||
console.log("🚀 ~ e:", e)
|
||||
},
|
||||
|
||||
handleAgree: (e: any) => {
|
||||
console.log('e', e)
|
||||
},
|
||||
|
||||
// 跳转到服务协议页面
|
||||
handleToService: () => {
|
||||
disabled.value = !disabled.value
|
||||
console.log("🚀 ~ disabled:", disabled)
|
||||
},
|
||||
|
||||
// 跳转到隐私政策页面
|
||||
handleToPrivacy: () => {
|
||||
|
||||
},
|
||||
|
||||
// 修改手机成功后返回
|
||||
handleToBack: () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.service {
|
||||
:deep() {
|
||||
.wd-checkbox {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,5 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -101,7 +100,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 修改手机号 -->
|
||||
<view class="flex justify-between items-center" @click="Profile.handleToEditMobile">
|
||||
<view class="flex justify-between items-center mb-54rpx" @click="Profile.handleToEditMobile">
|
||||
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">修改手机号</view>
|
||||
<view class="flex justify-end">
|
||||
<view class="flex items-center">
|
||||
@ -114,6 +113,36 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 修改手机号 -->
|
||||
<view class="flex justify-between items-center mb-54rpx" @click="router.navigateTo('/bundle/profile/change-password')">
|
||||
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">修改手机号</view>
|
||||
<view class="flex justify-end">
|
||||
<view class="flex items-center">
|
||||
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
|
||||
{{ user.nickname }}
|
||||
</view>
|
||||
<view>
|
||||
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 修改绑定用户 -->
|
||||
<view class="flex justify-between items-center" @click="router.navigateTo('/bundle/profile/change-password')">
|
||||
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">修改绑定用户</view>
|
||||
<view class="flex justify-end">
|
||||
<view class="flex items-center">
|
||||
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
|
||||
{{ user.nickname }}
|
||||
</view>
|
||||
<view>
|
||||
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white rounded-16rpx mt-144rpx mx-30rpx px-30rpx py-32rpx text-center font-400 text-[#303133] text-30rpx leading-42rpx" @click="showLogoutPopup = true">
|
||||
@ -166,7 +195,7 @@
|
||||
onLoad(() => {
|
||||
token.value = uni.getStorageSync('token')
|
||||
|
||||
Profile.handleInit()
|
||||
// Profile.handleInit()
|
||||
})
|
||||
|
||||
const Profile = {
|
||||
|
||||
223
src/bundle/profile/set-password.vue
Normal file
223
src/bundle/profile/set-password.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="mx-60rpx mt-20rpx">
|
||||
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
|
||||
设置新密码
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">请设置你得新密码</view>
|
||||
</view>
|
||||
<view class="mt-106rpx mx-48rpx">
|
||||
<wd-form ref="form" :model="model">
|
||||
<view>
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">密码</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input
|
||||
v-model="model.mobile"
|
||||
type="text"
|
||||
placeholder="请输入密码"
|
||||
inputmode="numeric"
|
||||
no-border
|
||||
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||||
custom-input-class="!px-32rpx !h-104rpx"
|
||||
@input="mobile.handleInputMobile"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">再次确认</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input
|
||||
v-model="model.mobile"
|
||||
type="text"
|
||||
placeholder="再次确认新的密码"
|
||||
inputmode="numeric"
|
||||
no-border
|
||||
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||||
custom-input-class="!px-32rpx !h-104rpx"
|
||||
@input="mobile.handleInputMobile"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</wd-form>
|
||||
</view>
|
||||
|
||||
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">确定</view>
|
||||
|
||||
<!-- 手机号修改成功 -->
|
||||
<wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative pt-64rpx pb-74rpx">
|
||||
<view class="flex justify-center items-center">
|
||||
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
|
||||
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">密码修改成功</view>
|
||||
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">请记住你的登录密码</view>
|
||||
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {mobile as testMobile} from '@/utils/test'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const toast = useToast()
|
||||
const disabled = ref<boolean>(true)
|
||||
|
||||
/** 页面 **/
|
||||
let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
|
||||
const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
|
||||
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
|
||||
const userId = ref<number>(0) // 用户ID，修改手机号时需要传
|
||||
|
||||
/** 验证码倒计时 **/
|
||||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||||
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
||||
const countDown = ref<any>(null) // 倒计时组件
|
||||
|
||||
/** 表单相关 **/
|
||||
const model = reactive<{
|
||||
mobile: string
|
||||
code: string
|
||||
}>({
|
||||
mobile: '',
|
||||
code: ''
|
||||
})
|
||||
/** 结束 **/
|
||||
|
||||
/** 服务协议和隐私政策 **/
|
||||
const agree = ref<boolean>(false)
|
||||
/** 结束 **/
|
||||
|
||||
onLoad((args) => {
|
||||
// 从个人登录页面进入
|
||||
if (args.type === 'edit') {
|
||||
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
|
||||
|
||||
page.value.title = '修改手机号'
|
||||
page.value.desc = '手机号一年内可修改2次'
|
||||
pageType = 'edit'
|
||||
}
|
||||
})
|
||||
|
||||
const mobile = {
|
||||
// 验证手机号
|
||||
handleInputMobile: (e: {value: string}) => {
|
||||
model.mobile = e.value
|
||||
disabled.value = !testMobile(model.mobile)
|
||||
},
|
||||
|
||||
// 发送验证码
|
||||
handleCountDown: () => {
|
||||
if (disabled.value) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '手机号码错误请重新输入',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
startCountDown.value = true
|
||||
nextTick(() => {
|
||||
countDown.value?.start()
|
||||
|
||||
// 发送验证码请求
|
||||
})
|
||||
},
|
||||
|
||||
// 验证码倒计时结束
|
||||
handleFinishCountDown: () => {
|
||||
startCountDown.value = false
|
||||
},
|
||||
|
||||
// 登录
|
||||
handleToLogin: () => {
|
||||
// TODO 如果是edit的话就是修改手机号
|
||||
|
||||
if (pageType === 'login' && !agree.value) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '请同意服务协议和隐私政策',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!testMobile(model.mobile)) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '手机号码错误请重新输入',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!model.code) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '验证码错误',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
},
|
||||
|
||||
// 获取手机号
|
||||
handleGetPhoneNumber: (e: object) => {
|
||||
console.log("🚀 ~ e:", e)
|
||||
},
|
||||
|
||||
handleAgree: (e: any) => {
|
||||
console.log('e', e)
|
||||
},
|
||||
|
||||
// 跳转到服务协议页面
|
||||
handleToService: () => {
|
||||
disabled.value = !disabled.value
|
||||
console.log("🚀 ~ disabled:", disabled)
|
||||
},
|
||||
|
||||
// 跳转到隐私政策页面
|
||||
handleToPrivacy: () => {
|
||||
|
||||
},
|
||||
|
||||
// 修改手机成功后返回
|
||||
handleToBack: () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.service {
|
||||
:deep() {
|
||||
.wd-checkbox {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -428,7 +428,6 @@
|
||||
|
||||
.add-textarea {
|
||||
:deep() {
|
||||
|
||||
.wd-textarea__value,
|
||||
.wd-textarea__count {
|
||||
background: transparent !important;
|
||||
|
||||
547
src/bundle/setmeal/detail.vue
Normal file
547
src/bundle/setmeal/detail.vue
Normal file
@ -0,0 +1,547 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"needLogin": true,
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
<template>
|
||||
<view class="pb-180rpx">
|
||||
<!-- 费用明细 -->
|
||||
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
|
||||
<view class='bg-[#FBFBFB] py-40rpx realtive'>
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</view>
|
||||
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>茶室费</view>
|
||||
<view>￥{{ bill.service.total }}</view>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>茶室费（￥{{ teaRoomPrice }}元/小时）</view>
|
||||
<view>x{{ bill.service.num }}</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-52rpx">
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>优惠</view>
|
||||
<view class="text-[#4C9F44]">-￥{{ bill.totalDiscount }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>优惠券</view>
|
||||
<view>-￥{{ bill.coupon || 0 }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>团购券</view>
|
||||
<view>-￥{{ bill.groupCoupon || 0 }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>会员八折</view>
|
||||
<view>-￥{{ bill.discount || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="my-30rpx">
|
||||
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>实付金额</view>
|
||||
<view>￥{{ bill.total }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 支付 -->
|
||||
<wd-popup v-model="showPayPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showPayPopup = false" position="bottom">
|
||||
<view class='bg-[#FBFBFB] py-40rpx realtive'>
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showPayPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center">支付</view>
|
||||
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
|
||||
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
|
||||
<view class="pay" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
|
||||
<view class="flex justify-between items-center" v-if="pay == item.value" >
|
||||
<view class="flex items-center">
|
||||
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
|
||||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<wd-radio :value="item.value">
|
||||
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
|
||||
</wd-radio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="Detail.handlePay">确定付款</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 选择预定时间 -->
|
||||
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="Detail.handleChooseReserveTime"></booking-time>
|
||||
|
||||
<view>
|
||||
<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="mt-20rpx mx-30rpx swiper">
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit">
|
||||
</wd-swiper>
|
||||
</view>
|
||||
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">{{ isGroupBuying ? teaRoomPackage.title : teaRoom.name }}</view>
|
||||
<view class="mt-14rpx flex" v-if="!isGroupBuying">
|
||||
<template v-for="(label, labelIndex) in teaRoom.label" :key="labelIndex">
|
||||
<view class="mr-20rpx flex items-start" v-if="label.category_id == 1">
|
||||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
|
||||
</view>
|
||||
<view class="flex items-start" v-if="label.category_id == 2">
|
||||
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
|
||||
<view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">{{ teaRoomPackage.introduce }}</view>
|
||||
<!-- <view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view> -->
|
||||
</view>
|
||||
<view v-if="isGroupBuying">
|
||||
<view class="mt-20rpx mb-24rpx" >
|
||||
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
|
||||
</view>
|
||||
<view class="text-[#303133] text-28rpx leading-48rpx">
|
||||
<rich-text :nodes="teaRoomPackage.details"></rich-text>
|
||||
<!-- <view>
|
||||
<text class="font-bold mr-26rpx">须知</text>
|
||||
<text class="font-500">{{ teaRoomPackage.details }}</text>
|
||||
</view>
|
||||
<view class="mt-22rpx">
|
||||
<text class="font-bold mr-26rpx">保障</text>
|
||||
<text class="font-500">随时退</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!isGroupBuying">
|
||||
<!-- 使用说明 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="teaRoom.textarea1"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定时间 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showBookTimePopup = true">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
|
||||
<template v-if="reserveTime.length > 0">
|
||||
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
请选择
|
||||
</template>
|
||||
</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.handleToCoupon(CouponType.Discount)">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">优惠券</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
<template v-if="selectedCoupon?.id > 0">
|
||||
{{ selectedCoupon.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
请选择
|
||||
</template>
|
||||
</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 团购券 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.handleToCoupon(CouponType.GroupBuy)">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">团购券</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">团购券</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
<template v-if="selectedGroupCoupon?.id > 0">
|
||||
{{ selectedGroupCoupon.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
请选择
|
||||
</template>
|
||||
</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isGroupBuying">
|
||||
<!-- 套餐详情 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">套餐详情</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="teaRoomPackage.introduce_details"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买须知 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="teaRoomPackage.buy_details"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {toast} from '@/utils/toast'
|
||||
import { ReserveServiceCategory, OrderType } from '@/utils/order'
|
||||
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
|
||||
import { getNext7Days, getTeaRoomBalance, createTeaRoomOrder } from '@/api/tea-room'
|
||||
import { CouponType } from '@/utils/coupon'
|
||||
import { router, toTimes, toPlus, toMinus } from '@/utils/tools'
|
||||
import type { IUserInfoVo } from '@/api/types/login'
|
||||
import { useUserStore } from '@/store'
|
||||
import { getTeaRoomDetail, createTeaRoomPackageOrder, getTeaRoomPackageDetail, calculateTeaRoomPrice } from '@/api/tea-room'
|
||||
import PriceFormat from '@/components/PriceFormat.vue'
|
||||
import BookingTime from '@/components/BookingTime.vue'
|
||||
import { getUserInfo } from '@/api/user'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref<IUserInfoVo>(null)
|
||||
|
||||
const swiperList = ref<string[]>([])
|
||||
const current = ref<number>(0)
|
||||
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||||
const isGroupBuying = ref<boolean>(false)// 是否是团购套餐
|
||||
const pay = ref<number>(1) // 支付方式
|
||||
const payList = ref<Array<any>>([
|
||||
{
|
||||
id: 1,
|
||||
name: '平台余额',
|
||||
icon: `${OSS}icon/icon_platform_balance.png`,
|
||||
balance: 0,
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '门店余额',
|
||||
icon: `${OSS}icon/icon_store_balance.png`,
|
||||
balance: 0,
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '微信支付',
|
||||
icon: `${OSS}icon/icon_weichat.png`,
|
||||
balance: 0,
|
||||
value: 3
|
||||
}
|
||||
])
|
||||
|
||||
// 选择预定时间
|
||||
const showBookTimePopup = ref<boolean>(false)
|
||||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||||
minimum_time: 0,
|
||||
time: []
|
||||
})
|
||||
const reserveTime = ref<Array<any>>([])
|
||||
|
||||
// 计算费用明细 service(服务费) coupon(优惠券) discount(会员优惠) totalDiscount(总优惠) total(总费用) groupCoupon(团购券)
|
||||
const bill = ref<{service: any, discount:number, totalDiscount: number, coupon: number, groupCoupon: number, total: number}>({
|
||||
service: {
|
||||
total: 0,
|
||||
unitPrice: 0,
|
||||
num: 0,
|
||||
startTime: 0,
|
||||
endTime: 0,
|
||||
dayTime: '',
|
||||
startHour: '',
|
||||
endHour: ''
|
||||
},
|
||||
discount: 0,
|
||||
totalDiscount: 0,
|
||||
coupon: 0,
|
||||
groupCoupon: 0,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 费用明细相关
|
||||
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
||||
const showPayPopup = ref<boolean>(false) // 支付popup
|
||||
|
||||
// 包间内容
|
||||
const storeId = ref<number>(0) // 门店ID
|
||||
const id = ref<number>(0) // id
|
||||
const teaRoom = ref<any>({})
|
||||
const teaRoomPrice = ref<number>(0)
|
||||
|
||||
// 门店余额
|
||||
const storeMoney = ref<number>(0)
|
||||
|
||||
// 选择的优惠券
|
||||
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
|
||||
const selectedGroupCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
|
||||
|
||||
// 用户信息
|
||||
const user = ref<any>(null)
|
||||
|
||||
// 套餐
|
||||
const teaRoomPackage = ref<any>({})
|
||||
|
||||
onLoad((args) => {
|
||||
storeId.value = Number(args.storeId)
|
||||
id.value = Number(args.id)
|
||||
teaRoomPrice.value = Number(args.price) || 0
|
||||
|
||||
if (args.type == ReserveServiceCategory.GroupBuying) {
|
||||
isGroupBuying.value = true
|
||||
pay.value = 3
|
||||
Detail.handleInitGroupBuying()
|
||||
}
|
||||
Detail.handleInitReserveRoom()
|
||||
|
||||
// 获取用户需求详
|
||||
getUserInfo().then(res => {
|
||||
user.value = res
|
||||
})
|
||||
})
|
||||
|
||||
const Detail = {
|
||||
/**
|
||||
* 初始包间详情
|
||||
*/
|
||||
handleInitReserveRoom: async () => {
|
||||
// 包间详情
|
||||
const userStore = useUserStore()
|
||||
userInfo.value = userStore.userInfo
|
||||
|
||||
const res = await getTeaRoomDetail({
|
||||
id: storeId.value,
|
||||
latitude: uni.getStorageSync('latitude'),
|
||||
longitude: uni.getStorageSync('longitude'),
|
||||
user_id: userInfo.value.id || 0
|
||||
})
|
||||
teaRoom.value = res.details
|
||||
swiperList.value = teaRoom.value.img_arr
|
||||
|
||||
// 预定时间
|
||||
const next7 = await getNext7Days()
|
||||
Object.assign(sevenDay, next7)
|
||||
|
||||
// 获取门店余额
|
||||
const balance = await getTeaRoomBalance({ store_id: storeId.value })
|
||||
storeMoney.value = balance.data.money || 0
|
||||
},
|
||||
|
||||
/*
|
||||
* 初始化套餐详情
|
||||
*/
|
||||
handleInitGroupBuying: async () => {
|
||||
const res = await getTeaRoomPackageDetail({ id: id.value })
|
||||
teaRoomPackage.value = res.details
|
||||
},
|
||||
|
||||
/**
|
||||
* 选中预定时间
|
||||
*/
|
||||
handleChooseReserveTime: (params: any) => {
|
||||
reserveTime.value = params
|
||||
|
||||
bill.value.service = {
|
||||
total: 0,
|
||||
unitPrice: 0,
|
||||
num: params[3],
|
||||
startTime: params[2][0],
|
||||
endTime: params[2][params[2].length - 1],
|
||||
dayTime: params[0],
|
||||
startHour: params[1][0],
|
||||
endHour: params[1][params[1].length - 1]
|
||||
}
|
||||
|
||||
Detail.handleCalculateTeaRoomPrice()
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转优惠券页面
|
||||
*/
|
||||
handleToCoupon(type) {
|
||||
if (reserveTime.value.length == 0) {
|
||||
toast.info('请选择预定时间')
|
||||
return
|
||||
}
|
||||
uni.$on('chooseCoupon', params => {
|
||||
console.log("🚀 ~ params:", params)
|
||||
uni.$off('chooseCoupon')
|
||||
|
||||
if (type === CouponType.Discount) {
|
||||
selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
|
||||
bill.value.coupon = params.coupon.coupon_price
|
||||
} else {
|
||||
selectedGroupCoupon.value = {id: params.coupon.id, name: `团购券-${params.coupon.tea_store_group.title}` }
|
||||
bill.value.groupCoupon = params.coupon.coupon_price
|
||||
}
|
||||
|
||||
Detail.handleCalculateTeaRoomPrice()
|
||||
})
|
||||
|
||||
// 获取预定了几个小时
|
||||
const count = bill.value.service.num
|
||||
router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&numbers=${count}&type=${type}&storeId=${storeId.value}`)
|
||||
},
|
||||
|
||||
// 选择支付方式
|
||||
handleGetPayValue: (value: number) => {
|
||||
pay.value = value
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交订单
|
||||
*/
|
||||
handleSubmitOrder: async () => {
|
||||
// 只有预定茶室才会选择时间
|
||||
if (!isGroupBuying.value && bill.value.service.num == 0) {
|
||||
toast.info('请选择预定时间')
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
})
|
||||
|
||||
try {
|
||||
let res: any = null
|
||||
if (isGroupBuying.value) {
|
||||
res = await createTeaRoomPackageOrder({
|
||||
group_id: id.value
|
||||
})
|
||||
} else {
|
||||
res = await createTeaRoomOrder({
|
||||
store_id: storeId.value,
|
||||
room_id: id.value,
|
||||
day_time: bill.value.service.dayTime,
|
||||
start_time: bill.value.service.startHour,
|
||||
end_time: bill.value.service.endHour,
|
||||
user_coupon_id: selectedCoupon.value.id || 0,
|
||||
hours: bill.value.service.num,
|
||||
group_coupon_id: selectedGroupCoupon.value.id || 0
|
||||
})
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
// 支付后的处理
|
||||
uni.$on('payment', params => {
|
||||
setTimeout(() => {
|
||||
uni.$off("payment")
|
||||
if (params.result) {
|
||||
uni.redirectTo({
|
||||
url: `/pages/notice/reserve?type=${OrderType.TeaRoomOrder}&orderId=${params.orderId}&isGroupBuying=${isGroupBuying.value ? 1 : 0}`
|
||||
})
|
||||
} else {
|
||||
if (isGroupBuying.value) {
|
||||
router.redirectTo(`/bundle/order/platform/order-list`)
|
||||
} else {
|
||||
router.redirectTo(`/bundle/order/tea-room/order-list?isGroupBuying=${isGroupBuying.value ? 1 : 0}`)
|
||||
}
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
const name = isGroupBuying.value ? teaRoomPackage.value.title : teaRoom.value.name
|
||||
|
||||
router.navigateTo(
|
||||
`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&name=${name}&storeId=${storeId.value}&isGroupBuying=${isGroupBuying.value ? 1 : 0}`
|
||||
)
|
||||
}, 800)
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
toast.info('订单提交失败，请稍后重试')
|
||||
return
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算茶室价格
|
||||
*/
|
||||
handleCalculateTeaRoomPrice: async () => {
|
||||
const res = await calculateTeaRoomPrice({
|
||||
room_id: id.value,
|
||||
coupon_id: selectedCoupon.value.id || 0,
|
||||
group_coupon_id: selectedGroupCoupon.value.id,
|
||||
nums: bill.value.service.num,
|
||||
})
|
||||
|
||||
bill.value.service.total = res.details.room_price // 茶室价格
|
||||
bill.value.discount = res.details.discount_room_price // 茶室总价
|
||||
bill.value.totalDiscount = res.details.discount_all_price // 总优惠
|
||||
bill.value.groupCoupon = res.details.group_price // 团购优惠
|
||||
bill.value.total = res.details.order_amount // 订单金额
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
:deep() {
|
||||
.wd-swiper-nav__item--dots-bar {
|
||||
width: 56rpx !important;
|
||||
height: 6rpx !important;
|
||||
border-radius: 3rpx !important;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background-color: #2B9F93 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay {
|
||||
:deep() {
|
||||
.wd-radio {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
99
src/bundle/user/bill-detail.vue
Normal file
99
src/bundle/user/bill-detail.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-40rpx">
|
||||
<view>
|
||||
<navbar title="消费明细" custom-class="!bg-[#F6F7F9]"></navbar>
|
||||
</view>
|
||||
|
||||
<view class="mt-28rpx mx-32rpx">
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="BillDetail.upCallback" :down="downOption" :up="upOption">
|
||||
<view class="bg-white rounded-16rpx py-28rpx mb-20rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="w-8rpx h-32rpx bg-[#4C9F44] mr-22rpx"></view>
|
||||
<view class="font-bold text-28rpx leading-40rpx text-[#303133]">订单号：1744601722882174</view>
|
||||
</view>
|
||||
<view class="mx-18rpx mt-16rpx mb-22rpx">
|
||||
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
|
||||
</view>
|
||||
<view class="flex items-center justify-between px-18rpx">
|
||||
<view class="font-400 text-28rpx text-[#606266] leading-40rpx">
|
||||
<view class="mb-16rpx">门店：茶址24小时-碧云店</view>
|
||||
<view class="mb-16rpx">类型：包间预定</view>
|
||||
<view class="mb-16rpx">支付方式：平台余额</view>
|
||||
<view>支付时间：2025-04-14 11:35</view>
|
||||
</view>
|
||||
<view class="text-right">
|
||||
<price-format weight="bold" color="#303133" :first-size="44" :second-size="44" :subscript-size="28" :price="23.02"></price-format>
|
||||
<view class="mt-6rpx font-400 text-28rpx leading-40rpx text-[#303133]">金额</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toTimes, copy } from '@/utils/tools'
|
||||
import { router } from '@/utils/tools'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
|
||||
// mescroll
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const list = ref<Array<any>>([]) // 茶室列表
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const mark = ref<string>('')
|
||||
|
||||
onLoad((args) => {
|
||||
})
|
||||
|
||||
const BillDetail = {
|
||||
/**
|
||||
* 分页加载
|
||||
* @param mescroll
|
||||
*/
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
// getTeaRoomOrderList(filter).then((res) => {
|
||||
// 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() // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
// 打电话
|
||||
handleCall: (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
</style>
|
||||
132
src/bundle/user/user-detail.vue
Normal file
132
src/bundle/user/user-detail.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-40rpx">
|
||||
<view>
|
||||
<navbar title="用户详情" custom-class="!bg-[#F6F7F9]"></navbar>
|
||||
</view>
|
||||
|
||||
<view class="mt-28rpx mx-30rpx">
|
||||
<view class="bg-white rounded-16rpx px-28rpx pt-40rpx pb-26rpx">
|
||||
<view>
|
||||
<view class="flex items-center">
|
||||
<wd-img width="140rpx" height='140rpx' src="https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/icon/icon_avatar.png" :round="true"></wd-img>
|
||||
<view class="ml-20rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="font-bold text-28rpx text-[#303133] leading-40rpx mr-12rpx">用户昵称</view>
|
||||
<!-- TODO 如果是vip的话才显示这个皇冠 -->
|
||||
<view>
|
||||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_crown.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-18rpx font-400 text-28rpx text-[#303133] leading-40rpx">手机号：18857339563</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- TODO VIP显示这块内容 -->
|
||||
<view class="relative mt-22rpx">
|
||||
<wd-img width="650rpx" height='70rpx' :src="`${OSS}images/store/user/image1.png`"></wd-img>
|
||||
<view class="absolute top-18rpx left-28rpx flex items-center">
|
||||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_vip.png`"></wd-img>
|
||||
<view class="font-400 text-24rpx text-[#EECC99] leading-34rpx ml-18rpx">2026.03.06到期</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-around px-90rpx mt-46rpx">
|
||||
<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-34rpx">3,1.46</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-34rpx">3,662.46</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-50rpx relative">
|
||||
<wd-img width="650rpx" height='216rpx' :src="`${OSS}images/store/user/image2.png`"></wd-img>
|
||||
<view class="absolute top-24rpx left-40rpx">
|
||||
<view class="">消费金额</view>
|
||||
<view class="mt-22rpx">
|
||||
<price-format color="#FF5951" :first-size="34" :second-size="34" :subscript-size="34" :price="23.02"></price-format>
|
||||
</view>
|
||||
<view
|
||||
@click="router.navigateTo('/bundle/user/bill-detail')"
|
||||
class="bg-[#3C7FFF] w-124rpx h-48rpx rounded-24rpx text-[#fff] text-center leading-48rpx text-28rpx font-bold mt-12rpx">
|
||||
去查看
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-26rpx mb-18rpx">
|
||||
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-26rpx text-[#9CA3AF] leading-36rpx">注册日期：2025-04-23</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white rounded-16rpx px-30rpx pt-36rpx pb-34rpx mt-20rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_qizhi.png`"></wd-img>
|
||||
<view class="text-30rpx leading-42rpx text-[#303133] ml-10rpx">备注</view>
|
||||
</view>
|
||||
|
||||
<view class="add-textarea">
|
||||
<wd-textarea v-model="mark"
|
||||
placeholder="有想说的可以在这里写哦！"
|
||||
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
|
||||
custom-textarea-class='!bg-[#F8F9FA] !h-100rpx' :maxlength='30' show-word-limit />
|
||||
</view>
|
||||
|
||||
<view class="bg-[#4C9F44] rounded-8rpx text-[#fff] w-626rpx h-90rpx text-center leading-90rpx mt-52rpx">修改备注</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toTimes, copy } from '@/utils/tools'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const mark = ref<string>('')
|
||||
|
||||
onLoad((args) => {
|
||||
})
|
||||
|
||||
const UserList = {
|
||||
// 打电话
|
||||
handleCall: (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.add-textarea {
|
||||
:deep() {
|
||||
.wd-textarea__value,
|
||||
.wd-textarea__count {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/bundle/user/user-list.vue
Normal file
103
src/bundle/user/user-list.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<navbar title="用户列表" custom-class="!bg-[transparent]"></navbar>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="UserList.upCallback" :down="downOption" :up="upOption">
|
||||
<view class="mb-22rpx">
|
||||
<view class="mx-64rpx flex justify-between items-center mb-10rpx">
|
||||
<view class="flex items-center" @click="router.navigateTo('/bundle/user/user-detail')">
|
||||
<wd-img width="100rpx" height='100rpx' src="https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/icon/icon_avatar.png" :round="true"></wd-img>
|
||||
<view class="ml-20rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="font-bold text-28rpx text-[#303133] leading-40rpx mr-12rpx">用户昵称</view>
|
||||
<!-- TODO 如果是vip的话才显示这个皇冠 -->
|
||||
<view>
|
||||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_crown.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-14rpx font-400 text-26rpx text-[#303133] leading-36rpx">13525626532</view>
|
||||
<view class="mt-10rpx text-24rpx text-[#F29747] leading-34rpx w-400rpx line-1">这里是备注信息，备注信息这里是备注信息，备注信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="UserList.handleCall">
|
||||
<wd-img width="64rpx" height='64rpx' :src="`${OSS}icon/icon_phone3.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx">
|
||||
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
import { toTimes, copy } from '@/utils/tools'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
|
||||
// mescroll
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const list = ref<Array<any>>([]) // 茶室列表
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
onLoad((args) => {
|
||||
})
|
||||
|
||||
const UserList = {
|
||||
/**
|
||||
* 分页加载
|
||||
* @param mescroll
|
||||
*/
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
// getTeaRoomOrderList(filter).then((res) => {
|
||||
// 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() // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
/**
|
||||
* 电话
|
||||
* @param phone
|
||||
*/
|
||||
handleCall: (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -125,13 +125,67 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 茶室管理端-订单管理 -->
|
||||
<view v-if="type === OrderSource.Admin" class="bg-white rounded-10rpx p-30rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-10rpx flex items-center">
|
||||
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex items-center w-400rpx" @click="router.navigateTo(`/pages/order/order-detail?storeId=${order.store_id}`)">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.store_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-40rpx mt-12rpx text-[#4C9F44]">
|
||||
<text v-if="order.order_status === AdminOrderStatus.ToUse" class="text-[#FF5951]" >待使用</text>
|
||||
<text v-if="order.order_status === AdminOrderStatus.Consuming">使用中</text>
|
||||
<text v-if="order.order_status === AdminOrderStatus.Finished" class="text-[#606266]">完成</text>
|
||||
<text v-if="order.order_status === AdminOrderStatus.Cancelled" class="text-[#C9C9C9]">订单取消</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-22rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-28rpx">
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view @click="ComboCard.handleToOrderDetail">
|
||||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.room_name }}</view>
|
||||
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-34rpx">
|
||||
<view>预约时间：{{ order.day_time }} {{ order.start_time }}-{{ order.end_time }}</view>
|
||||
<view class="mt-18rpx">预约时长：{{ order.hours }}小时</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<template v-if="order.order_status === AdminOrderStatus.ToUse || order.order_status === AdminOrderStatus.Consuming">
|
||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
|
||||
@click="ComboCard.handleCancelOrder(OrderSource.TeaRoom)">释放时间</view>
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
|
||||
@click="ComboCard.handleToPayOrder(OrderSource.TeaRoom)">取消订单</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="order.order_status === AdminOrderStatus.Finished || order.order_status === AdminOrderStatus.Cancelled">
|
||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
|
||||
@click="ComboCard.handleCancelOrder(OrderSource.TeaRoom)">删除</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 取消订单, 删除订单 -->
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ComboCard">
|
||||
import { OrderSource, OrderStatus, TeaRoomOrderStatus, TeaRoomPackageOrderStatus } from '@/utils/order'
|
||||
import { OrderSource, OrderStatus, AdminOrderStatus, TeaRoomPackageOrderStatus } from '@/utils/order'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks, handleToTRStoreHooks, handleTGOrderRefundHooks } from '@/hooks/useOrder'
|
||||
@ -173,7 +227,7 @@
|
||||
* 详情页
|
||||
*/
|
||||
handleToOrderDetail: () => {
|
||||
|
||||
router.navigateTo('/bundle/setmeal/detail')
|
||||
},
|
||||
|
||||
/**
|
||||
@ -234,6 +288,113 @@
|
||||
* 编辑商品
|
||||
*/
|
||||
handleEdit: () => {
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到对对应室的详情页
|
||||
*/
|
||||
handleToStore: () => {
|
||||
handleToTRStoreHooks(props.order.store_id, props.order.operation_type)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除订单
|
||||
*/
|
||||
handleDeleteOrder: (source: string) => {
|
||||
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((res) => {
|
||||
switch (source) {
|
||||
case OrderSource.Combo:
|
||||
// TODO 这里调用删除直营订单的接口
|
||||
break;
|
||||
case OrderSource.DouYin:
|
||||
// TODO 这里调用删除抖音订单的接口
|
||||
break;
|
||||
case OrderSource.TeaRoom:
|
||||
// 这里调用删除茶室订单的接口
|
||||
handleTRDeleteOrderHooks(props.order.id)
|
||||
break;
|
||||
case OrderSource.TeaSpecialist:
|
||||
// TODO 这里调用删除茶室订单的接口
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消订单
|
||||
*/
|
||||
handleCancelOrder: (source: string) => {
|
||||
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((res) => {
|
||||
if (res.action == 'confirm') {
|
||||
switch (source) {
|
||||
case OrderSource.Combo:
|
||||
// TODO 这里调用删除直营订单的接口
|
||||
break;
|
||||
case OrderSource.DouYin:
|
||||
// TODO 这里调用删除抖音订单的接口
|
||||
break;
|
||||
case OrderSource.TeaRoom:
|
||||
// 这里调用删除茶室订单的接口
|
||||
handleTRCancelOrderHooks(props.order.id)
|
||||
break;
|
||||
case OrderSource.TeaSpecialist:
|
||||
// TODO 这里调用删除茶室订单的接口
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 支付
|
||||
*/
|
||||
handleToPayOrder: (source: string) => {
|
||||
switch (source) {
|
||||
case OrderSource.Combo:
|
||||
router.navigateTo(`/bundle/order/platform/order-detail?orderStatus=${props.orderStatus}&toPay=true`)
|
||||
break;
|
||||
case OrderSource.DouYin:
|
||||
router.navigateTo(`/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}&toPay=true`)
|
||||
break;
|
||||
case OrderSource.TeaRoom:
|
||||
handleTRToPayHooks(props.order.id, props.order.room_name, props.order.store_id)
|
||||
break;
|
||||
case OrderSource.TeaSpecialist:
|
||||
router.navigateTo( `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -131,4 +131,18 @@ export async function handleTGOrderRefundHooks(orderId: number) {
|
||||
*/
|
||||
export function handleToTGComboHooks(storeId: number, id: number) {
|
||||
router.navigateTo(`/bundle/tea-room/detail?storeId=${storeId}&id=${id}&type=${ReserveServiceCategory.GroupBuying}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 释放时间
|
||||
*/
|
||||
export async function handleReleaseTimeHooks(orderId: number) {
|
||||
try {
|
||||
// await releaseTeaRoomOrderTime({ id: orderId })
|
||||
uni.$emit('refreshOrderList')
|
||||
uni.$emit('refreshOrderDetail')
|
||||
} catch (error) {
|
||||
router.navigateBack()
|
||||
throw error
|
||||
}
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationBarTitleText": "关于"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import RequestComp from './components/request.vue'
|
||||
|
||||
// 奇怪：同样的代码放在 vue 里面不会校验到错误，放在 .ts 文件里面会校验到错误
|
||||
// const testOxlint = (name: string) => {
|
||||
// console.log('oxlint')
|
||||
// }
|
||||
// testOxlint('oxlint')
|
||||
console.log('about')
|
||||
|
||||
function gotoAlova() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/alova',
|
||||
})
|
||||
}
|
||||
function gotoVueQuery() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/vue-query',
|
||||
})
|
||||
}
|
||||
function gotoSubPage() {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/demo/index',
|
||||
})
|
||||
}
|
||||
// uniLayout里面的变量通过 expose 暴露出来后可以在 onReady 钩子获取到（onLoad 钩子不行）
|
||||
const uniLayout = ref()
|
||||
onLoad(() => {
|
||||
console.log('onLoad:', uniLayout.value) // onLoad: undefined
|
||||
})
|
||||
onReady(() => {
|
||||
console.log('onReady:', uniLayout.value) // onReady: Proxy(Object)
|
||||
console.log('onReady:', uniLayout.value.testUniLayoutExposedData) // onReady: testUniLayoutExposedData
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="mt-8 text-center text-xl text-gray-400">
|
||||
组件使用、请求调用、unocss
|
||||
</view>
|
||||
<RequestComp />
|
||||
<view class="mb-6 h-1px bg-#eee" />
|
||||
<view class="text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="gotoAlova">
|
||||
前往 alova 示例页面
|
||||
</button>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="gotoVueQuery">
|
||||
vue-query 示例页面
|
||||
</button>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="gotoSubPage">
|
||||
前往分包页面
|
||||
</button>
|
||||
</view>
|
||||
<view class="mt-6 text-center text-sm">
|
||||
<view class="inline-block w-80% text-gray-400">
|
||||
为了方便脚手架动态生成不同UI模板，本页的按钮统一使用UI库无关的原生button
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test-css {
|
||||
// 16rpx=>0.5rem
|
||||
padding-bottom: 16rpx;
|
||||
// mt-4=>1rem=>16px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,56 +0,0 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Alova 请求演示"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRequest } from 'alova/client'
|
||||
import { foo } from '@/api/foo-alova'
|
||||
|
||||
const initialData = undefined
|
||||
|
||||
const { loading, data, send } = useRequest(foo, {
|
||||
initialData,
|
||||
immediate: true,
|
||||
})
|
||||
console.log(data)
|
||||
function reset() {
|
||||
data.value = initialData
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="p-6 text-center">
|
||||
<button type="primary" size="mini" class="my-6 w-160px" @click="send">
|
||||
发送请求
|
||||
</button>
|
||||
<view class="h-16">
|
||||
<view v-if="loading">
|
||||
loading...
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="text-xl">
|
||||
请求数据如下
|
||||
</view>
|
||||
<view class="text-green leading-8">
|
||||
{{ JSON.stringify(data) }}
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="text-red">
|
||||
{{ data?.id }}
|
||||
</view>
|
||||
</view>
|
||||
<button type="default" size="mini" class="my-6 w-160px" @click="reset">
|
||||
重置数据
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
@ -1,54 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { IFooItem } from '@/api/foo'
|
||||
import { getFooAPI } from '@/api/foo'
|
||||
|
||||
// const initialData = {
|
||||
// name: 'initialData',
|
||||
// id: '1234',
|
||||
// }
|
||||
const initialData = undefined
|
||||
|
||||
const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
|
||||
immediate: true,
|
||||
initialData,
|
||||
})
|
||||
|
||||
function reset() {
|
||||
data.value = initialData
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="p-6 text-center">
|
||||
<view class="my-2">
|
||||
pages 里面的 vue 文件会扫描成页面，将自动添加到 pages.json 里面。
|
||||
</view>
|
||||
<view class="my-2 text-green-400">
|
||||
但是 pages/components 里面的 vue 不会。
|
||||
</view>
|
||||
|
||||
<view class="my-4 text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="run">
|
||||
发送请求
|
||||
</button>
|
||||
</view>
|
||||
<view class="h-16">
|
||||
<view v-if="loading">
|
||||
loading...
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="text-xl">
|
||||
请求数据如下
|
||||
</view>
|
||||
<view class="text-green leading-8">
|
||||
{{ JSON.stringify(data) }}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="my-4 text-center">
|
||||
<button type="warn" size="mini" class="w-160px" :disabled="!data" @click="reset">
|
||||
重置数据
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -1,53 +0,0 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Vue Query 请求演示"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
import { foo } from '@/api/foo'
|
||||
import { getFooQueryOptions } from '@/api/foo-vue-query'
|
||||
|
||||
// 简单使用
|
||||
onShow(async () => {
|
||||
const res = await foo()
|
||||
console.log('res: ', res)
|
||||
})
|
||||
|
||||
// vue-query 版
|
||||
const {
|
||||
data,
|
||||
error,
|
||||
isLoading: loading,
|
||||
refetch: send,
|
||||
} = useQuery(getFooQueryOptions('菲鸽-vue-query'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="p-6 text-center">
|
||||
<button type="primary" size="mini" class="my-6 w-160px" @click="send">
|
||||
发送请求
|
||||
</button>
|
||||
<view class="h-16">
|
||||
<view v-if="loading">
|
||||
loading...
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="text-xl">
|
||||
请求数据如下
|
||||
</view>
|
||||
<view class="text-green leading-8">
|
||||
{{ JSON.stringify(data) }}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
@ -1,127 +0,0 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"needLogin": true,
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
"navigationStyle": "default",
|
||||
"navigationBarTitleText": "选择城市"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="search-box mx-30rpx mt-30rpx">
|
||||
<wd-search
|
||||
placeholder="请输入城市名称"
|
||||
placeholder-left></wd-search>
|
||||
</view>
|
||||
|
||||
<view class="mt-52rpx mx-30rpx">
|
||||
<view class="text-[#333] leading-42rpx text-30rpx font-bold">当前定位</view>
|
||||
<view class="mt-40rpx">
|
||||
<view class="bg-[#F8F9FA] rounded-28rpx w-162rpx h-56rpx text-[#606266] flex items-center justify-center">
|
||||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
|
||||
<view class="text-26rpx text-[#606266] leading-36rpx">{{ city || LOCATION_DEFAULT_CITY }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-50rpx mx-30rpx">
|
||||
<view class="text-[#333] leading-42rpx text-30rpx font-bold">已开通城市</view>
|
||||
<view class="mt-40rpx grid grid-cols-4 gap-20rpx w-full">
|
||||
<view class="bg-[#F8F9FA] rounded-28rpx h-56rpx text-[#606266] flex items-center justify-center"
|
||||
v-for="(item, index) in openCityList" :key="index"
|
||||
@click="City.handleChooseCity(item)"
|
||||
>
|
||||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
|
||||
<view class="text-26rpx text-[#606266] leading-36rpx">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
import { getOpenCityList } from '@/api/tea-room'
|
||||
import { LOCATION_CITY_KEY, LOCATION_LAT_KEY, LOCATION_LNG_KEY } from '@/hooks/useLocation'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 经纬度
|
||||
const latitude = ref<number>(0)
|
||||
const longitude = ref<number>(0)
|
||||
const city = ref<string>('')
|
||||
|
||||
// 已开通城市列表
|
||||
const openCityList = ref<Array<any>>([])
|
||||
|
||||
onLoad((args) => {
|
||||
if (args.lat && args.lng) {
|
||||
latitude.value = Number(args.lat)
|
||||
longitude.value = Number(args.lng)
|
||||
}
|
||||
|
||||
City.handleInit()
|
||||
})
|
||||
|
||||
const City = {
|
||||
handleInit: async () => {
|
||||
city.value = uni.getStorageSync(LOCATION_CITY_KEY)
|
||||
const res = await getOpenCityList()
|
||||
openCityList.value = res.list
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择城市
|
||||
*/
|
||||
handleChooseCity: (item: any) => {
|
||||
|
||||
const params = {
|
||||
latitude: item.latitude,
|
||||
longitude: item.longitude,
|
||||
city: item.name
|
||||
}
|
||||
uni.$emit('locationUpdate', params)
|
||||
|
||||
uni.setStorageSync(LOCATION_LAT_KEY, item.latitude)
|
||||
uni.setStorageSync(LOCATION_LNG_KEY, item.longitude)
|
||||
uni.setStorageSync(LOCATION_CITY_KEY, item.name)
|
||||
router.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-right: 32px;
|
||||
--wot-search-padding: 0;
|
||||
--wot-search-side-padding: 0;
|
||||
|
||||
:deep() {
|
||||
.wd-search {
|
||||
background: transparent !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wd-search__block {
|
||||
height: 72rpx;
|
||||
background-color: #F8F9FA !important;
|
||||
}
|
||||
|
||||
.wd-search__input {
|
||||
// #ifndef MP
|
||||
padding-right: 0 !important;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -73,7 +73,7 @@
|
||||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx">套餐管理</view>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-col justify-center items-center w-[25%]">
|
||||
<view class="flex flex-col justify-center items-center w-[25%]" @click="router.navigateTo('/bundle/user/user-list')">
|
||||
<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image6.png`" mode="aspectFit" />
|
||||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx">用户列表</view>
|
||||
</view>
|
||||
|
||||
@ -174,7 +174,7 @@
|
||||
return
|
||||
}
|
||||
|
||||
router.navigateTo( '/pages/login/set-password')
|
||||
router.navigateTo('/pages/login/set-password')
|
||||
},
|
||||
|
||||
// 获取手机号
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 664 B |
Binary file not shown.
|
Before Width: | Height: | Size: 394 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 734 B |
Binary file not shown.
|
Before Width: | Height: | Size: 266 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
@ -1,55 +1,38 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
</route>
|
||||
}</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { IUserResult } from '@/api/types/user'
|
||||
import { getUserInfo } from '@/api/user'
|
||||
import { useUserStore } from '@/store'
|
||||
import { router } from '@/utils/tools'
|
||||
import headerBgImg from './img/bg.png'
|
||||
import modifyBgImg from './img/modify.png'
|
||||
import editIconImg from './img/修改 (1).png'
|
||||
import defaultAvatarImg from './img/头像.png'
|
||||
import playIconImg from './img/播放 (5).png'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
|
||||
// 本地图片资源
|
||||
const defaultAvatar = defaultAvatarImg as string
|
||||
const editIcon = editIconImg as string
|
||||
const playIcon = playIconImg as string
|
||||
const headerBg = headerBgImg as string
|
||||
const modifyBg = modifyBgImg as string
|
||||
|
||||
// 调试：检查背景图片路径
|
||||
console.log('headerBg:', headerBg)
|
||||
|
||||
// 登录信息相关
|
||||
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: '',
|
||||
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)
|
||||
|
||||
@ -59,280 +42,280 @@ const sheetMenu = ref<{ name: string }[]>([])
|
||||
|
||||
// 门店信息
|
||||
const storeInfo = ref({
|
||||
douyin_uid: '236598984587',
|
||||
address: '上海浦东新区新金桥路58号新银东大厦 15楼F室',
|
||||
business_hours: '08:00-22:00',
|
||||
contact_phone: '021-8888888',
|
||||
douyin_uid: '236598984587',
|
||||
address: '上海浦东新区新金桥路58号新银东大厦 15楼F室',
|
||||
business_hours: '08:00-22:00',
|
||||
contact_phone: '021-8888888',
|
||||
})
|
||||
|
||||
// 门店媒体列表（视频/图片）
|
||||
const storeMediaList = ref([
|
||||
{ type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
|
||||
{ type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
|
||||
{ type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
|
||||
])
|
||||
|
||||
// 格式化账号显示（152****3412格式）
|
||||
function formatAccount(account: string) {
|
||||
if (!account)
|
||||
return ''
|
||||
if (account.length <= 7)
|
||||
return account
|
||||
return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
|
||||
if (!account)
|
||||
return ''
|
||||
if (account.length <= 7)
|
||||
return account
|
||||
return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
console.log('🚀 ~ isLogin.value:', 1)
|
||||
if (isLogin.value) {
|
||||
console.log('🚀 ~ isLogin.value:', 3)
|
||||
// 获取用户详情信息接口
|
||||
getUserInfo().then((res) => {
|
||||
user.value = res
|
||||
})
|
||||
}
|
||||
else {
|
||||
console.log('🚀 ~ isLogin.value:', 4)
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
}
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
console.log('🚀 ~ isLogin.value:', 1)
|
||||
if (isLogin.value) {
|
||||
console.log('🚀 ~ isLogin.value:', 3)
|
||||
// 获取用户详情信息接口
|
||||
getUserInfo().then((res) => {
|
||||
user.value = res
|
||||
})
|
||||
}
|
||||
else {
|
||||
console.log('🚀 ~ isLogin.value:', 4)
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
uni.$on('clearUser', () => {
|
||||
console.log('🚀 ~ isLogin.value:', 2)
|
||||
uni.$on('clearUser', () => {
|
||||
console.log('🚀 ~ isLogin.value:', 2)
|
||||
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
})
|
||||
Object.keys(user.value).forEach((key) => {
|
||||
user.value[key] = ''
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('clearUser')
|
||||
uni.$off('clearUser')
|
||||
})
|
||||
|
||||
const My = {
|
||||
// 跳转到个人信息
|
||||
handleToProfile: () => {
|
||||
if (!isLogin.value) {
|
||||
router.navigateTo('/pages/my/profile')
|
||||
}
|
||||
else {
|
||||
router.navigateTo('/pages/login/login')
|
||||
}
|
||||
},
|
||||
// 跳转到个人信息
|
||||
handleToProfile: () => {
|
||||
if (!isLogin.value) {
|
||||
router.navigateTo('/bundle/profile/profile')
|
||||
}
|
||||
else {
|
||||
router.navigateTo('/pages/login/login')
|
||||
}
|
||||
},
|
||||
|
||||
// 点击显示客服电话
|
||||
handleShowService: () => {
|
||||
showServiceMobile.value = true
|
||||
sheetMenu.value = [
|
||||
{ name: '400-800-8888' },
|
||||
]
|
||||
},
|
||||
// 点击显示客服电话
|
||||
handleShowService: () => {
|
||||
showServiceMobile.value = true
|
||||
sheetMenu.value = [
|
||||
{ name: '400-800-8888' },
|
||||
]
|
||||
},
|
||||
|
||||
// 选择菜单-拨打客服电话
|
||||
handleSelectMenu: (item: any) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: item.item.name,
|
||||
})
|
||||
},
|
||||
// 选择菜单-拨打客服电话
|
||||
handleSelectMenu: (item: any) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: item.item.name,
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到设置页面
|
||||
handleToSettings: () => {
|
||||
// TODO: 跳转到设置页面
|
||||
console.log('跳转到设置页面')
|
||||
},
|
||||
// 跳转到设置页面
|
||||
handleToSettings: () => {
|
||||
// TODO: 跳转到设置页面
|
||||
console.log('跳转到设置页面')
|
||||
},
|
||||
|
||||
// 编辑门店信息
|
||||
handleEditStore: () => {
|
||||
// TODO: 编辑门店信息
|
||||
console.log('编辑门店信息')
|
||||
},
|
||||
// 编辑门店信息
|
||||
handleEditStore: () => {
|
||||
// TODO: 编辑门店信息
|
||||
console.log('编辑门店信息')
|
||||
},
|
||||
|
||||
// 预览媒体（视频/图片）
|
||||
handlePreviewMedia: (index: number) => {
|
||||
const item = storeMediaList.value[index]
|
||||
if (item.type === 'video') {
|
||||
// TODO: 播放视频
|
||||
console.log('播放视频', item.url)
|
||||
}
|
||||
else {
|
||||
// 预览图片
|
||||
const urls = storeMediaList.value
|
||||
.filter(i => i.type === 'image' && !i.overlay)
|
||||
.map(i => i.url)
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls,
|
||||
})
|
||||
}
|
||||
},
|
||||
// 预览媒体（视频/图片）
|
||||
handlePreviewMedia: (index: number) => {
|
||||
const item = storeMediaList.value[index]
|
||||
if (item.type === 'video') {
|
||||
// TODO: 播放视频
|
||||
console.log('播放视频', item.url)
|
||||
}
|
||||
else {
|
||||
// 预览图片
|
||||
const urls = storeMediaList.value
|
||||
.filter(i => i.type === 'image' && !i.overlay)
|
||||
.map(i => i.url)
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="home-bg fixed left-0 top-0 w-[100%]" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
|
||||
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="ml-16rpx flex items-center" @click="My.handleToSettings" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex">
|
||||
<view class="mr-16rpx flex flex-col" @click="My.handleShowService">
|
||||
<wd-icon name="setting" color="#fff" size="16px" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
<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" @click="My.handleToSettings" />
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="right-slot mr-16rpx flex">
|
||||
<view class="mr-16rpx flex flex-col" @click="My.handleShowService">
|
||||
<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: headerBg ? `url('${headerBg}')` : 'none' }">
|
||||
<view class="relative z-10">
|
||||
<wd-img width="120rpx" height="120rpx" :src="(isLogin && user.avatar) ? user.avatar : defaultAvatar" 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" style="color: #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" style="color: #fff;">
|
||||
账号: {{ formatAccount(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">
|
||||
钱包余额
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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" style="color: #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" style="color: #fff;">
|
||||
账号: {{ formatAccount(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">
|
||||
钱包余额
|
||||
</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">
|
||||
门店茶址24小时智能茶室(中新店)地址
|
||||
</view>
|
||||
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">抖音uid:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.douyin_uid || '236598984587' }}</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 || '上海浦东新区新金桥路58号新银东大厦 15楼F室' }}</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.business_hours || '08:00-22:00' }}</text>
|
||||
</view>
|
||||
<view class="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx" :style="{ backgroundImage: modifyBg ? `url('${modifyBg}')` : 'none' }" @click="My.handleEditStore">
|
||||
<wd-img width="24rpx" height="24rpx" :src="editIcon" class="mr-8rpx" />
|
||||
<text class="text-24rpx text-[#fff]">修改</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">联系电话:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '021-8888888' }}</text>
|
||||
</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">
|
||||
门店茶址24小时智能茶室(中新店)地址
|
||||
</view>
|
||||
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
|
||||
<text class="w-140rpx">抖音uid:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.douyin_uid || '236598984587' }}</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 || '上海浦东新区新金桥路58号新银东大厦 15楼F室' }}</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.business_hours || '08:00-22:00' }}</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="My.handleEditStore">
|
||||
<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">
|
||||
<text class="w-140rpx">联系电话:</text>
|
||||
<text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '021-8888888' }}</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.url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<!-- 视频播放图标 -->
|
||||
<view v-if="item.type === 'video'" class="absolute inset-0 flex items-center justify-center">
|
||||
<wd-img width="60rpx" height="60rpx" :src="playIcon" />
|
||||
</view>
|
||||
<!-- +8 遮罩 -->
|
||||
<view v-if="item.overlay" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<text class="text-32rpx text-[#fff] font-bold">+{{ item.overlay }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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.url" 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>
|
||||
<!-- +8 遮罩 -->
|
||||
<view v-if="item.overlay"
|
||||
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<text class="text-32rpx text-[#fff] font-bold">+{{ item.overlay }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客服电话 -->
|
||||
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
|
||||
</view>
|
||||
<!-- 客服电话 -->
|
||||
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消"
|
||||
@close="showServiceMobile = false" @select="My.handleSelectMenu" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
min-height: 450rpx;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
padding-right: v-bind(rightPadding);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { IUserResult } from '@/api/types/user'
|
||||
@ -13,340 +11,321 @@ import { updateUserInfo } from '@/api/user'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { router } from '@/utils/tools'
|
||||
import { uploadFileUrl, useUpload } from '@/utils/uploadFile'
|
||||
import defaultAvatarImg from './img/头像.png'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
|
||||
// 本地图片资源
|
||||
const defaultAvatar = defaultAvatarImg as string
|
||||
|
||||
// 用户信息相关
|
||||
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: '',
|
||||
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',
|
||||
},
|
||||
{
|
||||
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 { 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')}`
|
||||
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 trimmed = nicknameInput.value.trim()
|
||||
return trimmed.length >= 1 && trimmed.length <= 10
|
||||
})
|
||||
|
||||
const Profile = {
|
||||
/**
|
||||
* 初始化用户信息
|
||||
*/
|
||||
handleInit: () => {
|
||||
// getUserInfo().then((res) => {
|
||||
// user.value = res
|
||||
// })
|
||||
},
|
||||
/**
|
||||
* 初始化用户信息
|
||||
*/
|
||||
handleInit: () => {
|
||||
// getUserInfo().then((res) => {
|
||||
// user.value = res
|
||||
// })
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑头像 - 显示选择面板
|
||||
*/
|
||||
handleEditAvatar: () => {
|
||||
showAvatarActionSheet.value = true
|
||||
},
|
||||
/**
|
||||
* 编辑头像 - 显示选择面板
|
||||
*/
|
||||
handleEditAvatar: () => {
|
||||
showAvatarActionSheet.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理头像选择
|
||||
*/
|
||||
handleSelectAvatarAction: (item: any) => {
|
||||
showAvatarActionSheet.value = false
|
||||
/**
|
||||
* 处理头像选择
|
||||
*/
|
||||
handleSelectAvatarAction: (item: any) => {
|
||||
showAvatarActionSheet.value = false
|
||||
|
||||
if (item.value === 'camera') {
|
||||
// 拍照
|
||||
Profile.handleChooseImage(['camera'])
|
||||
}
|
||||
else if (item.value === 'album') {
|
||||
// 从相册选择
|
||||
Profile.handleChooseImage(['album'])
|
||||
}
|
||||
},
|
||||
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
|
||||
/**
|
||||
* 选择图片
|
||||
*/
|
||||
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
|
||||
},
|
||||
// #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
|
||||
},
|
||||
/**
|
||||
* 编辑昵称 - 显示弹窗
|
||||
*/
|
||||
handleEditNickname: () => {
|
||||
nicknameInput.value = user.value.nickname || ''
|
||||
showEditNicknamePopup.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭编辑昵称弹窗
|
||||
*/
|
||||
handleCloseEditNickname: () => {
|
||||
showEditNicknamePopup.value = false
|
||||
nicknameInput.value = ''
|
||||
},
|
||||
/**
|
||||
* 关闭编辑昵称弹窗
|
||||
*/
|
||||
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
|
||||
}
|
||||
/**
|
||||
* 保存昵称
|
||||
*/
|
||||
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('昵称修改失败')
|
||||
}
|
||||
},
|
||||
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')
|
||||
},
|
||||
/**
|
||||
* 修改手机号
|
||||
*/
|
||||
handleEditMobile: () => {
|
||||
router.navigateTo('/pages/login/mobile?type=edit')
|
||||
},
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
handleEditPassword: () => {
|
||||
// TODO: 实现修改密码功能
|
||||
console.log('修改密码')
|
||||
},
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
handleEditPassword: () => {
|
||||
// TODO: 实现修改密码功能
|
||||
console.log('修改密码')
|
||||
},
|
||||
|
||||
/**
|
||||
* 修改绑定用户
|
||||
*/
|
||||
handleEditBoundUser: () => {
|
||||
// TODO: 实现修改绑定用户功能
|
||||
console.log('修改绑定用户')
|
||||
},
|
||||
/**
|
||||
* 修改绑定用户
|
||||
*/
|
||||
handleEditBoundUser: () => {
|
||||
// TODO: 实现修改绑定用户功能
|
||||
console.log('修改绑定用户')
|
||||
},
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
Profile.handleInit()
|
||||
Profile.handleInit()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view>
|
||||
<navbar title="个人信息" custom-class="!bg-white">
|
||||
<template #right />
|
||||
</navbar>
|
||||
</view>
|
||||
<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 : defaultAvatar" mode="aspectFill" round />
|
||||
</template>
|
||||
</wd-cell>
|
||||
<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="(user.nickname || '昵称名字')" @click="Profile.handleEditNickname" />
|
||||
|
||||
<!-- 修改手机号 -->
|
||||
<wd-cell is-link title="修改手机号" :value="maskedMobile" @click="Profile.handleEditMobile" />
|
||||
<!-- 修改手机号 -->
|
||||
<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.handleEditPassword" />
|
||||
|
||||
<!-- 修改绑定用户 -->
|
||||
<wd-cell is-link title="修改绑定用户" @click="Profile.handleEditBoundUser" />
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
<!-- 修改绑定用户 -->
|
||||
<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"
|
||||
/>
|
||||
<!-- 头像选择 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>
|
||||
<!-- 编辑昵称弹窗 -->
|
||||
<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-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-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="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>
|
||||
<!-- 保存按钮 -->
|
||||
<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;
|
||||
background: #f6f7f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
593
src/pages/order/order-detail.vue
Normal file
593
src/pages/order/order-detail.vue
Normal file
@ -0,0 +1,593 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-254rpx">
|
||||
<!-- 一键续订 -->
|
||||
<!-- <wd-popup v-model="showRenewPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative pb-26rpx">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showRenewPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">续订包间</view>
|
||||
<view>
|
||||
<view class="mx-60rpx">
|
||||
<view class="text-[#01000D] text-32rpx leading-44rpx">续订时间</view>
|
||||
<view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mt-28rpx">
|
||||
<view v-for="item in timeList" :key="item.time"
|
||||
class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
|
||||
:class="[item.id == selectedRenewTime ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F7F7F7] text-[#606266]']"
|
||||
@click="selectedRenewTime = item.id">
|
||||
{{ item.time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-60rpx mt-60rpx">
|
||||
<view class="text-[#01000D] text-32rpx leading-44rpx">支付方式</view>
|
||||
<view class="mt-28rpx">
|
||||
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
|
||||
<view class="flex justify-between items-center mb-40rpx" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
|
||||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<wd-radio :value="item.value">
|
||||
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx" v-if="item.id == 1">可用202.22</view>
|
||||
</wd-radio>
|
||||
</view>
|
||||
</view>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-102rpx">
|
||||
<wd-gap height="2rpx" bg-color="#EFF0F2"></wd-gap>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center mt-50rpx mx-60rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="text-24rpx text-[#303133] leading-34rpx">合计：</view>
|
||||
<view class="flex items-center h-56rpx mr-16rpx">
|
||||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
|
||||
<view class="ml-20rpx">
|
||||
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>立即预定</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup> -->
|
||||
<wd-popup v-model="showRenewPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative pb-26rpx">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showRenewPopup = false; ">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">续订包间</view>
|
||||
<!-- 预定时间 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showBookTimePopup = true;">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
|
||||
<template v-if="reserveTime.length > 0">
|
||||
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
请选择
|
||||
</template>
|
||||
</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-102rpx">
|
||||
<wd-gap height="2rpx" bg-color="#EFF0F2"></wd-gap>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center mt-50rpx mx-60rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="text-24rpx text-[#303133] leading-34rpx">合计：</view>
|
||||
<view class="flex items-center h-56rpx mr-16rpx">
|
||||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="totalReserveMoney"></price-format>
|
||||
<!-- <view class="ml-20rpx">
|
||||
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="OrderDetail.handleRenewReserve">立即预定</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 续订成功 -->
|
||||
<wd-popup v-model="showRenewSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative pt-64rpx pb-74rpx">
|
||||
<view class="flex justify-center items-center">
|
||||
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
|
||||
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">包间续订成功</view>
|
||||
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">可以刷新页面查看预约时间</view>
|
||||
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="showRenewSuccessPopup = false">好的</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 取消订单 -->
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
|
||||
<!-- 费用详情 -->
|
||||
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative pb-30rpx">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">费用明细</view>
|
||||
<view class="collapse">
|
||||
<view class="px-30rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">茶室费</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
|
||||
￥640.00
|
||||
</view>
|
||||
</view>
|
||||
<view class="rounded-16rpx py-20rpx">
|
||||
<view class="mb-26rpx">
|
||||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||||
<view>茶室费（￥160元/小时）</view>
|
||||
<view>x4</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="px-30rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">优惠</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center text-[#4C9F44]">
|
||||
-￥148.00
|
||||
</view>
|
||||
</view>
|
||||
<view class="rounded-16rpx pt-20rpx">
|
||||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||||
<view>优惠券</view>
|
||||
<view>-￥20</view>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||||
<view>会员八折</view>
|
||||
<view>-￥20</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mx-60rpx mt-30rpx">
|
||||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
||||
</view>
|
||||
<view class="mx-60rpx text-30rpx text-[#303133] leading-42rpx flex items-center justify-between mt-30rpx">
|
||||
<view>实际退款</view>
|
||||
<view>￥698.90</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 选择预定时间 -->
|
||||
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="OrderDetail.handleChooseReserveTime"></booking-time>
|
||||
|
||||
<view>
|
||||
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx coupon-bg" >
|
||||
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
|
||||
<view class="mr-30rpx">
|
||||
<wd-img width="190rpx" height="190rpx" :src="order.room_msg.img" mode="scaleToFill"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view class="flex justify-between items-center" @click="OrderDetail.handleToStore">
|
||||
<view class="flex items-center font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx">
|
||||
<view class="line-1 w-300rpx">
|
||||
{{ order.room_msg.title }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.room_all_price }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||||
￥{{ order.room_price }}/小时
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-28rpx pb-36rpx">
|
||||
<view class="text-30rpx leading-42rpx text-[#303133] px-30rpx">预约信息</view>
|
||||
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
|
||||
<view class="mb-20rpx px-30rpx">预约时间：{{ order.day_time }} {{ order.renew_dtime.start_time || order.start_time }}-{{ order.renew_dtime.end_time || order.end_time }}</view>
|
||||
<view class="flex justify-between items-center pl-30rpx" >
|
||||
<view>预约时长：{{ order.hours }}小时</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>订单编号</view>
|
||||
<view>
|
||||
<text>{{ order.order_sn }}</text>
|
||||
<wd-divider vertical />
|
||||
<text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>创建时间</view>
|
||||
<view>{{ order.dtime }}</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>支付方式</view>
|
||||
<view>管理员添加</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>用户手机号</view>
|
||||
<view>1110</view>
|
||||
</view>
|
||||
<view class="my-22rpx">
|
||||
<wd-gap height="2rpx" bg-color='#F6F7F9'></wd-gap>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>续单时长</view>
|
||||
<view>{{ order.update_dtime }}</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>续单费用</view>
|
||||
<view>{{ order.update_dtime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
|
||||
<!-- 待使用 -->
|
||||
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus == AdminOrderStatus.ToUse || orderStatus == AdminOrderStatus.Consuming">
|
||||
<view class="flex items-center">
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="OrderDetail.handleCancelOrder">取消订单</view>
|
||||
</view>
|
||||
<view class="w-360rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleToPay">释放时间</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TeaRoomOrderStatusTextValue, TeaRoomOrderStatus, AdminOrderStatus } from '@/utils/order'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import {toast} from '@/utils/toast'
|
||||
import { getTeaRoomOrderDetail } from '@/api/tea-room'
|
||||
import { handleTRCancelOrderHooks, handleTRToPayHooks, handleToTRStoreHooks } from '@/hooks/useOrder'
|
||||
import type { ITeaSpecialistOrderDetailsResult } from '@/api/types/tea'
|
||||
import { router } from '@/utils/tools'
|
||||
import { ReserveServiceCategory, OrderType } from '@/utils/order'
|
||||
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
|
||||
import { getNext7Days, renewTeaRoomOrder } from '@/api/tea-room'
|
||||
import { toTimes, copy } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const title = ref<string>('')
|
||||
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
|
||||
|
||||
// 续订包间
|
||||
const showRenewPopup = ref<boolean>(false)
|
||||
const timeList = [
|
||||
{id: 1, time: '1小时'},
|
||||
{id: 2, time: '2小时'},
|
||||
{id: 3, time: '3小时'},
|
||||
{id: 4, time: '4小时'},
|
||||
{id: 5, time: '5小时'},
|
||||
{id: 6, time: '6小时'},
|
||||
]
|
||||
const selectedRenewTime = ref<number>(0) // 选择的续订时间
|
||||
const pay = ref<number>(1) // 支付方式
|
||||
const payList = ref<Array<any>>([
|
||||
{
|
||||
id: 1,
|
||||
name: '平台余额',
|
||||
icon: `${OSS}icon/icon_platform_balance.png`,
|
||||
balance: 0,
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '微信支付',
|
||||
icon: `${OSS}icon/icon_weichat.png`,
|
||||
balance: 0,
|
||||
value: 3
|
||||
}
|
||||
])
|
||||
|
||||
const showRenewSuccessPopup = ref<boolean>(false)
|
||||
|
||||
// 选择预定时间
|
||||
const showBookTimePopup = ref<boolean>(false)
|
||||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||||
minimum_time: 0,
|
||||
time: []
|
||||
})
|
||||
const reserveTime = ref<Array<any>>([])
|
||||
|
||||
// 订单倒计时取消
|
||||
const time = ref<number>(30 * 60 * 60 * 1000)
|
||||
|
||||
// 取消订单弹窗
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
// 费用明细
|
||||
const showCostPopup = ref<boolean>(false) // 是否显示退款详情弹出框
|
||||
|
||||
// 订单
|
||||
const orderId = ref<number>(0)
|
||||
const order = ref<ITeaSpecialistOrderDetailsResult>({
|
||||
order_amount: '',
|
||||
order_sn: '',
|
||||
store_id: 0,
|
||||
room_msg: {
|
||||
id: 0,
|
||||
price: 0,
|
||||
img: '',
|
||||
title: '',
|
||||
},
|
||||
store_msg: {
|
||||
id: 0,
|
||||
address: '',
|
||||
name: '',
|
||||
operation_type: 1,
|
||||
image: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
contact_phone: ''
|
||||
},
|
||||
time1: 0,
|
||||
order_status: 0,
|
||||
room_all_price: 0,
|
||||
room_price: 0,
|
||||
day_time: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
hours: 0,
|
||||
distance: 0,
|
||||
pay_way: 0,
|
||||
pay_way_title: '',
|
||||
dtime: '',
|
||||
update_dtime: '',
|
||||
renew_price: 0,
|
||||
renew_dtime: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
renew_price: 0
|
||||
}
|
||||
})
|
||||
|
||||
// 一键续订的金额
|
||||
const totalReserveMoney = ref<number>(0)
|
||||
|
||||
onLoad(async (args) => {
|
||||
orderId.value = args.orderId
|
||||
// 获取订单详情
|
||||
OrderDetail.handleInit()
|
||||
|
||||
// 预定时间
|
||||
const next7 = await getNext7Days()
|
||||
Object.assign(sevenDay, next7)
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('refreshOrderDetail')
|
||||
})
|
||||
|
||||
onShareAppMessage(async (e) => {
|
||||
if (e.from === 'button') {
|
||||
return {
|
||||
title: `我在${order.value.store_msg.name}预定了${order.value.room_msg.title}，一起来吧！`,
|
||||
path: `/pages/share/tea-room/share-order-detail?orderId=${orderId.value}`,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const OrderDetail = {
|
||||
/**
|
||||
* 获取订单详情
|
||||
*/
|
||||
handleInit: async () => {
|
||||
const res = await getTeaRoomOrderDetail({
|
||||
id: orderId.value,
|
||||
latitude: uni.getStorageSync('latitude'),
|
||||
longitude: uni.getStorageSync('longitude')
|
||||
})
|
||||
order.value = res.details
|
||||
console.log("🚀 ~ order.value :", order.value )
|
||||
title.value = TeaRoomOrderStatusTextValue[order.value.order_status].title || '订单详情'
|
||||
orderStatus.value = order.value.order_status
|
||||
},
|
||||
|
||||
/**
|
||||
* 支付订单
|
||||
*/
|
||||
handleToPay: () => {
|
||||
uni.$on('refreshOrderDetail', () => {
|
||||
OrderDetail.handleInit()
|
||||
uni.$off('refreshOrderDetail')
|
||||
})
|
||||
|
||||
handleTRToPayHooks(orderId.value, order.value.store_msg.name, order.value.store_msg.id)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取订单详情
|
||||
*/
|
||||
handleCancelOrder: () => {
|
||||
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((res) => {
|
||||
if (res.action == 'confirm') {
|
||||
// 点击确认按钮回调事件
|
||||
uni.$on('refreshOrderDetail', () => {
|
||||
OrderDetail.handleInit()
|
||||
uni.$off('refreshOrderDetail')
|
||||
})
|
||||
|
||||
handleTRCancelOrderHooks(orderId.value)
|
||||
}
|
||||
toast.info('订单取消成功')
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 再次预定
|
||||
*/
|
||||
handleAgainReserve: () => {
|
||||
router.navigateTo(
|
||||
`/bundle/tea-room/detail?storeId=${order.value.store_msg.id}&roomId=${order.value.room_msg.id}&type=${ReserveServiceCategory.ReserveRoom}&price=${order.value.room_msg.price}`
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* 选中预定时间
|
||||
*/
|
||||
handleChooseReserveTime: (params: any) => {
|
||||
reserveTime.value = params
|
||||
|
||||
// 一键续订的金额
|
||||
totalReserveMoney.value = Number(toTimes(params[3], order.value.room_price))
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认一键续订
|
||||
*/
|
||||
handleRenewReserve: async () => {
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
|
||||
try {
|
||||
await renewTeaRoomOrder({
|
||||
id: orderId.value,
|
||||
start_time: reserveTime.value[2][0],
|
||||
end_time: reserveTime.value[2][reserveTime.value[2].length - 1],
|
||||
renew_hour: reserveTime.value[3],
|
||||
})
|
||||
|
||||
uni.$on('payment', params => {
|
||||
uni.$off("payment")
|
||||
if (params.result) {
|
||||
OrderDetail.handleInit()
|
||||
showRenewSuccessPopup.value = true
|
||||
} else {
|
||||
message.alert({
|
||||
title: '提示',
|
||||
msg: '您已取消续订',
|
||||
confirmButtonText: '确定',
|
||||
confirmButtonProps: {
|
||||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
uni.hideLoading()
|
||||
showRenewPopup.value = false
|
||||
|
||||
router.navigateTo(
|
||||
`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&renew=renewTeaRoomOrder&orderId=${orderId.value}&teaRoomName=${order.value.store_msg.name}&storeId=${order.value.store_msg.id}`
|
||||
)
|
||||
} catch (err) {
|
||||
uni.hideLoading()
|
||||
toast.info('续订失败')
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到对对应室的详情页
|
||||
*/
|
||||
handleToStore: () => {
|
||||
handleToTRStoreHooks(order.value.store_id, order.value.store_msg.operation_type)
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理导航逻辑
|
||||
*/
|
||||
handleLocation: () => {
|
||||
uni.openLocation({
|
||||
latitude: Number(order.value.store_msg.latitude),
|
||||
longitude: Number(order.value.store_msg.longitude),
|
||||
name: order.value.store_msg.name,
|
||||
address: order.value.store_msg.address,
|
||||
scale: 18
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理拨打电话逻辑
|
||||
*/
|
||||
handleCallPhone: () => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: order.value.store_msg.contact_phone
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.coupon-bg {
|
||||
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
:deep() {
|
||||
.wd-collapse-item::after,
|
||||
.wd-collapse-item__header.is-expanded::after {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.wd-collapse-item__body {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
222
src/pages/order/order.vue
Normal file
222
src/pages/order/order.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
|
||||
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder>
|
||||
<template #left>
|
||||
<!-- <view class="search-box">
|
||||
<wd-search v-model="keywords" hide-cancel placeholder-left light placeholder="搜索订单信息"></wd-search>
|
||||
</view> -->
|
||||
<view class="search-box flex items-center ml-26rpx" @click="Order.handleToSearch">
|
||||
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
|
||||
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
|
||||
</wd-search>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<view class="tabs">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="Order.handleChangeTabs">
|
||||
<wd-tab title="全部" :name="AdminOrderStatusText.All"></wd-tab>
|
||||
<wd-tab title="待使用" :name="AdminOrderStatusText.ToUse"></wd-tab>
|
||||
<wd-tab title="使用中" :name="AdminOrderStatusText.Consuming"></wd-tab>
|
||||
<wd-tab title="已完成" :name="AdminOrderStatusText.Finished"></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs mt-18rpx mx-30rpx">
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Order.upCallback" :down="downOption" :up="upOption">
|
||||
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
|
||||
<combo-card :type="OrderSource.Admin" :order="item"></combo-card>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getTeaSpecialistOrderList } from '@/api/teaSpecialist-order'
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { OrderSource, AdminOrderStatusText, TeaSpecialistOrderStatusText, TeaSpecialistOrderStatusValue } from '@/utils/order'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
/* mescroll */
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const list = ref<Array<any>>([]) // 茶艺师列表
|
||||
const keywords = ref<string>('')
|
||||
const orderStatus = ref<string>('')
|
||||
|
||||
|
||||
// tab
|
||||
const tab = ref<string>('all')
|
||||
|
||||
onLoad((args) => {
|
||||
uni.$on('refreshOrderList', () => {
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll()
|
||||
})
|
||||
|
||||
// 根据传过来的参数决定显示哪个tab
|
||||
if (args.orderStatus) {
|
||||
tab.value = args.orderStatus
|
||||
}
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('refreshOrderList')
|
||||
})
|
||||
|
||||
const Order = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
upCallback: (mescroll) => {
|
||||
// const filter = {
|
||||
// page: mescroll.num,
|
||||
// size: mescroll.size,
|
||||
// order_status: orderStatus.value,
|
||||
// search: keywords.value
|
||||
// }
|
||||
|
||||
// getTeaSpecialistOrderList(filter).then((res) => {
|
||||
// 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() // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转茶室搜索
|
||||
*/
|
||||
handleToSearch: () => {
|
||||
uni.$on('refreshTeaRoomList', params => {
|
||||
keywords.value = params.keywords
|
||||
Order.handleResetSearch()
|
||||
|
||||
uni.$off('refreshTeaRoomList')
|
||||
})
|
||||
router.navigateTo(`/pages/search/search?keywords=${keywords.value}`)
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 重置搜索
|
||||
*/
|
||||
handleResetSearch: () => {
|
||||
console.log("🚀 ~ location:", 456)
|
||||
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll()
|
||||
},
|
||||
|
||||
|
||||
// 切换tab
|
||||
handleChangeTabs: (e: {index: number, name: string}) => {
|
||||
tab.value = e.name
|
||||
if (e.name === TeaSpecialistOrderStatusText.Pending) {
|
||||
orderStatus.value = '0'
|
||||
} else {
|
||||
orderStatus.value = TeaSpecialistOrderStatusValue[e.name] || ''
|
||||
}
|
||||
|
||||
// 切换tab时,重置当前的mescroll
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll();
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
handleBack: () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
:deep() {
|
||||
.wd-navbar__left {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
:deep() {
|
||||
.wd-tabs,
|
||||
.wd-tabs__nav {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item {
|
||||
font-weight: 400 !important;
|
||||
font-size: 28rpx !important;
|
||||
color: #606266 !important;
|
||||
line-height: 40rpx !important;
|
||||
padding: 0 30rpx !important;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item.is-active {
|
||||
font-weight: 500 !important;
|
||||
color: #303133 !important;
|
||||
font-size: 32rpx !important;
|
||||
line-height: 44rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-right: 40px;
|
||||
--wot-search-padding: 0;
|
||||
--wot-search-side-padding: 0;
|
||||
|
||||
:deep() {
|
||||
.wd-search {
|
||||
background: transparent !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wd-search__block {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.wd-search__input {
|
||||
// #ifdef MP
|
||||
padding-left: 32px !important;
|
||||
padding-right: 32px !important;
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
padding-right: 0 !important;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,238 +0,0 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="search-box flex items-center ml-26rpx">
|
||||
<wd-search v-model="keywords" placeholder="请输入内容" hide-cancel disabled placeholder-left
|
||||
@search="Reserve.handleSearch()"
|
||||
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
|
||||
</wd-search>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<view class="tabs">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" @change="Reserve.handleChangeTab" :lazy="false">
|
||||
<wd-tab title="茶室预约"></wd-tab>
|
||||
<wd-tab title="茶艺师预约"></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :down="downOption" :up="upOption">
|
||||
<template v-if="tab === 0">
|
||||
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order="item"></combo-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="tab === 1">
|
||||
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
|
||||
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></combo-card>
|
||||
</view>
|
||||
</template>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
|
||||
<!-- <view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }"> -->
|
||||
<!-- 茶室预约 -->
|
||||
<!-- <view v-if="tab === 0">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :up="upOption">
|
||||
<view v-for="(item, index) in 5" :key="index" >
|
||||
<view class="mb-20rpx" @click="Reserve.handleToReserveRoomOrder">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Consuming"></combo-card>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view> -->
|
||||
|
||||
<!-- 茶艺师预约 -->
|
||||
<!-- <view v-if="tab === 1">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :up="upOption">
|
||||
<view v-for="(item, index) in 5" :key="index" >
|
||||
<view class="mb-20rpx" @click="Reserve.handleToTeaSpecialistOrder">
|
||||
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Consuming"></combo-card>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view> -->
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { OrderSource, OrderStatus } from '@/utils/order'
|
||||
import { router } from '@/utils/tools'
|
||||
import { getTeaRoomOrderList } from '@/api/tea-room'
|
||||
import { getTeaSpecialistOrderList } from '@/api/teaSpecialist-order'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = Number(inject('navbarHeight')) + 42 + 14 // 42为tabs的高度 14是边距值
|
||||
|
||||
// tab切换
|
||||
const tab = ref<number>(0)
|
||||
const reserveType = ref<number>(0) // 0:茶室预约 1:茶艺师预约
|
||||
|
||||
// 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>('') // 搜索关键词
|
||||
|
||||
onLoad(() => {
|
||||
})
|
||||
|
||||
const Reserve = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
const filter = {
|
||||
page: mescroll.num,
|
||||
size: mescroll.size,
|
||||
order_status: orderStatus.value,
|
||||
search: keywords.value
|
||||
}
|
||||
|
||||
if (tab.value === 0) {
|
||||
getTeaRoomOrderList(filter).then((res) => {
|
||||
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() // 请求失败, 结束加载
|
||||
})
|
||||
} else if (tab.value === 1) {
|
||||
// 茶艺师预约接口调用
|
||||
getTeaSpecialistOrderList(filter).then((res) => {
|
||||
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() // 请求失败, 结束加载
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* tab切换获取index
|
||||
* @param item
|
||||
*/
|
||||
handleChangeTab: (item: { index: number }) => {
|
||||
tab.value = item.index
|
||||
|
||||
// 切换tab时,重置当前的mescroll
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll();
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
handleSearch: () => {
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background-color: $cz-page-background;
|
||||
background-image: url(#{$OSS}images/home/home_bg.png);
|
||||
// background-size: 100% 300rpx;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 20rpx;
|
||||
// background-position: top center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-right: 40px;
|
||||
--wot-search-padding: 0;
|
||||
--wot-search-side-padding: 0;
|
||||
|
||||
:deep() {
|
||||
.wd-search {
|
||||
background: transparent !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wd-search__block {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.wd-search__input {
|
||||
// #ifdef MP
|
||||
padding-left: 32px !important;
|
||||
padding-right: 32px !important;
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
padding-right: 0 !important;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
:deep() {
|
||||
.wd-tabs,
|
||||
.wd-tabs__nav {
|
||||
background: transparent !important;
|
||||
}
|
||||
.wd-tabs__nav-item {
|
||||
font-size: 32rpx !important;
|
||||
color: #303133 !important;
|
||||
line-height: 42rpx !important;
|
||||
padding: 0 30rpx !important;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item.is-active {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.wd-tabs__line {
|
||||
bottom: 0 !important;
|
||||
width: 60rpx !important;
|
||||
height: 16rpx !important;
|
||||
background-color: transparent !important;
|
||||
background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,330 +0,0 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-100rpx">
|
||||
<view>
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" :fixed="true" :placeholder="true" :zIndex="10">
|
||||
<template #left>
|
||||
<view class="h-48rpx flex items-center" @click="ShareOrderDetail.handleToHome">
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="home" size="22px" color="#121212"></wd-icon>
|
||||
</view>
|
||||
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">分享订单</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
|
||||
<!-- 描述信息 -->
|
||||
<view class="text-[#909399] text-26rpx leading-36rpx mb-40rpx mt-20rpx">
|
||||
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">使用过程中有任何问题，请联系客服</view>
|
||||
<view class="flex items-center justify-center" v-if="orderStatus === TeaRoomOrderStatus.Pending">
|
||||
<view class="flex items-center mr-6rpx">
|
||||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_time.png`"/>
|
||||
</view>
|
||||
<view class="flex items-center text-26rpx leading-36rpx text-[#909399]">
|
||||
<view>还剩</view>
|
||||
<view class="mx-6rpx">
|
||||
<wd-count-down :time="order.time1" custom-class="!text-[#FF5951]" />
|
||||
</view>
|
||||
<view>订单自动取消</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx coupon-bg" >
|
||||
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
|
||||
<view class="mr-30rpx">
|
||||
<wd-img width="190rpx" height="190rpx" :src="order.room_msg.img" mode="scaleToFill"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex items-center font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx">
|
||||
<view class="line-1 w-300rpx">
|
||||
{{ order.room_msg.title }}
|
||||
</view>
|
||||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
<view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.room_all_price }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||||
￥{{ order.room_price }}/小时
|
||||
</view>
|
||||
<!-- 等待付款不显示实付金额 -->
|
||||
<view class="text-[#606266] text-right mt-26rpx" v-if="orderStatus !== TeaRoomOrderStatus.Pending">
|
||||
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
|
||||
<text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
|
||||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-28rpx pb-36rpx">
|
||||
<view class="text-30rpx leading-42rpx text-[#303133] px-30rpx">预约信息</view>
|
||||
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
|
||||
<view class="mb-20rpx px-30rpx">预约时间：{{ order.day_time }} {{ order.start_time }}-{{ order.end_time }}</view>
|
||||
<view class="flex justify-between items-center pl-30rpx" >
|
||||
<view>预约时长：{{ order.hours }}小时</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 已预约和消费中显示开门锁 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-20rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">
|
||||
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx px-30rpx">开门锁</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="flex justify-between items-center mt-18rpx pb-18rpx px-62rpx">
|
||||
<view class="w-224rpx">
|
||||
<view class="relative h-64rpx">
|
||||
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image5.png`"/>
|
||||
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
|
||||
</view>
|
||||
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">大门锁</view>
|
||||
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">手动输入 1052 32#</view>
|
||||
</view>
|
||||
<view class="border-r-2rpx border-r-solid border-r-[#F6F7F9] h-224rpx"></view>
|
||||
<view class="w-224rpx">
|
||||
<view class="relative h-64rpx">
|
||||
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image6.png`"/>
|
||||
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
|
||||
</view>
|
||||
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">房间锁</view>
|
||||
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">手动输入 1052 32#</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 适用门店 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
|
||||
<view class="mt-26rpx flex items-center">
|
||||
<view class="mr-24rpx">
|
||||
<wd-img width="170rpx" height="170rpx" :src="order.store_msg.image"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1 flex justify-between items-center relative">
|
||||
<view class="">
|
||||
<view class="text-[#303133] text-30rpx leading-40rpx line-2">{{ order.store_msg.name }}</view>
|
||||
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您{{ order.distance }}km</view>
|
||||
<view class="flex items-center mt-14rpx">
|
||||
<view class="mr-8rpx">
|
||||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||||
</view>
|
||||
<view class="ml-2rpx text-26rpx text-[#606266] line-1 w-300rpx">{{ order.store_msg.address }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||||
<view class="text-center mr-20rpx" >
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||||
</view>
|
||||
<view class="text-center" >
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>订单编号</view>
|
||||
<view>
|
||||
<text>{{ order.order_sn }}</text>
|
||||
<wd-divider vertical />
|
||||
<text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaRoomOrderStatus.Pending && order.pay_way">
|
||||
<view>交易方式</view>
|
||||
<view>{{ order.pay_way_title }}</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||
<view>创建时间</view>
|
||||
<view>{{ order.dtime }}</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaRoomOrderStatus.Pending && orderStatus != TeaRoomOrderStatus.Cancelled && order.pay_way_title">
|
||||
<view>付款时间</view>
|
||||
<view>{{ order.update_dtime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TeaRoomOrderStatusTextValue, TeaRoomOrderStatus } from '@/utils/order'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import {toast} from '@/utils/toast'
|
||||
import { PayList, PayCategory, PayValue } from '@/utils/pay'
|
||||
import { getTeaRoomOrderDetail } from '@/api/tea-room'
|
||||
import { handleTRCancelOrderHooks, handleTRToPayHooks } from '@/hooks/useOrder'
|
||||
import type { ITeaSpecialistOrderDetailsResult } from '@/api/types/tea'
|
||||
import { router, copy } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const title = ref<string>('')
|
||||
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
|
||||
|
||||
// 取消订单弹窗
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
// 订单
|
||||
const orderId = ref<number>(0)
|
||||
const order = ref<ITeaSpecialistOrderDetailsResult>({
|
||||
order_amount: '',
|
||||
order_sn: '',
|
||||
store_id: 0,
|
||||
room_msg: {
|
||||
id: 0,
|
||||
price: 0,
|
||||
img: '',
|
||||
title: '',
|
||||
},
|
||||
store_msg: {
|
||||
id: 0,
|
||||
address: '',
|
||||
name: '',
|
||||
operation_type: 1,
|
||||
image: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
contact_phone: ''
|
||||
},
|
||||
time1: 0,
|
||||
order_status: 0,
|
||||
room_all_price: 0,
|
||||
room_price: 0,
|
||||
day_time: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
hours: 0,
|
||||
distance: 0,
|
||||
pay_way: 0,
|
||||
pay_way_title: '',
|
||||
dtime: '',
|
||||
update_dtime: '',
|
||||
renew_price: 0,
|
||||
renew_dtime: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
renew_price: 0
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(async (args) => {
|
||||
orderId.value = args.orderId
|
||||
// 获取订单详情
|
||||
ShareOrderDetail.handleInit()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('refreshOrderDetail')
|
||||
})
|
||||
|
||||
const ShareOrderDetail = {
|
||||
/**
|
||||
* 获取订单详情
|
||||
*/
|
||||
handleInit: async () => {
|
||||
const res = await getTeaRoomOrderDetail({
|
||||
id: orderId.value,
|
||||
latitude: uni.getStorageSync('latitude'),
|
||||
longitude: uni.getStorageSync('longitude')
|
||||
})
|
||||
order.value = res.details
|
||||
console.log("🚀 ~ order.value :", order.value )
|
||||
title.value = TeaRoomOrderStatusTextValue[order.value.order_status].title || '订单详情'
|
||||
orderStatus.value = order.value.order_status
|
||||
},
|
||||
|
||||
/**
|
||||
* 支付订单
|
||||
*/
|
||||
handleToPay: () => {
|
||||
uni.$on('refreshOrderDetail', () => {
|
||||
ShareOrderDetail.handleInit()
|
||||
uni.$off('refreshOrderDetail')
|
||||
})
|
||||
|
||||
handleTRToPayHooks(orderId.value, order.value.store_msg.name, order.value.store_msg.id)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取订单详情
|
||||
*/
|
||||
handleCancelOrder: () => {
|
||||
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((res) => {
|
||||
if (res.action == 'confirm') {
|
||||
// 点击确认按钮回调事件
|
||||
uni.$on('refreshOrderDetail', () => {
|
||||
ShareOrderDetail.handleInit()
|
||||
uni.$off('refreshOrderDetail')
|
||||
})
|
||||
|
||||
handleTRCancelOrderHooks(orderId.value)
|
||||
}
|
||||
toast.info('订单取消成功')
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到首页
|
||||
*/
|
||||
handleToHome: () => {
|
||||
router.reLaunch('/pages/index/index')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.coupon-bg {
|
||||
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
:deep() {
|
||||
.wd-collapse-item::after,
|
||||
.wd-collapse-item__header.is-expanded::after {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.wd-collapse-item__body {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
118
src/pages/store/device.vue
Normal file
118
src/pages/store/device.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-40rpx">
|
||||
<view>
|
||||
<navbar title="设备控制" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view class="mt-50rpx mx-40rpx">
|
||||
<view class="">
|
||||
<view class="font-bold text-36rpx leading-50rpx text-[#303133]">大门</view>
|
||||
<view class="relative mt-30rpx">
|
||||
<wd-img width="670rpx" height="202rpx" :src="`${OSS}images/store/store/image1.png`" mode="aspectFill" />
|
||||
<view class="absolute top-64rpx left-0 px-46rpx flex items-center justify-between w-full">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="96rpx" height="96rpx" :src="`${OSS}images/store/store/image4.png`" mode="aspectFill" />
|
||||
<view class="font-bold text-34rpx leading-48rpx text-[#303133] ml-32rpx">门锁</view>
|
||||
</view>
|
||||
<view class="relative h-64rpx">
|
||||
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image5.png`"/>
|
||||
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] left-74rpx">点击开锁</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-30rpx">
|
||||
<view class="mb-40rpx" v-for="(item, index) in 5" :key="index">
|
||||
<view class="font-bold text-36rpx leading-50rpx text-[#303133] mb-30rpx">大楼开门码</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="w-240rpx h-280rpx bg-white rounded-32rpx flex flex-col items-center justify-center">
|
||||
<view class="">
|
||||
<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/store/image2.png`" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="font-bold text-34rpx text-[#303133] leading-48rpx">门锁</view>
|
||||
<view class="bg-[#4C9F44] rounded-20rpx w-168rpx h-60rpx text-center leading-60rpx text-[#fff] mt-10rpx" @cliclk="Device.handleOpenLock">
|
||||
开锁
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-410rpx h-280rpx bg-white rounded-16rpx pl-60rpx pr-34rpx">
|
||||
<view class="flex items-top justify-between px-20rpx py-4rpx pt-40rpx">
|
||||
<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/store/image3.png`" mode="aspectFill" />
|
||||
<view class="text-28rpx leading-40rpx text-[#303133] mt-12rpx">ON</view>
|
||||
</view>
|
||||
<view class="font-bold text-28rpx text-[#303133] leading-40rpx mt-34rpx flex items-center justify-between">
|
||||
<view class="font-bold text-34rpx leading-48rpx text-[#303133]">插座空开</view>
|
||||
<wd-switch v-model="item.checked" size="48rpx" active-color="#4C9F44"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { getTeaRoomOrderList } from '@/api/tea-room'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const checked = ref<boolean>(false)
|
||||
|
||||
// mescroll
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const orderStatus = ref<string>('')
|
||||
const list = ref<Array<any>>([]) // 茶室列表
|
||||
const keywords = ref<string>('') // 搜索关键词
|
||||
|
||||
// tab
|
||||
const tab = ref<string>('list')
|
||||
const tabList = ref<Array<{title: string, num: number, name: string}>>([
|
||||
{ title: '已上架', num: 10, name: 'list'},
|
||||
{ title: '已下架', num: 11, name: 'delist' },
|
||||
// { title: '草稿箱', num: 0, name: 'draft' }
|
||||
])
|
||||
|
||||
onLoad((args) => {
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
})
|
||||
|
||||
const Device = {
|
||||
/**
|
||||
* 开锁
|
||||
*/
|
||||
handleOpenLock: () => {
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
164
src/pages/store/renew.vue
Normal file
164
src/pages/store/renew.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-40rpx">
|
||||
<view>
|
||||
<navbar title="订单续订" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view class="mt-38rpx">
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Renew.upCallback" :down="downOption" :up="upOption">
|
||||
<view class="bg-white rounded-16rpx p-30rpx mx-32rpx relative">
|
||||
<view class="absolute top-0 right-0 bg-[#4C9F44] text-[#fff] w-160rpx h-64rpx leading-64rpx text-center xd" @click="showBookTimePopup = true">
|
||||
续单
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<view class="mr-28rpx">
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view @click="ComboCard.handleToOrderDetail">
|
||||
<view class="font-bold text-28rpx text-[#303133] leading-40rpx line-2 w-260rpx">这是茶室包间名称换行效果这是茶室包间名称换行效果</view>
|
||||
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-10rpx">
|
||||
<view>预约时间：03/18 08:00-12:00</view>
|
||||
<view class="mt-18rpx">预约时长：2小时</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
|
||||
<view class="bg-[#4C9F44] w-630rpx h-90rpx text-[#fff] text-center leading-90rpx rounded-8rpx mx-auto mt-50rpx">确定</view>
|
||||
|
||||
<!-- 选择预定时间 -->
|
||||
<!-- <booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="Reserve.handleChooseReserveTime"></booking-time> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { getTeaRoomOrderList } from '@/api/tea-room'
|
||||
import { router } from '@/utils/tools'
|
||||
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
|
||||
import { getNext7Days, renewTeaRoomOrder } from '@/api/tea-room'
|
||||
|
||||
// mescroll
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const orderStatus = ref<string>('')
|
||||
const list = ref<Array<any>>([]) // 茶室列表
|
||||
const keywords = ref<string>('') // 搜索关键词
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const checked = ref<boolean>(false)
|
||||
|
||||
const columns = ref<Array<{label: string, id: number}>>([
|
||||
{ label: '包厢A', id: 1 },
|
||||
{ label: '包厢B', id: 2 },
|
||||
{ label: '包厢C', id: 3 },
|
||||
])
|
||||
|
||||
// tab
|
||||
const tab = ref<string>('list')
|
||||
const tabList = ref<Array<{title: string, num: number, name: string}>>([
|
||||
{ title: '已上架', num: 10, name: 'list'},
|
||||
{ title: '已下架', num: 11, name: 'delist' },
|
||||
// { title: '草稿箱', num: 0, name: 'draft' }
|
||||
])
|
||||
|
||||
// 选择预定时间
|
||||
const showBookTimePopup = ref<boolean>(false)
|
||||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||||
minimum_time: 0,
|
||||
time: []
|
||||
})
|
||||
const reserveTime = ref<Array<any>>([])
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
price: '',
|
||||
})
|
||||
|
||||
onLoad(async (args) => {
|
||||
|
||||
// 预定时间
|
||||
// const next7 = await getNext7Days()
|
||||
// Object.assign(sevenDay, next7)
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
})
|
||||
|
||||
const Renew = {
|
||||
/**
|
||||
* 分页加载
|
||||
* @param mescroll
|
||||
*/
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
// const filter = {
|
||||
// page: mescroll.num,
|
||||
// size: mescroll.size,
|
||||
// order_status: orderStatus.value,
|
||||
// search: keywords.value
|
||||
// }
|
||||
|
||||
// getTeaRoomOrderList(filter).then((res) => {
|
||||
// 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() // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
/**
|
||||
* 开锁
|
||||
*/
|
||||
handleOpenLock: () => {
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 选中预定时间
|
||||
*/
|
||||
handleChooseReserveTime: (params: any) => {
|
||||
reserveTime.value = params
|
||||
console.log("🚀 ~ reserveTime:", reserveTime)
|
||||
|
||||
// 一键续订的金额
|
||||
// totalReserveMoney.value = Number(toTimes(params[3], order.value.room_price))
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.xd {
|
||||
border-radius: 0rpx 10rpx 0rpx 10rpx;
|
||||
}
|
||||
</style>
|
||||
137
src/pages/store/reserve.vue
Normal file
137
src/pages/store/reserve.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-40rpx">
|
||||
<view>
|
||||
<navbar title="包间预定" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view class="mt-38rpx bg-white rounded-16rpx py-22rpx px-30rpx mx-30rpx">
|
||||
<view class="">
|
||||
<view class="text-26rpx leading-32rpx text-[#606266] mb-20rpx">包厢选择</view>
|
||||
<view class="">
|
||||
<wd-picker :columns="columns" value-key="label" value-name="id" v-model="form.name" use-default-slot>
|
||||
<wd-input type="text" v-model="form.name" placeholder="请选择包厢" readonly>
|
||||
<template #suffix>
|
||||
<wd-icon name="arrow-down" size="32rpx" color="#D8D8D8"></wd-icon>
|
||||
</template>
|
||||
</wd-input>
|
||||
</wd-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-[#606266] mb-20rpx">包厢价格</view>
|
||||
<view class="">
|
||||
<wd-input type="text" v-model="form.price" placeholder="请选择包厢" readonly>
|
||||
<template #suffix>
|
||||
<wd-icon name="arrow-down" size="32rpx" color="#D8D8D8"></wd-icon>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-[#606266] mb-20rpx">预定时间</view>
|
||||
<view class="" @click="showBookTimePopup = true">
|
||||
<wd-input type="text" v-model="form.name" placeholder="请选择预定时间" readonly no-border>
|
||||
<template #suffix>
|
||||
<wd-icon name="arrow-down" size="32rpx" color="#D8D8D8"></wd-icon>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-[#4C9F44] w-630rpx h-90rpx text-[#fff] text-center leading-90rpx rounded-8rpx mx-auto mt-50rpx">确定</view>
|
||||
|
||||
<!-- 选择预定时间 -->
|
||||
<!-- <booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="Reserve.handleChooseReserveTime"></booking-time> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { getTeaRoomOrderList } from '@/api/tea-room'
|
||||
import { router } from '@/utils/tools'
|
||||
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
|
||||
import { getNext7Days, renewTeaRoomOrder } from '@/api/tea-room'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const checked = ref<boolean>(false)
|
||||
|
||||
const columns = ref<Array<{label: string, id: number}>>([
|
||||
{ label: '包厢A', id: 1 },
|
||||
{ label: '包厢B', id: 2 },
|
||||
{ label: '包厢C', id: 3 },
|
||||
])
|
||||
|
||||
// tab
|
||||
const tab = ref<string>('list')
|
||||
const tabList = ref<Array<{title: string, num: number, name: string}>>([
|
||||
{ title: '已上架', num: 10, name: 'list'},
|
||||
{ title: '已下架', num: 11, name: 'delist' },
|
||||
// { title: '草稿箱', num: 0, name: 'draft' }
|
||||
])
|
||||
|
||||
// 选择预定时间
|
||||
const showBookTimePopup = ref<boolean>(false)
|
||||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||||
minimum_time: 0,
|
||||
time: []
|
||||
})
|
||||
const reserveTime = ref<Array<any>>([])
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
price: '',
|
||||
})
|
||||
|
||||
onLoad(async (args) => {
|
||||
|
||||
// 预定时间
|
||||
// const next7 = await getNext7Days()
|
||||
// Object.assign(sevenDay, next7)
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
})
|
||||
|
||||
const Reserve = {
|
||||
/**
|
||||
* 开锁
|
||||
*/
|
||||
handleOpenLock: () => {
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 选中预定时间
|
||||
*/
|
||||
handleChooseReserveTime: (params: any) => {
|
||||
reserveTime.value = params
|
||||
console.log("🚀 ~ reserveTime:", reserveTime)
|
||||
|
||||
// 一键续订的金额
|
||||
// totalReserveMoney.value = Number(toTimes(params[3], order.value.room_price))
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,9 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
@ -15,177 +13,169 @@ const navbarHeight = inject('navbarHeight')
|
||||
|
||||
// 房间状态枚举
|
||||
enum RoomStatus {
|
||||
AVAILABLE = 'available', // 空闲中 - 绿色
|
||||
CLEANING = 'cleaning', // 待打扫 - 蓝色/橙色
|
||||
MAINTENANCE = 'maintenance', // 维护中 - 红色
|
||||
IN_USE = 'in_use', // 使用中 - 蓝色
|
||||
AVAILABLE = 'available', // 空闲中 - 绿色
|
||||
CLEANING = 'cleaning', // 待打扫 - 蓝色/橙色
|
||||
MAINTENANCE = 'maintenance', // 维护中 - 红色
|
||||
IN_USE = 'in_use', // 使用中 - 蓝色
|
||||
}
|
||||
|
||||
// 房间状态配置
|
||||
const statusConfig = {
|
||||
[RoomStatus.AVAILABLE]: {
|
||||
text: '空闲中',
|
||||
color: '#4C9F44', // 绿色
|
||||
},
|
||||
[RoomStatus.CLEANING]: {
|
||||
text: '待打扫',
|
||||
color: '#F29747', // 蓝色
|
||||
},
|
||||
[RoomStatus.MAINTENANCE]: {
|
||||
text: '维护中',
|
||||
color: '#F65353', // 红色
|
||||
},
|
||||
[RoomStatus.IN_USE]: {
|
||||
text: '使用中',
|
||||
color: '#1890FF', // 蓝色
|
||||
},
|
||||
[RoomStatus.AVAILABLE]: {
|
||||
text: '空闲中',
|
||||
color: '#4C9F44', // 绿色
|
||||
},
|
||||
[RoomStatus.CLEANING]: {
|
||||
text: '待打扫',
|
||||
color: '#F29747', // 蓝色
|
||||
},
|
||||
[RoomStatus.MAINTENANCE]: {
|
||||
text: '维护中',
|
||||
color: '#F65353', // 红色
|
||||
},
|
||||
[RoomStatus.IN_USE]: {
|
||||
text: '使用中',
|
||||
color: '#1890FF', // 蓝色
|
||||
},
|
||||
}
|
||||
|
||||
// Mock 房间数据
|
||||
const roomList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '对月',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room1.jpg`, // Mock图片，实际需要替换
|
||||
status: RoomStatus.AVAILABLE,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '听雨',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room2.jpg`,
|
||||
status: RoomStatus.CLEANING,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '观星',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room3.jpg`,
|
||||
status: RoomStatus.MAINTENANCE,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '品茶',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room4.jpg`,
|
||||
status: RoomStatus.CLEANING,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '静心',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room5.jpg`,
|
||||
status: RoomStatus.IN_USE,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '对月',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room1.jpg`, // Mock图片，实际需要替换
|
||||
status: RoomStatus.AVAILABLE,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '听雨',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room2.jpg`,
|
||||
status: RoomStatus.CLEANING,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '观星',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room3.jpg`,
|
||||
status: RoomStatus.MAINTENANCE,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '品茶',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room4.jpg`,
|
||||
status: RoomStatus.CLEANING,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '静心',
|
||||
type: '榻榻米',
|
||||
image: `${OSS}images/room5.jpg`,
|
||||
status: RoomStatus.IN_USE,
|
||||
},
|
||||
])
|
||||
|
||||
const RoomManage = {
|
||||
/**
|
||||
* 点击房间卡片
|
||||
*/
|
||||
handleClickRoom: (room: any) => {
|
||||
router.navigateTo(`/pages/store/room-detail?id=${room.id}`)
|
||||
},
|
||||
/**
|
||||
* 点击房间卡片
|
||||
*/
|
||||
handleClickRoom: (room: any) => {
|
||||
router.navigateTo(`/bundle/tea-room/detail?id=${room.id}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击编辑房间图片
|
||||
*/
|
||||
handleEditImage: (room: any, event: any) => {
|
||||
// event.stopPropagation()
|
||||
// TODO: 实现编辑房间图片功能
|
||||
console.log('编辑房间图片:', room.id)
|
||||
router.navigateTo(`/pages/store/room-detail?id=${room.id}`)
|
||||
},
|
||||
/**
|
||||
* 点击编辑房间图片
|
||||
*/
|
||||
handleEditImage: (room: any, event: any) => {
|
||||
// event.stopPropagation()
|
||||
// TODO: 实现编辑房间图片功能
|
||||
console.log('编辑房间图片:', room.id)
|
||||
router.navigateTo(`/pages/store/room-detail?id=${room.id}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击更多选项
|
||||
*/
|
||||
handleMore: () => {
|
||||
// TODO: 实现更多选项功能
|
||||
console.log('更多选项')
|
||||
},
|
||||
/**
|
||||
* 点击更多选项
|
||||
*/
|
||||
handleMore: () => {
|
||||
// TODO: 实现更多选项功能
|
||||
console.log('更多选项')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击目标图标
|
||||
*/
|
||||
handleTarget: () => {
|
||||
// TODO: 实现目标功能
|
||||
console.log('目标功能')
|
||||
},
|
||||
/**
|
||||
* 点击目标图标
|
||||
*/
|
||||
handleTarget: () => {
|
||||
// TODO: 实现目标功能
|
||||
console.log('目标功能')
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取状态配置
|
||||
*/
|
||||
function getStatusConfig(status: RoomStatus) {
|
||||
return statusConfig[status] || statusConfig[RoomStatus.AVAILABLE]
|
||||
return statusConfig[status] || statusConfig[RoomStatus.AVAILABLE]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view>
|
||||
<navbar title="包间管理" custom-class="!bg-white" />
|
||||
</view>
|
||||
|
||||
<!-- 房间列表 -->
|
||||
<view class="px-30rpx pb-40rpx pt-30rpx">
|
||||
<view class="grid grid-cols-2 gap-24rpx">
|
||||
<view
|
||||
v-for="room in roomList"
|
||||
:key="room.id"
|
||||
class="flex flex-col overflow-hidden rounded-16rpx bg-white"
|
||||
@click="RoomManage.handleClickRoom(room)"
|
||||
>
|
||||
<!-- 房间图片 -->
|
||||
<view class="relative aspect-[4/3] w-full">
|
||||
<wd-img width="100%" height="100%" :src="room.image" mode="aspectFill" />
|
||||
<!-- 编辑图标覆盖层 -->
|
||||
<view
|
||||
class="absolute right-16rpx top-16rpx h-48rpx w-48rpx flex items-center justify-center rounded-24rpx bg-black bg-opacity-40"
|
||||
@click.stop="RoomManage.handleEditImage(room, $event)"
|
||||
>
|
||||
<wd-icon name="edit" size="16px" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房间信息 -->
|
||||
<view class="flex flex-col p-24rpx">
|
||||
<!-- 房间名称 -->
|
||||
<view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx">
|
||||
{{ room.name }} ({{ room.type }})
|
||||
</view>
|
||||
|
||||
<!-- 状态指示器 -->
|
||||
<view class="flex items-baseline justify-center align-middle">
|
||||
<!-- 状态点 -->
|
||||
<view
|
||||
class="mr-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full"
|
||||
:style="{ backgroundColor: getStatusConfig(room.status).color }"
|
||||
/>
|
||||
<!-- 状态文字 -->
|
||||
<view
|
||||
class="text-24rpx text-[#303133] leading-34rpx"
|
||||
:style="{ color: getStatusConfig(room.status).color }"
|
||||
>
|
||||
{{ getStatusConfig(room.status).text }}
|
||||
</view>
|
||||
<!-- 右箭头 -->
|
||||
<view class="ml-8rpx">
|
||||
<wd-icon name="arrow-right" size="12px" :color="getStatusConfig(room.status).color" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 导航栏 -->
|
||||
<view>
|
||||
<navbar title="包间管理" custom-class="!bg-white" />
|
||||
</view>
|
||||
|
||||
<!-- 房间列表 -->
|
||||
<view class="px-30rpx pb-40rpx pt-30rpx">
|
||||
<view class="grid grid-cols-2 gap-24rpx">
|
||||
<view v-for="room in roomList" :key="room.id"
|
||||
class="flex flex-col overflow-hidden rounded-16rpx bg-white"
|
||||
@click="RoomManage.handleClickRoom(room)">
|
||||
<!-- 房间图片 -->
|
||||
<view class="relative aspect-[4/3] w-full">
|
||||
<wd-img width="100%" height="100%" :src="room.image" mode="aspectFill" />
|
||||
<!-- 编辑图标覆盖层 -->
|
||||
<view
|
||||
class="absolute right-16rpx top-16rpx h-48rpx w-48rpx flex items-center justify-center rounded-24rpx bg-black bg-opacity-40"
|
||||
@click.stop="RoomManage.handleEditImage(room, $event)">
|
||||
<wd-icon name="edit" size="16px" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房间信息 -->
|
||||
<view class="flex flex-col p-24rpx">
|
||||
<!-- 房间名称 -->
|
||||
<view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx">
|
||||
{{ room.name }} ({{ room.type }})
|
||||
</view>
|
||||
|
||||
<!-- 状态指示器 -->
|
||||
<view class="flex items-baseline justify-center align-middle">
|
||||
<!-- 状态点 -->
|
||||
<view class="mr-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full"
|
||||
:style="{ backgroundColor: getStatusConfig(room.status).color }" />
|
||||
<!-- 状态文字 -->
|
||||
<view class="text-24rpx text-[#303133] leading-34rpx"
|
||||
:style="{ color: getStatusConfig(room.status).color }">
|
||||
{{ getStatusConfig(room.status).text }}
|
||||
</view>
|
||||
<!-- 右箭头 -->
|
||||
<view class="ml-8rpx">
|
||||
<wd-icon name="arrow-right" size="12px" :color="getStatusConfig(room.status).color" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f6f7f8;
|
||||
background: #f6f7f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,114 +1,102 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
import bookroomImg from './img/bookroom.png'
|
||||
import deviceImg from './img/device.png'
|
||||
import renewImg from './img/renew.png'
|
||||
import roomImg from './img/room.png'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
|
||||
// 本地图片资源
|
||||
const roomIcon = roomImg as string
|
||||
const deviceIcon = deviceImg as string
|
||||
const bookroomIcon = bookroomImg as string
|
||||
const renewIcon = renewImg as string
|
||||
|
||||
console.log(`${OSS}/images/store/store/room.png`)
|
||||
// 功能卡片数据
|
||||
const storeMenus = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '包间管理',
|
||||
icon: roomIcon,
|
||||
path: '/pages/store/room-manage',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '设备控制',
|
||||
icon: deviceIcon,
|
||||
path: '/pages/store/device',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '包间预定',
|
||||
icon: bookroomIcon,
|
||||
path: '/pages/store/bookroom',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '订单续订',
|
||||
icon: renewIcon,
|
||||
path: '/pages/store/renew',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '包间管理',
|
||||
icon: `${OSS}images/store/store/room.png`,
|
||||
path: '/pages/store/room-manage',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '设备控制',
|
||||
icon: `${OSS}images/store/store/device.png`,
|
||||
path: '/pages/store/device',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '包间预定',
|
||||
icon: `${OSS}images/store/store/bookroom.png`,
|
||||
path: '/pages/store/reserve',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '订单续订',
|
||||
icon: `${OSS}images/store/store/renew.png`,
|
||||
path: '/pages/store/renew',
|
||||
},
|
||||
])
|
||||
|
||||
const Store = {
|
||||
/**
|
||||
* 点击功能卡片
|
||||
*/
|
||||
handleClickMenu: (item: any) => {
|
||||
router.navigateTo(item.path)
|
||||
},
|
||||
/**
|
||||
* 点击功能卡片
|
||||
*/
|
||||
handleClickMenu: (item: any) => {
|
||||
router.navigateTo(item.path)
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击更多选项
|
||||
*/
|
||||
handleMore: () => {
|
||||
// TODO: 实现更多选项功能
|
||||
console.log('更多选项')
|
||||
},
|
||||
/**
|
||||
* 点击更多选项
|
||||
*/
|
||||
handleMore: () => {
|
||||
// TODO: 实现更多选项功能
|
||||
console.log('更多选项')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击目标图标
|
||||
*/
|
||||
handleTarget: () => {
|
||||
// TODO: 实现目标功能
|
||||
console.log('目标功能')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击目标图标
|
||||
*/
|
||||
handleTarget: () => {
|
||||
// TODO: 实现目标功能
|
||||
console.log('目标功能')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view>
|
||||
<navbar title="门店管理" custom-class="!bg-white" />
|
||||
</view>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view>
|
||||
<navbar title="门店管理" custom-class="!bg-white" />
|
||||
</view>
|
||||
|
||||
<!-- 功能卡片网格 -->
|
||||
<view class="px-30rpx pt-40rpx">
|
||||
<view class="grid grid-cols-2 gap-30rpx">
|
||||
<view
|
||||
v-for="item in storeMenus"
|
||||
:key="item.id"
|
||||
class="flex flex-col items-center rounded-16rpx bg-white p-40rpx"
|
||||
@click="Store.handleClickMenu(item)"
|
||||
>
|
||||
<!-- 图标区域 -->
|
||||
<view class="mb-24rpx h-160rpx w-160rpx flex items-center justify-center rounded-16rpx bg-[#F0F9FF]">
|
||||
<wd-img width="120rpx" height="120rpx" :src="item.icon" mode="aspectFit" />
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="text-30rpx text-[#303133] leading-42rpx">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 功能卡片网格 -->
|
||||
<view class="px-30rpx pt-40rpx">
|
||||
<view class="grid grid-cols-2 gap-30rpx">
|
||||
<view v-for="item in storeMenus" :key="item.id"
|
||||
class="flex flex-col items-center rounded-16rpx bg-white p-40rpx"
|
||||
@click="Store.handleClickMenu(item)">
|
||||
<!-- 图标区域 -->
|
||||
<view
|
||||
class="mb-24rpx h-160rpx w-160rpx flex items-center justify-center rounded-16rpx bg-[#F0F9FF]">
|
||||
<wd-img width="120rpx" height="120rpx" :src="item.icon" mode="aspectFit" />
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="text-30rpx text-[#303133] leading-42rpx">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f6f7f8;
|
||||
}
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,7 +44,7 @@ export const nativeTabbarList: NativeTabBarItem[] = [
|
||||
{
|
||||
iconPath: 'static/tabbar/order.png',
|
||||
selectedIconPath: 'static/tabbar/order_s.png',
|
||||
pagePath: 'pages/reserve/reserve',
|
||||
pagePath: 'pages/order/order',
|
||||
text: '订单',
|
||||
},
|
||||
{
|
||||
|
||||
@ -50,6 +50,7 @@ export enum OrderSource {
|
||||
TeaRoom = 'teaRoom', // 茶室
|
||||
TeaSpecialist = 'teaSpecialist', // 茶艺师
|
||||
SetMeal = 'setMeal', // 茶室管理端-套餐管理
|
||||
Admin = 'admin', // 茶室管理端-套餐管理
|
||||
}
|
||||
|
||||
// 订单来源对应名称
|
||||
@ -59,6 +60,7 @@ export const OrderSourceText: Record<OrderSource, string> = {
|
||||
[OrderSource.TeaRoom]: '茶室',
|
||||
[OrderSource.TeaSpecialist]: '茶艺师',
|
||||
[OrderSource.SetMeal]: '套餐管理',
|
||||
[OrderSource.Admin]: '管理员',
|
||||
}
|
||||
|
||||
// 订单状态
|
||||
@ -317,3 +319,22 @@ export const TeaRoomPackageOrderStatusTextValue: Record<TeaRoomPackageOrderStatu
|
||||
title: '售后完成'
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
// 管理员-订单管理状态
|
||||
export enum AdminOrderStatus {
|
||||
ToUse = 0, // 待使用
|
||||
Consuming = 1,// 使用中
|
||||
Finished = 2, // 已完成
|
||||
Cancelled = 3, // 取消订单
|
||||
}
|
||||
|
||||
// 管理员-订单状态文本
|
||||
export enum AdminOrderStatusText {
|
||||
All = 'all', // 全部
|
||||
ToUse = 'toUse', // 待使用
|
||||
Consuming = 'consuming',// 使用中
|
||||
Finished = 'finished', // 已完成
|
||||
Cancelled = 'cancelled', // 已取消
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user