添加套餐管理页面

This commit is contained in:
wangxiaowei
2025-12-14 18:16:31 +08:00
parent 2831eadc54
commit 19542eaf50
3 changed files with 463 additions and 345 deletions

353
src/bundle/setmeal/add.vue Normal file
View File

@ -0,0 +1,353 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="">
<!-- 改价弹窗 -->
<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">
<wd-radio-group v-model="form.type" size="large" shape="dot" checked-color="#4C9F44" >
<wd-radio :value="1" border>
<view class="leading-36rpx font-400 text-30rpx ml-12rpx mr-60rpx">指定天数内有效</view>
</wd-radio>
<wd-radio :value="2" border>
<view class="leading-36rpx font-400 text-30rpx ml-12rpx">指定时间段内有效</view>
</wd-radio>
</wd-radio-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="">确定</view>
</view>
</wd-popup>
<view>
<navbar :title="title" custom-class='!bg-[#fff]' :leftArrow="false"></navbar>
</view>
<view class="add-tabs">
<wd-tabs v-model="tab" @change="Add.handleChangeTab">
<wd-tab title="基础信息"></wd-tab>
<wd-tab title="规格与价格"></wd-tab>
<wd-tab title="套餐详情"></wd-tab>
<wd-tab title="购买须知"></wd-tab>
</wd-tabs>
</view>
<view class="bg-[#FFF6EB] h-64rpx leading-64rpx font-400 text-26rpx text-[#111827] px-30rpx">
<text class="text-[#ED2D2D]">*</text>的为必填项
</view>
<view class="bg-white mt-20rpx p-30rpx">
<!-- 基本信息 -->
<view v-if="tab == 0">
<view class="font-bold text-34rpx text-[#303133] leading-48rpx">基本信息</view>
<view class="flex justify-between items-center mt-28rpx">
<view class="flex items-center">
<view class="text-32rpx 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>
<view class="flex items-center">
<wd-radio-group v-model="form.type" size="large" shape="dot" checked-color="#4C9F44" inline>
<wd-radio :value="1" border>
<view class="leading-36rpx font-400 text-30rpx ml-12rpx mr-60rpx">本地套餐</view>
</wd-radio>
<wd-radio :value="2" border>
<view class="leading-36rpx font-400 text-30rpx ml-12rpx">抖音套餐</view>
</wd-radio>
</wd-radio-group>
</view>
</view>
<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"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
<view class="mt-28rpx add-textarea">
<view class="flex items-center">
<view class="text-32rpx 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-textarea v-model="form.name"
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="flex items-center">
<view class="text-32rpx 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-textarea v-model="form.name"
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="flex items-center mb-28rpx">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx font-bold">团购视频</view>
</view>
<wd-upload :file-list="fileList" :limit="1" image-mode="scaleToFill" accept="video" :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">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_video.png`"
mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">添加视频</view>
</view>
</wd-upload>
</view>
<view class="mt-28rpx add-textarea">
<view class="flex items-center justify-between mb-28rpx">
<view class="flex items-center">
<view class="text-32rpx 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>
<view class="font-400 text-26rpx text-[#9CA3AF] leading-36rpx">
最多可上传9张图片
</view>
</view>
<wd-upload :file-list="fileList" :limit="1" image-mode="scaleToFill" accept="video" :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">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`"
mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">添加图片</view>
</view>
</wd-upload>
</view>
</view>
<!-- 规格与价格 -->
<view v-if="tab == 1">
<view class="font-bold text-34rpx text-[#303133] leading-48rpx mb-30rpx">规格与价格</view>
<view class="flex items-center mb-28rpx mr-20rpx justify-between">
<view class="mr-30rpx">
<view class="flex items-center mb-20rpx">
<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="请输入门市价"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
<view class="">
<view class="flex items-center mb-20rpx">
<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="请输入团购价"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
<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%]">
<view class="flex items-center">
<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>
<view class="font-400 text-24rpx leading-34rpx text-[#9CA3AF]">输入范围1~999</view>
</view>
</view>
<wd-input no-border placeholder="请输入库存"
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
</view>
<!-- 套餐详情 -->
<view v-if="tab == 2">
<view class="font-bold text-34rpx text-[#303133] leading-48rpx mb-30rpx">套餐详情</view>
<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%]">
<view class="flex items-center">
<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>
<view class="font-400 text-24rpx leading-34rpx text-[#9CA3AF]">每条内容之间需要换行输入</view>
</view>
</view>
<wd-textarea v-model="form.name"
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
custom-textarea-class='!bg-[#F8F9FA]' />
</view>
<view class="mr-30rpx mt-30rpx">
<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"
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
custom-textarea-class='!bg-[#F8F9FA]' />
</view>
</view>
</view>
<!-- 购买须知 -->
<view v-if="tab == 3">
<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="flex items-center mb-20rpx w-[100%]">
<view class="flex items-center justify-between w-[100%]">
<view class="flex items-center">
<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>
</view>
</view>
<view>
<wd-input no-border placeholder="请选择"
disabled
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx">
<template #suffix>
<wd-icon name="arrow-down" size="32rpx" color='#8F8F8F'></wd-icon>
</template>
</wd-input>
</view>
</view>
<view class="mr-30rpx mt-30rpx">
<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"
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
custom-textarea-class='!bg-[#F8F9FA]' />
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
const OSS = inject('OSS')
// 页面标题
const title = ref<string>('新建套餐')
const type = ref<string>('add') // add 新建 edit 编辑
// tab
const tab = ref<number>(0)
// 上传文件
const fileList = ref<any[]>([])
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用,实际请换成真实上传接口
// 表单
const form = reactive<{
type: number,
code: string,
message: string,
name: string
}>({
type: 1,
code: '',
message: '',
name: ''
})
// 日期过滤
const value = ref<number>(Date.now())
// 团购有效期
const showExpireTimePooup = ref<boolean>(false)
onLoad((args) => {
// TODO 如果是编辑页面咋额
type.value = args.type || 'add'
if (type.value === 'edit') {
title.value = '修改套餐信息'
}
})
const Add = {
/**
* 切换tab
*/
handleChangeTab: (e) => {
tab.value = e.name
},
/**
* 图片选择/删除
*/
handleUploadFile: (event: any) => {
fileList.value = event.fileList
},
}
</script>
<style lang="scss">
page {
background: $cz-page-background;
}
.add-tabs {
:deep() {
.wd-tabs__line {
background-color: #4C9F44 !important;
}
}
}
.add-textarea {
:deep() {
.wd-textarea__value,
.wd-textarea__count {
background: transparent !important;
}
}
}
</style>

