feat(order-renew): 新增续费订单管理页面和接口支持

- 修改.env.development配置，调整API地址
- 扩展OrderPay接口，新增支付金额、支付状态、电池型号等字段

.env.development

@@ -2,6 +2,7 @@ VITE_APP_NAME=后台管理系统
 #VITE_API_URL=http://localhost:9090/api
 #VITE_API_URL=http://yxw.wsdns.cn/api
 #VITE_SOCKET_URL=ws://localhost:9190
-VITE_API_URL=http://127.0.0.1:9090/api
+#VITE_API_URL=http://127.0.0.1:9090/api
 #VITE_API_URL=https://server.gxwebsoft.com/api
-VITE_SOCKET_URL=wss://server.gxwebsoft.com
+#VITE_SOCKET_URL=wss://server.gxwebsoft.com
+VITE_API_URL=http://yxw.wsdns.cn/api

src/api/order/model/index.ts

@@ -85,6 +85,8 @@ export interface Order {
 }
 
 export interface OrderPay {
+  // 主键id
+  id?: number;
   // 订单id
   orderId?: number;
   // 订单类型
@@ -100,6 +102,12 @@ export interface OrderPay {
   orderPriceInt?: number;//服务端用BigDecimal无法接受，另起一个字段
   // 订单编号
   orderNo?: string;
+  // 实付款金额
+  payPrice?: number;
+  // 付款状态(10未付款 20已付款)
+  payStatus?: number;
+  // 电池型号
+  batteryModel?: string;
   // 创建时间
   createTime?: string;
   startTime?: string;
@@ -149,4 +157,6 @@ export interface OrderParam extends PageParam {
   merchantCode?: string;
   expireDay?: number;
   isExpire?: number;
+  // 仅查询续费单（rentOrderId 不为空）
+  rentOrderIdNotNull?: boolean;
 }

src/views/apps/equipment/order/components/order-info.vue

@@ -521,7 +521,7 @@
       key: 'batteryModel'
     },
     {
-      title: '有效期限',
+      title: '有效期限2',
       dataIndex: 'expirationTime',
       key: 'expirationTime'
     },

src/views/yunxinwei/renew/index.vue

@@ -5,12 +5,12 @@
         <!-- 表格 -->
         <ele-pro-table
           ref="tableRef"
-          row-key="orderId"
+          row-key="id"
           :columns="columns"
           :datasource="datasource"
           v-model:selection="selection"
           tool-class="ele-toolbar-form"
-          :scroll="{ x: 2000 }"
+          :scroll="{ x: 1800 }"
           class="sys-org-table"
           :striped="true"
         >
@@ -18,189 +18,50 @@
             <search
               @search="reload"
               :selection="selection"
-              @add="openEdit"
               @remove="removeBatch"
               @advanced="openAdvanced"
             />
           </template>
           <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'orderName'">
+            <template v-if="column.key === 'rentOrderNo'">
-              <a-tooltip title="查看详情">
+              <a-tooltip :title="record.rentOrderNo || record.rentOrderId">
-                <a href="#" @click="openInfo(record)">{{ record.orderName }}</a>
+                <span>{{ record.rentOrderNo || ('#' + record.rentOrderId) }}</span>
               </a-tooltip>
             </template>
-            <template v-if="column.key === 'merchantName'">
+
-              <div style="display: flex; flex-direction: column">
+            <template v-if="column.key === 'servicePeriod'">
-                <span>{{ record.merchantName }}</span>
+              <div>{{ record.startTime }}</div>
-                <span class="ele-text-placeholder">
+              <div class="ele-text-placeholder">至 {{ record.expirationTime }}</div>
-                  {{ record.merchantCode }}
-                </span>
-              </div>
             </template>
-            <template v-if="column.key === 'payPrice'">
+
-              <p>
+            <template v-if="column.key === 'validity'">
-                <span class="ele-text-warning price-edit">
+              <span class="ele-text-danger">{{ calcValidity(record) }}</span>
-                  ￥{{ record.payPrice }}
-                </span>
-                <form-outlined
-                  v-if="record.payStatus === 10"
-                  @click="onEdit('payPrice', record.payPrice, record)"
-              /></p>
-              <p class="ele-text-placeholder"
-                >(含运费：￥{{ record.expressPrice }})</p
-              >
-            </template>
-            <template v-if="column.key === 'goods'">
-              <template v-if="record.equipment">
-                <p class="ele-text">{{ record.equipment.equipmentName }}</p>
-                <p class="ele-text">{{ record.equipment.batteryModel }}</p>
-                <p class="ele-text">{{ record.equipment.equipmentCode }}</p>
-              </template>
-            </template>
-            <template v-if="column.key === 'payMethod'">
-              <a-tag v-if="record.payMethod === '10'" color="orange"
-                >余额支付</a-tag
-              >
-              <a-tag v-if="record.payMethod === '20'" color="green"
-                >微信支付</a-tag
-              >
-              <a-tag v-if="record.payMethod === '30'" color="blue"
-                >支付宝</a-tag
-              >
-              <a-tag v-if="record.payMethod === '40'" color="purple"
-                >通联支付</a-tag
-              >
-            </template>
-            <template v-if="column.key === 'deliveryType'">
-              <span v-if="record.deliveryType === 10">快递配送</span>
-              <span v-if="record.deliveryType === 20">门店自提</span>
             </template>
+
             <template v-if="column.key === 'payStatus'">
-              <div class="ele-text-placeholder">
+              <a-tag v-if="record.payStatus === 20" color="green">已付款</a-tag>
-                付款状态：
+              <a-tag v-else color="red">未付款</a-tag>
-                <a-tag
-                  v-if="record.payStatus === 10"
-                  @click="onAlipayQuery(record.orderId)"
-                  >未付款</a-tag
-                >
-                <a-tag v-if="record.payStatus === 20" color="green"
-                  >已付款</a-tag
-                >
-              </div>
-              <div class="ele-text-placeholder">
-                发货状态：
-                <a-tag v-if="record.deliveryStatus === 10">未发货</a-tag>
-                <a-tag v-if="record.deliveryStatus === 20" color="success"
-                  >已发货</a-tag
-                >
-              </div>
-              <div class="ele-text-placeholder">
-                收货状态：
-                <a-tag v-if="record.receiptStatus === 10">未收货</a-tag>
-                <a-tag v-if="record.receiptStatus === 20" color="success"
-                  >已收货</a-tag
-                >
-              </div>
             </template>
-            <template v-if="column.key === 'orderSourceData'">
+
-              <a-image-preview-group v-if="record.orderSourceData">
+            <template v-if="column.key === 'isAdminRenew'">
-                <a-image
+              <a-tag v-if="record.isAdminRenew === 1" color="blue">后台续费</a-tag>
-                  :width="45"
+              <a-tag v-else>用户续费</a-tag>
-                  v-for="item in JSON.parse(record.orderSourceData)"
-                  :src="item"
-                />
-              </a-image-preview-group>
-              <!--              <a-image-->
-              <!--                v-if="record.orderSourceData"-->
-              <!--                :src="JSON.parse(record.orderSourceData)"-->
-              <!--                :width="45"-->
-              <!--              />-->
-            </template>
-            <template v-if="column.key === 'status'">
-              <a-tag v-if="record.status === '0'" color="green">正常</a-tag>
-              <a-tag v-if="record.status === '1'" color="red">禁用</a-tag>
-            </template>
-            <template v-if="column.key === 'orderSource'">
-              <a-tag v-if="Number(record.orderSource) === 10" color="success"
-                >销售</a-tag
-              >
-              <a-tag v-if="Number(record.orderSource) === 20" color="red"
-                >分期</a-tag
-              >
-              <a-tag v-if="Number(record.orderSource) === 30" color="orange"
-                >以租代购</a-tag
-              >
-              <a-tag v-if="Number(record.orderSource) === 40" color="blue"
-                >租赁</a-tag
-              >
-            </template>
-            <template v-if="column.key === 'nickname'">
-              <a-tooltip :title="`用户ID：${record.userId}`">
-                <a-avatar :src="record.avatar" size="small" />
-                <span style="padding-left: 4px">{{ record.nickname }}</span>
-              </a-tooltip>
             </template>
+
             <template v-if="column.key === 'createTime'">
               {{ record.createTime }}
             </template>
-            <template v-if="column.key === 'action'">
-              <a-space>
-                <a-button
-                  @click="openDelivery(record)"
-                  v-if="
-                    record.orderStatus === 10 &&
-                    record.payStatus === 20 &&
-                    record.deliveryStatus === 10
-                  "
-                  >发货</a-button
-                >
-                <!--            <a-divider type="vertical" />-->
-                <!--            <a-popconfirm-->
-                <!--              title="确定要删除此记录吗？"-->
-                <!--              @confirm="remove(record)"-->
-                <!--            >-->
-                <!--              <a class="ele-text-danger">删除</a>-->
-                <!--            </a-popconfirm>-->
-              </a-space>
-            </template>
           </template>
         </ele-pro-table>
       </a-card>
     </div>
-    <!-- 编辑弹窗 -->
-    <Delivery v-model:visible="deliveryEdit" :data="current" @done="reload" />
-    <Markdown
-      v-model:visible="showMarkdown"
-      :data="data"
-      :field="field"
-      :orderId="orderId"
-      :content="markdown"
-      @done="reload"
-    />
-    <Field
-      v-model:visible="showEdit"
-      :data="data"
-      :field="field"
-      :orderId="orderId"
-      :content="content"
-      @done="reload"
-    />
-    <!-- 编辑弹窗 -->
-    <!--    <order-edit v-model:visible="showEdit" :data="current" @done="reload" />-->
-    <!-- 用户详情 -->
-    <!--    <order-info v-model:visible="showInfo" :data="current" @done="reload" />-->
   </div>
 </template>
 
 <script lang="ts" setup>
   import { createVNode, ref } from 'vue';
   import { message, Modal } from 'ant-design-vue';
-  import {
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-    // PlusOutlined,
-    // DeleteOutlined,
-    FormOutlined,
-    ExclamationCircleOutlined
-  } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
   import type {
     DatasourceFunction,
@@ -208,22 +69,9 @@
   } from 'ele-admin-pro/es/ele-pro-table/types';
   import { toDateString } from 'ele-admin-pro';
   import Search from './components/search.vue';
-  import Delivery from './components/delivery.vue';
+  import { pageOrderPay } from '@/api/order';
-  import Markdown from './components/markdown.vue';
+  import type { OrderPay, OrderPayParam } from '@/api/order/model';
-  import Field from './components/field.vue';
-  // import OrderEdit from './components/order-edit.vue';
-  // import OrderInfo from './components/order-info.vue';
-  import { pageOrder, removeOrder, removeBatchOrder } from '@/api/order';
-  import { alipayQuery } from '@/api/system/payment';
-  import type { Order, OrderParam } from '@/api/order/model';
-  import { getDictionaryOptions } from '@/utils/common';
-  // import { useUserStore } from '@/store/modules/user';
-  // import { getDictionaryOptions } from '@/utils/common';
 
-  // 当前用户信息
-  // const userStore = useUserStore();
-  // const loginUser = computed(() => userStore.info ?? {});
-  // const orderType = localStorage.getItem('orderType');
   const props = defineProps<{
     activeKey?: boolean;
     data?: any;
@@ -232,31 +80,43 @@
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
-  /* 获取字典数据 */
+  // 续费有效期（按服务起止时间计算，固定为续费时长，避免“多给一个月”的观感）
-  const orderSource = getDictionaryOptions('equipmentCategory');
+  const calcValidity = (record: OrderPay) => {
+    if (!record.startTime || !record.expirationTime) {
+      return '-';
+    }
+    const start = new Date(record.startTime).getTime();
+    const end = new Date(record.expirationTime).getTime();
+    const days = Math.round((end - start) / (24 * 60 * 60 * 1000));
+    if (days < 0) {
+      return '异常';
+    }
+    return days + '天';
+  };
 
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      key: 'index',
+      title: '续费订单号',
-      width: 48,
-      align: 'center',
-      fixed: 'left',
-      hideInSetting: true,
-      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 100,
-      align: 'center',
-      fixed: 'left',
-      hideInSetting: true
-    },
-    {
-      title: '订单号',
       dataIndex: 'orderNo',
-      key: 'orderNo'
+      key: 'orderNo',
+      sorter: true
+    },
+    {
+      title: '关联原订单号',
+      dataIndex: 'rentOrderNo',
+      key: 'rentOrderNo',
+      sorter: true
+    },
+    {
+      title: '电池型号',
+      dataIndex: 'batteryModel',
+      key: 'batteryModel'
+    },
+    {
+      title: '电池编号',
+      dataIndex: 'equipmentCode',
+      key: 'equipmentCode'
     },
     {
       title: '所属商户',
@@ -265,110 +125,63 @@
       sorter: true
     },
     {
-      title: '买家',
+      title: '服务期限',
-      dataIndex: 'nickname',
+      dataIndex: 'servicePeriod',
-      key: 'nickname',
+      key: 'servicePeriod'
-      align: 'center'
     },
     {
-      title: '实付款(元)',
+      title: '续费时长',
+      dataIndex: 'validity',
+      key: 'validity'
+    },
+    {
+      title: '续费金额',
       dataIndex: 'payPrice',
-      key: 'payPrice',
+      key: 'payPrice'
-      ellipsis: true
     },
     {
-      title: '支付方式',
+      title: '续费类型',
-      key: 'payMethod',
+      dataIndex: 'isAdminRenew',
-      dataIndex: 'payMethod',
+      key: 'isAdminRenew'
+    },
+    {
+      title: '付款状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
       filters: [
-        {
+        { text: '未付款', value: 10 },
-          text: '余额支付',
+        { text: '已付款', value: 20 }
-          value: 10
-        },
-        {
-          text: '微信支付',
-          value: 20
-        },
-        {
-          text: '支付宝',
-          value: 30
-        },
-        {
-          text: '通联支付',
-          value: 40
-        }
       ],
       filterMultiple: false
     },
     {
-      title: '创建时间',
+      title: '购买时间',
       dataIndex: 'createTime',
       key: 'createTime',
       sorter: true,
       customRender: ({ text }) => toDateString(text)
-    },
-    {
-      title: '交易状态',
-      key: 'payStatus',
-      dataIndex: 'payStatus',
-      fixed: 'right',
-      align: 'center',
-      filters: [
-        {
-          text: '未付款',
-          value: 10
-        },
-        {
-          text: '已付款',
-          value: 20
-        }
-      ],
-      filterMultiple: false
     }
   ]);
 
   // 表格选中数据
