fix bug

src/views/yunxinwei/order/components/order-info.vue

@@ -52,7 +52,9 @@
           "
         >
           <a-form-item label="实付款金额" name="payPrice">
-            <span class="ele-text-warning">￥{{ formatNumber(data.payPrice) }}</span>
+            <span class="ele-text-warning"
+              >￥{{ formatNumber(data.payPrice) }}</span
+            >
           </a-form-item>
         </a-col>
         <a-col
@@ -63,7 +65,7 @@
           "
         >
           <a-form-item label="支付方式" name="payMethod">
-            <Tag dict-code="payMethod" v-model:value="data.payMethod"/>
+            <Tag dict-code="payMethod" v-model:value="data.payMethod" />
           </a-form-item>
         </a-col>
         <a-col
@@ -74,7 +76,7 @@
           "
         >
           <a-form-item label="配送方式" name="deliveryType">
-            <Tag dict-code="deliveryType" v-model:value="data.deliveryType"/>
+            <Tag dict-code="deliveryType" v-model:value="data.deliveryType" />
           </a-form-item>
         </a-col>
         <a-col
@@ -96,7 +98,7 @@
           "
         >
           <a-form-item label="订单状态" name="orderStatus">
-            <Tag dict-code="orderStatus" v-model:value="data.orderStatus"/>
+            <Tag dict-code="orderStatus" v-model:value="data.orderStatus" />
           </a-form-item>
         </a-col>
         <a-col
@@ -213,22 +215,18 @@
                 v-if="Number(record.equipmentCategory) === 10"
                 color="success"
                 >销售
-              </a-tag
-              >
+              </a-tag>
               <a-tag v-if="Number(record.equipmentCategory) === 20" color="red"
                 >分期
-              </a-tag
-              >
+              </a-tag>
               <a-tag
                 v-if="Number(record.equipmentCategory) === 30"
                 color="orange"
                 >以租代购
-              </a-tag
-              >
+              </a-tag>
               <a-tag v-if="Number(record.equipmentCategory) === 40" color="blue"
                 >租赁
-              </a-tag
-              >
+              </a-tag>
             </template>
             <template v-if="column.key === 'more'">
               <div v-if="record.periodsType > 0">
@@ -258,13 +256,11 @@
     </a-card>
     <a-card title="换电记录" class="order-card">
       <a-spin :spinning="loading">
-
         <a-table
           :data-source="EquipmentRecordList"
           :columns="columns3"
           :pagination="true"
         >
-
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'batteryModel'">
               <div>电池租金：￥{{ record.batteryRent }}</div>
@@ -276,9 +272,8 @@
             </template>
 
             <template v-if="column.key === 'duration'">
-              <span class="ele-text-danger">{{ countDuration (record)}}</span>
+              <span class="ele-text-danger">{{ countDuration(record) }}</span>
             </template>
-
           </template>
         </a-table>
       </a-spin>
@@ -292,10 +287,15 @@
           :pagination="true"
         >
           <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'orderNo'">
+              <span :class="[record.isAdminRenew === 1 ? 'ele-text-primary' : '']">{{ record.orderNo }}</span>
+            </template>
             <template v-if="column.key === 'batteryModel'">
+              <div :class="[record.isAdminRenew === 1 ? 'ele-text-primary' : '']">
                 <div>电池租金：￥{{ record.batteryRent }}</div>
                 <div>电池押金：￥{{ record.batteryDeposit }}</div>
                 <div>电池保险：￥{{ record.batteryInsurance }}</div>
+              </div>
             </template>
             <template v-if="column.key === 'expirationTime'">
               <div>{{ record.startTime }}</div>
@@ -306,28 +306,28 @@
             </template>
 
             <template v-if="column.key === 'action'">
-
-              <view >
-                <a-button
-                  @click="openOrderOnline(record)"
-                >续费该设备</a-button>
+              <view>
+                <a-button @click="openOrderOnline(record)"
+                  >续费该设备
+                </a-button>
               </view>
             </template>
 
             <template v-if="column.key === 'currPeriods'">
-              <view v-if="record.orderSource === 10" >
+              <view v-if="record.orderSource === 10">
                 <span>一次性购买</span>
               </view>
