build: 🍺 添加乱七八糟的页面

2024-07-01 11:08:03 +08:00
parent 3808154e04
commit a268476b7c
9 changed files with 289 additions and 151 deletions
--- a/deploy/Dockerfile
+++ b/deploy/Dockerfile
@@ -2,7 +2,7 @@ FROM node:20 as builder

 WORKDIR /build
 COPY . .
-RUN npm i -g nrm && nrm use taobao && npm install -g npm@latest pnpm@9.1.2 && pnpm i && pnpm build
+RUN npm i -g nrm && nrm use taobao && npm install -g npm@latest pnpm@9.4.0 && pnpm i && pnpm build

 FROM nginx:latest

--- a/deploy/docker-compose.yml
+++ b/deploy/docker-compose.yml
@@ -3,14 +3,6 @@ services:
    build:
      context: ../.
      dockerfile: ./deploy/Dockerfile
-    deploy:
-      resources:
-        limits:
-          cpus: '0.8'
-          memory: 3096M
-        reservations:
-          cpus: '0.2'
-          memory: 512M
    container_name: kami_frontend
    image: kami_frontend:0.11
    restart: always
--- a/index.html
+++ b/index.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>卡销解决终端方案</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" type="image/x-icon"
+    href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>卡销终端解决方案</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
--- a/package.json
+++ b/package.json
@@ -107,5 +107,6 @@
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china",
    "gifsicle": "5.2.0"
-  }
+  },
+  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
 }
--- a/src/views/apple-card-info/apple-card-info-history/index.vue
+++ b/src/views/apple-card-info/apple-card-info-history/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['充值账户管理', '账户流水']" />
+    <a-card class="general-card" title="账户流水">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="left"
+          >
+            <a-row :gutter="16">
+              <a-col :span="8">
+                <a-form-item field="account" label="账号">
+                  <a-input
+                    v-model="formModel.account"
+                    placeholder="请输入账号"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col flex="172px" style="text-align: right">
+          <a-space direction="horizontal" :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              搜索
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 0" />
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="pagination"
+        :columns="columns"
+        :data="renderData"
+        :bordered="false"
+        column-resizable:bordered="{cell:true}"
+        @page-change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import useLoading from '@/hooks/loading';
+import { Pagination } from '@/types/global';
+
+import { onMounted, reactive, ref } from 'vue';
+import {
+  AppleCardParams,
+  AppleCardResRecord,
+  queryAppleCardList
+} from '@/api/apple-card-info';
+import { TableColumnData } from '@arco-design/web-vue';
+
+const basePagination: Pagination = {
+  current: 1,
+  pageSize: 20
+};
+const pagination = reactive({
+  ...basePagination,
+  showPageSize: true,
+  pageSizeOptions: [10, 20, 50, 100]
+});
+const columns: TableColumnData[] = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index'
+  },
+  {
+    title: '账号ID',
+    dataIndex: 'accountId'
+  },
+  {
+    title: '账号',
+    dataIndex: 'account'
+  },
+  {
+    title: '充值金额',
+    dataIndex: 'amount'
+  },
+  {
+    title: '充值前余额',
+    dataIndex: 'balance_before'
+  },
+  {
+    title: '充值后余额(itunes计算)',
+    dataIndex: 'balance_after_itunes'
+  },
+  {
+    title: '充值后余额(自然计算)',
+    dataIndex: 'balance_after_autoincrement'
+  },
+  {
+    title: '充值时间',
+    dataIndex: 'createdAt',
+    slotName: 'createdAt'
+  }
+];
+const generateFormModel = () => {
+  return {
+    account: ''
+  };
+};
+const { loading, setLoading } = useLoading(true);
+const renderData = ref<AppleCardResRecord[]>([]);
+const formModel = ref(generateFormModel());
+const state = reactive({
+  addModalVisible: false,
+  deployModalVisible: false,
+  accountId: '',
+  account: ''
+});
+const fetchData = async (
+  params: AppleCardParams = { current: 1, pageSize: 20 }
+) => {
+  setLoading(true);
+  try {
+    const {
+      data: { list, total }
+    } = await queryAppleCardList(params);
+    renderData.value = list;
+    pagination.current = params.current;
+    pagination.pageSize = params.pageSize;
+    pagination.total = total;
+  } catch (err) {
+    // you can report use errorHandler or other
+  } finally {
+    setLoading(false);
+  }
+};
+const onPageChange = (current: number) => {
+  // fetchData({ ...basePagination, current });
+  fetchData({ ...pagination, current });
+};
+const onPageSizeChange = (pageSize: number) => {
+  fetchData({ ...pagination, pageSize });
+};
+const search = () => {
+  fetchData({
+    ...basePagination,
+    ...formModel.value
+  } as unknown as AppleCardParams);
+};
+const reset = () => {
+  formModel.value = generateFormModel();
+};
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 0 20px 20px;
+}
+</style>
--- a/src/views/apple-card-info/card-info/details/index.vue
+++ b/src/views/apple-card-info/card-info/details/index.vue
@@ -1,75 +1,36 @@
 <template>
