perf(views): 初步编写"创建账号"步骤页面

src/views/create-customer/CreateAccount.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+
+import ConfirmModal from '@/components/ConfirmModal.vue';
+import { t } from '@/i18n';
+
+import AddAccount from './AddAccount.vue';
+
+import type { AccountItem } from '@/types';
+
+const accountList = ref<AccountItem[]>([]);
+const accountIndex = ref<number>(0);
+const addAccount = () => {
+  accountList.value.push({
+    name: '',
+  });
+};
+const modalComponentRef = useTemplateRef('modalComponent');
+const deleteClick = (index: number) => {
+  modalComponentRef.value?.showView();
+  accountIndex.value = index;
+};
+const confirm = () => {
+  modalComponentRef.value?.hideView();
+  accountList.value.splice(accountIndex.value, 1);
+};
+</script>
+
+<template>
+  <div>
+    <div class="account"><span class="account-text">*</span>创建账号</div>
+    <AFlex wrap="wrap">
+      <div v-for="(item, index) in accountList" :key="index" class="account-list">
+        <AddAccount :index="index" :form="item" @deleteClick="deleteClick" />
+      </div>
+    </AFlex>
+
+    <AButton type="primary" ghost class="icon-button button-style" @click="addAccount">
+      <AFlex align="center">
+        <SvgIcon name="plus" />
+        <span> 增加账号 </span>
+      </AFlex>
+    </AButton>
+    <ConfirmModal
+      ref="modalComponent"
+      :title="t('common.deleteConfirmation')"
+      :description-text="t('common.confirmDeletion')"
+      :icon="{ name: 'delete' }"
+      :icon-bg-color="'#F56C6C'"
+      @confirm="confirm"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.account-list {
+  margin-right: 40px;
+  margin-bottom: 16px;
+}
+
+.button-style {
+  margin-top: 24px;
+}
+
+.account {
+  margin-bottom: 16px;
+  color: rgb(0 0 0 / 85%);
+}
+
+.account-text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #e02020;
+  text-align: left;
+}
+</style>