401 lines
22 KiB
Vue
401 lines
22 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="pb-254rpx">
|
||
<!-- 平台团购直营店 -->
|
||
<view>
|
||
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
|
||
</view>
|
||
|
||
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
|
||
<view v-if="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply || orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleProcessing">请耐心等待，我们会尽快处理您的请求</view>
|
||
<view v-if="orderStatus === GroupBuyingCategoryOrderStatus.Refunded" class="text-center mt-14rpx">
|
||
|
||
<view class="text-40rpx text-[#303133] leading-56rpx">
|
||
<view v-if="orderType !== ReserveCategory.TeaSpecialist">退款成功￥128.00</view>
|
||
<!-- 茶艺师退款需要有退款详情 -->
|
||
<view v-if="orderType === ReserveCategory.TeaSpecialist" @click="showRefundDetailsPopup = true">
|
||
退款成功￥128.00
|
||
<wd-icon name="arrow-right" size="40rpx" color="#666666" custom-class="!bg-[#F8F9FA]"></wd-icon>
|
||
</view>
|
||
</view>
|
||
<view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
|
||
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">2025年4月13日 18:22</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单 -->
|
||
<view class="mx-30rpx">
|
||
<view class="bg-white rounded-16rpx p-30rpx">
|
||
<view class="flex items-center">
|
||
<view class="mr-30rpx">
|
||
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<!-- 非茶艺师退款 -->
|
||
<view class="flex justify-between items-center" @click="afterSales.handleToCombo" v-if="orderType !== ReserveCategory.TeaSpecialist">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">这是团购套餐的可以点击进 </view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
<!-- 茶艺师退款 -->
|
||
<view class="flex justify-between items-center" @click="afterSales.handleToCombo" v-if="orderType === ReserveCategory.TeaSpecialist">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx">这是茶艺师名称</view>
|
||
<view class="text-[#909399] text-26rpx leading-36rpx">￥324.22</view>
|
||
</view>
|
||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||
<view>3小时</view>
|
||
<view>x1</view>
|
||
</view>
|
||
<!-- 茶艺师退显示车马费-->
|
||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx" v-if="orderType === ReserveCategory.TeaSpecialist">
|
||
<view>车马费（￥3.00元/公里）</view>
|
||
<view>￥30.90</view>
|
||
</view>
|
||
<view class="text-[#606266] text-right mt-26rpx">
|
||
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
|
||
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 售后原因 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" @click="showResonPopup = true" v-if="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply">
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between">
|
||
<view class="text-32rpx leading-44rpx text-[#303133]">售后原因</view>
|
||
<view>
|
||
<text class='text-[#909399] mr-10rpx'>{{ formData.reason ? reasonText : '请至少选择一项' }}</text>
|
||
<wd-icon name="arrow-right" size="24rpx" color="#666666" custom-class="!bg-[#F8F9FA]"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息(选填) -->
|
||
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx" v-if="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply">
|
||
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">
|
||
<text>订单信息</text>
|
||
<text class="text-26rpx text-[#909399] leading-36rpx ml-20rpx">(选填)</text>
|
||
</view>
|
||
<view class="mt-28rpx">
|
||
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="formData.info" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 售后已完成 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus === GroupBuyingCategoryOrderStatus.Refunded">
|
||
<view class="text-[#303133] text-32rpx leading-44rpx">售后订单</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== ReserveCategory.TeaSpecialist">
|
||
<view>售后原因</view>
|
||
<view>买多了/买错了</view>
|
||
</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== ReserveCategory.TeaSpecialist">
|
||
<view>退款金额</view>
|
||
<view>￥159.22</view>
|
||
</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||
<view>申请时间</view>
|
||
<view>2019-05-16 13:20:26</view>
|
||
</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||
<view>退款编号</view>
|
||
<view>
|
||
<text>7327328627526903</text>
|
||
<wd-divider vertical />
|
||
<text class="text-[#4C9F44]">复制</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="w-full fixed bottom-0 left-0 right-0 h-152rpx"
|
||
:class="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply ? '' : 'bg-white'"
|
||
v-if="orderType !== ReserveCategory.TeaSpecialist">
|
||
<view class="mt-34rpx">
|
||
<!-- 待使用 -->
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133]"
|
||
v-if="orderStatus !== GroupBuyingCategoryOrderStatus.AfterSaleApply">
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx mr-30rpx">联系商家</view>
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx">联系平台</view>
|
||
</view>
|
||
|
||
<!-- 申请售后 -->
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center"
|
||
v-if="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply" @click="afterSales.handleSubmitRefund">
|
||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">提交</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 售后原因弹出框 -->
|
||
<wd-popup v-model="showResonPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative pb-78rpx">
|
||
<view class="absolute top-18rpx right-30rpx" @click="showResonPopup = 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>
|
||
<wd-radio-group v-model="reasonModelValue">
|
||
<view v-for="(item, index) in reasonGroups" :key="index">
|
||
<view class="text-32rpx text-[#303133] leading-44rpx ml-60rpx mb-28rpx">{{ item.title }}</view>
|
||
<view v-for="option in item.options" :key="option.value" class="flex items-center justify-between mb-20rpx">
|
||
<view class="text-28rpx text-[#303133] ml-60rpx">{{ option.label }}</view>
|
||
<view class="mr-28rpx">
|
||
<wd-radio :value="option.value" checked-color="#4C9F44" size='large' shape="dot"></wd-radio>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分隔线 -->
|
||
<view class="ml-30rpx" v-if="index === 0" >
|
||
<wd-divider color="#F6F7F9"/>
|
||
</view>
|
||
</view>
|
||
</wd-radio-group>
|
||
</view>
|
||
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mx-auto mt-160rpx" @click="afterSales.handleSelectReason">确定</view>
|
||
</view>
|
||
</wd-popup>
|
||
|
||
<!-- 退款费用详情 -->
|
||
<wd-popup v-model="showRefundDetailsPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative pb-78rpx">
|
||
<view class="absolute top-18rpx right-30rpx" @click="showResonPopup = 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>
|
||
<scroll-view scroll-y class="h-800rpx">
|
||
<view class="collapse">
|
||
<wd-collapse v-model="value">
|
||
<!-- 茶艺师总费用 -->
|
||
<wd-collapse-item name="item1">
|
||
<template #title="{expanded}">
|
||
<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">
|
||
<view class="mr-20rpx">￥640.00</view>
|
||
<view>
|
||
<wd-icon name="arrow-up" size="22rpx" color='#909399' v-if="expanded"></wd-icon>
|
||
<wd-icon name="arrow-down" size="22rpx" color='#909399' v-else></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<view class="bg-[#FBFBFB] rounded-16rpx py-20rpx px-30rpx">
|
||
<view class="mb-26rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>服务费</view>
|
||
<view>￥640.00</view>
|
||
</view>
|
||
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
|
||
<view>服务费（￥160元/小时）</view>
|
||
<view>x4</view>
|
||
</view>
|
||
</view>
|
||
<view class="mb-24rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>车马费</view>
|
||
<view>￥640.00</view>
|
||
</view>
|
||
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
|
||
<view>车马费（￥160元/公里）</view>
|
||
<view>10.3公里</view>
|
||
</view>
|
||
</view>
|
||
<view class="mb-40rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>茶艺服务</view>
|
||
<view>￥640.00</view>
|
||
</view>
|
||
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between mb-16rpx">
|
||
<view>红茶/绿茶/福鼎白茶/铁观音</view>
|
||
<view>￥158</view>
|
||
</view>
|
||
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
|
||
<view>茶具使用</view>
|
||
<view>￥20</view>
|
||
</view>
|
||
</view>
|
||
<view class="mb-24rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>优惠</view>
|
||
<view class="text-[#4C9F44]">-￥20.00</view>
|
||
</view>
|
||
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
|
||
<view>优惠券</view>
|
||
<view>-￥20.00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</wd-collapse-item>
|
||
|
||
<!-- 扣除费用 -->
|
||
<wd-collapse-item name="item2">
|
||
<template #title="{expanded}">
|
||
<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">
|
||
<view class="mr-20rpx">￥640.00</view>
|
||
<view>
|
||
<wd-icon name="arrow-up" size="22rpx" color='#909399' v-if="expanded"></wd-icon>
|
||
<wd-icon name="arrow-down" size="22rpx" color='#909399' v-else></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<view class="bg-[#FBFBFB] rounded-16rpx py-20rpx px-30rpx">
|
||
<view class="mb-26rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>50%服务费</view>
|
||
<view>￥640.00</view>
|
||
</view>
|
||
</view>
|
||
<view class="mb-24rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>车马费</view>
|
||
<view>￥640.00</view>
|
||
</view>
|
||
</view>
|
||
<view class="mb-24rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>优惠券</view>
|
||
<view>-￥20.00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</wd-collapse-item>
|
||
</wd-collapse>
|
||
|
||
<view class="bg-[#FBFBFB] rounded-16rpx py-20rpx px-30rpx mx-30rpx mt-20rpx">
|
||
<view class="font-400 text-26rpx leading-36rpx text-[#909399]">扣款规则说明</view>
|
||
<view class="font-500 text-26rpx leading-48rpx text-[#303133] mt-12rpx">
|
||
<view class="">1）茶艺师未出发，100%退款；</view>
|
||
<view class="">2）茶艺师已出发未到达目的地，不退车马费；</view>
|
||
<view class="">3）茶艺师出发并到达目的地，不退车马费，并且支付茶艺师50%服务费。</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="mx-60rpx mt-44rpx">
|
||
<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-36rpx">
|
||
<view>实际退款</view>
|
||
<view>￥698.90</view>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle, PersonalReasonMap, MerchantReasonMap, ReasonMap, ReserveCategory } from '@/utils/order'
|
||
import {toast} from '@/utils/toast'
|
||
|
||
/** 表单相关 **/
|
||
const reasonText = ref<string>('') // 显示售后原因文本
|
||
const reasonModelValue = ref<number>(0) // 售后原因
|
||
const showResonPopup = ref<boolean>(false) // 是否显示售后原因弹出框
|
||
const reasonGroups = [
|
||
{ title: '个人原因', options: PersonalReasonMap },
|
||
{ title: '商家原因', options: MerchantReasonMap }
|
||
]
|
||
|
||
interface FormData {
|
||
info: string,
|
||
reason: number
|
||
}
|
||
const formData = reactive<FormData>({
|
||
info: '', // 订单信息（字符串）
|
||
reason: 0 // 售后原因（整数类型，建议和选项value对应）
|
||
})
|
||
/** 结束 **/
|
||
|
||
/** 退款详情 **/
|
||
const showRefundDetailsPopup = ref<boolean>(false) // 是否显示退款详情弹出框
|
||
const value = ref<string[]>(['item1'])
|
||
|
||
/** 结束 **/
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
const title = ref<string>('')
|
||
const orderType = ref<string>('') // 订单类型：团购、抖音、茶艺师退款
|
||
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
|
||
|
||
onLoad((args) => {
|
||
// 这里暂时使用 GroupBuyingCategory.Direct 这个，因为平台团购类型下面都是有共同的售后
|
||
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Direct][args.orderStatus] || '订单详情'
|
||
|
||
orderType.value = args.orderType
|
||
orderStatus.value = args.orderStatus
|
||
})
|
||
|
||
const afterSales = {
|
||
handleToCombo: () => {
|
||
toast.info('跳转到套餐详情')
|
||
},
|
||
|
||
// 提交申请退款
|
||
handleSubmitRefund: () => {
|
||
if (formData.reason === 0) {
|
||
toast.info('请选择售后原因')
|
||
return
|
||
}
|
||
},
|
||
|
||
// 选择原因
|
||
handleSelectReason: () => {
|
||
if (reasonModelValue.value === 0) {
|
||
toast.info('请选择售后原因')
|
||
return
|
||
}
|
||
|
||
reasonText.value = ReasonMap[reasonModelValue.value]
|
||
formData.reason = reasonModelValue.value
|
||
showResonPopup.value = false
|
||
},
|
||
|
||
// 查看退款详情
|
||
handleRefundDetails: () => {
|
||
toast.info('跳转到退款详情')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.coupon-bg {
|
||
background-image: url(#{$OSS}images/order/order_image2.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.collapse {
|
||
:deep() {
|
||
.wd-collapse-item::after,
|
||
.wd-collapse-item__header.is-expanded::after {
|
||
background: none !important;
|
||
}
|
||
|
||
.wd-collapse-item__body {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|