-              <view v-else>
+              <view
+                v-else
+                :class="[record.isAdminRenew === 1 ? 'ele-text-primary' : '']"
+              >
                 <span>第{{ record.currPeriods }}期</span>
                 <view v-if="record.isAdminRenew === 1">
                   <span> (后台续费)</span>
                 </view>
               </view>
             </template>
-
           </template>
-
         </a-table>
       </a-spin>
     </a-card>
@@ -388,7 +388,6 @@
             <span>{{ data.address }}</span>
           </a-form-item>
         </a-col>
-
       </a-row>
       <a-row :gutter="16">
         <a-col
@@ -431,63 +430,65 @@
       :data="current"
       @done="getRenewOrder"
     />
-
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, watch} from 'vue';
-import {Form} from 'ant-design-vue';
-import {assignObject, EleProTable, timeAgo} from 'ele-admin-pro';
-import {useThemeStore} from '@/store/modules/theme';
-import {formatNumber} from 'ele-admin-pro/es';
-import {storeToRefs} from 'pinia';
-import {copyText} from '@/utils/common';
-import {Order} from '@/api/order/model';
-import OrderXufei from '../components/order-xufei.vue';
-import {listEquipmentOrderGoods} from '@/api/apps/equipment/order/goods';
-import {EquipmentOrderGoods} from '@/api/apps/equipment/order/goods/model';
-import * as EquipmentApi from '@/api/apps/equipment';
-import * as EquipmentRecordApi from '@/api/apps/equipment/record';
-import {ColumnItem, DatasourceFunction} from 'ele-admin-pro/es/ele-pro-table/types';
-import {listOrder, listOrderPay} from '@/api/order';
-import {CopyOutlined} from '@ant-design/icons-vue';
-import {EquipmentRecord} from '@/api/apps/equipment/record/model';
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject, EleProTable, timeAgo } from 'ele-admin-pro';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { copyText } from '@/utils/common';
+  import { Order } from '@/api/order/model';
+  import OrderXufei from '../components/order-xufei.vue';
+  import { listEquipmentOrderGoods } from '@/api/apps/equipment/order/goods';
+  import { EquipmentOrderGoods } from '@/api/apps/equipment/order/goods/model';
+  import * as EquipmentApi from '@/api/apps/equipment';
+  import * as EquipmentRecordApi from '@/api/apps/equipment/record';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { listOrder, listOrderPay } from '@/api/order';
+  import { CopyOutlined } from '@ant-design/icons-vue';
+  import { EquipmentRecord } from '@/api/apps/equipment/record/model';
 
-const useForm = Form.useForm;
-// 是否开启响应式布局
-const themeStore = useThemeStore();
-const {styleResponsive} = storeToRefs(themeStore);
-const showOrderXufei = ref(false);
-// 当前编辑数据
-const current = ref<Order | null>(null);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const showOrderXufei = ref(false);
+  // 当前编辑数据
+  const current = ref<Order | null>(null);
 
-const props = defineProps<{
+  const props = defineProps<{
     // 弹窗是否打开
     visible: boolean;
     // 修改回显的数据
     data?: Order | null;
-}>();
+  }>();
 
-export interface step {
+  export interface step {
     title?: String | undefined;
     subTitle?: String | undefined;
     description?: String | undefined;
-}
+  }
 
-// 是否是修改
-const isUpdate = ref(false);
-// 是否显示最大化切换按钮
-const maxAble = ref(true);
-const EquipmentOrderGoodsList = ref<EquipmentOrderGoods[]>([]);
-const renewOrderList = ref<Order[]>([]);
-const EquipmentRecordList = ref<EquipmentRecord[]>([]);
-const bindEquipmentCode = ref<string>();
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否显示最大化切换按钮
+  const maxAble = ref(true);
+  const EquipmentOrderGoodsList = ref<EquipmentOrderGoods[]>([]);
+  const renewOrderList = ref<Order[]>([]);
+  const EquipmentRecordList = ref<EquipmentRecord[]>([]);
+  const bindEquipmentCode = ref<string>();
 
-const files = ref<any[]>();
+  const files = ref<any[]>();
 