-  const selection = ref<Order[]>([]);
+  const selection = ref<OrderPay[]>([]);
-  // 当前编辑数据
-  const current = ref<Order | null>(null);
-  // 是否显示资产详情
-  const showInfo = ref(false);
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  const markdown = ref('请输入备注内容');
-  const content = ref('请输入要修改的内容');
-  const showMarkdown = ref(false);
-  const deliveryEdit = ref(false);
-  const field = ref('comments');
-  const orderId = ref(undefined);
   // 是否显示高级搜索
   const showAdvancedSearch = ref(false);
 
-  // 表格数据源
+  // 表格数据源：只查续费单（rentOrderId 不为空）
   const datasource: DatasourceFunction = ({
     page,
     limit,
     where,
-    orders,
+    orders
-    filters
   }) => {
-    // 搜索条件
+    if (where.payStatus) {
-    if (filters.payMethod) {
+      where.payStatus = where.payStatus;
-      where.payMethod = filters.payMethod;
-    }
-    if (filters.deliveryType) {
-      where.deliveryType = filters.deliveryType;
-    }
-    if (filters.payStatus) {
-      where.payStatus = filters.payStatus;
-    }
-    if (filters.orderSource) {
-      where.orderSource = filters.orderSource;
     }
     where.tenantId = localStorage.getItem('tenantId');
-    // 续费订单
+    // 关键：仅查询续费单（rentOrderId 不为空），避免与原订单混在一起
-    where.isRenew = 1;
+    where.rentOrderIdNotNull = true;
-    return pageOrder({
+    return pageOrderPay({
       ...where,
       ...orders,
       page,
@@ -377,72 +190,18 @@
   };
 
   /* 搜索 */
-  const reload = (where?: OrderParam) => {
+  const reload = (where?: OrderPayParam) => {
     selection.value = [];
     tableRef?.value?.reload({ where: where });
   };
 
-  const onEdit = (name, text, item) => {
-    orderId.value = item.orderId;
-    field.value = name;
-    content.value = text;
-    showEdit.value = true;
-  };
-
-  const onEditContent = (name, text, item) => {
-    orderId.value = item.orderId;
-    field.value = name;
-    markdown.value = text;
-    showMarkdown.value = true;
-  };
-
-  const openDelivery = (row?: Order) => {
-    current.value = row ?? null;
-    deliveryEdit.value = true;
-  };
-
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: Order) => {
-    current.value = row ?? null;
-    showEdit.value = true;
-  };
-
-  /* 打开用户详情弹窗 */
-  const openInfo = (row?: Order) => {
-    current.value = row ?? null;
-    showInfo.value = true;
-  };
-
   /* 打开高级搜索 */
   const openAdvanced = () => {
     showAdvancedSearch.value = !showAdvancedSearch.value;
   };
 
-  /* 支付宝统一收单交易查询 */
-  const onAlipayQuery = (orderNo) => {
-    alipayQuery(orderNo).then((res) => {
-      console.log(res);
-    });
-  };
-
-  /* 删除单个 */
-  const remove = (row: Order) => {
-    const hide = message.loading('请求中..', 0);
-    removeOrder(row.orderId)
-      .then((msg) => {
-        hide();
-        message.success(msg);
-        reload();
-      })
-      .catch((e) => {
-        hide();
-        message.error(e.message);
-      });
-  };
-
   /* 批量删除 */
   const removeBatch = () => {
-    console.log(selection.value);
     if (!selection.value.length) {
       message.error('请至少选择一条数据');
       return;
@@ -453,17 +212,7 @@
       icon: createVNode(ExclamationCircleOutlined),
       maskClosable: true,
       onOk: () => {
-        const hide = message.loading('请求中..', 0);
+        message.info('续费单删除需后端支持批量接口，请联系开发');
-        removeBatchOrder(selection.value.map((d) => d.orderId))
-          .then((msg) => {
-            hide();
-            message.success(msg);
-            reload();
-          })
-          .catch((e) => {
-            hide();
-            message.error(e.message);
-          });
       }
     });
   };
@@ -471,14 +220,11 @@
 
 <script lang="ts">
   export default {
-    name: 'ShopOrderIndex'
+    name: 'ShopRenewOrderIndex'
   };
 </script>
 
 <style lang="less" scoped>
-  p {
-    line-height: 0.8;
-  }
   .sys-org-table :deep(.ant-table-body) {
     overflow: auto !important;
     overflow: overlay !important;
@@ -488,7 +234,4 @@
     padding: 0 4px;
     margin-bottom: 0;
   }
-  .price-edit {
-    padding-right: 5px;
-  }
 </style>