增加订单详情页退款打包等tag标签展示

This commit is contained in:
2024-10-28 17:06:44 +08:00
parent b31a908609
commit a06c32334e
2 changed files with 64 additions and 33 deletions

View File

@@ -23,30 +23,39 @@
<view class="">
<view class="u-flex">
<view class="tui" v-if="item.status=='return'">
<view class="tui" v-if="item.status=='return'||item.status=='refund'">
已退
</view>
<view :class="{'line-th':item.status=='return'}">{{item.name||item.productName}}
<view :class="{'line-th':item.status=='return'||item.status=='refund'}">{{item.name||item.productName}}
</view>
</view>
<view class="u-flex u-m-t-8">
<view class="u-m-r-20 u-flex " v-if="item.gift">
<uni-tag text="赠送"
custom-style="background-color: #FFF0DF; border-color: #FFF0DF; color: #FF9F2E;">
</uni-tag>
</view>
<view class="u-m-r-20 u-flex" v-if="item.pack">
<uni-tag
custom-style="background-color: #E6F0FF; border-color: #E6F0FF; color: #318AFE;"
size="small" text="打包" inverted type="success" />
</view>
</view>
<view class="color-999 u-font-24 u-m-t-8">{{item.productSkuName||''}}</view>
<view class="u-m-t-12 color-666 u-font-24" v-if="item.note">
备注{{item.note}}
</view>
</view>
<view class="u-text-right u-m-t-28">
<template v-if="item.status=='return'">
<template v-if="item.status=='return'||item.gift||item.status=='refund'">
<view>0.00</view>
<view class="line-th color-666 ">{{item.salePrice||item.price}}</view>
<view class="line-th color-666 ">{{returnTotalMoney(item)}}
</view>
</template>
<template v-else>
<template v-if="item.priceAmount<=0">
<view>0.00</view>
<view class="line-th color-666 ">{{returnTotalMoney(item)}}</view>
</template>
<template v-else>
<view>{{item.priceAmount}}</view>
</template>
<view>{{returnTotalMoney(item)}}</view>
</template>
<view class="u-m-t-22 color-999 u-font-24">X{{item.number||item.num}}</view>
</view>
@@ -56,11 +65,11 @@
<template v-if="orderInfo.status=='unpaid'&&orderInfo.useType!='dine-in-before'">
<view class="u-flex u-row-right gap-20 u-m-t-24" v-if="item.status!='return'">
<!-- <my-button :height="60" color="#333" plain type="cancel" shape="circle">更多操作</my-button> -->
<my-button :width="128" :height="48" plain shape="circle"
@tap="tuicai(item,index)"><text class="no-wrap">退菜</text></my-button>
<my-button :width="128" :height="48" plain shape="circle" @tap="tuicai(item,index)"><text
class="no-wrap">退菜</text></my-button>
</view>
</template>
<template v-if="item.status!='refund'">
<template v-if="item.status!='refund'&&!item.gift">
<template v-if="orderInfo.status=='closed'||orderInfo.status=='refund'">
<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
<my-button :width="128" :height="48" plain shape="circle"
@@ -68,7 +77,7 @@
</view>
</template>
</template>
</view>
</view>
<!-- <view class="bg-gray u-p-20 u-m-t-20" v-if="orderInfo.remark">
@@ -97,7 +106,7 @@
<text class="font-bold u-font-32">{{allPrice}}</text>
</view>
</view>
<template v-if="orderInfo.status=='refund'">
<view class="u-flex u-row-between u-m-t-32">
<view>退款金额</view>
@@ -122,7 +131,7 @@
<view></view>
<view>
<text>总计</text>
<text class="font-bold u-font-32">{{to2(allPrice*1+seatFeePrice*1) }}</text>
<text class="font-bold u-font-32">{{to2(allPrice*1+seatFeePrice*1+packFee*1) }}</text>
</view>
</view>
<view class="u-m-t-24">
@@ -137,26 +146,29 @@
computed
} from 'vue';
import color from '@/commons/color.js'
import {hasPermission} from '@/commons/utils/hasPermission.js'
import {
hasPermission
} from '@/commons/utils/hasPermission.js'
const emits = defineEmits(['tuicai', 'tuikuan', 'printOrder'])
function returnTotalMoney(item){
return (item.price*item.num).toFixed(2)
function returnTotalMoney(item) {
return (item.price * item.num).toFixed(2)
}
function to2(n){
if(!n){
function to2(n) {
if (!n) {
return 0
}
return n.toFixed(2)
}
function tuicai(item, index) {
emits('tuicai', item, index)
}
function tuikuan(item, index) {
hasPermission('允许退款').then(res=>{
if(res){
hasPermission('允许退款').then(res => {
if (res) {
emits('tuikuan', item, index)
}
})
@@ -190,9 +202,11 @@
const allPrice = computed(() => {
const goodsPrice = props.data.reduce((prve, cur) => {
const curTotal = cur.info.filter(v => v.isGift !== "true" && v.status !== "return").reduce((a,
const curTotal = cur.info.filter(v => v.gift != true && v.status !== "return").reduce((a,
b) => {
return a + b.priceAmount*1
// return a + b.priceAmount*1||(b.num*b.price+b.packAmount*1)
// return a + (b.num*b.price+b.packAmount*1)
return a + (b.num * b.price)
}, 0)
return prve + curTotal
}, 0)
@@ -200,6 +214,19 @@
})
const packFee = computed(() => {
const goodsPrice = props.data.reduce((prve, cur) => {
const curTotal = cur.info.filter(v => v.gift != true && v.status !== "return").reduce((a,
b) => {
return a + b.packAmount
}, 0)
return prve + curTotal
}, 0)
return goodsPrice.toFixed(2)
})
const goodsNumber = computed(() => {
let result = 0
result = props.data.reduce((a, b) => {
@@ -222,9 +249,11 @@
.border-top {
border-color: #F6F6F6;
}
.border-r-24{
.border-r-24 {
border-radius: 24rpx;
}
.border-bottom {
// border-color: rgb(240, 240, 240);
border-color: #F6F6F6;
@@ -238,11 +267,13 @@
padding: 4rpx 8rpx 2rpx 10rpx;
border-radius: 8rpx;
font-size: 24rpx;
&.no-pay {
background-color: rgb(170, 170, 170);
color: #fff;
}
&.refund{
&.refund {
background-color: #FCE7E7;
padding: 8rpx 20rpx 6rpx 22rpx;
color: #EB4F4F;

View File

@@ -54,12 +54,12 @@
</view>
</view>
<view class="border-bottom">
<view class="u-flex u-row-between u-m-t-32 u-col-top" v-if="data.packFee>0">
<view class="border-bottom u-p-t-32 u-p-b-32" v-if="data.packFee>0||(data.seatInfo&&data.seatInfo.priceAmount>0)">
<view class="u-flex u-row-between u-col-top" v-if="data.packFee>0">
<view class="no-wrap u-m-r-32">打包费</view>
<view>{{data.packFee||0}}</view>
</view>
<view class="u-flex u-row-between u-m-t-32 u-p-b-32 u-col-top" v-if="data.seatInfo&&data.seatInfo.priceAmount>0">
<view class="u-flex u-row-between u-m-t-32 u-col-top" v-if="data.seatInfo&&data.seatInfo.priceAmount>0">
<view class="no-wrap u-m-r-32">{{data.seatInfo.productName}}</view>
<view>{{data.seatInfo.priceAmount}}</view>
</view>