czg_team/cashier_desktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接订单列表接口

Browse Source
This commit is contained in:
gyq
2025-03-01 14:08:24 +08:00
parent d3ed4ec8e6
commit 573dd88b24
21 changed files with 2769 additions and 1674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
src/views/order/components/refundDrawer.vue Normal file
View File

@@ -0,0 +1,372 @@
<template>
<el-drawer v-model="isShow" direction="rtl" size="60%">
<template #header>
<h4>订单号：{{ item.orderNo }}</h4>
</template>
<template #default>
<div class="order_info">
<!-- <div class="row"><span>订单类型：</span>{{ filterLable('orderType', item.orderType) }}</div>
<div class="row"><span>平台类型：</span>{{ filterLable('platformType', item.platformType) }}</div>
<div class="row"><span>用餐模式：</span>{{ filterLable('dineMode', item.dineMode) }}</div>
<div class="row"><span>订单备注：</span>{{ item.remark }}</div> -->
<!-- <div class="row"><span>支付类型：</span>{{ filterLable('payType', item.payType) }}</div>
<div class="row"><span>支付单号：</span>{{ item.payOrderNo }}</div>
<div class="row"><span>支付金额：</span>￥{{ item.payAmount }}</div>
<div class="row"><span>支付时间：</span>{{ item.paidTime }}</div>
<div class="row"><span>订单金额（含折扣）：</span>￥{{ item.orderAmount }}</div>
<div class="row"><span>订单原金额（不含折扣）：</span>￥{{ item.originAmount }}</div> -->
</div>
<div class="table">
<div class="tab_head">
<el-radio-group v-model="refundType" @change="refundTypeChange">
<el-radio-button label="整单退" :value="1" />
<el-radio-button label="部分退" :value="2" />
<el-radio-button label="自定义" :value="3" />
</el-radio-group>
<div class="amount">
<el-input v-model="customAmount" v-if="refundType == 3" style="width: 250px;"
placeholder="请输入退款金额" @input="inputChange">
<template #prepend>￥</template>
</el-input>
<template v-else>
退款金额：￥{{ formatDecimal(refundType == 1 ? item.originAmount : amount) }}
</template>
</div>
</div>
<el-table ref="tableRef" :data="item.goods" brder stripe @selection-change="tabSelectChange">
<el-table-column type="selection" width="35" :selectable="selectable"></el-table-column>
<el-table-column label="商品信息">
<template v-slot="scope">
<div class="goods_info">
<el-image :src="scope.row.productImg" style="width: 50px;height: 50px;"></el-image>
<div class="info">
<div class="name">
<span>{{ scope.row.productName }}</span>
</div>
<div class="sku" v-if="scope.row.skuName">{{ scope.row.skuName }}</div>
<div class="sku">￥{{ formatDecimal(+scope.row.price) }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="订单数量" prop="num" width="100"></el-table-column>
<el-table-column label="支付金额" width="100">
<template v-slot="scope">
￥{{ formatDecimal(+scope.row.payAmount) }}
</template>
</el-table-column>
<el-table-column label="退款数量" width="170">
<template v-slot="scope">
<el-input-number v-model="scope.row.refundNum" :min="1" :max="+scope.row.num"
style="width: 130px;" @change="numberChange">
</el-input-number>
</template>
</el-table-column>
</el-table>
<div class="ipt">
<el-input type="textarea" v-model="remark" placeholder="请输入退单原因" />
</div>
<div class="remark_tag">
<div class="item" v-for="(item, index) in remarkTagList" :key="index" @click="remark = item">
{{ item }}
</div>
</div>
</div>
</template>
<template #footer>
<div class="drawer_footer">
<div class="btn">
<el-button style="width: 100%;" @click="refundHandle(true)">手动退款</el-button>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;" @click="refundHandle()">原路退回</el-button>
</div>
</div>
</template>
</el-drawer>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useGlobal } from '@/store/global.js'
import { formatDecimal, inputFilterFloat } from "@/utils/index.js";
import { refundOrder } from '@/api/order.js'
import { ElNotification } from 'element-plus'
const emits = defineEmits(['success'])
const globalStore = useGlobal()
const isShow = ref(false)
const item = ref({})
const tableRef = ref(null)
const modify = ref(false)
const amount = ref(0)
const customAmount = ref('')
const refundType = ref(1)
const remark = ref('')
const remarkTagList = ref([
'顾客取消',
'等待时间长',
'支付错误',
'商品不满意',
'服务态度不满意'
])
// 开始退款
async function refundHandle(cash = false) {
try {
let rows = tableRef.value.getSelectionRows()
if (refundType.value == 1) {
tableRef.value.clearSelection()
tableRef.value.toggleAllSelection()
} else if (refundType.value == 2) {
if (!rows.length) {
ElNotification({
title: '错误',
message: '请选择退款商品',
type: 'error',
})
return
}
} else if (refundType.value == 3) {
if (!customAmount.value) {
ElNotification({
title: '错误',
message: '请请输入退款金额',
type: 'error',
})
return
}
}
let refundDetails = []
if (refundType.value != 1) {
refundDetails = tableRef.value.getSelectionRows().map(val => {
return {
id: item.value.id,
returnAmount: val.payAmount,
num: val.refundNum
}
})
}
let refundAmount = ''
switch (refundType.value) {
case 1:
refundAmount = item.value.orderAmount
break;
case 2:
refundAmount = amount.value
break;
case 3:
refundAmount = customAmount.value
break;
default:
break;
}
let data = {
orderId: item.value.id,
refundAmount: refundAmount,
modify: modify.value,
cash: cash,
refundReason: remark.value,
refundDetails: refundDetails
};
// console.log(data);
// return
await refundOrder(data)
ElNotification({
title: '提示',
message: '退款成功',
type: 'success',
})
isShow.value = false
emits('success')
} catch (error) {
console.log(error);
}
}
// 数量变化
function numberChange() {
let rows = tableRef.value.getSelectionRows()
tabSelectChange(rows)
}
// 选择退款项
function tabSelectChange(val) {
amount.value = 0
val.map(item => {
amount.value += item.refundNum * item.price
})
}
// 禁用所有行的选择
const selectable = (row, index) => {
return refundType.value != 1;
};
// 初始化抽屉
function resetDrawer() {
modify.value = false
amount.value = 0
customAmount.value = ''
refundType.value = 1
remark.value = ''
}
function show(row) {
isShow.value = true
item.value = { ...row }
item.value.goods.map(item => {
item.refundNum = item.num
})
resetDrawer()
setTimeout(() => {
tableRef.value.clearSelection()
refundTypeChange(1)
}, 100);
}
// 筛选类型
function filterLable(key, type) {
let item = globalStore[key].find(item => item.type == type)
if (item && item.type) {
return item.label
} else {
return type
}
}
// 切换退单类型
function refundTypeChange(val) {
switch (val) {
case 1:
modify.value = false
// tableRef.value.toggleAllSelection()
// 遍历数据，将每一行设置为选中状态
item.value.goods.forEach((row) => {
tableRef.value.toggleRowSelection(row, true);
});
break;
case 2:
modify.value = false
tableRef.value.clearSelection()
break;
case 3:
modify.value = true
break;
default:
break;
}
}
// 自定义退款金额输入
function inputChange(n) {
setTimeout(() => {
if (n > item.value.payAmount - item.value.refundAmount) {
customAmount.value = formatDecimal(item.value.payAmount - item.value.refundAmount, 2, true)
} else {
customAmount.value = inputFilterFloat(n)
}
}, 100)
}
defineExpose({
show
})
// onMounted(() => {
// setTimeout(() => {
// refundTypeChange(1)
// }, 100)
// })
</script>
<style scoped lang="scss">
.drawer_footer {
display: flex;
gap: var(--el-font-size-base);
.btn {
flex: 1;
}
}
.order_info {
.row {
margin-bottom: 4px;
span {
color: #555;
}
}
}
.table {
padding: var(--el-font-size-base) 0;
.ipt {
padding: var(--el-font-size-base) 0;
}
.tab_head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--el-font-size-base);
.amount {
color: var(--el-color-danger);
font-weight: bold;
}
}
.remark_tag {
display: flex;
flex-wrap: wrap;
gap: 10px;
.item {
padding: 6px 12px;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 4px;
color: #555;
}
}
}
.goods_info {
display: flex;
align-items: center;
.info {
flex: 1;
display: flex;
flex-direction: column;
padding-left: 6px;
.name {
display: flex;
justify-content: space-between;
.n {
color: #999;
}
}
.sku {
color: #999;
font-size: 14px;
}
}
}
</style>