add sign up page

2026-05-18 16:54:25 +08:00 · 2023-07-08 00:29:22 +08:00
parent 9d0b874488
commit 48d9a09307
9 changed files with 828 additions and 44 deletions
@@ -0,0 +1,137 @@
+<template>
+    <i class="item-icon" :class="icon" :style="style">
+        <slot></slot>
+    </i>
+</template>
+
+<script>
+import iconConstatns from '@/consts/icon.js';
+import colorConstatns from '@/consts/color.js';
+import { isNumber } from '@/lib/common.js';
+
+export default {
+    props: [
+        'iconType',
+        'iconId',
+        'color',
+        'defaultColor',
+        'additionalColorAttr'
+    ],
+    computed: {
+        icon() {
+            if (this.iconType === 'account') {
+                return this.getAccountIcon(this.iconId);
+            } else if (this.iconType === 'category') {
+                return this.getCategoryIcon(this.iconId);
+            } else if (this.iconType === 'fixed') {
+                return this.iconId;
+            } else {
+                return '';
+            }
+        },
+        style() {
+            let defaultColor = 'var(--default-icon-color)';
+
+            if (this.defaultColor) {
+                defaultColor = this.defaultColor;
+            }
+
+            if (this.iconType === 'account') {
+                return this.getAccountIconStyle(this.color, defaultColor, this.additionalColorAttr);
+            } else if (this.iconType === 'category') {
+                return this.getCategoryIconStyle(this.color, defaultColor, this.additionalColorAttr);
+            } else {
+                return this.getDefaultIconStyle(this.color, defaultColor, this.additionalColorAttr);
+            }
+        }
+    },
+    methods: {
+        getAccountIcon(iconId) {
+            if (isNumber(iconId)) {
+                iconId = iconId.toString();
+            }
+
+            if (!iconConstatns.allAccountIcons[iconId]) {
+                return iconConstatns.defaultAccountIcon.icon;
+            }
+
+            return iconConstatns.allAccountIcons[iconId].icon;
+        },
+        getCategoryIcon(iconId) {
+            if (isNumber(iconId)) {
+                iconId = iconId.toString();
+            }
+
+            if (!iconConstatns.allCategoryIcons[iconId]) {
+                return iconConstatns.defaultCategoryIcon.icon;
+            }
+
+            return iconConstatns.allCategoryIcons[iconId].icon;
+        },
+        getAccountIconStyle(color, defaultColor, additionalColorAttr) {
+            if (color && color !== colorConstatns.defaultAccountColor) {
+                color = '#' + color;
+            } else {
+                color = defaultColor;
+            }
+
+            const ret = {
+                color: color
+            };
+
+            if (additionalColorAttr) {
+                ret[additionalColorAttr] = color;
+            }
+
+            return ret;
+        },
+        getCategoryIconStyle(color, defaultColor, additionalColorAttr) {
+            if (color && color !== colorConstatns.defaultCategoryColor) {
+                color = '#' + color;
+            } else {
+                color = defaultColor;
+            }
+
+            const ret = {
+                color: color
+            };
+
+            if (additionalColorAttr) {
+                ret[additionalColorAttr] = color;
+            }
+
+            return ret;
+        },
+        getDefaultIconStyle(color, defaultColor, additionalColorAttr) {
+            if (color && color !== colorConstatns.defaultColor) {
+                color = '#' + color;
+            } else {
+                color = defaultColor;
+            }
+
+            const ret = {
+                color: color
+            };
+
+            if (additionalColorAttr) {
+                ret[additionalColorAttr] = color;
+            }
+
+            return ret;
+        }
+    }
+}
+</script>
+
+<style>
+.item-icon {
+    font-size: var(--ebk-icon-font-size);
+    display: inline-block;
+    vertical-align: middle;
+    background-size: 100% auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    font-style: normal;
+    position: relative;
+}
+</style>