wangxiaowei/chazhi_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接订单管理接口

Browse Source
This commit is contained in:
wangxiaowei
2025-12-19 16:41:32 +08:00
parent eee48dd9aa
commit 09c86fa8ca
13 changed files with 710 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/api/order.ts
View File

@ -65,4 +65,63 @@ export function cancelTeaRoomOrder(id: number) {
*/
export function deleteTeaRoomOrder(id: number) {
return http.Post('/storeapi/order/delOrderStore', {id})
}
}
/**
* 获取订单详情
* @param id 订单ID
*/
export function getOrderStoreDetail(id: number) {
return http.Post<any>('/storeapi/order/orderStoreDetails', { id })
}
/**
* 添加套餐接口
*/
export function addTeaSpecialistOrderPackage(data) {
return http.Post('/storeapi/Group/addGroup', data)
}
/**
* 编辑套餐接口
*/
export function editTeaSpecialistOrderPackage(data) {
return http.Post('/storeapi/Group/editGroup', data)
}
/**
* 套餐详情
*/
export function getTeaSpecialistOrderPackageDetail(group_id: number) {
return http.Post<any>('/storeapi/Group/groupDetails', { group_id })
}
/**
* 套餐列表
*/
export interface IGetStoreOrderListParams {
page: number
size: number
status: number
}
export function getTeaSpecialistOrderPackageList(data) {
return http.Post<any>('/storeapi/Group/groupLists', data)
}
/**
* 上下架套餐
* @param group_id 套餐ID
* @param status 状态 0下架 1上架 2草稿箱
*/
export function toggleTeaSpecialistOrderPackageStatus(group_id: number, status: number) {
return http.Post('/storeapi/Group/operateGroup', { group_id, status })
}
/**
* 删除套餐
* @param group_id 套餐ID
*/
export function deleteTeaSpecialistOrderPackage(group_id: number) {
return http.Post('/storeapi/Group/delGroup', { group_id })
}

13
src/api/store.ts
View File

