Преглед изворни кода

feat(回收订单): 在订单详情中添加结算方式展示

在回收订单详情页面中新增结算方式卡片,动态显示与验货方式相关的结算信息,提升了用户体验和界面的信息展示。此更改支持根据验货天数显示相应的结算方式。
ylong пре 1 недеља
родитељ
комит
98ce66d8a5

+ 18 - 0
src/views/recycleOrder/detail/index.vue

@@ -13,6 +13,14 @@
         >
             <orderBaseInfo :detail="detail" />
         </ele-card>
+        <ele-card
+            v-if="verifyPeriodText"
+            class="order-settlement"
+            header="结算方式"
+            :body-style="{ paddingTop: '15px' }"
+        >
+            <orderSettlement :detail="detail" />
+        </ele-card>
         <ele-card
             class="order-book-list"
             header="图书清单"
@@ -67,6 +75,7 @@
     import orderBaseInfo from '@/views/recycleOrder/detail/order-base-info.vue';
     import orderFreightStatus from '@/views/recycleOrder/detail/order-freight-status.vue';
     import orderBookList from '@/views/recycleOrder/detail/order-book-list.vue';
+    import orderSettlement from '@/views/recycleOrder/detail/order-settlement.vue';
 
     const emit = defineEmits(['refresh']);
     const props = defineProps({
@@ -83,6 +92,15 @@
         return '72小时验';
     });
 
+    const VERIFY_PERIOD_MAP = {
+        7: '7天极速验货',
+        15: '15天安心验货'
+    };
+
+    const verifyPeriodText = computed(() => {
+        return VERIFY_PERIOD_MAP[props.detail.verifyPeriodDays] || '';
+    });
+
     const isExpand = ref(false);
     const handleExpand = () => {
         isExpand.value = true;

+ 40 - 0
src/views/recycleOrder/detail/order-settlement.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="settlement-content">
+        <el-tag type="success" effect="light" size="large">{{
+            verifyPeriodText
+        }}</el-tag>
+        <span
+            v-if="detail.verifyPeriodDays == 15 && detail.verifyUpMoney != null"
+            class="settlement-up-money"
+        >
+            书款上浮金额:¥{{ detail.verifyUpMoney }}
+        </span>
+    </div>
+</template>
+
+<script setup>
+    const VERIFY_PERIOD_MAP = {
+        7: '7天极速验货',
+        15: '15天安心验货'
+    };
+
+    const props = defineProps({
+        detail: { type: Object, default: () => ({}) }
+    });
+
+    const verifyPeriodText = computed(() => {
+        return VERIFY_PERIOD_MAP[props.detail.verifyPeriodDays] || '';
+    });
+</script>
+
+<style lang="scss" scoped>
+    .settlement-content {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .settlement-up-money {
+        color: #303133;
+    }
+</style>