-// 步骤条
-const steps = ref<step[]>([
+  // 步骤条
+  const steps = ref<step[]>([
     {
       title: '下单',
       description: undefined
@@ -508,33 +509,33 @@ const steps = ref<step[]>([
       title: '完成',
       description: undefined
     }
-]);
-const active = ref(2);
+  ]);
+  const active = ref(2);
 
-const emit = defineEmits<{
+  const emit = defineEmits<{
     (e: 'done'): void;
     (e: 'update:visible', visible: boolean): void;
-}>();
+  }>();
 
-// 订单信息
-const order = reactive<Order>({
+  // 订单信息
+  const order = reactive<Order>({
     orderId: undefined,
     orderNo: '',
     userId: undefined,
     orderSourceData: ''
-});
+  });
 
-// 请求状态
-const loading = ref(true);
+  // 请求状态
+  const loading = ref(true);
 
-const {resetFields} = useForm(order);
+  const { resetFields } = useForm(order);
 
-/* 更新visible */
-const updateVisible = (value: boolean) => {
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
     emit('update:visible', value);
-};
+  };
 
-const columns = ref<ColumnItem[]>([
+  const columns = ref<ColumnItem[]>([
     // {
     //   title: '商品ID',
     //   dataIndex: 'goodsId'
@@ -558,13 +559,13 @@ const columns = ref<ColumnItem[]>([
       title: '电池价格',
       dataIndex: 'batteryPrice',
       key: 'batteryPrice',
-    customRender: ({text}) => '￥' + text
+      customRender: ({ text }) => '￥' + text
     },
     {
       title: '电池租金',
       dataIndex: 'batteryRent',
       key: 'batteryRent',
-    customRender: ({text}) => '￥' + text
+      customRender: ({ text }) => '￥' + text
     },
     {
       title: '分期方案',
@@ -577,11 +578,11 @@ const columns = ref<ColumnItem[]>([
       key: 'num',
       customRender: ({}) => 1
     }
-]);
+  ]);
 
-// 表格实例
-const tableRef2 = ref<InstanceType<typeof EleProTable> | null>(null);
-const columns2 = ref<ColumnItem[]>([
+  // 表格实例
+  const tableRef2 = ref<InstanceType<typeof EleProTable> | null>(null);
+  const columns2 = ref<ColumnItem[]>([
     {
       title: '当前期数',
       dataIndex: 'currPeriods',
@@ -612,7 +613,7 @@ const columns2 = ref<ColumnItem[]>([
       title: '订单金额',
       dataIndex: 'orderPrice',
       key: 'orderPrice',
-    customRender: ({text}) => '￥' + text
+      customRender: ({ text }) => '￥' + text
     },
     {
       title: '设备租金',
@@ -641,9 +642,9 @@ const columns2 = ref<ColumnItem[]>([
       align: 'center',
       fixed: 'left',
       hideInSetting: true
-  },
-]);
-const columns3 = ref<ColumnItem[]>([
+    }
+  ]);
+  const columns3 = ref<ColumnItem[]>([
     {
       title: '设备编号',
       dataIndex: 'equipmentCode',
@@ -662,7 +663,7 @@ const columns3 = ref<ColumnItem[]>([
     {
       title: '使用电池',
       dataIndex: 'duration',
-    key:'duration'
+      key: 'duration'
     },
     {
       title: '操作人',
@@ -674,10 +675,10 @@ const columns3 = ref<ColumnItem[]>([
       dataIndex: 'createTime',
       key: 'createTime'
     }
-]);
+  ]);
 
-/* 制作步骤条 */
-const loadSteps = (order) => {
+  /* 制作步骤条 */
+  const loadSteps = (order) => {
     steps.value = [];
     steps.value.push({
       title: '下单'
@@ -733,32 +734,31 @@ const loadSteps = (order) => {
     if (order.orderStatus == 20) {
       active.value = 4;
     }
-};
+  };
 
-const getEquipmentOrderGoods = () => {
+  const getEquipmentOrderGoods = () => {
     const orderId = props.data?.orderId;
     const goodsId = props.data?.goodsId;
-  listEquipmentOrderGoods({orderId, goodsId}).then((data) => {
+    listEquipmentOrderGoods({ orderId, goodsId }).then((data) => {
       EquipmentOrderGoodsList.value = data;
     });
-};
+  };
 
-
-/* 线下缴费 */
-const openOrderOnline = (row?: Order) => {
+  /* 线下缴费 */
+  const openOrderOnline = (row?: Order) => {
     current.value = row ?? null;
     showOrderXufei.value = true;
-};
+  };
 
-const getEquipment = () => {
-  EquipmentApi.listEquipment({orderId: order.orderId}).then((data) => {
+  const getEquipment = () => {
+    EquipmentApi.listEquipment({ orderId: order.orderId }).then((data) => {
       if (data.length > 0) {
         bindEquipmentCode.value = data[0].equipmentCode;
       }
     });
-};
+  };
 
-const getRenewOrder = () => {
+  const getRenewOrder = () => {
     loading.value = true;
     console.log(order);
     if (order.orderId > 28798) {
@@ -780,64 +780,64 @@ const getRenewOrder = () => {
         loading.value = false;
       });
     }
+  };
 
-};
-
-const getEquipmentRecordList = () => {
+  const getEquipmentRecordList = () => {
     EquipmentRecordApi.pageEquipmentRecord({
       orderId: order.orderId,
       userId: order.userId
     }).then((data) => {
       EquipmentRecordList.value = data.list;
     });
-};
+  };
 
-// 表格数据源
-//   const datasource3: DatasourceFunction = ({
-//     page,
-//     limit,
-//     where,
-//     orders
-//   }) => {
-//     where.orderId = order.orderId
-//     where.userId = order.userId
-//     return EquipmentRecordApi.pageEquipmentRecord({
-//       ...where,
-//       ...orders,
-//       page,
-//       limit
-//     });
-//   };
+  // 表格数据源
+  //   const datasource3: DatasourceFunction = ({
+  //     page,
+  //     limit,
+  //     where,
+  //     orders
+  //   }) => {
+  //     where.orderId = order.orderId
+  //     where.userId = order.userId
+  //     return EquipmentRecordApi.pageEquipmentRecord({
+  //       ...where,
+  //       ...orders,
+  //       page,
+  //       limit
+  //     });
+  //   };
 
-const expirationDay = (order) => {
+  const expirationDay = (order) => {
     const setTime = new Date(order.expirationTime);
     const nowTime = new Date();
     const restSec = setTime.getTime() - nowTime.getTime();
-  console.log("计算剩余天数");
+    console.log('计算剩余天数');
     console.log(restSec);
     // 剩余天数
     const day = parseInt(String(restSec / (60 * 60 * 24 * 1000)));
     if (day < 0) {
       return '逾期' + Math.abs(day) + '天';
     }
-};
+  };
 
-const countDuration = (equipmentRecord) =>{//计算使用时间
-  if (equipmentRecord.eventType ==="电池解绑"){
-      if (equipmentRecord.duration !== null){
-        return equipmentRecord.duration+'天'
+  const countDuration = (equipmentRecord) => {
+    //计算使用时间
+    if (equipmentRecord.eventType === '电池解绑') {
+      if (equipmentRecord.duration !== null) {
+        return equipmentRecord.duration + '天';
       }
-      return '0天'
+      return '0天';
+    } else {
+      if (equipmentRecord.duration !== null) {
+        return equipmentRecord.duration + '天';
       } else {
-      if (equipmentRecord.duration !== null){
-        return equipmentRecord.duration+'天';
-      }else {
         return '';
       }
     }
-}
+  };
 
-const getFiles = () => {
+  const getFiles = () => {
     if (order.orderSourceData != '') {
       const array = JSON.parse(<string>order.orderSourceData);
       files.value = array.map((url, id) => {
@@ -848,13 +848,12 @@ const getFiles = () => {
         };
       });
     }
-};
+  };
 
-/* 保存编辑 */
-const save = () => {
-};
+  /* 保存编辑 */
+  const save = () => {};
 
-watch(
+  watch(
     () => props.visible,
     (visible) => {
       if (visible) {
@@ -872,14 +871,14 @@ watch(
         resetFields();
       }
     }
-);
+  );
 </script>
 <style lang="less" scoped>
-.order-card {
+  .order-card {
     margin-bottom: 20px;
-}
+  }
 
-.ant-form-item {
+  .ant-form-item {
     margin-bottom: 5px;
-}
+  }
 </style>