@ -156,3 +156,16 @@ export function reserveRoom(data: IReserveRoomParams) {
export function getStoreOrderDetails(id: number) {
return http.Post<any>('/storeapi/store/roomDetails', { id })
}
/**
* 门店会员
*/
export interface IGetStoreMemberListParams {
page: number
size: number
store_id: number
}
export function getStoreMemberList(data: IGetStoreMemberListParams) {
return http.Post<any>('/storeapi/user/checkStoreUserList', data)
}

4
src/api/types/tea.ts
View File

@ -97,6 +97,7 @@ export interface ITeaSpecialistOrderDetailsResult {
order_amount: string
order_sn: string
store_id: number
mobile: string
room_msg: {
id: number
price: number
@ -126,7 +127,8 @@ export interface ITeaSpecialistOrderDetailsResult {
pay_way_title: string
dtime: string
update_dtime: string
renew_price: number,
renew_price: number
renew_hour: number
renew_dtime: {
start_time: string
end_time: string

1
src/bundle/order/tea-room/order-detail.vue
View File

@ -483,6 +483,7 @@
dtime: '',
update_dtime: '',
renew_price: 0,
renew_hour: 0,
renew_dtime: {
start_time: '',
end_time: '',

361
src/bundle/setmeal/add.vue
View File

@ -7,18 +7,18 @@
<template>
<view class="pb-180rpx">
<!-- 改价弹窗 -->
<!-- 团购有效期 -->
<wd-popup v-model="showExpireTimePooup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;background-color: #F8F9FA;" position="bottom">
<view class="relative pb-56rpx">
<view class="absolute top-18rpx right-30rpx" @click="showExpireTimePooup = 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 mx-30rpx rounded-10rpx px-30rpx py-32rpx">
<view class="">
<view class="flex items-center">
<view class="flex items-center" @click="chekcedType = 1">
<wd-img width="48rpx" height="48rpx" :src="chekcedType == 1 ? `${OSS}icon/icon_pay_success.png` : `${OSS}icon/icon_no_checked.png`"></wd-img>
<view class="font-bold text-28rpx leading-40rpx text-[#303133] ml-40rpx">指定天数内有效</view>
</view>
@ -34,8 +34,8 @@
<view class="bg-white mx-30rpx rounded-10rpx px-30rpx py-32rpx">
<view class="">
<view class="flex items-center">
<wd-img width="48rpx" height="48rpx" :src="chekcedType == 1 ? `${OSS}icon/icon_pay_success.png` : `${OSS}icon/icon_no_checked.png`"></wd-img>
<view class="flex items-center" @click="chekcedType = 2">
<wd-img width="48rpx" height="48rpx" :src="chekcedType == 2 ? `${OSS}icon/icon_pay_success.png` : `${OSS}icon/icon_no_checked.png`"></wd-img>
<view class="font-bold text-28rpx leading-40rpx text-[#303133] ml-40rpx">指定时间段内有效</view>
</view>
<view class="flex items0-center ml-60rpx" >
@ -44,7 +44,33 @@
</view>
</view>
<view class="font-400 mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-80rpx text-[#fff] bg-[#4C9F44] text-30rpx font-400" @click="">确定</view>
<view class="font-400 mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-80rpx text-[#fff] bg-[#4C9F44] text-30rpx font-400">确定</view>
</view>
</wd-popup>
<!-- 选择包间 -->
<wd-popup v-model="showRoomListPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;background-color: #fff;" position="bottom">
<view class="relative pb-56rpx">
<view class="absolute top-18rpx right-30rpx" @click="showRoomListPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择包间</view>
<view class="px-32rpx">
<wd-checkbox-group v-model="roomId" @change="Add.handleChooseAllTypeRoom">
<wd-checkbox :modelValue="0" checked-color="#4C9F44" size="large" custom-class="!mb-40rpx">
全部适用
</wd-checkbox>
<scroll-view scroll-y class="h-500rpx">
<wd-checkbox :modelValue="item.id" v-for="item in roomList " :key="item.id" checked-color="#4C9F44" size="large" custom-class="!mb-40rpx">
{{ item.label }}
</wd-checkbox>
</scroll-view>
</wd-checkbox-group>
</view>
<view class="font-400 mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-80rpx text-[#fff] bg-[#4C9F44] text-30rpx font-400" @click="Add.handleChooseRoom">确定</view>
</view>
</wd-popup>
@ -92,7 +118,7 @@
<view class="flex items-center mt-46rpx" v-if="form.type == 2">
<view class="text-28rpx leading-40rpx text-[#303133] mr-66rpx font-400">抖音skuid</view>
<view class="flex-1">
<wd-input no-border placeholder="请输入抖音skuid"
<wd-input v-model="form.sku_id" no-border placeholder="请输入抖音skuid"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
@ -104,7 +130,7 @@
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-textarea v-model="form.name"
<wd-textarea v-model="form.title"
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>
@ -116,12 +142,12 @@
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-textarea v-model="form.name"
<wd-textarea v-model="form.description"
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="mt-28rpx add-textarea">
<!-- <view class="mt-28rpx add-textarea">
<view class="flex items-center mb-28rpx">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx font-bold">团购视频</view>
</view>
@ -136,7 +162,7 @@
<view class="font-400 text-26rpx leading-36rpx text-#303133">添加视频</view>
</view>
</wd-upload>
</view>
</view> -->
<view class="mt-28rpx add-textarea">
<view class="flex items-center justify-between mb-28rpx">
@ -150,7 +176,7 @@
最多可上传9张图片
</view>
</view>
<wd-upload :file-list="fileList" :limit="9" image-mode="scaleToFill" accept="image" :action="action"
<wd-upload :header="{'token': token}" :file-list="fileList" :limit="9" image-mode="scaleToFill" multiple accept="image" :action="action"
@change="Add.handleUploadFile">
<view
class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
@ -174,7 +200,7 @@
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-input no-border placeholder="请输入门市价"
<wd-input v-model="form.price" no-border placeholder="请输入门市价"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
<view class="">
@ -184,12 +210,12 @@
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-input no-border placeholder="请输入团购价"
<wd-input v-model="form.discount_price" no-border placeholder="请输入团购价"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
<view class=" mb-28rpx">
<view class="mb-28rpx">
<view class="mr-30rpx">
<view class="flex items-center mb-20rpx w-[100%]">
<view class="flex items-center justify-between w-[100%]">
@ -203,7 +229,7 @@
<view class="font-400 text-24rpx leading-34rpx text-[#9CA3AF]">输入范围1~999</view>
</view>
</view>
<wd-input no-border placeholder="请输入库存"
<wd-input v-model="form.number" no-border placeholder="请输入库存"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
@ -225,7 +251,7 @@
<view class="font-400 text-24rpx leading-34rpx text-[#9CA3AF]">每条内容之间需要换行输入</view>
</view>
</view>
<wd-textarea v-model="form.name"
<wd-textarea v-model="form.introduce"
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
custom-textarea-class='!bg-[#F8F9FA]' />
</view>
@ -234,7 +260,7 @@
<view class="flex items-center mb-20rpx w-[100%]">
<view class="text-30rpx leading-44rpx text-#303133 mr-10rpx font-bold">其他说明</view>
</view>
<wd-textarea v-model="form.name"
<wd-textarea v-model="form.rests_introduce"
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
custom-textarea-class='!bg-[#F8F9FA]' />
</view>
@ -245,7 +271,7 @@
<view class="font-bold text-34rpx text-[#303133] leading-48rpx mb-30rpx">购买须知</view>
<view class="mb-28rpx">
<!-- 团购有效期 -->
<view class="mr-30rpx" @click="showExpireTimePooup = true">
<!-- <view class="mr-30rpx" @click="showExpireTimePooup = true">
<view class="flex items-center mb-20rpx w-[100%]">
<view class="flex items-center justify-between w-[100%]">
<view class="flex items-center">
@ -267,19 +293,21 @@
</template>
</wd-input>
</view>
</view>
</view> -->
<!-- 适用包间 -->
<view class="mt-28rpx">
<view class="flex items-center mb-20rpx">
<!-- TODO 有包间的显示包间（还需要添加一个全使适合用），没有包间的显示通用 -->
<!-- TODO 有包间的显示包间（还需要添加一个全适合用），没有包间的显示通用 -->
<view class="text-30rpx leading-44rpx text-#303133 mr-10rpx font-bold">适用包间</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-input no-border placeholder="请输入全部适用或是指定包间名称"
<view class="" @click="showRoomListPopup = true">
<wd-input v-model="room" no-border placeholder="请输入全部适用或是指定包间名称" readonly
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
<!-- 适用时长 -->
@ -290,7 +318,7 @@
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-input no-border placeholder="请输入适用时长"
<wd-input v-model="form.hour" no-border placeholder="请输入适用时长"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx">
<template #suffix>
小时
@ -298,7 +326,7 @@
</wd-input>
</view>
<!-- 使用人数 -->
<!-- 使用人数说明 -->
<view class="mt-28rpx">
<view class="flex items-center mb-20rpx">
<view class="text-30rpx leading-44rpx text-#303133 mr-10rpx font-bold">使用人数</view>
@ -306,7 +334,7 @@
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-input no-border placeholder="请输入使用人数，如每张团购券不限使用人数"
<wd-input v-model="form.pl_number" no-border placeholder="请输入使用人数，如每张团购券不限使用人数"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
@ -318,16 +346,16 @@
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<wd-textarea v-model="form.name"
<wd-textarea v-model="form.returd_details"
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
custom-textarea-class='!bg-[#F8F9FA]'/>
</view>
</view>
</view>
</view>
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx z-9">
<view class="flex items-center justify-center text-32rpx leading-44rpx leading-90rpx text-center !mt-34rpx">
<wd-button custom-class="!text-32rpx !w-630rpx !h-90rpx !bg-[#4C9F44] !rounded-8rpx !text-[#fff]" @click="router.navigateTo('/bundle/setmeal/add?type=add')">发布</wd-button>
<wd-button custom-class="!text-32rpx !w-630rpx !h-90rpx !bg-[#4C9F44] !rounded-8rpx !text-[#fff]" @click="Add.handleRelease">发布</wd-button>
</view>
</view>
</view>
@ -336,8 +364,14 @@
<script lang="ts" setup>
import { router } from '@/utils/tools'
import { getAllRoomList } from '@/api/store'
import { addTeaSpecialistOrderPackage, getTeaSpecialistOrderPackageDetail, editTeaSpecialistOrderPackage } from '@/api/order'
import { useStoreStore } from '@/store'
import { toast } from '@/utils/toast'
const OSS = inject('OSS')
const token = ref<string>('') // 用户token
const useStore = useStoreStore()
// 页面标题
const title = ref<string>('新建套餐')
@ -348,20 +382,32 @@
// 上传文件
const fileList = ref<any[]>([])
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
const action = import.meta.env.VITE_UPLOAD_BASEURL
// 表单
const form = reactive<{
type: number,
code: string,
message: string,
name: string
}>({
type: 1,
code: '',
message: '',
name: ''
})
const form = ref({
store_id: useStore.defaultStore.id,
type: 1, // 套餐属性 1本地套餐 2抖音套餐
sku_id: '', // 抖音skuid
title: '', // 团购名称
description: '', // 环境描述
img: '', // 团购图片
price: '', //门市价
discount_price: '', // 团购价
number: '', // 库存
introduce: '', // 套餐介绍
rests_introduce: '', // 其他说明
room_id: '', // 适用包间
hour: '', // 适用时长
pl_number: '', // 使用人数说明
returd_details: '', // 退改说明
status: 0, // 状态 0下架1上架
})
const roomId = ref<Array<number>>([]) // 选择的包间id
const room = ref<string>('')
const roomList = ref<Array<{label: string, id: number}>>([])
const showRoomListPopup = ref<boolean>(false)
const orderId = ref<number>(0) // 订单ID
// 日期过滤
const value = ref<number>(Date.now())
@ -373,16 +419,79 @@
const startTime = ref<number>(Date.now())
const endTime = ref<number>(Date.now())
onLoad((args) => {
// TODO 如果是编辑页面咋额
onLoad(async (args) => {
token.value = uni.getStorageSync('token')
await Add.handleGetRoomList()
// TODO 如果是编辑页面
type.value = args.type || 'add'
if (type.value === 'edit') {
orderId.value = Number(args.id) || 0
title.value = '修改套餐信息'
// 获取套餐信息
await Add.handleGetPackageDetail()
}
})
const Add = {
fileList: [],
/**
* 获取包间列表
*/
handleGetRoomList: async () => {
const res = await getAllRoomList(useStore.defaultStore.id)
roomList.value = res.list.map((item: any) => ({
label: item.title,
id: item.id
}))
},
/**
* 获取套餐详情
*/
handleGetPackageDetail: async () => {
// TODO 获取套餐详情接口
const res = await getTeaSpecialistOrderPackageDetail(orderId.value)
form.value = {
store_id: useStore.defaultStore.id,
type: res.type, // 套餐属性 1本地套餐 2抖音套餐
sku_id: res.sku_id, // 抖音skuid
title: res.title, // 团购名称
description: res.description, // 环境描述
img: res.img, // 团购图片
price: res.price, //门市价
discount_price: res.discount_price, // 团购价
number: res.number, // 库存
introduce: res.introduce, // 套餐介绍
rests_introduce: res.rests_introduce, // 其他说明
room_id: res.room_id, // 适用包间
hour: res.hour, // 适用时长
pl_number: res.pl_number, // 使用人数说明
returd_details: res.returd_details, // 退改说明
status: res.status, // 状态 0下架1上架
}
fileList.value = res.img.split(',').map((item: string) => ({
name: item,
url: item
}))
Add.fileList = fileList.value
if (Number(res.room_id) == 0) {
room.value = '全部适用'
// 全选：0 + 所有包间id
const allIds = roomList.value.map(item => item.id)
console.log("🚀 ~ allIds:", allIds)
roomId.value = [0, ...allIds]
} else {
const roomIds = res.room_id.split(',').map((id: string) => Number(id))
roomId.value = roomIds
room.value = res.room_title
}
},
/**
* 切换tab
*/
@ -393,8 +502,25 @@
/**
* 图片选择/删除
*/
handleUploadFile: (event: any) => {
fileList.value = event.fileList
handleUploadFile: ({ fileList: files }) => {
let url = ''
let name = ''
let response = null
const res = files.map(item => {
if (item.response) {
response = JSON.parse(item.response)
url = response.data.uri
name = response.data.name
}
return {
name: name || item.name,
url: url || item.url
}
})
fileList.value = files
Add.fileList = res
},
/**
@ -411,6 +537,153 @@
console.log("🚀 ~ date:", date)
startTime.value = date.value[0]
endTime.value = date.value[1]
},
/**
* 选择全部适用房间
*/
handleChooseAllTypeRoom: (e: { value: number[] }) => {
// 如果选择了0，则所有房间都勾选（包含全部id和0）
if (Array.isArray(e.value) && e.value.includes(0)) {
// 获取所有房间id
const allIds = roomList.value.map(item => item.id)
roomId.value = [0, ...allIds]
} else {
roomId.value = e.value
}
},
/**
* 确认选择包间列表
*/
handleChooseRoom: () => {
if (roomId.value.includes(0)) {
room.value = '全部适用'
} else {
const selectedRooms = roomList.value.filter(item => roomId.value.includes(item.id))
room.value = selectedRooms.map(item => item.label).join('，')
}
showRoomListPopup.value = false
},
/**
* 发布套餐
*/
handleRelease: async () => {
const formData = form.value
// 抖音套餐下需要填写抖音UID
if (formData.type == 2 && !formData.sku_id) {
toast.info('请输入抖音skuid')
return
} else {
formData.sku_id = '0'
}
// 团购套餐
if (!formData.title) {
toast.info('请输入团购名称')
return
}
// 环境描述
if (!formData.description) {
toast.info('请输入环境描述')
return
}
// 团购图片
if (Add.fileList.length == 0) {
toast.info('请上传团购图片')
return
}
// 门市价
if (!formData.price) {
toast.info('请输入门市价')
return
}
// 团购价
if (!formData.discount_price) {
toast.info('请输入团购价')
return
}
// 库存
if (!formData.number) {
toast.info('请输入库存')
return
}
// 套餐介绍
if (!formData.introduce) {
toast.info('请输入套餐介绍')
return
}
// 其他说明
// if (!formData.rests_introduce) {
// toast.info('请输入其他说明')
// return
// }
// 适用包间
if (roomId.value.length == 0) {
toast.info('请选择适用包间')
return
}
// 适用时长
if (!formData.hour) {
toast.info('请输入适用时长')
return
}
// 使用人数
if (!formData.pl_number) {
toast.info('请输入使用人数说明')
return
}
// 退改说明
if (!formData.returd_details) {
toast.info('请输入退改说明')
return
}
formData.img = Add.fileList.map(item => item.url).join(',')
if (roomId.value.includes(0)) {
formData.room_id = '0'
} else {
formData.room_id = roomId.value.join(',')
}
if (type.value == 'add') {
formData.status = 1
}
uni.showLoading({
title: '发布中...'
})
try {
// TODO 调用发布接口
if (type.value == 'add') {
await addTeaSpecialistOrderPackage(formData)
} else if (type.value == 'edit') {
// @ts-ignore
formData.group_id = orderId.value
await editTeaSpecialistOrderPackage(formData)
}
uni.hideLoading()
toast.info(type.value == 'add' ? '发布成功' : '编辑成功')
router.navigateBack(1, 500)
} catch(e) {
uni.hideLoading()
}
}
}
</script>

490
src/bundle/setmeal/detail.vue
View File

@ -7,89 +7,8 @@
}</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>
<navbar title="套餐详情" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view>
@ -100,126 +19,105 @@
</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 class="flex justify-between items-center">
<view class="flex items-center">
<price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="detail.discount_price"></price-format>
<view class="rounded-4rpx w-60rpx text-center text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">{{ detail.discount }}折</view>
<price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="detail.price" lineThrough></price-format>
</view>
<view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view>
</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="font-bold text-36rpx text-[#303133] leading-50rpx mt-26rpx">{{ detail.title }}</view>
<view class="font-500 text-26rpx leading-48rpx text-[#303133] mt-24rpx">{{ detail.description }}</view>
<view>
<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 class="flex items-cenenter justify-between">
<view class="text-[#303133] text-28rpx leading-48rpx">
<view>
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
<text class="font-bold mr-26rpx">须知</text>
<text class="font-500">需预约</text>
</view>
<view class="mt-22rpx">
<text class="font-bold mr-26rpx">保障</text>
<text class="font-500">随时退</text>
</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 class="">
<wd-img width="160rpx" height="120rpx" :src="detail.status == 1 ? `${OSS}icon/icon_sj.png` : `${OSS}icon/icon_xj.png`"></wd-img>
</view>
</view>
</view>
</view>
<view v-if="isGroupBuying">
<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.introduce_details"></rich-text>
<view class="mt-24rpx" v-if="detail.introduce">
<view class="flex items-center mb-20rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tcsm.png`"></wd-img>
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">套餐介绍</view>
</view>
<rich-text :nodes="detail.introduce"></rich-text>
</view>
<view class="mt-30rpx" v-if="detail.rests_introduce">
<view class="flex items-center mb-20rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_qtsm.png`"></wd-img>
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx"> 其他说明</view>
</view>
<rich-text :nodes="detail.rests_introduce"></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>
<!-- TODO 有效期暂时频闭、还未开发 -->
<!-- <view class="mt-24rpx" v-if="detail.introduce">
<view class="flex items-center">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_yxq.png`"></wd-img>
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">有效期</view>
</view>
<rich-text :nodes="detail.introduce"></rich-text>
</view> -->
<view class="mt-30rpx" v-if="detail.room_title">
<view class="flex items-center mb-20rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sybj.png`"></wd-img>
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">适用包间</view>
</view>
<rich-text :nodes="detail.room_title"></rich-text>
</view>
<view class="mt-30rpx" v-if="detail.hour">
<view class="flex items-center mb-20rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sysc.png`"></wd-img>
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">适用时长</view>
</view>
<view class="">{{ detail.hour }}小时</view>
</view>
<view class="mt-30rpx" v-if="detail.pl_number">
<view class="flex items-center mb-20rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_syrs.png`"></wd-img>
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">使用人数</view>
</view>
<view class="">{{ detail.pl_number }}</view>
</view>
<view class="mt-20rpx mb-24rpx">
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
</view>
<view class="mt-30rpx" v-if="detail.returd_details">
<view class="flex items-center mb-20rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tgsm.png`"></wd-img>
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">退改说明</view>
</view>
<rich-text :nodes="detail.returd_details"></rich-text>
</view>
</view>
</view>
@ -231,14 +129,13 @@
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 { getTeaSpecialistOrderPackageDetail } from '@/api/order'
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')
@ -251,29 +148,6 @@
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)
@ -283,64 +157,30 @@
})
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 detail = 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
// if (args.type == ReserveServiceCategory.GroupBuying) {
// isGroupBuying.value = true
// pay.value = 3
Detail.handleInitGroupBuying()
}
Detail.handleInitReserveRoom()
// }
// Detail.handleInitReserveRoom()
// 获取用户需求详
getUserInfo().then(res => {
user.value = res
})
// getUserInfo().then(res => {
// user.value = res
// })
})
const Detail = {
@ -360,161 +200,17 @@
})
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
const res = await getTeaSpecialistOrderPackageDetail(id.value)
swiperList.value = res.img_list
detail.value = res
},
/**
* 选中预定时间
*/
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>

