389 lines
13 KiB
Vue
389 lines
13 KiB
Vue
<template>
|
||
<crud-layout bg="/static/page/blue-bg.png">
|
||
<z-paging
|
||
ref="pageRef"
|
||
:fixed="false"
|
||
v-model="pageHook.list"
|
||
:default-page-size="10"
|
||
safe-area-inset-bottom
|
||
:loading-more-enabled="true"
|
||
:show-scrollbar="false"
|
||
@query="query"
|
||
:auto-clean-list-when-reload="false"
|
||
:auto-scroll-to-top-when-reload="false"
|
||
@scroll="pageHook.scroll"
|
||
>
|
||
<template #top>
|
||
<view class="h-30rpx" />
|
||
<view class="flex justify-between items-center bg-white rounded-16rpx px-20rpx">
|
||
<z-tabs :list="tabs" @change="tabChange" />
|
||
<tm-between-time
|
||
start="2020-1-1"
|
||
end="2050-1-1"
|
||
v-model="state.date"
|
||
v-model:model-str="state.formatVal"
|
||
@confirm="datePickerConfirm"
|
||
format="YYYY-MM-DD"
|
||
:quickDate="[]"
|
||
drawerSize="900"
|
||
>
|
||
<view class="mb-6rpx flex items-center gap-1">
|
||
<image class="w-[30rpx] h-[30rpx]" src="@/static/page/filter.svg" />
|
||
<view class="text-center second-text-28 text-30 whitespace-nowrap">筛选</view>
|
||
</view>
|
||
</tm-between-time>
|
||
</view>
|
||
</template>
|
||
|
||
<view class="h-20rpx" />
|
||
|
||
<view class="flex-col justify-center card p-3 m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i">
|
||
<view class="flex-row items-center">
|
||
<image class="w-110rpx h-110rpx rounded-8rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
|
||
<view class="flex-1 m-l-20rpx">
|
||
<view class="flex-row items-center justify-between">
|
||
<view class="flex-row items-center">
|
||
<view class="main-text-28">{{ v.merchantName }}</view>
|
||
<view v-if="false" class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" />
|
||
</view>
|
||
<tm-tag v-if="v.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
|
||
<tm-tag v-if="v.orderStatus == 5" color="success" size="xs">已支付</tm-tag>
|
||
<tm-tag v-if="v.orderStatus == 10" color="error" size="xs">售后</tm-tag>
|
||
<tm-tag v-if="v.orderStatus == 20" size="xs">已核销</tm-tag>
|
||
<tm-tag v-if="v.orderStatus == 30" color="info" size="xs">已取消(智能柜)</tm-tag>
|
||
</view>
|
||
<view class="flex justify-between items-center m-t-5rpx">
|
||
<view class="second-text-22">
|
||
<text>{{ v.username }}</text>
|
||
<text class="m-l-10rpx">{{ v.userMobile }}</text>
|
||
</view>
|
||
<view class="second-text-22 h-30rpx">{{ hooks.useEnum("hardwareRefundStatusEnum", v.refundStatus) }}</view>
|
||
</view>
|
||
<view class="flex justify-between items-center">
|
||
<view class="second-text-22">
|
||
<text>下单时间</text>
|
||
<text class="m-l-10rpx">{{ hooks.useTime(v.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</text>
|
||
</view>
|
||
<view class="main-text-30 color-red! min-w-140rpx text-right">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
|
||
<!-- <view class="second-text-24">共 {{ v.carList.length }} 件</view> -->
|
||
</view>
|
||
<view v-if="v.payType == '9'" class="sub-text-24">{{ v.productDesc }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-end items-center mt-1">
|
||
<view v-if="v.orderType == '1' && v.refundStatus" class="ml-1 botder_btn" @tap.stop="refundDetail(v)">售后详情</view>
|
||
<view
|
||
v-if="v.orderStatus == '5' && v.orderType == '1' && v.payType != '9'"
|
||
class="ml-1 botder_btn"
|
||
@tap.stop="doIndividualRefund(v)"
|
||
>
|
||
申请退款
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
|
||
<tm-drawer title="退款" :showClose="true" size="90%" bgColor="#EBF6FF" v-model:show="state.showDrawer" zIndex="999">
|
||
<view class="bg-white rounded-16rpx px-10rpx m-b-10rpx animate-both">
|
||
<z-tabs
|
||
:list="['同意退款', '拒绝退款']"
|
||
bar-width="300"
|
||
bar-height="0"
|
||
:active-style="{
|
||
width: '300rpx',
|
||
height: '70rpx',
|
||
backgroundColor: '#0779FDdd',
|
||
color: '#000000',
|
||
textAlign: 'center',
|
||
lineHeight: '70rpx',
|
||
fontWeight: 'bold',
|
||
fontSize: '30rpx',
|
||
borderRadius: '10rpx',
|
||
marginTop: '10rpx',
|
||
}"
|
||
:inactive-style="{
|
||
width: '300rpx',
|
||
height: '70rpx',
|
||
color: '#000000',
|
||
textAlign: 'center',
|
||
lineHeight: '70rpx',
|
||
fontWeight: 'bold',
|
||
fontSize: '30rpx',
|
||
borderRadius: '10rpx',
|
||
marginTop: '10rpx',
|
||
}"
|
||
@change="refundTabChange"
|
||
/>
|
||
</view>
|
||
|
||
<view class="flex-col justify-center card p-x-15rpx p-y-25rpx m-b-10rpx">
|
||
<view class="flex-row items-center">
|
||
<image class="w-100rpx h-100rpx rounded-8rpx" :src="filePath(state.curOrder.logoPic)" mode="aspectFill" />
|
||
<view class="flex-1 flex-col m-l-20rpx">
|
||
<view class="flex-row items-center justify-between">
|
||
<view class="flex-row items-center">
|
||
<view class="main-text-28">{{ state.curOrder.merchantName }}</view>
|
||
<view v-if="false" class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" />
|
||
</view>
|
||
<tm-tag v-if="state.curOrder.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
|
||
<tm-tag v-if="state.curOrder.orderStatus == 5" color="success" size="xs">已支付</tm-tag>
|
||
<tm-tag v-if="state.curOrder.orderStatus == 10" color="error" size="xs">售后</tm-tag>
|
||
<tm-tag v-if="state.curOrder.orderStatus == 20" size="xs">已核销</tm-tag>
|
||
</view>
|
||
<view class="flex justify-between items-center">
|
||
<view class="flex flex-col">
|
||
<view class="second-text-20">
|
||
<text>{{ state.curOrder.username }}</text>
|
||
<text class="m-l-10rpx">{{ state.curOrder.userMobile }}</text>
|
||
</view>
|
||
<view class="second-text-20">
|
||
<text>下单时间</text>
|
||
<text class="m-l-10rpx">
|
||
{{ hooks.useTime(state.curOrder.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex flex-col items-end justify-center m-t-5rpx">
|
||
<view class="second-text-22">{{ hooks.useEnum("hardwareRefundStatusEnum", state.curOrder.refundStatus) }}</view>
|
||
<view class="flex">
|
||
<view v-if="state.curOrder.carList?.length" class="m-t-4rpx m-r-10rpx second-text-26">
|
||
共 {{ state.curOrder.carList.length }} 件
|
||
</view>
|
||
<view class="main-text-30 color-red!">¥ {{ hooks.useMoney(state.curOrder.totalPrice) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-10rpx">
|
||
<view class="flex-row items-center justify-between">
|
||
<view class="sub-text-28">实付款</view>
|
||
<view class="flex-row items-end">
|
||
<view class="sub-text-28">¥</view>
|
||
<view class="m-l-5rpx sub-text-28">{{ hooks.useMoney(state.curOrder.payPrice) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-10rpx">
|
||
<view class="sub-text-28">退款金额</view>
|
||
<view class="sub-text-28 color-red!">¥{{ hooks.useMoney(state.curOrder.payPrice) }}</view>
|
||
</view>
|
||
<view class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-10rpx second-text-24">
|
||
<view class="flex-row items-center">
|
||
<view>服务单号：</view>
|
||
<view>{{ state.refundDetail.no }}</view>
|
||
</view>
|
||
<view class="flex-row items-center">
|
||
<view>申请时间：</view>
|
||
<view>{{ hooks.useTime(state.refundDetail.createTime, "") }}</view>
|
||
</view>
|
||
<view class="flex-row items-center">
|
||
<view>售后类型：</view>
|
||
<view>{{ state.refundDetail.applyReason }}</view>
|
||
</view>
|
||
<view class="flex-row items-center">
|
||
<view>相关描述：</view>
|
||
<view>{{ state.refundDetail.applyDescription }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="state.refundDetail.status == 62" class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-10rpx second-text-24">
|
||
<view class="flex-row items-center">
|
||
<view>审核人：</view>
|
||
<view>{{ state.refundDetail.auditUsername }}</view>
|
||
</view>
|
||
<view class="flex-row items-center">
|
||
<view>审核时间：</view>
|
||
<view>{{ hooks.useTime(state.refundDetail.auditTime, "") }}</view>
|
||
</view>
|
||
<view class="flex-row items-center">
|
||
<view>拒绝原因：</view>
|
||
<view>{{ state.refundDetail.auditReason }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="state.refundScene === 1" class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-10rpx">
|
||
<view class="sub-text-28">拒绝原因</view>
|
||
<view class="m-t-20rpx">
|
||
<tm-input v-model="state.remark" type="textarea" :showClear="false" placeholder="请描述拒绝原因" />
|
||
</view>
|
||
</view>
|
||
<view v-else class="h-270rpx" />
|
||
<view class="flex">
|
||
<tm-modal
|
||
v-if="state.refundScene === 0"
|
||
style="flex: 1"
|
||
height="250"
|
||
title="确定同意退款吗？"
|
||
:show-footer="true"
|
||
@confirm="doAgreeRefund()"
|
||
>
|
||
<template v-slot:trigger><tm-button block>同意退款</tm-button></template>
|
||
</tm-modal>
|
||
<tm-modal
|
||
v-if="state.refundScene === 1"
|
||
style="flex: 1"
|
||
height="250"
|
||
title="确定拒绝退款吗？"
|
||
:show-footer="true"
|
||
@confirm="doRefuseRefund()"
|
||
>
|
||
<template v-slot:trigger><tm-button block color="danger">拒绝退款</tm-button></template>
|
||
</tm-modal>
|
||
</view>
|
||
</tm-drawer>
|
||
</crud-layout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, computed } from "vue"
|
||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||
import { hooks, router } from "@@/index"
|
||
import { filePath } from "@@/utils/file"
|
||
import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
|
||
import { individualOrderApi, refundApi } from "@@/api"
|
||
|
||
const pageRef = ref<any>(null)
|
||
// 选项卡
|
||
const tabs = [
|
||
{ id: null, name: "全部", disabled: false },
|
||
{ id: 5, name: "已支付", disabled: false },
|
||
{ id: 10, name: "售后", disabled: false },
|
||
]
|
||
const state = reactive<any>({
|
||
pa: {
|
||
orderStatus: tabs[0].id,
|
||
createTimeList: [],
|
||
},
|
||
showDrawer: false,
|
||
refundScene: 0,
|
||
curOrder: {},
|
||
refundDetail: {},
|
||
remark: "",
|
||
date: [],
|
||
formatVal: "",
|
||
})
|
||
const formatVal = computed(() => (state.date.length === 2 ? state.formatVal : ""))
|
||
|
||
const pageHook = hooks.usePage(pageRef, individualOrderApi.page, null, "data.records")
|
||
|
||
onLoad(() => {
|
||
const app = getApp()
|
||
app._initTabbar()
|
||
})
|
||
onShow(() => {
|
||
const isLogin = hooks.useCheckLogin()
|
||
if (!isLogin) return
|
||
if (pageRef.value) {
|
||
pageRef.value.reload(false)
|
||
}
|
||
})
|
||
|
||
// 切换选项卡
|
||
const tabChange = (e: number) => {
|
||
state.pa.orderStatus = tabs[e].id
|
||
pageRef.value.reload(true)
|
||
}
|
||
|
||
const query = (page: number, pagesize: number) => {
|
||
// const isLogin = hooks.useStaticCheckLogin()
|
||
// if (!isLogin) return
|
||
pageHook.startPage(page, pagesize, false, state.pa)
|
||
}
|
||
|
||
// 时间范围选择器确认
|
||
const datePickerConfirm = (date: any) => {
|
||
state.pa.createTimeList = formatVal.value.split("~")
|
||
pageRef.value.reload(false)
|
||
}
|
||
|
||
// 重置状态
|
||
const resetState = () => {
|
||
state.refundScene = 0
|
||
state.curOrder = {}
|
||
state.refundDetail = {}
|
||
state.remark = ""
|
||
}
|
||
|
||
// 点击售后详情
|
||
const refundDetail = (v: any) => {
|
||
router.jump("/pages/order/detail", { id: v.id })
|
||
}
|
||
|
||
// 点击退款
|
||
const doIndividualRefund = async (v: any) => {
|
||
return router.jump("/pages/refund/apply", { id: v.id })
|
||
|
||
if (!v.id) return uni.showToast({ title: "订单id不存在", icon: "none" })
|
||
|
||
resetState()
|
||
|
||
state.curOrder = v
|
||
state.showDrawer = true
|
||
uni.showLoading({ title: "加载中...", mask: true })
|
||
try {
|
||
const res: any = await refundApi.get({ id: v.id })
|
||
if (res.code == 0) {
|
||
state.refundDetail = res.data
|
||
} else {
|
||
uni.showToast({ title: res.msg || "加载退款详情失败", icon: "none" })
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({ title: "错误", icon: "none" })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
|
||
// 退款切换选项卡
|
||
const refundTabChange = (e: number) => {
|
||
state.refundScene = e
|
||
}
|
||
|
||
// 同意退款
|
||
const doAgreeRefund = async () => {
|
||
if (!state.refundDetail.id) {
|
||
return uni.showToast({ title: "订单不存在", icon: "none" })
|
||
}
|
||
|
||
uni.showLoading({ title: "操作中...", mask: true })
|
||
try {
|
||
const res: any = await individualOrderApi.agreeRefund({ id: state.refundDetail.id })
|
||
if (res.code == 0) {
|
||
uni.showToast({ title: "操作成功", icon: "success" })
|
||
state.showDrawer = false
|
||
pageRef.value.reload(true)
|
||
} else {
|
||
uni.showToast({ title: res.msg || "退款失败", icon: "none" })
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({ title: "错误", icon: "none" })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
|
||
// 拒绝退款
|
||
const doRefuseRefund = async () => {
|
||
if (!state.refundDetail.id) {
|
||
return uni.showToast({ title: "订单不存在", icon: "none" })
|
||
}
|
||
|
||
uni.showLoading({ title: "操作中...", mask: true })
|
||
try {
|
||
const res: any = await individualOrderApi.refuseRefund({ id: state.refundDetail.id, auditReason: state.remark })
|
||
if (res.code == 0) {
|
||
uni.showToast({ title: "操作成功", icon: "success" })
|
||
state.showDrawer = false
|
||
pageRef.value.reload(true)
|
||
} else {
|
||
uni.showToast({ title: res.msg || "拒绝退款失败", icon: "none" })
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({ title: "错误", icon: "none" })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
</script>
|