fix 优化

src/views/recycleOrder/detail/index.vue

@@ -1,7 +1,7 @@
 <template>
     <ele-page class="order-detail">
         <ele-card class="order-status" header="订单状态">
-            <orderStatus />
+            <orderStatus :status="detail.status" />
         </ele-card>
         <ele-card class="order-base" header="订单基本信息" :body-style="{ paddingTop: '0' }">
             <orderBaseInfo :detail="detail" />

src/views/recycleOrder/detail/order-base-info.vue

@@ -15,11 +15,12 @@
             <template #status="{ row }">
                 <el-tag effect="dark" :type="row.status < 5 ? 'warning' : 'success'">{{ row.status < 5 ? '未发货' : '已发货'
                         }}</el-tag>
-                        <el-tag style="margin-left: 15px" effect="dark" :type="row.status < 8 ? 'warning' : 'success'">{{ row.status < 8 ? '未收货'
-                            : '已收货' }}</el-tag>
+                        <el-tag style="margin-left: 15px" effect="dark"
+                            :type="row.status < 8 ? 'warning' : 'success'">{{ row.status < 8 ? '未收货' : '已收货' }}</el-tag>
 
-                                <el-tag style="margin-left: 15px" effect="dark" :type="row.status == 11 ? ' success' : 'warning'">{{ row.status == 11
-                                    ? '已支付' : '未支付' }}</el-tag>
+                                <el-tag style="margin-left: 15px" effect="dark"
+                                    :type="row.status == 11 ? ' success' : 'warning'">{{ row.status == 11
+                                        ? '已支付' : '未支付' }}</el-tag>
             </template>
         </ele-data-table>
         <el-row :gutter="12" style="padding: 16px 10px; padding-bottom: 0">
@@ -70,7 +71,7 @@
                 </div>
                 <div class="common-text">
                     <el-text>电  话：</el-text>
-                    <el-text>{{ detail.recipientPhone || '-' }}</el-text>
+                    <el-text>{{ detail.recipientMobile || '-' }}</el-text>
                 </div>
                 <div class="common-text">
                     <el-text>地  址：</el-text>