85
src/bundle/setmeal/setmeal.vue
View File

@ -15,24 +15,24 @@
<wd-icon name="thin-arrow-left" size="30rpx"></wd-icon>
</view>
<view class="search-box">
<wd-search v-model="keywords" hide-cancel placeholder-left light placeholder="搜索套餐名称" @search="OrderList.handleSearch()"></wd-search>
<wd-search v-model="keywords" hide-cancel placeholder-left light placeholder="搜索套餐名称" @search="Setmeal.handleSearch()"></wd-search>
</view>
</view>
</template>
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="OrderList.handleChangeTabs">
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="Setmeal.handleChangeTabs">
<wd-tab :title="item.title + `(${item.num})`" :name="item.name" v-for="(item, index) in tabList" :key="index"></wd-tab>
</wd-tabs>
</view>
</view>
<view class="tabs mt-18rpx mx-30rpx">
<!-- <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption"> -->
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.SetMeal" :order="item"></combo-card>
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Setmeal.upCallback" :down="downOption" :up="upOption">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.SetMeal" :order="item" @refresh="Setmeal.handleSearch"></combo-card>
</view>
<!-- </mescroll-body> -->
</mescroll-body>
</view>
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
@ -45,11 +45,11 @@
<script lang="ts" setup>
import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
import { OrderSource } 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 { getTeaSpecialistOrderPackageList } from '@/api/order'
import { router } from '@/utils/tools'
// mescroll
@ -61,16 +61,15 @@
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' }
const tab = ref<number>(1)
const tabList = ref<Array<{title: string, num: number, name: number}>>([
{ title: '已上架', num: 0, name: 1},
{ title: '已下架', num: 0, name: 0},
// { title: '草稿箱', num: 0, name: 2 }
])
onLoad((args) => {
@ -78,64 +77,60 @@
list.value = []
getMescroll().resetUpScroll()
})
// 根据传过来的参数决定显示哪个tab
if (args.orderStatus) {
tab.value = args.orderStatus
}
})
onUnload(() => {
uni.$off('refreshOrderList')
})
const OrderList = {
const Setmeal = {
/**
* 分页加载
* @param mescroll
*/
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
// const filter = {
// page: mescroll.num,
// size: mescroll.size,
// order_status: orderStatus.value,
// search: keywords.value
// }
const filter = {
page: mescroll.num,
size: mescroll.size,
status: tab.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(() => {
getTeaSpecialistOrderPackageList(filter).then((res) => {
tabList.value[0].num = res.online || 0
tabList.value[1].num = res.offline || 0
// tabList.value[2].num = res.draft || 0
const curPageData = res.list || [] // 当前页数据
console.log("🚀 ~ curPageData:", curPageData)
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
list.value = list.value.concat(curPageData) //追加新数据
mescroll.endSuccess(curPageData.length, Boolean(res.more))
console.log("🚀 ~ res.more:", res.more)
}).catch(() => {
mescroll.endErr() // 请求失败, 结束加载
// })
})
},
/**
* 切换订单状态
* @param e
*/
handleChangeTabs: (e: {index: number, name: string}) => {
// tab.value = e.name
// if (e.name === TeaRoomOrderStatusText.Pending) {
// orderStatus.value = '0'
// } else {
// orderStatus.value = TeaRoomOrderStatusValue[e.name] || ''
// }
handleChangeTabs: (e: {index: number, name: number}) => {
tab.value = e.name
// // 切换tab时,重置当前的mescroll
// list.value = []
// getMescroll().resetUpScroll();
// 切换tab时,重置当前的mescroll
list.value = []
getMescroll().resetUpScroll();
},
/**
* 内容搜索
*/
handleSearch: () => {
// list.value = []
// getMescroll().resetUpScroll();
list.value = []
getMescroll().resetUpScroll();
}
}
</script>

2
src/bundle/store/edit-store.vue
View File

@ -124,7 +124,6 @@
const token = ref<string>('') // 用户token
// 上传文件
// const fileList = ref<any[]>([])
const fileList = ref<any[]>([])
const action = import.meta.env.VITE_UPLOAD_BASEURL
@ -313,7 +312,6 @@
toast.info('保存失败，请稍后重试')
return
}
},
/**

134
src/components/order/ComboCard.vue
View File

@ -12,24 +12,24 @@
<view class="bg-white mx-30rpx rounded-10rpx px-30rpx py-32rpx">
<view class="flex items-center">
<view class="mr-28rpx">
<wd-img width="152rpx" height="152rpx" :src="`${OSS}images/reserve_room/reserve_room_image2.png`"></wd-img>
<wd-img width="152rpx" height="152rpx" :src="order.main_image"></wd-img>
</view>
<view class="flex-1" @click="ComboCard.handleToOrderDetail">
<view class="flex items-center relative">
<view class="w-400rpx line-1 font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
这里是套餐的名字这里是套餐的名这里是套餐的名字这里是套餐的名字这里是套餐的名字这里是套餐的名字这里是套餐的名字这里是套餐的名字字
{{ order.title }}
</view>
</view>
<view class="flex items-center mt-16rpx">
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mr-8rpx">ID:1270304172</view>
<wd-icon name="file-copy" size="32rpx" color='#707070' @click="copy(123)"></wd-icon>
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mr-8rpx">ID:{{order.code}}</view>
<wd-icon name="file-copy" size="32rpx" color='#707070' @click="copy(order.code)"></wd-icon>
</view>
<view class="flex items-center">
<price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="23.02"></price-format>
<view class="rounded-4rpx w-60rpx text-center text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">5.1折</view>
<price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="23.02" lineThrough></price-format>
<price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="order.discount_price"></price-format>
<view class="rounded-4rpx w-60rpx text-center text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">{{ order.discount }}折</view>
<price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="order.price" lineThrough></price-format>
</view>
</view>
</view>
@ -47,9 +47,9 @@
v-model="changePrice"
no-border
custom-class="!rounded-16rpx !text-30rpx !leading-48rpx !border-2rpx !border-solid !border-[#F0F0F0] !w-[100%]"
custom-input-class="!h-96rpx !pl-10rpx">
custom-input-class="!h-96rpx !px-20rpx">
<template #prefix>
<text class="pl-28rpx">￥</text>
<text class="p-28rpx">￥</text>
</template>
</wd-input>
</view>
@ -57,7 +57,7 @@
<view class="flex items-center mt-24rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] mr-26rpx w-100rpx whitespace-nowrap">门市价</view>
<view class="">
<price-format color="#303133" :first-size="30" :second-size="30" :subscript-size="30" :price="23.02"></price-format>
<price-format color="#303133" :first-size="30" :second-size="30" :subscript-size="30" :price="order.price"></price-format>
</view>
</view>
</view>
@ -71,61 +71,60 @@
<view class="">
<view class="flex items-center">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/reserve_room/reserve_room_image2.png`"></wd-img>
<wd-img width="200rpx" height="200rpx" :src="order.main_image"></wd-img>
</view>
<view class="flex-1" @click="ComboCard.handleToOrderDetail">
<view class="flex-1" @click="router.navigateTo(`/bundle/setmeal/detail?id=${order.id}`)">
<view class="flex items-center relative">
<view class="w-400rpx flex items-center">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">这里是套餐的名字这里是套餐的名字</view>
</view>
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">{{ order.title }}</view>
</view>
</view>
<view class="flex items-center mt-16rpx">
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mr-8rpx">ID:1270304172</view>
<wd-icon name="file-copy" size="32rpx" color='#707070' @click="copy(123)"></wd-icon>
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mr-8rpx">ID:{{ order.code }}</view>
<wd-icon name="file-copy" size="32rpx" color='#707070' @click="copy(order.code)"></wd-icon>
</view>
<view class="flex items-center">
<price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="23.02"></price-format>
<view class="rounded-4rpx w-60rpx text-center text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">5.1折</view>
<price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="23.02" lineThrough></price-format>
<price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="order.discount_price"></price-format>
<view class="rounded-4rpx w-60rpx text-center text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">{{ order.discount }}折</view>
<price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="order.price" lineThrough></price-format>
</view>
</view>
</view>
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mt-42rpx flex items-center justify-between">
<view class="">
<text class="font-400 text-26rpx text-[#606266] leading-36rpx mr-10rpx">年售</text>
<text class="font-bold text-26rpx text-[#606266] leading-36rpx ">96</text>
<text class="font-bold text-26rpx text-[#606266] leading-36rpx ">{{ order.sold }}</text>
</view>
<templalte v-if="1 > 0">
<template v-if="order.status == 1">
<view class="flex items-center">
<!-- 上架 -->
<view class="font-500 text-28rpx text-[#303133] leading-40rpx mr-18rpx" @click='ComboCard.handleMore'>更多</view>
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
@click="ComboCard.handleOpenChangePricePopup()">改价</view>
<!-- <view class="font-500 text-28rpx text-[#303133] leading-40rpx mr-18rpx" @click='ComboCard.handleMore'>更多</view> -->
<!-- <view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
@click="ComboCard.handleOpenChangePricePopup()">改价</view> -->
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
@click="ComboCard.handleDelisted()"> 下架</view>
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx"
@click="router.navigateTo('/bundle/setmeal/add?type=edit')">编辑</view>
@click="router.navigateTo(`/bundle/setmeal/add?type=edit&id=${order.id}`)">编辑</view>
</view>
</templalte>
</template>
<templalte v-if="1 < 0">
<template v-if="order.status == 0">
<view class="flex items-center">
<!-- 下架 -->
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
@click="ComboCard.handleOpenChangePricePopup()">删除</view>
@click="ComboCard.handleDelteSetmealOrder()">删除</view>
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
@click="ComboCard.handleAdd()"> 上架</view>
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx"
@click="router.navigateTo('/bundle/setmeal/add?type=edit')">编辑</view>
@click="router.navigateTo(`/bundle/setmeal/add?type=edit&id=${order.id}`)">编辑</view>
</view>
</templalte>
</template>
</view>
</view>
</view>
<!-- 茶室管理端-订单管理 -->
<view v-if="type === OrderSource.Admin" class="bg-white rounded-10rpx p-30rpx">
<view class="flex justify-between items-center">
@ -133,7 +132,7 @@
<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="flex items-center w-400rpx">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.store_name }}</view>
</view>
</view>
@ -151,7 +150,7 @@
<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 @click="ComboCard.handleToOrderDetail(order.id)">
<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>
@ -164,7 +163,7 @@
<!-- 操作按钮 -->
<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"
<view v-if="order.order_status === AdminOrderStatus.Consuming" class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
@click="ComboCard.handleReleaseOrder(order.id)">释放时间</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
@click="ComboCard.handleCancelOrder(order.id)">取消订单</view>
@ -190,7 +189,8 @@
import { useMessage } from 'wot-design-uni'
import { toast } from '@/utils/toast'
import { handleReleaseTeaRoomOrderHookds, handleCancelOrderHooks, handleDeleteOrderHooks } from '@/hooks/useOrder'
import { router } from '@/utils/tools'
import { router, copy } from '@/utils/tools'
import { toggleTeaSpecialistOrderPackageStatus, deleteTeaSpecialistOrderPackage } from '@/api/order'
// 改价弹窗
const showChangePricePopup = ref<boolean>(false)
@ -208,7 +208,7 @@
const props = defineProps({
/**
* 类型: 直营(direct)、加盟(franchise)、抖音(douyin) 等
* 类型:
*/
type: {
type: String,
@ -228,8 +228,10 @@
/**
* 详情页
*/
handleToOrderDetail: () => {
router.navigateTo('/bundle/setmeal/detail')
handleToOrderDetail: (id: number) => {
if (props.type == OrderSource.Admin) {
router.navigateTo(`/pages/order/order-detail?id=${id}`)
}
},
/**
@ -253,7 +255,6 @@
ComboCard.handleOpenChangePricePopup()
},
/**
* 下架商品
*/
@ -269,8 +270,10 @@
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
}).then(async (res) => {
if (res.action == 'confirm') {
await toggleTeaSpecialistOrderPackageStatus(props.order.id, 0)
emit('refresh')
toast.info('下架成功')
}
// 点击确认按钮回调事件
@ -283,13 +286,60 @@
* 上架商品
*/
handleAdd: () => {
toast.info('上架成功')
message.confirm({
title: '您确认要上架该商品吗？',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
},
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then(async (res) => {
if (res.action == 'confirm') {
await toggleTeaSpecialistOrderPackageStatus(props.order.id, 1)
emit('refresh')
toast.info('上架成功')
}
// 点击确认按钮回调事件
}).catch(() => {
// 点击取消按钮回调事件
})
},
/**
* 删除套餐
*/
handleDelteSetmealOrder: () => {
message.confirm({
title: '确定删除该套餐？',
msg: '删除后该套餐将无法恢复，是否确认删除？',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
},
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then(async (res) => {
if (res.action == 'confirm') {
await deleteTeaSpecialistOrderPackage(props.order.id)
emit('refresh')
toast.info('删除成功')
}
// 点击确认按钮回调事件
}).catch(() => {
// 点击取消按钮回调事件
})
},
/**
* 编辑商品
*/
handleEdit: () => {
},
/**
@ -333,7 +383,7 @@
handleCancelOrder: (orderId: number) => {
message.confirm({
title: '确定取消订单？',
msg: '取消订单后无法恢复，优惠券可退回',
msg: '取消订单后无法恢复，是否确定取消订单？',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {

4
src/http/alova.ts
View File

@ -110,10 +110,10 @@ const alovaInstance = createAlova({
if (msg !== '查询成功') toast.info(msg)
}
}
if (code !== ResultEnum.Success) {
if (config.meta?.toast !== false) {
toast.warning(msg)
toast.info(msg)
}
throw new Error(`请求错误[${code}]：${msg}`)
}

437
src/pages/order/order-detail.vue
View File

@ -10,189 +10,9 @@
<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>
@ -203,16 +23,21 @@
<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 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>
</view>
<view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.room_all_price }}</view>
<view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.order_amount }}</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
￥{{ order.room_price }}/小时
<view class="">
￥{{ order.room_price }}/小时
</view>
<view class="">
x{{ order.hours }}
</view>
</view>
</view>
</view>
@ -220,7 +45,7 @@
<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="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>
@ -245,109 +70,66 @@
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>支付方式</view>
<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>1110</view>
<view>{{ order.mobile }}</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>￥{{ order.renew_hour }}</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>￥{{ order.renew_price }}</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx" v-if="order.order_status == AdminOrderStatus.ToUse || order.order_status == AdminOrderStatus.Consuming">
<!-- 待使用 -->
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus == AdminOrderStatus.ToUse || orderStatus == AdminOrderStatus.Consuming">
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="order.order_status == AdminOrderStatus.ToUse">
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleCancelOrder">取消订单</view>
</view>
<!-- 使用中 -->
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="order.order_status == 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 class="w-360rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleReleaseOrder">释放时间</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { TeaRoomOrderStatusTextValue, TeaRoomOrderStatus, AdminOrderStatus } from '@/utils/order'
import { AdminOrderStatus, AdminOrderStatusTextValue } 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'
import { copy } from '@/utils/tools'
import { getOrderStoreDetail } from '@/api/order'
import { handleReleaseTeaRoomOrderHookds, handleCancelOrderHooks } from '@/hooks/useOrder'
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,
mobile: '',
room_msg: {
id: 0,
price: 0,
@ -378,6 +160,7 @@
dtime: '',
update_dtime: '',
renew_price: 0,
renew_hour: 0,
renew_dtime: {
start_time: '',
end_time: '',
@ -385,67 +168,33 @@
}
})
// 一键续订的金额
const totalReserveMoney = ref<number>(0)
onLoad(async (args) => {
orderId.value = args.orderId
orderId.value = args.id
// 获取订单详情
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')
})
const res = await getOrderStoreDetail(orderId.value)
order.value = res.details
console.log("🚀 ~ order.value :", order.value )
title.value = TeaRoomOrderStatusTextValue[order.value.order_status].title || '订单详情'
orderStatus.value = order.value.order_status
title.value = AdminOrderStatusTextValue[order.value.order_status].title || '订单详情'
},
/**
* 支付订单
*/
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: '取消订单后无法恢复，优惠券可退回',
msg: '取消订单后无法恢复，是否确定取消订单？',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
@ -455,113 +204,43 @@
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
if (res.action == 'confirm') {
// 点击确认按钮回调事件
uni.$on('refreshOrderDetail', () => {
if (res.action == 'confirm') {
uni.$on('refreshOrderList', () => {
uni.$off('refreshOrderList')
OrderDetail.handleInit()
uni.$off('refreshOrderDetail')
})
handleTRCancelOrderHooks(orderId.value)
handleCancelOrderHooks(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) {
handleReleaseOrder: () => {
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('refreshOrderList', () => {
uni.$off('refreshOrderList')
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
}
})
handleReleaseTeaRoomOrderHookds(orderId.value)
}
}).catch(() => { })
},
/**
* 跳转到对对应室的详情页
*/
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>

8
src/pages/order/order.vue
View File

@ -51,7 +51,7 @@
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 { OrderSource, AdminOrderStatusText, TeaSpecialistOrderStatusText, TeaSpecialistOrderStatusValue, AdminOrderStatusValue } from '@/utils/order'
import { router } from '@/utils/tools'
import { getStoreOrderList} from '@/api/order'
import { useStoreStore } from '@/store'
@ -98,7 +98,7 @@
page: mescroll.num,
size: mescroll.size,
store_id: useStore.defaultStore.id,
order_status: '',
order_status: orderStatus.value,
search: keywords.value,
}
@ -138,10 +138,10 @@
// 切换tab
handleChangeTabs: (e: {index: number, name: string}) => {
tab.value = e.name
if (e.name === TeaSpecialistOrderStatusText.Pending) {
if (e.name === AdminOrderStatusText.Pending) {
orderStatus.value = '0'
} else {
orderStatus.value = TeaSpecialistOrderStatusValue[e.name] || ''
orderStatus.value = AdminOrderStatusValue[e.name] || ''
}
// 切换tab时,重置当前的mescroll

27
src/utils/order.ts
View File

@ -354,3 +354,30 @@ export enum AdminOrderStatusText {
Cancelled = 'cancelled', // 取消订单（已取消）
}
// 状态内容映射
export const AdminOrderStatusTextValue: Record<AdminOrderStatus, any> = {
[AdminOrderStatus.Pending]: {
title: '等待付款'
},
[AdminOrderStatus.ToUse]: {
title: ' 待使用'
},
[AdminOrderStatus.Consuming]: {
title: '使用中'
},
[AdminOrderStatus.Finished]: {
title: '已完成'
},
[AdminOrderStatus.Cancelled]: {
title: '订单取消'
},
}
export const AdminOrderStatusValue: Record<AdminOrderStatusText, string | number> = {
[AdminOrderStatusText.All]: '',
[AdminOrderStatusText.Pending]: 0,
[AdminOrderStatusText.ToUse]: 1,
[AdminOrderStatusText.Consuming]: 2,
[AdminOrderStatusText.Finished]: 3,
[AdminOrderStatusText.Cancelled]: 4,
}