430 lines
11 KiB
Vue
430 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="refund">
|
|||
|
|
<view class="money-section">
|
|||
|
|
<view class="acea-row row-middle item">
|
|||
|
|
<view class="">预计退款</view>
|
|||
|
|
<!-- 次卡商品 -->
|
|||
|
|
<input v-if="info[0] && info[0].secondType == ProductTypeEnum.PunchCard" disabled=""
|
|||
|
|
v-model="info[0].verifyRefundPrice" class="input" type="text" />
|
|||
|
|
<!-- 非次卡 -->
|
|||
|
|
<input v-else disabled="" v-model="refundMoney" class="input" type="text" />
|
|||
|
|
</view>
|
|||
|
|
<view class="acea-row row-middle item">
|
|||
|
|
<view class="">退款类型</view>
|
|||
|
|
<view class="acea-row row-right radio-group">
|
|||
|
|
<!-- 次卡商品不可分单退款 -->
|
|||
|
|
<view v-if="info[0] && info[0].secondType == ProductTypeEnum.PunchCard"
|
|||
|
|
class="acea-row row-middle radio-item on" :class="{ on: !isSplit}">
|
|||
|
|
整单退款
|
|||
|
|
</view>
|
|||
|
|
<!-- 非次卡商品可以分单退款 -->
|
|||
|
|
<block v-else>
|
|||
|
|
<view class="acea-row row-middle radio-item" :class="{ on: !isSplit}" @click="refundTypeChange(0)">
|
|||
|
|
<text class="iconfont" :class="isSplit?'icon-ic_unselect':'icon-a-ic_CompleteSelect'"></text>整单退款
|
|||
|
|
</view>
|
|||
|
|
<view v-if="type!=2" class="acea-row row-middle radio-item" :class="{ on: isSplit }"
|
|||
|
|
@click="refundTypeChange(1)">
|
|||
|
|
<text class="iconfont" :class="isSplit?'icon-a-ic_CompleteSelect':'icon-ic_unselect'"></text>分单退款
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<splitOrder ref="splitOrder" :type="1" v-if="isSplit" :splitGoods="splitGoods" :secondType="secondType"
|
|||
|
|
:select_all="false" :parentAllSelected="isAll" @getList="getList">
|
|||
|
|
</splitOrder>
|
|||
|
|
<view class="list-bottom-tab-placeholder"></view>
|
|||
|
|
<view class="footer acea-row row-middle">
|
|||
|
|
<view class="all acea-row row-middle" v-if="isSplit" @click="allChange">
|
|||
|
|
<text class="iconfont" :class="isAll?'icon-a-ic_CompleteSelect':'icon-ic_unselect'"></text>
|
|||
|
|
全选
|
|||
|
|
</view>
|
|||
|
|
<view class="btn-box">
|
|||
|
|
<view class="btn" :style="{ width: isSplit?'auto':'100%'}" @click="openRefund">
|
|||
|
|
确认
|
|||
|
|
<text v-if="isSplit">({{ numTotal }})</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import splitOrder from '../components/splitOrder/index.vue';
|
|||
|
|
import {
|
|||
|
|
employeeDirectRefund,
|
|||
|
|
sendDetailList
|
|||
|
|
} from '@/api/work.js'
|
|||
|
|
import {
|
|||
|
|
ProductTypeEnum
|
|||
|
|
} from "../../../enums/productEnums";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
splitOrder,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
refundMoney: 0,
|
|||
|
|
isSplit: 0,
|
|||
|
|
isAll: false,
|
|||
|
|
splitGoods: [],
|
|||
|
|
goodsChecked: [],
|
|||
|
|
cart_ids: [],
|
|||
|
|
info: {},
|
|||
|
|
orderNo: '',
|
|||
|
|
type: '',
|
|||
|
|
secondType: 0,
|
|||
|
|
ProductTypeEnum,
|
|||
|
|
workOrderIdList: [] // 工单id集合
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
total() {
|
|||
|
|
// 如果是预约类型且有工单ID列表，使用特殊计算逻辑
|
|||
|
|
if (this.splitGoods.length && this.splitGoods[0].workOrderList && this.workOrderIdList.length > 0) {
|
|||
|
|
// 使用第一个商品的payPrice与工单数量相乘
|
|||
|
|
const firstItem = this.splitGoods[0];
|
|||
|
|
const unitPrice = this.$util.$h.Div(firstItem.payPrice, firstItem.payNum);
|
|||
|
|
return this.$util.$h.Mul(unitPrice, this.workOrderIdList.length).toFixed(2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 普通商品的价格计算逻辑：使用单价乘以剩余数量
|
|||
|
|
|
|||
|
|
return this.goodsChecked.reduce((total, item) => {
|
|||
|
|
const unitPrice = this.$util.$h.Div(item.payPrice, item.payNum);
|
|||
|
|
const refundAmount = this.$util.$h.Mul(unitPrice, item.surplus_num);
|
|||
|
|
const num = this.splitGoods[0].workOrderList && this.workOrderIdList.length > 0 ? item.payNum : total
|
|||
|
|
return this.$util.$h.Add(total, refundAmount);
|
|||
|
|
|
|||
|
|
}, 0).toFixed(2);
|
|||
|
|
},
|
|||
|
|
numTotal() {
|
|||
|
|
// 如果是预约类型且有工单ID列表，返回工单数量
|
|||
|
|
if (this.splitGoods.length && this.splitGoods[0].workOrderList && this.workOrderIdList.length > 0) {
|
|||
|
|
return this.workOrderIdList.length;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 普通商品返回剩余数量总和
|
|||
|
|
return this.goodsChecked.reduce((total, {
|
|||
|
|
surplus_num,
|
|||
|
|
}) => {
|
|||
|
|
return this.$util.$h.Add(total, surplus_num);
|
|||
|
|
}, 0);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
total(newValue, oldValue) {
|
|||
|
|
this.refundMoney = newValue
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.getInfo(options.orderNo)
|
|||
|
|
this.orderNo = options.orderNo
|
|||
|
|
this.type = options.type
|
|||
|
|
this.secondType = Number(options.sdType)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getInfo(orderNo) {
|
|||
|
|
sendDetailList(orderNo).then(res => {
|
|||
|
|
this.info = res.data
|
|||
|
|
this.getIndex(res.data)
|
|||
|
|
// 触发价格重新计算
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
allChange() {
|
|||
|
|
this.isAll = !this.isAll;
|
|||
|
|
|
|||
|
|
if (this.splitGoods.length && this.splitGoods[0].workOrderList) {
|
|||
|
|
// 预约类型订单：显式调用子组件方法
|
|||
|
|
if (this.isAll) {
|
|||
|
|
this.$refs.splitOrder.selectAllWorkOrders();
|
|||
|
|
} else {
|
|||
|
|
this.$refs.splitOrder.unselectAllWorkOrders();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 普通商品订单：手动处理商品选中状态
|
|||
|
|
this.cart_ids = [];
|
|||
|
|
this.goodsChecked = [];
|
|||
|
|
for (let i = 0; i < this.splitGoods.length; i++) {
|
|||
|
|
this.splitGoods[i].checked = this.isAll;
|
|||
|
|
if (this.splitGoods[i].checked) {
|
|||
|
|
this.goodsChecked.push(this.splitGoods[i]);
|
|||
|
|
this.cart_ids.push(this.splitGoods[i].id);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 触发价格重新计算
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
},
|
|||
|
|
refundTypeChange(value) {
|
|||
|
|
this.isSplit = value;
|
|||
|
|
this.workOrderIdList = []
|
|||
|
|
if (value) {
|
|||
|
|
// 分单退款：清空选中状态
|
|||
|
|
this.goodsChecked = []
|
|||
|
|
this.cart_ids = []
|
|||
|
|
this.splitGoods.forEach(item => {
|
|||
|
|
item.checked = false
|
|||
|
|
})
|
|||
|
|
this.isAll = false
|
|||
|
|
// 重置退款金额
|
|||
|
|
this.refundMoney = 0
|
|||
|
|
} else {
|
|||
|
|
// 整单退款：选中所有商品
|
|||
|
|
this.splitGoods.forEach(item => {
|
|||
|
|
item.surplus_num = item.payNum - item.refundNum
|
|||
|
|
item.checked = true
|
|||
|
|
if (item.workOrderList && item.workOrderList.length) {
|
|||
|
|
item.workOrderList.forEach((workOrder) => {
|
|||
|
|
workOrder.checked = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.goodsChecked = [...this.splitGoods]
|
|||
|
|
this.cart_ids = this.splitGoods.map(item => item.id)
|
|||
|
|
this.isAll = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getIndex(info) {
|
|||
|
|
const cartInfo = info
|
|||
|
|
let list = cartInfo.map(item => {
|
|||
|
|
return {
|
|||
|
|
id: item.id,
|
|||
|
|
checked: true, // 默认选中所有商品
|
|||
|
|
numShow: item.payNum - item.refundNum,
|
|||
|
|
surplus_num: item.payNum - item.refundNum,
|
|||
|
|
...item,
|
|||
|
|
refundPrice: this.$util.$h.Div(item.refundPrice, item.payNum),
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
this.splitGoods = list;
|
|||
|
|
this.goodsChecked = [...list]; // 默认选中所有商品
|
|||
|
|
this.cart_ids = list.map(item => item.id); // 默认包含所有商品ID
|
|||
|
|
this.isAll = true; // 默认全选状态
|
|||
|
|
this.isSplit = 0; // 默认整单退款
|
|||
|
|
},
|
|||
|
|
getList(val) {
|
|||
|
|
if (this.splitGoods[0].workOrderList) {
|
|||
|
|
this.workOrderIdList = val
|
|||
|
|
if (!this.splitGoods[0].workOrderList) return
|
|||
|
|
const num = this.splitGoods[0].workOrderList.length
|
|||
|
|
let isAlls = val.length === num
|
|||
|
|
this.isAll = isAlls
|
|||
|
|
} else {
|
|||
|
|
// 直接使用子组件回传的列表（已带有最新的 checked 状态）
|
|||
|
|
this.splitGoods = val;
|
|||
|
|
// 重新构建选中集合
|
|||
|
|
const goodsChecked = val.filter(item => item.checked);
|
|||
|
|
const cart_ids = goodsChecked.map(item => item.id);
|
|||
|
|
this.goodsChecked = goodsChecked;
|
|||
|
|
this.cart_ids = cart_ids;
|
|||
|
|
this.isAll = this.goodsChecked.length === this.splitGoods.length;
|
|||
|
|
}
|
|||
|
|
// 触发价格重新计算
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
openRefund() {
|
|||
|
|
let cart_ids = [];
|
|||
|
|
|
|||
|
|
// 根据订单类型构建不同的退款数据
|
|||
|
|
if (this.splitGoods.length && this.splitGoods[0].workOrderList && this.workOrderIdList.length > 0) {
|
|||
|
|
// 预约类型订单：使用第一个商品信息
|
|||
|
|
cart_ids = [{
|
|||
|
|
orderDetailId: this.splitGoods[0].id,
|
|||
|
|
num: this.workOrderIdList.length, // 使用工单数量
|
|||
|
|
workOrderIdList: this.workOrderIdList
|
|||
|
|
}];
|
|||
|
|
} else {
|
|||
|
|
// 普通商品订单：使用选中的商品列表
|
|||
|
|
cart_ids = this.goodsChecked.map(({
|
|||
|
|
id,
|
|||
|
|
surplus_num,
|
|||
|
|
workOrderIdList
|
|||
|
|
}) => {
|
|||
|
|
return {
|
|||
|
|
orderDetailId: id,
|
|||
|
|
num: surplus_num,
|
|||
|
|
workOrderIdList: this.workOrderIdList
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let refundObj = {
|
|||
|
|
orderNo: this.orderNo,
|
|||
|
|
returnType: this.isSplit == 0 ? 1 : 2,
|
|||
|
|
detailList: cart_ids
|
|||
|
|
}
|
|||
|
|
employeeDirectRefund(refundObj).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: '操作成功'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/admin/order/index?type=complete'
|
|||
|
|
})
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/deep/ .has-style {
|
|||
|
|
padding: 1rpx 24rpx 32rpx 24rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
|||
|
|
border: 1px solid #2A7EFB !important;
|
|||
|
|
background-color: #2A7EFB !important;
|
|||
|
|
color: #fff !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
|||
|
|
border: 1px solid #2A7EFB !important;
|
|||
|
|
background-color: #2A7EFB !important;
|
|||
|
|
color: #fff !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund {
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.money-section {
|
|||
|
|
padding: 12rpx 0;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
height: 80rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 80rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
font-family: Regular;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #FF7E00;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-ic_edit {
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-group {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-item {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
|
|||
|
|
+.radio-item {
|
|||
|
|
margin-left: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.on {
|
|||
|
|
color: #333333;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
color: #2A7EFB;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-detail {
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
border-top: 1rpx solid #f5f5f5;
|
|||
|
|
|
|||
|
|
.detail-title {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12rpx 0;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 16rpx 20rpx 16rpx 32rpx;
|
|||
|
|
padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
|
|||
|
|
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
display: inline-block;
|
|||
|
|
height: 64rpx;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
background: #2A7EFB;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.all {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #CCCCCC;
|
|||
|
|
|
|||
|
|
&.icon-a-ic_CompleteSelect {
|
|||
|
|
color: #2A7EFB;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-box {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: right;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|