个体商户订单和商家退款功能
This commit is contained in:
weiwei committed
1 parent
30e0432017
commit
80e3a108d4
2 files changed
+275
-47
No files matched your search
@@ -22,7 +22,7 @@
|
||||
|
||||
<view class="h-20rpx" />
|
||||
|
||||
<view class="flex-col justify-center card p-x-15rpx p-y-25rpx m-b-20rpx" v-for="(v, i) in list" :key="i">
|
||||
<view class="flex-col justify-center card p-x-15rpx p-y-25rpx m-b-10rpx" v-for="(v, i) in list" :key="i">
|
||||
<view class="flex-row items-center">
|
||||
<image class="w-100rpx h-100rpx rounded-8rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
|
||||
<view class="flex-1 flex-col m-l-20rpx">
|
||||
@@ -36,11 +36,11 @@
|
||||
<tm-tag v-if="v.orderStatus == 10" color="error" size="xs">售后</tm-tag>
|
||||
<tm-tag v-if="v.orderStatus == 20" size="xs">已核销</tm-tag>
|
||||
</view>
|
||||
<view class="flex justify-between items-end m-t-5rpx">
|
||||
<view class="flex flex-col m-t-5rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex flex-col">
|
||||
<view class="second-text-20">
|
||||
<text>{{ "某个人" }}</text>
|
||||
<text class="m-l-10rpx">{{ "13155555555" }}</text>
|
||||
<text>{{ v.username }}</text>
|
||||
<text class="m-l-10rpx">{{ v.userMobile }}</text>
|
||||
</view>
|
||||
<view class="second-text-20">
|
||||
<text>下单时间</text>
|
||||
@@ -49,58 +49,181 @@
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-row">
|
||||
<view class="m-t-14rpx m-r-20rpx second-text-26">共 {{ v.carList?.length || "null" }} 件</view>
|
||||
<view class="m-t-10rpx main-text-30 color-red!">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
|
||||
<view class="flex flex-col items-end justify-center m-t-5rpx">
|
||||
<view class="second-text-22">{{ hooks.useEnum("hardwareRefundStatusEnum", v.refundStatus) }}</view>
|
||||
<view class="flex">
|
||||
<view v-if="v.carList?.length" class="m-t-4rpx m-r-10rpx second-text-26">共 {{ v.carList.length }} 件</view>
|
||||
<view class="main-text-30 color-red!">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-20rpx m-t-[-10rpx] flex justify-end items-center">
|
||||
<!-- <view class="absolute top-0 right-0 bottom-0 left-0 h-180rpx">
|
||||
<scroll-view scroll-x class="flex-row-center whitespace-nowrap">
|
||||
<view class="flex-row items-center">
|
||||
<view
|
||||
class="inline-flex! flex-col justify-center h-180rpx m-r-20rpx"
|
||||
v-for="(pV, pI) in v.carList"
|
||||
:key="pI"
|
||||
@tap.stop="
|
||||
router.jump('/pages/merchant/product-detail', {
|
||||
id: pV.productId,
|
||||
})
|
||||
"
|
||||
>
|
||||
<image class="w-160rpx h-120rpx rounded-8rpx" :src="filePath(pV.productPic)" mode="aspectFill" />
|
||||
<view class="w-160rpx m-t-10rpx sub-text-24 show-line text-center">
|
||||
{{ pV.productName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="inline-flex! h-180rpx">
|
||||
<view class="w-160rpx h-full" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="flex-row items-center justify-end">
|
||||
<view class="botder_btn" @tap.stop="">退款</view>
|
||||
<view v-if="v.orderStatus == 10 && v.refundStatus == 0" class="h-50rpx mt-1 flex justify-end items-center">
|
||||
<view class="botder_btn" @tap.stop="doIndividualRefund(v)">退款</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
|
||||
<!-- <tm-drawer ref="calendarView" placement="bottom" v-model:show="state.showDrawer">
|
||||
<view style="height: 1800rpx"></view>
|
||||
</tm-drawer> -->
|
||||
<tm-drawer title="退款" :showClose="true" size="90%" placement="bottom" 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 } from "vue"
|
||||
import { onShow } from "@dcloudio/uni-app"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { hooks } from "@@/index"
|
||||
import { filePath } from "@@/utils/file"
|
||||
import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
|
||||
import { individualOrderApi } from "@@/api"
|
||||
import { individualOrderApi, refundApi } from "@@/api"
|
||||
|
||||
const pageRef = ref<any>(null)
|
||||
// 选项卡
|
||||
@@ -113,13 +236,24 @@ const state = reactive<any>({
|
||||
pa: {
|
||||
orderStatus: tabs[0].id,
|
||||
},
|
||||
// showDrawer: false,
|
||||
showDrawer: false,
|
||||
refundScene: 0,
|
||||
curOrder: {},
|
||||
refundDetail: {},
|
||||
remark: "",
|
||||
})
|
||||
const { list, startPage, scroll } = hooks.usePage(pageRef, individualOrderApi.page, null, "data.records")
|
||||
|
||||
onLoad(() => {
|
||||
const app = getApp()
|
||||
app._initTabbar()
|
||||
})
|
||||
onShow(() => {
|
||||
// const isLogin = await hooks.useCheckLogin()
|
||||
// if (!isLogin) return
|
||||
const isLogin = hooks.useCheckLogin()
|
||||
if (!isLogin) return
|
||||
// if (pageRef.value) {
|
||||
// pageRef.value.reload(false)
|
||||
// }
|
||||
})
|
||||
|
||||
// 切换选项卡
|
||||
@@ -134,8 +268,85 @@ const query = (page: number, pagesize: number) => {
|
||||
startPage(page, pagesize, false, state.pa)
|
||||
}
|
||||
|
||||
// 重置状态
|
||||
const resetState = () => {
|
||||
state.refundScene = 0
|
||||
state.curOrder = {}
|
||||
state.refundDetail = {}
|
||||
state.remark = ""
|
||||
}
|
||||
|
||||
// 点击退款
|
||||
// const tabRefund = (v: any) => {
|
||||
// state.showDrawer = true
|
||||
// }
|
||||
const doIndividualRefund = async (v: any) => {
|
||||
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>
|
||||
@@ -10,4 +10,21 @@ export default {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
refuseRefund: (data: { id: string; auditReason: string }) =>
|
||||
request({
|
||||
url: "/hard/hard-after-sale/app/mch-disagree",
|
||||
method: "POST",
|
||||
data,
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
agreeRefund: (params: { id: string }) =>
|
||||
request({
|
||||
url: `/hard/hard-after-sale/app/mch-agree?id=${params.id}`,
|
||||
method: "POST",
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
}
|
||||
Reference in new issue
Block a user