添加页面
This commit is contained in:
wangxiaowei
@ -9,132 +9,6 @@
|
||||
|
||||
<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 === OrderSourceOrderStatus.AfterSaleApply || orderStatus === OrderSourceOrderStatus.AfterSaleProcessing">请耐心等待，我们会尽快处理您的请求</view>
|
||||
<view v-if="orderStatus === OrderSourceOrderStatus.Refunded" class="text-center mt-14rpx">
|
||||
|
||||
<view class="text-40rpx text-[#303133] leading-56rpx">
|
||||
<view v-if="orderType !== OrderSource.TeaSpecialist">退款成功￥128.00</view>
|
||||
<!-- 茶艺师退款需要有退款详情 -->
|
||||
<view v-if="orderType === OrderSource.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 !== OrderSource.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 === OrderSource.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 === OrderSource.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 === OrderSourceOrderStatus.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 === OrderSourceOrderStatus.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 === OrderSourceOrderStatus.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 !== OrderSource.TeaSpecialist">
|
||||
<view>售后原因</view>
|
||||
<view>买多了/买错了</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== OrderSource.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 === OrderSourceOrderStatus.AfterSaleApply ? '' : 'bg-white'"
|
||||
v-if="orderType !== OrderSource.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 !== OrderSourceOrderStatus.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 === OrderSourceOrderStatus.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">
|
||||
@ -160,7 +34,7 @@
|
||||
</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 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>
|
||||
|
||||
@ -294,11 +168,137 @@
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 平台团购直营店 -->
|
||||
<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 === OrderStatus.AfterSaleApply || orderStatus === OrderStatus.AfterSaleProcessing">请耐心等待，我们会尽快处理您的请求</view>
|
||||
<view v-if="orderStatus === OrderStatus.Refunded" class="text-center mt-14rpx">
|
||||
|
||||
<view class="text-40rpx text-[#303133] leading-56rpx">
|
||||
<view v-if="orderType !== OrderSource.TeaSpecialist">退款成功￥128.00</view>
|
||||
<!-- 茶艺师退款需要有退款详情 -->
|
||||
<view v-if="orderType === OrderSource.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 !== OrderSource.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 === OrderSource.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 === OrderSource.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 === OrderStatus.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 === OrderStatus.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 === OrderStatus.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 !== OrderSource.TeaSpecialist">
|
||||
<view>售后原因</view>
|
||||
<view>买多了/买错了</view>
|
||||
</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== OrderSource.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 === OrderStatus.AfterSaleApply ? '' : 'bg-white'"
|
||||
v-if="orderType !== OrderSource.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 !== OrderStatus.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 === OrderStatus.AfterSaleApply" @click="AfterSales.handleSubmitRefund">
|
||||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">提交</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OrderStatusTitle, PersonalReasonMap, MerchantReasonMap, ReasonMap, OrderSource } from '@/utils/order'
|
||||
import { OrderStatusTitle, PersonalReasonMap, MerchantReasonMap, ReasonMap, OrderSource, OrderStatus } from '@/utils/order'
|
||||
import {toast} from '@/utils/toast'
|
||||
|
||||
/** 表单相关 **/
|
||||
@ -340,7 +340,7 @@
|
||||
orderStatus.value = args.orderStatus
|
||||
})
|
||||
|
||||
const afterSales = {
|
||||
const AfterSales = {
|
||||
handleToCombo: () => {
|
||||
toast.info('跳转到套餐详情')
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user