feat: multiple accounts split page

Author: Candinya

src/pages/Characters.vue

@@ -10,13 +10,24 @@
             >
             <span class="align-middle"> , you have {{ characters.length }} characters, choose one to continue</span>
         </p>
-        <CharacterCard
-            class="character mt-4 cursor-pointer mb-5"
-            v-for="character in characters"
-            :character="character"
-            :key="character.username"
-            @click="choose(character)"
-        />
+        <div class="my-5">
+            <CharacterCard
+                class="character mt-4 cursor-pointer mb-5"
+                v-for="character in characters.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
+                :character="character"
+                :key="character.username"
+                @click="choose(character)"
+            />
+            <el-pagination
+                class="justify-center"
+                background
+                layout="prev, pager, next"
+                :total="characters.length"
+                hide-on-single-page
+                :page-size="pageSize"
+                v-model:current-page="currentPage"
+            />
+        </div>
         <el-card class="relative cursor-pointer font-bold text-center" shadow="hover" @click="router.push('/mint')">
             + Mint Another One
         </el-card>
@@ -44,6 +55,9 @@ if (store.state.settings.address) {
 const address = `${store.state.settings.address!.slice(0, 6)}...${store.state.settings.address!.slice(-4)}`;
 const loading = ref(false);
 
+const currentPage = ref(1);
+const pageSize = ref(5);
+
 const choose = async (character: Profile) => {
     loading.value = true;
     await store.dispatch('setSettings', {