-  <div class="container">
-    <Breadcrumb :items="['充值账户管理', '账户流水']" />
-    <a-card class="general-card" title="账户流水">
-      <a-row>
-        <a-col :flex="1">
-          <a-form
-            :model="formModel"
-            :label-col-props="{ span: 6 }"
-            :wrapper-col-props="{ span: 18 }"
-            label-align="left"
-          >
-            <a-row :gutter="16">
-              <a-col :span="8">
-                <a-form-item field="account" label="账号">
-                  <a-input
-                    v-model="formModel.account"
-                    placeholder="请输入账号"
-                  />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </a-col>
-        <a-divider style="height: 42px" direction="vertical" />
-        <a-col flex="172px" style="text-align: right">
-          <a-space direction="horizontal" :size="18">
-            <a-button type="primary" @click="search">
-              <template #icon>
-                <icon-search />
-              </template>
-              搜索
-            </a-button>
-            <a-button @click="reset">
-              <template #icon>
-                <icon-refresh />
-              </template>
-              重置
-            </a-button>
-          </a-space>
-        </a-col>
-      </a-row>
-      <a-divider style="margin-top: 0" />
-      <a-table
-        row-key="id"
-        :loading="loading"
-        :pagination="pagination"
-        :columns="columns"
-        :data="renderData"
-        :bordered="false"
-        column-resizable:bordered="{cell:true}"
-        @page-change="onPageChange"
-        @page-size-change="onPageSizeChange"
-      />
-    </a-card>
-  </div>
+  <a-drawer
+    v-model:visible="drawVisible"
+    width="40%"
+    unmountOnClose
+    @close="closeDrawer"
+  >
+    <template #title>账户流水</template>
+    <a-table
+      row-key="id"
+      :loading="loading"
+      :pagination="pagination"
+      :columns="columns"
+      :data="renderData"
+      :bordered="false"
+      column-resizable:bordered="{cell:true}"
+      @page-change="onPageChange"
+      @page-size-change="onPageSizeChange"
+    />
+  </a-drawer>
 </template>

 <script lang="ts" setup>
 import useLoading from '@/hooks/loading';
 import { Pagination } from '@/types/global';

