cashier_admin_app/pagesOrder/detail/components/extra.vue

132 lines
3.6 KiB
Vue

<template>
<view class="default-box-padding bg-fff border-r-12 u-m-t-20" v-if="packeFee>0||data.priceAmount>0||data.returnAmount>0">
<view class="u-flex u-row-between">
<view class="font-bold">附加费</view>
<template v-if="extraCanTuicai(orderInfo,data)">
<my-button plain shape="circle" :width="160" :height="56" @click="tuicai">退菜</my-button>
</template>
<template v-if=" extraCanTuiKuan(orderInfo,data)">
<my-button plain shape="circle" :width="160" :height="56" @click="tuikuan">退款</my-button>
</template>
</view>
<view>
<template v-if="data.status!='return'&&data.status!='refund'&&data.status!='refunding'">
<view class="u-flex u-row-between u-m-t-24" v-if="data.priceAmount*1>0">
<view>{{data.productName||'餐位费'}}</view>
<view>x{{data.num||0}}</view>
<view class="price-min-width">¥{{data.priceAmount}}</view>
</view>
</template>
<template v-else>
<view class="u-flex u-row-between u-m-t-24 color-999">
<view class="u-flex">
<view class="line-th ">{{data.productName||'餐位费'}}</view>
<view class="tag yitui u-m-l-10">{{data.status=='refunding'?'退款中': '已退'}}</view>
</view>
<view class="line-th">x{{data.num||0}}</view>
<view class="line-th">¥{{data.priceAmount||data.returnAmount}}</view>
</view>
</template>
<!-- <view class="u-flex u-row-right u-m-t-24">
<template v-if="orderInfo.status=='unpaid'&&data.status!='return'">
<my-button plain shape="circle" :width="160" :height="56" @click="tuicai">退菜</my-button>
</template>
<template v-if="orderInfo.status=='closed'&&data.status!='return'">
<my-button plain shape="circle" :width="160" :height="56" @click="tuikuan">退款</my-button>
</template>
</view> -->
</view>
<view class="u-flex u-row-between u-m-t-24" v-if="packeFee>0">
<view>打包费</view>
<view>x{{packeNumbber}}</view>
<view class="price-min-width">{{packeFee}}</view>
</view>
</view>
</template>
<script setup>
import {
computed
} from 'vue'
import {
returnCanComputedGoodsArr,canComputedPackFee,
returnPackFee
} from '@/commons/utils/goodsUtil.js'
const props = defineProps({
data: {
type: Object,
default: () => {}
},
orderInfo: {
type: Object,
default: () => {
return {
detailList: []
}
}
},
table: {
type: Object,
default: () => {}
}
})
function extraCanTuicai(orderInfo,data){
return orderInfo.status=='unpaid'&&data.status!='return'&&data.priceAmount*1>0
}
function extraCanTuiKuan(orderInfo,data){
return orderInfo.status=='closed'&&data.status!='refund'&&data.priceAmount*1>0
}
const packeNumbber = computed(() => {
if (!props.orderInfo.detailList) {
return 0
}
return props.orderInfo.detailList.reduce((prve, cur) => {
return prve + (cur.packAmount > 0 ? cur.num : 0)
}, 0)
})
const packeFee = computed(() => {
if (!props.orderInfo.detailList) {
return 0
}
const arr = returnCanComputedGoodsArr(props.orderInfo.detailList)
console.log(arr);
return returnPackFee(arr)
})
const statusMap = {
unpaid: '未支付'
}
const emits = defineEmits(['tuicai', 'tuikuan', 'printOrder'])
function returnStatus(status) {
return statusMap[status] || ''
}
function tuikuan() {
emits('tuikuan', props.data)
}
function tuicai() {
emits('tuicai', props.data)
}
</script>
<style lang="scss" scoped>
.tag {
padding: 0 6rpx;
border-radius: 8rpx;
font-size: 24rpx;
&.yitui {
background-color: rgb(188, 188, 188);
color: #fff;
}
}
.price-min-width {
min-width: 100rpx;
text-align: right;
}
</style>