@@ -144,7 +145,7 @@ const columns = ref([
     {
         label: '审核书款',
         prop: 'finalMoney',
-        formatter: (row) => '￥' + row.finalMoney
+        formatter: (row) => row.finalMoney ? '￥' + row.finalMoney : '待核算'
     },
     { label: '下单时间', prop: 'orderTime', slot: 'orderTime', width: 200 },
     { label: '交易状态', prop: 'status', slot: 'status', width: 240 }

src/views/recycleOrder/detail/order-recycle-log.vue

@@ -1,78 +1,105 @@
 <!-- 编辑弹窗 -->
 <template>
-  <ele-modal form :width="1080" v-model="visible" title="回收修改日志">
-    <SimpleTable style="width: 100%" :columns="columns" border>
-      <template #discount="{ row }">
-        <div class="flex flex-col align-center">
-          <el-text>折扣：1.5折</el-text>
-          <el-text>价格：¥ 1.61元</el-text>
-        </div>
-      </template>
-      <template #recycleTime="{ row }">
-        <div class="flex flex-col align-center">
-          <el-text>开始回收时间：{{ row.createTime }}</el-text>
-          <el-text>结束回收时间：{{ row.createTime }}</el-text>
-        </div>
-      </template>
-      <template #modifyInfo="{ row }">
-        <div class="flex flex-col align-center">
-          <el-text>修改人：{{ row.createBy }}</el-text>
-          <el-text>修改时间：{{ row.createTime }}</el-text>
-        </div>
-      </template>
-    </SimpleTable>
+    <ele-modal form :width="1080" v-model="visible" title="回收修改日志">
+        <SimpleTable style="width: 100%" :columns="columns" border :fetchPage="fetchPage" ref="tableRef">
+            <template #discount="{ row }">
+                <div class="flex flex-col align-center">
+                    <el-text>折扣：{{ row.discount }}折</el-text>
+                    <el-text>价格：¥ {{ row.price }}</el-text>
+                </div>
+            </template>
+            <template #recycleTime="{ row }">
+                <div class="flex flex-col align-center">
+                    <el-text>开始回收时间：{{ row.createTime }}</el-text>
+                    <el-text>结束回收时间：{{ row.createTime }}</el-text>
+                </div>
+            </template>
+            <template #modifyInfo="{ row }">
+                <div class="flex flex-col align-center">
+                    <el-text>修改人：{{ row.createName }}</el-text>
+                    <el-text>修改时间：{{ row.createTime }}</el-text>
+                </div>
+            </template>
+        </SimpleTable>
 
-    <template #footer>
-      <el-button @click="handleCancel">关闭</el-button>
-    </template>
-  </ele-modal>
+        <template #footer>
+            <el-button @click="handleCancel">关闭</el-button>
+        </template>
+    </ele-modal>
 </template>
 
 <script setup>
-  import { ref, reactive, nextTick } from 'vue';
-  import { Flag, ChatDotSquare } from '@element-plus/icons-vue';
-  import SimpleTable from '@/components/CommonPage/SimpleTable.vue';
+import { ref, reactive, nextTick } from 'vue';
+import { Flag, ChatDotSquare } from '@element-plus/icons-vue';
+import SimpleTable from '@/components/CommonPage/SimpleTable.vue';
+import request from '@/utils/request';
 
-  /** 弹窗是否打开 */
-  const visible = defineModel({ type: Boolean });
+function fetchPage(params) {
+    return request.get(
+        '/book/bookRecycleInfo/discount/changeList/' + isbn.value,
+        {
+            params
+        }
+    );
+}
 
-  /** 关闭弹窗 */
-  const handleCancel = () => {
+/** 弹窗是否打开 */
+const visible = defineModel({ type: Boolean });
+
+/** 关闭弹窗 */
+const handleCancel = () => {
     visible.value = false;
-  };
+};
 
-  /** 弹窗打开事件 */
-  const handleOpen = () => {
+/** 弹窗打开事件 */
+let isbn = ref();
+const tableRef = ref();
+const handleOpen = (row) => {
     visible.value = true;
-    nextTick(() => console.log('打开'));
-  };
+    isbn.value = row.isbn;
 
-  // 表格数据
-  const columns = reactive([
-    { label: '修改后状态', prop: 'createBy', minWidth: 120 },
-    {
-      label: '修改后折扣',
-      prop: 'discount',
+    nextTick(() => {
+        tableRef.value?.reload();
+    });
+};
 
-      slot: 'discount',
-      minWidth: 120
+//   1-开启回收 2-关闭回收 3-加入黑名单 4-人工暂停回收 5-移除黑名单
+let typeList = {
+    "1": '开启回收',
+    "2": '关闭回收',
+    "3": '加入黑名单',
+    "4": '人工暂停回收',
+    "5": '移除黑名单'
+}
+// 表格数据
+const columns = reactive([
+    {
+        label: '修改后状态',
+        prop: 'createBy',
+        minWidth: 120,
+        formatter: (row) => typeList[row.type]
     },
     {
-      label: '回收时间',
-      prop: 'recycleTime',
-
-      slot: 'recycleTime',
-      minWidth: 200
+        label: '修改后折扣',
+        prop: 'discount',
+        slot: 'discount',
+        minWidth: 120,
+    },
+    {
+        label: '回收时间',
+        prop: 'recycleTime',
+        slot: 'recycleTime',
+        minWidth:200
     },
     {
-      label: '修改信息',
-      prop: 'modifyInfo',
-      slot: 'modifyInfo',
-      minWidth: 300
+        label: '修改信息',
+        prop: 'modifyInfo',
+        slot: 'modifyInfo',
+        minWidth:200
     }
-  ]);
+]);
 
-  defineExpose({
+defineExpose({
     handleOpen
-  });
+});
 </script>

src/views/recycleOrder/detail/order-status.vue

@@ -1,30 +1,36 @@
 <template>
-    <el-steps
-      style="width: 100%"
-      :active="active"
-      align-center
-      finish-status="success"
-    >
-      <el-step v-for="item in stepList" :title="item.label">
-        <template #description>
-          <div>{{ item.time }}</div>
-          <div>{{ item.createdBy }}</div>
-        </template>
-      </el-step>
+    <el-steps style="width: 100%" :active="active" align-center finish-status="success">
+        <el-step v-for="item in stepList" :title="item.label">
+            <template #description>
+                <div>{{ item.time }}</div>
+                <div>{{ item.createdBy }}</div>
+            </template>
+        </el-step>
     </el-steps>
 </template>
 
 <script setup>
-  import { ref, reactive } from 'vue';
-  const active = ref(6);
-  const stepList = reactive([
-    { label: '创建', time: '2024-06-05 15:00:00', createdBy: '微信用户' },
-    { label: '下单', time: '2024-06-05 15:00:00', createdBy: '微信用户' },
-    { label: '初审', time: '2024-06-05 15:00:00', createdBy: 'system' },
-    { label: '快递取书', time: '2024-06-05 15:00:00', createdBy: 'system' },
-    { label: '快递签收', time: '2024-06-05 15:00:00', createdBy: 'system' },
-    { label: '仓库收货', time: '2024-06-05 15:00:00', createdBy: '喷喷喷' },
-    { label: '到货审核', time: '', createdBy: '' },
-    { label: '支付书款（完成）', time: '', createdBy: '' }
-  ]);
+import { ref, reactive } from 'vue';
+const stepList = reactive([
+    { label: '创建', time: '2024-06-05 15:00:00', createdBy: '微信用户', stutus: 0 },
+    { label: '下单', time: '2024-06-05 15:00:00', createdBy: '微信用户', stutus: 2 },
+    { label: '初审', time: '2024-06-05 15:00:00', createdBy: 'system', stutus: 3 },
+    { label: '快递取书', time: '2024-06-05 15:00:00', createdBy: 'system', stutus: 5 },
+    { label: '快递签收', time: '2024-06-05 15:00:00', createdBy: 'system', stutus: 6 },
+    { label: '仓库收货', time: '2024-06-05 15:00:00', createdBy: '喷喷喷', stutus: 8 },
+    { label: '到货审核', time: '', createdBy: '', stutus: 9 },
+    { label: '支付书款（完成）', time: '', createdBy: '', stutus: 11 }
+]);
+
+const props = defineProps({
+    status: {
+        type: Number,
+        default: 0
+    }
+});
+
+const active = computed(() => {
+    return stepList.findIndex(item => item.stutus == props.status) || 0;
+});
+
 </script>