440 lines
21 KiB
Vue
440 lines
21 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 改价弹窗 -->
|
||
<wd-popup v-model="showChangePricePopup" 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="showChangePricePopup = 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="flex items-center">
|
||
<view class="mr-28rpx">
|
||
<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:{{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="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>
|
||
|
||
<view class="bg-white mx-30rpx mt-20rpx rounded-10rpx px-30rpx py-32rpx">
|
||
<view class="flex items-center">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] mr-26rpx w-100rpx whitespace-nowrap">
|
||
团购价
|
||
</view>
|
||
<wd-input
|
||
clearable
|
||
type="text"
|
||
placeholder="请输入"
|
||
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 !px-20rpx">
|
||
<template #prefix>
|
||
<text class="p-28rpx">￥</text>
|
||
</template>
|
||
</wd-input>
|
||
</view>
|
||
|
||
<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="order.price"></price-format>
|
||
</view>
|
||
</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="ComboCard.handleConfirmChangePrice">确定</view>
|
||
</view>
|
||
</wd-popup>
|
||
|
||
<!-- 茶室管理端-套餐管理 -->
|
||
<view v-if="type === OrderSource.SetMeal" class="bg-white rounded-10rpx p-28rpx">
|
||
<view class="">
|
||
<view class="flex items-center">
|
||
<view class="mr-28rpx">
|
||
<wd-img width="200rpx" height="200rpx" :src="order.main_image" radius="10rpx"></wd-img>
|
||
</view>
|
||
<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">{{ 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:{{ 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="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 ">{{ order.sold }}</text>
|
||
</view>
|
||
<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 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&id=${order.id}`)">编辑</view>
|
||
</view>
|
||
</template>
|
||
|
||
<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.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&id=${order.id}`)">编辑</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</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">
|
||
<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="order.img" radius="10rpx"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<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_title }} {{ order.start_time }}-{{ order.end_time }}</view>
|
||
<view class="mt-18rpx">预约时长：{{ order.hours }}小时</view>
|
||
<view class="mt-18rpx">用户手机号：{{ order.user_mobile }}</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 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>
|
||
</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] flex items-center justify-center"
|
||
@click="ComboCard.handleDeleteOrder(order.id)">删除</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, AdminOrderStatus } from '@/utils/order'
|
||
import { useMessage } from 'wot-design-uni'
|
||
import { toast } from '@/utils/toast'
|
||
import { handleReleaseTeaRoomOrderHookds, handleCancelOrderHooks, handleDeleteOrderHooks } from '@/hooks/useOrder'
|
||
import { router, copy } from '@/utils/tools'
|
||
import { toggleTeaSpecialistOrderPackageStatus, deleteTeaSpecialistOrderPackage } from '@/api/order'
|
||
|
||
// 改价弹窗
|
||
const showChangePricePopup = ref<boolean>(false)
|
||
const changePrice = ref<string>('')
|
||
|
||
// 取消订单弹窗
|
||
const message = useMessage('wd-message-box-slot')
|
||
|
||
/**
|
||
* ComboCard 套餐卡片组件
|
||
* @description 展示订单列表套餐卡片信息
|
||
*/
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
const props = defineProps({
|
||
/**
|
||
* 类型:
|
||
*/
|
||
type: {
|
||
type: String,
|
||
default: OrderSource.Combo
|
||
},
|
||
|
||
order: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
})
|
||
|
||
|
||
const emit = defineEmits(['refresh'])
|
||
|
||
const ComboCard = {
|
||
/**
|
||
* 详情页
|
||
*/
|
||
handleToOrderDetail: (id: number) => {
|
||
if (props.type == OrderSource.Admin) {
|
||
router.navigateTo(`/pages/order/order-detail?id=${id}`)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 设置不可用日期
|
||
*/
|
||
handleMore: () => {
|
||
toast.info('功能开发中')
|
||
},
|
||
|
||
/**
|
||
* 改价弹窗
|
||
*/
|
||
handleOpenChangePricePopup: () => {
|
||
showChangePricePopup.value = true
|
||
},
|
||
|
||
/**
|
||
* 确认改价
|
||
*/
|
||
handleConfirmChangePrice: () => {
|
||
ComboCard.handleOpenChangePricePopup()
|
||
},
|
||
|
||
/**
|
||
* 下架商品
|
||
*/
|
||
handleDelisted: () => {
|
||
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 toggleTeaSpecialistOrderPackageStatus(props.order.id, 0)
|
||
emit('refresh')
|
||
toast.info('下架成功')
|
||
}
|
||
// 点击确认按钮回调事件
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 上架商品
|
||
*/
|
||
handleAdd: () => {
|
||
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: () => {
|
||
|
||
},
|
||
|
||
/**
|
||
* 跳转到对对应室的详情页
|
||
*/
|
||
handleToStore: () => {
|
||
handleToTRStoreHooks(props.order.store_id, props.order.operation_type)
|
||
},
|
||
|
||
/**
|
||
* 删除订单
|
||
*/
|
||
handleDeleteOrder: (orderId: number) => {
|
||
message.confirm({
|
||
title: '确定删除订单？',
|
||
msg: '删除订单后无法恢复，是否确认删除订单？',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
cancelButtonProps: {
|
||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
},
|
||
confirmButtonProps: {
|
||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
}
|
||
}).then((res) => {
|
||
if (res.action == 'confirm') {
|
||
uni.$on('refreshOrderList', () => {
|
||
emit('refresh')
|
||
uni.$off('refreshOrderList')
|
||
})
|
||
handleDeleteOrderHooks(orderId)
|
||
}
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 取消订单
|
||
*/
|
||
handleCancelOrder: (orderId: number) => {
|
||
message.confirm({
|
||
title: '确定取消订单？',
|
||
msg: '取消订单后无法恢复，是否确定取消订单？',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
cancelButtonProps: {
|
||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
},
|
||
confirmButtonProps: {
|
||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
}
|
||
}).then((res) => {
|
||
if (res.action == 'confirm') {
|
||
uni.$on('refreshOrderList', () => {
|
||
emit('refresh')
|
||
uni.$off('refreshOrderList')
|
||
})
|
||
handleCancelOrderHooks(orderId)
|
||
}
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 释放时间
|
||
*/
|
||
handleReleaseOrder: (orderId: number) => {
|
||
message.confirm({
|
||
title: '释放时间',
|
||
msg: '释放预约时间后，包间可重新被预定',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
cancelButtonProps: {
|
||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
},
|
||
confirmButtonProps: {
|
||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
}
|
||
}).then((res) => {
|
||
if (res.action == 'confirm') {
|
||
uni.$on('refreshOrderList', () => {
|
||
emit('refresh')
|
||
uni.$off('refreshOrderList')
|
||
})
|
||
handleReleaseTeaRoomOrderHookds(orderId)
|
||
}
|
||
}).catch(() => { })
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
export default {}
|
||
</script>
|