feat: 🚧 继续编写加卡前端代码

feat: 🚧继续编写前端代码
2024-05-16 10:48:31 +08:00
parent c7b646abd3
commit c18d22e2cc
8 changed files with 158 additions and 134 deletions
--- a/src/api/apple-card-info.ts
+++ b/src/api/apple-card-info.ts
@@ -6,13 +6,17 @@ import {
  CommonStrIdParams,
 } from './common';

-export interface AppleCardRecord {
+export interface AppleCardAddRecord {
  account: string;
  password: string;
+}
+
+export interface AppleCardRecord extends AppleCardAddRecord {
+  accountID: string;
  status: 0 | 1 | 2 | 3; // 账号状态

-  blance: number;
-  amount: number;
+  // blance: number;
+  // amount: number;
 }

 export interface AppleCardParams
@@ -40,7 +44,7 @@ export function queryAppleCardList(params: AppleCardParams) {
  );
 }

-export function createAppleCard(data: AppleCardRecord) {
+export function addAppleCard(data: AppleCardAddRecord) {
  return axios.post('/cardInfo/appleCard/create', data);
 }

--- a/src/api/apple-card-recharge-history.ts
+++ b/src/api/apple-card-recharge-history.ts
@@ -19,7 +19,6 @@ export interface AppleCardOperationHistoryList {
  id: number;
  rechargeHistoryId: string;
  operation: string; // 操作
-  status: 0 | 1; // 0 失败，1 成功
  createdAt: string; // 操作时间
 }

--- a/src/views/apple-card-info/card-info/components/add-modal.vue
+++ b/src/views/apple-card-info/card-info/components/add-modal.vue
@@ -0,0 +1,57 @@
+<template>
+  <a-modal
+    :visible="props.visible"
+    :ok-loading="loading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <template #title> 添加账户 </template>
+    <a-form :model="formData">
+      <a-form-item field="account" label="账号" required>
+        <a-input v-model="formData.account" />
+      </a-form-item>
+      <a-form-item field="password" label="密码" required>
+        <a-input v-model="formData.password" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { addAppleCard, AppleCardAddRecord } from '@/api/apple-card-info';
+  import useLoading from '@/hooks/loading';
+  import { ref } from 'vue';
+
+  const generateFormData = () => {
+    return {
+      account: '',
+      password: '',
+    };
+  };
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const formData = ref<AppleCardAddRecord>(generateFormData());
+
+  const { loading, setLoading } = useLoading(false);
+
+  const emit = defineEmits(['update:visible']);
+  const handleOk = async () => {
+    try {
+      setLoading(true);
+      await addAppleCard(formData.value);
+      emit('update:visible', false);
+      formData.value = generateFormData();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleCancel = () => {
+    emit('update:visible', false);
+    formData.value = generateFormData();
+  };
+</script>
--- a/src/views/apple-card-info/card-info/components/trade-detail.vue
+++ b/src/views/apple-card-info/card-info/components/trade-detail.vue
@@ -0,0 +1,3 @@
+<template>
+  <div> </div>
+</template>
--- a/src/views/apple-card-info/card-info/index.vue
+++ b/src/views/apple-card-info/card-info/index.vue
@@ -12,10 +12,10 @@
          >
            <a-row :gutter="16">
              <a-col :span="8">
-                <a-form-item field="merchantName" label="账户名称">
+                <a-form-item field="account" label="账号">
                  <a-input
                    v-model="formModel.account"
-                    placeholder="请输入账户名称"
+                    placeholder="请输入账号"
                  />
                </a-form-item>
              </a-col>
@@ -61,43 +61,16 @@
        :data="renderData"
        :bordered="false"
        @page-change="onPageChange"
-      >
-        <template #index="{ rowIndex }">
-          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
-        </template>
-        <template #status="{ record }">
-          <a-switch
-            v-model="record.status"
-            checked-value="active"
-            unchecked-value="unactive"
-            @change="(value) => changeStatus(record, value)"
-          >
-            <template #checked> 激活 </template>
-            <template #unchecked> 冻结 </template>
-          </a-switch>
-        </template>
-        <template #operations="{ record }">
-          <a-button size="small" @click="showDeploy(record.merchantUid)"
-            >充值记录</a-button
-          >
-        </template>
-      </a-table>
+      />
    </a-card>
-    <!-- <add-modal v-model:visible="state.addModalVisible" />
-    <deploy-modal
-      v-model:visible="state.deployModalVisible"
-      :uid="state.selectedUid"
-    /> -->
+    <add-modal v-model:visible="state.addModalVisible" />
  </div>
 </template>

 <script lang="ts" setup>
-  import {
-    MerchantConfigResRecord,
-    switchMerchantStatus,
-  } from '@/api/merchant-list';
  import useLoading from '@/hooks/loading';
  import { Pagination } from '@/types/global';
+
  import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { reactive, ref, watch } from 'vue';
  import {
@@ -105,6 +78,7 @@
    AppleCardResRecord,
    queryAppleCardList,
  } from '@/api/apple-card-info';
+  import AddModal from './components/add-modal.vue';

  const basePagination: Pagination = {
    current: 1,
@@ -127,18 +101,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',
@@ -198,20 +172,6 @@
  const showAddModel = () => {
    state.addModalVisible = true;
  };
-  const changeStatus = async (
-    record: MerchantConfigResRecord,
-    status: string | number | boolean
-  ) => {
-    try {
-      await switchMerchantStatus({
-        merchantUid: record.merchantUid,
-        status: status as string,
-      });
-      search();
-    } finally {
-      // /
-    }
-  };
  watch(
    () => state.addModalVisible,
    (val) => {
@@ -220,10 +180,6 @@
      }
    }
  );
-  const showDeploy = (uid: string) => {
-    state.deployModalVisible = true;
-    state.selectedUid = uid;
-  };
  fetchData();
 </script>

--- a/src/views/apple-card-info/recharge-history/components/recharge-history.vue
+++ b/src/views/apple-card-info/recharge-history/components/recharge-history.vue
@@ -0,0 +1,50 @@
+<template>
+  <div v-if="props.orderNo !== ''">
+    <a-radio-group v-mode="state.isReverse" type="button">
+      <a-radio :value="true">正序</a-radio>
+      <a-radio :value="false">逆序</a-radio>
+    </a-radio-group>
+    <a-timeline :reverse="state.isReverse">
+      <a-timeline-item
+        v-for="(item, index) in renderData"
+        :key="index"
+        :label="item.createdAt"
+        >{{ renderRechargeText(item.operation) }}</a-timeline-item
+      >
+    </a-timeline>
+  </div>
+  <div v-else> 404 </div>
+</template>
+
+<script setup lang="ts">
+  import { AppleCardOperationHistoryList } from '@/api/apple-card-recharge-history';
+  import { reactive, ref } from 'vue';
+
+  const props = defineProps({
+    orderNo: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const state = reactive<{ isReverse: boolean }>({
+    isReverse: false,
+  });
+
+  const renderData = ref<AppleCardOperationHistoryList[]>([]);
+
+  const renderRechargeText = (operation: string) => {
+    switch (operation) {
+      case '':
+        return '发起充值';
+      case '充值中':
+        return '充值中';
+      case '充值成功':
+        return '充值成功';
+      case '充值失败':
+        return '充值失败';
+      default:
+        return '状态未定义';
+    }
+  };
+</script>
--- a/src/views/apple-card-info/recharge-history/rechargeHistory.vue
+++ b/src/views/apple-card-info/recharge-history/rechargeHistory.vue
@@ -12,7 +12,7 @@
          >
            <a-row :gutter="16">
              <a-col :span="8">
-                <a-form-item field="merchantName" label="账户名称">
+                <a-form-item field="account" label="账号">
                  <a-input
                    v-model="formModel.account"
                    placeholder="请输入账户名称"
@@ -41,18 +41,6 @@
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
-      <a-row style="margin-bottom: 16px">
-        <a-col :span="12">
-          <a-space>
-            <a-button type="primary" @click="showAddModel">
-              <template #icon>
-                <icon-plus />
-              </template>
-              添加账户
-            </a-button>
-          </a-space>
-        </a-col>
-      </a-row>
      <a-table
        row-key="id"
        :loading="loading"
@@ -65,54 +53,39 @@
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
-        <template #status="{ record }">
-          <a-switch
-            v-model="record.status"
-            checked-value="active"
-            unchecked-value="unactive"
-            @change="(value) => changeStatus(record, value)"
-          >
-            <template #checked> 激活 </template>
-            <template #unchecked> 冻结 </template>
-          </a-switch>
-        </template>
        <template #operations="{ record }">
-          <a-button size="small" @click="showDeploy(record.merchantUid)"
+          <a-button size="small" @click="showRechargeHistory(record.id)"
            >充值记录</a-button
          >
        </template>
      </a-table>
    </a-card>
-    <!-- <add-modal v-model:visible="state.addModalVisible" /> -->
-    <!-- <deploy-modal
-      v-model:visible="state.deployModalVisible"
-      :uid="state.selectedUid"
-    /> -->
+    <recharge-history :order-no="state.selectedOrderNo" />
  </div>
 </template>

 <script lang="ts" setup>
-  import {
-    MerchantConfigResRecord,
-    switchMerchantStatus,
-  } from '@/api/merchant-list';
  import useLoading from '@/hooks/loading';
  import { Pagination } from '@/types/global';
  import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { reactive, ref, watch } from 'vue';
-  // import AddModal from './components/add-modal.vue';
-  // import DeployModal from './components/deploy-modal.vue';
  import {
    AppleCardParams,
    AppleCardResRecord,
    queryAppleCardList,
  } from '@/api/apple-card-info';
+  import { useRoute } from 'vue-router';
+  import RechargeHistory from './components/recharge-history.vue';
+
+  const route = useRoute();
+  const { accountID } = route.params;

  const basePagination: Pagination = {
    current: 1,
    pageSize: 20,
  };
  const pagination = reactive({
+    accountID: accountID as string,
    ...basePagination,
  });
  const columns: TableColumnData[] = [
@@ -121,6 +94,11 @@
      dataIndex: 'index',
      slotName: 'index',
    },
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      slotName: 'orderNo',
+    },
    {
      title: '账号',
      dataIndex: 'account',
@@ -148,7 +126,6 @@
  const generateFormModel = () => {
    return {
      account: '',
-      password: '',
    };
  };
  const { loading, setLoading } = useLoading(true);
@@ -157,11 +134,15 @@
  const state = reactive({
    addModalVisible: false,
    deployModalVisible: false,
-    selectedUid: '',
+    selectedOrderNo: '',
  });

  const fetchData = async (
-    params: AppleCardParams = { current: 1, pageSize: 20 }
+    params: AppleCardParams = {
+      current: 1,
+      pageSize: 20,
+      accountID: accountID as string,
+    }
  ) => {
    setLoading(true);
    try {
@@ -190,34 +171,9 @@
  const reset = () => {
    formModel.value = generateFormModel();
  };
-  const showAddModel = () => {
-    state.addModalVisible = true;
-  };
-  const changeStatus = async (
-    record: MerchantConfigResRecord,
-    status: string | number | boolean
-  ) => {
-    try {
-      await switchMerchantStatus({
-        merchantUid: record.merchantUid,
-        status: status as string,
-      });
-      search();
-    } finally {
-      // /
-    }
-  };
-  watch(
-    () => state.addModalVisible,
-    (val) => {
-      if (!val) {
-        search();
-      }
-    }
-  );
-  const showDeploy = (uid: string) => {
+  const showRechargeHistory = (orderNo: string) => {
    state.deployModalVisible = true;
-    state.selectedUid = uid;
+    state.selectedOrderNo = orderNo;
  };
  fetchData();
 </script>
--- a/src/views/merchant-config/index.vue
+++ b/src/views/merchant-config/index.vue
@@ -111,7 +111,6 @@
  import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { reactive, ref, watch } from 'vue';
  import AddModal from './components/add-modal.vue';
-  // import AddDeploy from './components/deploy/add-deploy.vue';
  import DeployModal from './components/deploy-modal.vue';

  const basePagination: Pagination = {