-import { onMounted, reactive, ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import {
  AppleCardParams,
-  AppleCardRecordWithID,
  AppleCardResRecord,
-  deleteAppleCard,
-  downloadAppleAccountTemplteAPI,
  queryAppleCardList
 } from '@/api/apple-card-info';
-import { FileItem, Notification, TableColumnData } from '@arco-design/web-vue';
+import { TableColumnData } from '@arco-design/web-vue';

 const basePagination: Pagination = {
  current: 1,
@@ -82,56 +43,46 @@ const pagination = reactive({
 });
 const columns: TableColumnData[] = [
  {
-    title: '序号',
-    dataIndex: 'index',
-    slotName: 'index'
+    title: '充值金额',
+    dataIndex: 'amount'
  },
  {
-    title: '账号',
-    dataIndex: 'account'
+    title: '充值前余额',
+    dataIndex: 'balance_before'
  },
  {
-    title: '密码',
-    dataIndex: 'password'
+    title: '充值后余额(itunes计算)',
+    dataIndex: 'balance_after_itunes'
  },
  {
-    title: '总充值金额',
-    dataIndex: 'balance',
-    ellipsis: true,
-    tooltip: true
+    title: '充值后余额(自然计算)',
+    dataIndex: 'balance_after_autoincrement'
  },
  {
-    title: '今日充值金额',
-    dataIndex: 'todayRechargeAmount',
-    ellipsis: true,
-    tooltip: true
-  },
-  {
-    title: '今日充值笔数',
-    dataIndex: 'todayRechargeCount',
-    ellipsis: true,
-    tooltip: true
-  },
-  {
-    title: '创建时间',
+    title: '充值时间',
    dataIndex: 'createdAt',
    slotName: 'createdAt'
  }
 ];
-const generateFormModel = () => {
-  return {
-    account: ''
-  };
-};
 const { loading, setLoading } = useLoading(true);
 const renderData = ref<AppleCardResRecord[]>([]);
-const formModel = ref(generateFormModel());
+
+const props = defineProps<{
+  visible: boolean;
+  accountId: string;
+}>();
 const state = reactive({
-  addModalVisible: false,
-  deployModalVisible: false,
-  accountId: '',
-  account: ''
+  visible: false
 });
+const emits = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+onMounted(() => {
+  state.visible = props.visible;
+});
+
+const drawVisible = computed(() => props.visible);

 const fetchData = async (
  params: AppleCardParams = { current: 1, pageSize: 20 }
@@ -146,13 +97,12 @@ const fetchData = async (
    pagination.pageSize = params.pageSize;
    pagination.total = total;
  } catch (err) {
-    // you can report use errorHandler or other
+    console.error(err);
  } finally {
    setLoading(false);
  }
 };
 const onPageChange = (current: number) => {
-  // fetchData({ ...basePagination, current });
  fetchData({ ...pagination, current });
 };
 const onPageSizeChange = (pageSize: number) => {
@@ -160,12 +110,11 @@ const onPageSizeChange = (pageSize: number) => {
 };
 const search = () => {
  fetchData({
-    ...basePagination,
-    ...formModel.value
+    ...basePagination
  } as unknown as AppleCardParams);
 };
-const reset = () => {
-  formModel.value = generateFormModel();
+const closeDrawer = () => {
+  emits('update:visible', false);
 };
 onMounted(() => {
  fetchData();
--- a/src/views/apple-card-info/card-info/index.vue
+++ b/src/views/apple-card-info/card-info/index.vue
@@ -101,6 +101,13 @@
            >
              修改
            </a-button>
+            <a-button
+              size="small"
+              status="success"
+              @click="showDetailModel(record)"
+            >
+              详情
+            </a-button>
            <a-button
              size="small"
              status="danger"
@@ -117,6 +124,10 @@
      v-model:visible="state.addModalVisible"
      :account="state.account"
    />
+    <account-detail
+      v-model:visible="state.accountDetailVisible"
+      :accountId="state.accountId"
+    />
  </div>
 </template>

@@ -137,6 +148,7 @@ import { FileItem, Notification, TableColumnData } from '@arco-design/web-vue';
 import { getToken } from '@/utils/auth';
 import { getAPIBaseUrl } from '@/api/utils';
 import AddModal from './components/add-modal.vue';
+import AccountDetail from './details/index.vue';

 const basePagination: Pagination = {
  current: 1,
@@ -220,6 +232,7 @@ const formModel = ref(generateFormModel());
 const state = reactive({
  addModalVisible: false,
  deployModalVisible: false,
+  accountDetailVisible: false,
  accountId: '',
  account: ''
 });
@@ -278,6 +291,10 @@ const showAddModel = (record: AppleCardRecordWithID) => {
  state.accountId = record.id;
  state.account = record.account;
 };
+const showDetailModel = (record: AppleCardRecordWithID) => {
+  state.accountDetailVisible = true;
+  state.accountId = record.id;
+};
 watch(
  () => state.addModalVisible,
  val => {
--- a/src/views/apple-card-info/recharge-history/components/recharge-history.vue
+++ b/src/views/apple-card-info/recharge-history/components/recharge-history.vue
@@ -5,6 +5,7 @@
    title="充值操作日志"
    :footer="false"
    unmount-on-close
+    @close="closeDrawer"
  >
    <div v-if="props.orderNo !== ''">
      <a-radio-group
@@ -71,13 +72,6 @@ const getAppleCardOperationHistoryList = async () => {
  renderData.value = res.data.list;
 };

-watch(
-  () => state.visible,
-  newValue => {
-    emit('update:visible', newValue);
-  }
-);
-
 watch(
  () => props.visible,
  newValue => {
@@ -89,6 +83,10 @@ watch(
    }
  }
 );
+
+const closeDrawer = () => {
+  emit('update:visible', false);
+};
 </script>

 <style lang="less" scoped>
--- a/src/views/user-center/management/index.vue
+++ b/src/views/user-center/management/index.vue
@@ -61,26 +61,34 @@
        row-key="id"
        :loading="loading"
        :pagination="pagination"
-        :columns="cloneColumns as TableColumnData[]"
+        :columns="columns"
        :data="renderData"
        :bordered="false"
-        :size="size"
        @page-change="onPageChange"
-      ></a-table>
+      >
+        <template #operation="{ record }">
+          <a-space>
+            <a-button
+              status="danger"
+              size="small"
+              @click="deleteRecord(record.id)"
+            >
+              删除
+            </a-button>
+          </a-space>
+        </template>
+      </a-table>
    </a-card>
  </div>
 </template>

 <script lang="ts" setup>
-import { computed, ref, reactive } from 'vue';
+import { computed, ref, reactive, onMounted } from 'vue';
 import useLoading from '@/hooks/loading';
 import { queryPolicyList, PolicyRecord, PolicyParams } from '@/api/list';
 import { Pagination } from '@/types/global';
 import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';

-type SizeProps = 'mini' | 'small' | 'medium' | 'large';
-type Column = TableColumnData & { checked?: true };
-
 const generateFormModel = () => {
  return {
    number: '',
@@ -94,10 +102,6 @@ const generateFormModel = () => {
 const { loading, setLoading } = useLoading(true);
 const renderData = ref<PolicyRecord[]>([]);
 const formModel = ref(generateFormModel());
-const cloneColumns = ref<Column[]>([]);
-const showColumns = ref<Column[]>([]);
-
-const size = ref<SizeProps>('medium');

 const basePagination: Pagination = {
  current: 1,
@@ -109,23 +113,20 @@ const pagination = reactive({
 const columns = computed<TableColumnData[]>(() => [
  {
    title: '用户ID',
-    dataIndex: 'user_id'
+    dataIndex: 'id'
  },
  {
    title: '用户名',
    dataIndex: 'username'
  },
  {
-    title: '手机号',
-    dataIndex: 'phone'
+    title: '状态',
+    dataIndex: 'user_status'
  },
  {
-    title: '管理员',
-    dataIndex: 'is_admin'
-  },
-  {
-    title: '创建日期',
-    dataIndex: 'created_at'
+    title: '操作',
+    dataIndex: 'operation',
+    slotName: 'operation'
  }
 ]);
 const fetchData = async (
@@ -138,12 +139,11 @@ const fetchData = async (
    pagination.current = params.current;
    pagination.total = data.total;
  } catch (err) {
-    // you can report use errorHandler or other
+    console.error(err);
  } finally {
    setLoading(false);
  }
 };
-
 const search = () => {
  fetchData({
    ...basePagination,
@@ -154,10 +154,14 @@ const onPageChange = (current: number) => {
  fetchData({ ...basePagination, current });
 };

-fetchData();
+onMounted(() => {
+  fetchData();
+});
+
 const reset = () => {
  formModel.value = generateFormModel();
 };
+const deleteRecord = (id: string) => {};
 </script>

 <script lang="ts">