View File

@ -37,7 +37,7 @@
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
<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]">新建套餐</wd-button>
<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>
</view>
</view>
</view>
@ -66,7 +66,7 @@
const keywords = ref<string>('') // 搜索关键词
// tab
const tab = ref<string>('all')
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' },

View File

@ -1,217 +1,70 @@
<template>
<view>
<!-- 平台团购直营店和加盟店团购套餐 -->
<view v-if="type === OrderSource.Combo" 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="ComboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.store_name }}</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx">
<text class="text-[#4C9F44]" v-if="order.order_status === TeaRoomPackageOrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="order.order_status === TeaRoomPackageOrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="order.order_status === TeaRoomPackageOrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex">
<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.title }}</view>
<view>
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">{{ order.hour }}小时</wd-tag>
</view>
<view class="font-400 leading-36rpx text-26rpx text-[#606266]">
<view class="mt-12rpx" v-if="order.operation_type === StoreType.Direct">{{ order.introduce }}</view>
<!-- <view class="mt-10rpx">有效期至2025-03-23</view> -->
</view>
</view>
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end" v-if="order.order_status === TeaRoomPackageOrderStatus.ToUse">
<view
@click="ComboCard.handleOrderRefund(OrderSource.Combo)"
class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133]"
:class="order.operation_type === StoreType.Direct ? ' mr-28rpx' : ''">
申请退款
</view>
<view
@click="ComboCard.handleUsePackage"
class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]"
v-if="order.operation_type === StoreType.Direct">
立即预定
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 抖音团购 -->
<view v-if="type === OrderSource.DouYin" 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" @click="ComboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
<text class="text-[#4C9F44]" v-if="orderStatus === OrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderStatus === OrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderStatus === OrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex">
<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">这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字</view>
<view>
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
</view>
</view>
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === OrderSource.DouYin">立即预定</view>
</view>
</view>
</view>
</view>
</view>
<!-- 茶室预约 -->
<view v-if="type === OrderSource.TeaRoom" 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="ComboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.store_name }}</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx text-[#4C9F44]">
<text v-if="order.order_status === TeaRoomOrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
<text v-if="order.order_status === TeaRoomOrderStatus.Consumption">消费中</text>
<text v-if="order.order_status === TeaRoomOrderStatus.Pay">已预约</text>
<text v-if="order.order_status === TeaRoomOrderStatus.Finished" class="text-[#606266]">完成</text>
<text v-if="order.order_status === TeaRoomOrderStatus.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>
<!-- 改价弹窗 -->
<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>
<!-- 操作按钮 -->
<template v-if="order.order_status === OrderStatus.Finished || order.order_status === OrderStatus.Cancelled">
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end"
@click="ComboCard.handleDeleteOrder(OrderSource.TeaRoom)">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center">
删除订单
</view>
</view>
</template>
<template v-if="order.order_status === TeaRoomOrderStatus.Pending">
<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>
</view>
</view>
<!-- 茶艺师预约 -->
<view v-if="type === OrderSource.TeaSpecialist" class="bg-white rounded-10rpx p-28rpx">
<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" @click="ComboCard.handleToOrderDetail">
<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 class="w-160rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
</view>
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">金牌茶艺师</view>
</view>
</view>
<view class="font-400 text-28rpx leading-20rpx text-[#4C9F44] flex items-center absolute top-6rpx right-0">
<text v-if="orderStatus === OrderStatus.Consuming">消费中</text>
<text v-if="orderStatus === OrderStatus.Reserved">已预约</text>
<text v-if="orderStatus === OrderStatus.Serving">服务中</text>
<text v-if="orderStatus === OrderStatus.Finished" class="text-[#606266]">完成</text>
<text v-if="orderStatus === OrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
<text v-if="orderStatus === OrderStatus.Cancelled" class="text-[#C9C9C9]" >订单取消</text>
</view>
</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-12rpx">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
<view class="mr-28rpx">
<wd-img width="152rpx" height="152rpx" :src="`${OSS}images/reserve_room/reserve_room_image2.png`"></wd-img>
</view>
<view>
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
<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">
这里是套餐的名字这里是套餐的名这里是套餐的名字这里是套餐的名字这里是套餐的名字这里是套餐的名字这里是套餐的名字这里是套餐的名字字
</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>
<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>
</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 !pl-10rpx">
<template #prefix>
<text class="pl-28rpx"></text>
</template>
</wd-input>
</view>
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mt-42rpx">
预约时间03/18 08:00-12:00
<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>
</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>
<!-- 操作按钮 -->
<view>
<view v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled"
class="flex items-center text-28rpx mt-28rpx justify-end"
@click="ComboCard.handleDeleteOrder(OrderSource.TeaSpecialist)">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] flex items-center justify-center">
删除订单
</view>
</view>
<view v-if="orderStatus === OrderStatus.Pending"
class="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.TeaSpecialist)">
取消订单
</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
@click="ComboCard.handleToPayOrder(OrderSource.TeaSpecialist)">去支付</view>
</view>
</view>
</view>
</wd-popup>
<!-- 茶室管理端-套餐管理 -->
<view v-if="type === OrderSource.SetMeal" class="bg-white rounded-10rpx p-28rpx">
@ -244,32 +97,30 @@
<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>
</view>
<view class="flex items-center">
<view class="font-500 text-28rpx text-[#303133] leading-40rpx mr-18rpx">更多</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">改价</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">下架</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">编辑</view>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view>
<view v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled"
class="flex items-center text-28rpx mt-28rpx justify-end"
@click="ComboCard.handleDeleteOrder(OrderSource.TeaSpecialist)">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] flex items-center justify-center">
删除订单
<templalte v-if="1 > 0">
<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')">编辑</view>
</view>
</view>
<view v-if="orderStatus === OrderStatus.Pending"
class="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.TeaSpecialist)">
取消订单
</templalte>
<templalte v-if="1 < 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>
<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>
</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
@click="ComboCard.handleToPayOrder(OrderSource.TeaSpecialist)">去支付</view>
</templalte>
</view>
</view>
</view>
@ -288,6 +139,10 @@
import { router } from '@/utils/tools'
import { toTimes, copy } from '@/utils/tools'
// 改价弹窗
const showChangePricePopup = ref<boolean>(false)
const changePrice = ref<string>('')
/**
* ComboCard 套餐卡片组件
* @description 展示订单列表套餐卡片信息
@ -303,14 +158,6 @@
type: String,
default: OrderSource.Combo
},
/**
* 订单类型: 待使用、退款等
* TODO 这里的orderStatus在接入接口的时候需要改为类似于data.orderStatus这种形式
*/
orderStatus: {
type: String,
default: OrderStatus.ToUse
},
order: {
type: Object,
@ -323,77 +170,41 @@
const ComboCard = {
/**
* 跳转到对对应室的详情页
* 详情页
*/
handleToStore: () => {
handleToTRStoreHooks(props.order.store_id, props.order.operation_type)
handleToOrderDetail: () => {
},
/**
* 申请退款
* 设置不可用日期
*/
handleOrderRefund: (source: string) => {
switch (source) {
case OrderSource.Combo:
router.navigateTo(`/bundle/order/after-sales/after-sales?orderId=${props.order.id}&storeId=${props.order.store_id}&comboId=${props.order.group_id}&orderType=${OrderSource.Combo}&orderStatus=${OrderStatus.AfterSaleApply}`)
break;
default:
break;
}
handleMore: () => {
toast.info('功能开发中')
},
/**
* 使用套餐
* 改价弹窗
*/
handleUsePackage: () => {
router.navigateTo(`/bundle/tea-room/choose-room?groupCouponId=${props.order.group_id}&groupCouponOrderId=${props.order.id}&teaRoomId=${props.order.store_id}`)
handleOpenChangePricePopup: () => {
showChangePricePopup.value = true
},
/**
* 确认改价
*/
handleConfirmChangePrice: () => {
ComboCard.handleOpenChangePricePopup()
},
/**
* 删除订单
* 下架商品
*/
handleDeleteOrder: (source: string) => {
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((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: '取消订单后无法恢复,优惠券可退回',
title: '您确认要下架该商品吗',
msg: '下架后该商品将不再售卖,已售出、待验券的商品不受影响,请您照常接待',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
@ -404,71 +215,25 @@
}
}).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;
}
toast.info('下架成功')
}
// 点击确认按钮回调事件
}).catch(() => {
// 点击取消按钮回调事件
})
},
/**
* 跳转到订单详情页
* 上架商品
*/
handleToOrderDetail: () => {
switch (props.type) {
case OrderSource.Combo:
router.navigateTo(`/bundle/order/platform/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.DouYin:
router.navigateTo(`/bundle/order/douyin/douyin-order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.TeaRoom:
router.navigateTo(`/bundle/order/tea-room/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.TeaSpecialist:
router.navigateTo(`/bundle/order/tea-specialist/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
default:
break;
}
handleAdd: () => {
toast.info('上架成功')
},
/**
* 支付
* 编辑商品
*/
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;
}
handleEdit: () => {
}
}
</script>