feat: 🚧添加账号修改和删除功能

fix: 临时删除面额

feat: 修正账号样式

fix: 添加商户订单号

.env.development

@@ -1 +1 @@
-VITE_API_BASE_URL= 'http://127.0.0.1:8001/api'
+VITE_API_BASE_URL= 'http://127.0.0.1:8000/api'

package.json

@@ -99,6 +99,5 @@
     "bin-wrapper": "npm:bin-wrapper-china",
     "rollup": "^2.56.3",
     "gifsicle": "5.2.0"
-  },
-  "packageManager": "pnpm@9.1.1+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195"
+  }
 }

src/api/apple-card-info.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import qs from 'query-string';
 import {
+  CommonNumIdParams,
   CommonPageParams,
   CommonPageResult,
   CommonStrIdParams,
@@ -12,7 +13,6 @@ export interface AppleCardAddRecord {
 }
 
 export interface AppleCardRecord extends AppleCardAddRecord {
-  accountID: string;
   status: 0 | 1 | 2 | 3; // 账号状态
 
   // blance: number;
@@ -21,6 +21,7 @@ export interface AppleCardRecord extends AppleCardAddRecord {
 
 export interface AppleCardParams
   extends Partial<AppleCardRecord>,
+    Partial<CommonNumIdParams>,
     CommonPageParams {}
 
 export interface AppleCardResRecord
@@ -28,7 +29,7 @@ export interface AppleCardResRecord
     CommonStrIdParams {}
 
 export interface AppleCardRecordWithID
-  extends AppleCardRecord,
+  extends AppleCardAddRecord,
     CommonStrIdParams {}
 
 // 获取苹果账号列表
@@ -48,10 +49,10 @@ export function addAppleCard(data: AppleCardAddRecord) {
   return axios.post('/cardInfo/AppleCard/create', data);
 }
 
-export function updateMerchantDeploy(data: AppleCardRecordWithID) {
-  return axios.put('/cardInfo/appleCard/modify', data);
+export function updateAppleCard(data: AppleCardRecordWithID) {
+  return axios.put('/cardInfo/AppleCard/update', data);
 }
 
 export function deleteAppleCard(params: CommonStrIdParams) {
-  return axios.delete('/cardInfo/appleCard/delete', { params });
+  return axios.delete('/cardInfo/AppleCard/delete', { params });
 }

src/api/apple-card-recharge-history.ts

@@ -6,8 +6,10 @@ export interface AppleCardRechargeOrderRecord {
   id: number;
   amount: number; // 充值金额
   balance: number; // 账户余额
-
-  createAt: string; // 订单创建时间，发起充值时间
+  accountInfo: {
+    account: string;
+  };
+  createdAt: string; // 订单创建时间，发起充值时间
 }
 
 export interface AppleCardRechargeOrderParams

src/views/apple-card-info/card-info/components/add-modal.vue

@@ -5,10 +5,10 @@
     @ok="handleOk"
     @cancel="handleCancel"
   >
-    <template #title> 添加账户 </template>
+    <template #title> {{ props.id === '' ? '新增' : '编辑' }}账户 </template>
     <a-form :model="formData">
       <a-form-item field="account" label="账号" required>
-        <a-input v-model="formData.account" />
+        <a-input v-model="formData.account" :readonly="props.id !== ''" />
       </a-form-item>
       <a-form-item field="password" label="密码" required>
         <a-input v-model="formData.password" />
@@ -18,9 +18,28 @@
 </template>
 
 <script lang="ts" setup>
-  import { addAppleCard, AppleCardAddRecord } from '@/api/apple-card-info';
+  import {
+    addAppleCard,
+    AppleCardAddRecord,
+    updateAppleCard,
+  } from '@/api/apple-card-info';
   import useLoading from '@/hooks/loading';
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    account: {
+      type: String,
+      default: '',
+    },
+  });
 
   const generateFormData = () => {
     return {
@@ -29,12 +48,6 @@
     };
   };
 
-  const props = defineProps({
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  });
   const formData = ref<AppleCardAddRecord>(generateFormData());
 
   const { loading, setLoading } = useLoading(false);
@@ -43,13 +56,25 @@
   const handleOk = async () => {
     try {
       setLoading(true);
-      await addAppleCard(formData.value);
+
+      if (props.id === '') {
+        await addAppleCard(formData.value);
+      } else {
+        await updateAppleCard({ id: props.id, ...formData.value });
+      }
       emit('update:visible', false);
       formData.value = generateFormData();
     } finally {
       setLoading(false);
     }
   };
+
+  watch(
+    () => props.account,
+    (val) => {
+      formData.value.account = val;
+    }
+  );
   const handleCancel = () => {
     emit('update:visible', false);
     formData.value = generateFormData();

src/views/apple-card-info/card-info/components/trade-detail.vue

@@ -1,3 +0,0 @@
-<template>
-  <div> </div>
-</template>

src/views/apple-card-info/card-info/index.vue

@@ -44,7 +44,10 @@
       <a-row style="margin-bottom: 16px">
         <a-col :span="12">
           <a-space>
-            <a-button type="primary" @click="showAddModel">
+            <a-button
+              type="primary"
+              @click="showAddModel({ account: '', password: '', id: '' })"
+            >
               <template #icon>
                 <icon-plus />
               </template>
@@ -73,9 +76,29 @@
             {{ getStatusColorMap(record.status).text }}
           </a-tag>
         </template>
+        <template #operations="{ record }">
+          <a-space size="small">
+            <a-button
+              size="small"
+              status="warning"
+              @click="showAddModel(record)"
+              >修改</a-button
+            >
+            <a-button
+              size="small"
+              status="danger"
+              @click="deleteAppleCardHandler(record.id)"
+              >删除</a-button
+            >
+          </a-space>
+        </template>
       </a-table>
     </a-card>
-    <add-modal v-model:visible="state.addModalVisible" />
+    <add-modal
+      :id="state.accountId"
+      v-model:visible="state.addModalVisible"
+      :account="state.account"
+    />
   </div>
 </template>
 
@@ -87,9 +110,12 @@
   import { reactive, ref, watch } from 'vue';
   import {
     AppleCardParams,
+    AppleCardRecordWithID,
     AppleCardResRecord,
+    deleteAppleCard,
     queryAppleCardList,
   } from '@/api/apple-card-info';
+  import { Notification } from '@arco-design/web-vue';
   import AddModal from './components/add-modal.vue';
 
   const basePagination: Pagination = {
@@ -113,18 +139,18 @@
       title: '密码',
       dataIndex: 'password',
     },
-    {
-      title: '今日充值金额',
-      dataIndex: 'todayRechargeAmount',
-      ellipsis: true,
-      tooltip: true,
-    },
-    {
-      title: '今日充值笔数',
-      dataIndex: 'todayRechargeCount',
-      ellipsis: true,
-      tooltip: true,
-    },
+    // {
+    //   title: '今日充值金额',
+    //   dataIndex: 'todayRechargeAmount',
+    //   ellipsis: true,
+    //   tooltip: true,
+    // },
+    // {
+    //   title: '今日充值笔数',
+    //   dataIndex: 'todayRechargeCount',
+    //   ellipsis: true,
+    //   tooltip: true,
+    // },
     {
       title: '状态',
       dataIndex: 'status',
@@ -148,7 +174,8 @@
   const state = reactive({
     addModalVisible: false,
     deployModalVisible: false,
-    selectedUid: '',
+    accountId: '',
+    account: '',
   });
 
   const fetchData = async (
@@ -172,6 +199,7 @@
   const onPageChange = (current: number) => {
     fetchData({ ...basePagination, current });
   };
+
   const search = () => {
     fetchData({
       ...basePagination,
@@ -181,8 +209,26 @@
   const reset = () => {
     formModel.value = generateFormModel();
   };
-  const showAddModel = () => {
+
+  const deleteAppleCardHandler = async (id: string) => {
+    // TODO: delete apple card
+    try {
+      const res = await deleteAppleCard({ id });
+    } catch {
+      Notification.error({
+        id: 'appleAccountNotice',
+        content: '删除苹果卡失败',
+        closable: true,
+      });
+    } finally {
+      search();
+    }
+  };
+
+  const showAddModel = (record: AppleCardRecordWithID) => {
     state.addModalVisible = true;
+    state.accountId = record.id;
+    state.account = record.account;
   };
   watch(
     () => state.addModalVisible,

src/views/apple-card-info/recharge-history/components/recharge-history.vue

@@ -1,7 +1,12 @@
 <template>
-  <a-modal v-model:visible="state.visible">
+  <a-modal v-model:visible="state.visible" title="充值操作日志">
     <div v-if="props.orderNo !== ''">
-      <a-radio-group v-mode="state.isReverse" type="button">
+      <a-radio-group
+        v-mode="state.isReverse"
+        type="button"
+        size="mini"
+        class="sort-btn"
+      >
         <a-radio :value="true">正序</a-radio>
         <a-radio :value="false">逆序</a-radio>
       </a-radio-group>
@@ -33,7 +38,6 @@
     },
   });
   const emit = defineEmits<{
-    // <eventName>: <expected arguments>
     visible: [value: boolean];
   }>();
 
@@ -46,14 +50,14 @@
 
   watch(
     () => state.visible,
-    (newValue, _) => {
+    (newValue) => {
       emit('visible', newValue);
     }
   );
 
   watch(
     () => props.visibile,
-    (newValue, _) => {
+    (newValue) => {
       state.visible = newValue;
     }
   );
@@ -73,3 +77,9 @@
     }
   };
 </script>
+
+<style lang="less" scoped>
+  .sort-btn {
+    float: right;
+  }
+</style>

src/views/apple-card-info/recharge-history/index.vue

@@ -63,7 +63,7 @@
         </template>
         <template #operations="{ record }">
           <a-button size="small" @click="showRechargeHistory(record.id)"
-            >充值记录</a-button
+            >日志</a-button
           >
         </template>
       </a-table>
@@ -111,8 +111,12 @@
       slotName: 'orderNo',
     },
     {
-      title: '账号',
-      dataIndex: 'account',
+      title: '商户订单号',
+      dataIndex: 'attach',
+    },
+    {
+      title: '分配账号',
+      dataIndex: 'accountInfo.account',
       slotName: 'account',
     },
     {
@@ -139,11 +143,11 @@
       dataIndex: 'createdAt',
       slotName: 'createdAt',
     },
-    {
-      title: '操作',
-      dataIndex: 'operations',
-      slotName: 'operations',
-    },
+    // {
+    //   title: '操作',
+    //   dataIndex: 'operations',
+    //   slotName: 'operations',
+    // },
   ];
   const generateFormModel = () => {
     return {
@@ -162,7 +166,7 @@
     params: AppleCardParams = {
       current: 1,
       pageSize: 20,
-      accountID: accountID as string,
+      // Id: accountID as string,
     }
   ) => {
     setLoading(true);