add sign up page

2026-05-16 07:57:33 +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>
@@ -0,0 +1,99 @@
+<template>
+    <div class="d-flex" :style="`min-width: ${minWidth}px`" v-if="minWidth"></div>
+    <v-slide-group class="slide-group-with-stepper mb-10 hidden-xs" show-arrows>
+        <v-slide-group-item :key="idx" v-for="(step, idx) in steps">
+            <div class="cursor-pointer mx-1"
+                 :class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
+                 @click="changeStep(step)">
+                <div class="d-flex align-center gap-x-2">
+                    <div class="d-flex align-center gap-2">
+                        <div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
+                            <div class="slide-group-stepper-indicator"></div>
+                        </div>
+                        <h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
+                    </div>
+                    <div style="line-height: 0;">
+                        <h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
+                        <span class="text-xs step-subtitle">{{ step.subTitle }}</span>
+                    </div>
+                    <div class="slide-group-stepper-link-line" v-if="idx < steps.length - 1"></div>
+                </div>
+            </div>
+        </v-slide-group-item>
+    </v-slide-group>
+    <v-slide-group class="slide-group-with-stepper mb-3 hidden-sm-and-up" direction="vertical">
+        <v-slide-group-item :key="idx" v-for="(step, idx) in steps">
+            <div class="cursor-pointer mx-1 mb-3"
+                 :class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
+                 @click="changeStep(step)">
+                <div class="d-flex align-center gap-x-2">
+                    <div class="d-flex align-center gap-2">
+                        <div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
+                            <div class="slide-group-stepper-indicator"></div>
+                        </div>
+                        <h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
+                    </div>
+                    <div style="line-height: 0;">
+                        <h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
+                        <span class="text-xs step-subtitle">{{ step.subTitle }}</span>
+                    </div>
+                </div>
+            </div>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>
+
+<script>
+export default {
+    props: [
+        'steps',
+        'currentStep',
+        'minWidth'
+    ],
+    emits: [
+        'step:change'
+    ],
+    methods: {
+        changeStep(step) {
+            this.$emit('step:change', step.name);
+        },
+        isStepActive(step) {
+            return this.currentStep === step.name;
+        },
+        isStepCompleted(stepIndex) {
+            for (let i = 0; i < this.steps.length; i++) {
+                if (this.steps[i].name === this.currentStep) {
+                    return stepIndex < i;
+                }
+            }
+
+            return false;
+        }
+    }
+}
+</script>
+
+<style>
+.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-link-line {
+    background-color: rgb(var(--v-theme-primary));
+    border-radius: 0.1875rem;
+    block-size: .1875rem;
+    inline-size: 3.75rem;
+    opacity: var(--v-activated-opacity);
+}
+
+.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-indicator {
+    background-color: rgb(var(--v-theme-surface));
+    border: 0.3125rem solid rgb(var(--v-theme-primary));
+    border-radius: 50%;
+    block-size: 1.25rem;
+    inline-size: 1.25rem;
+    opacity: var(--v-activated-opacity);
+}
+
+.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-indicator,
+.slide-group-with-stepper .v-slide-group__content .slide-group-step-active .slide-group-stepper-indicator,
+.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-link-line {
+    opacity: 1;
+}
+</style>