- Downline User

- Not registered if already exists.
- Forgot Password

src/components/CUserBadge/CUserBadge.scss

@@ -0,0 +1,7 @@
+.myuserbadge{
+  margin-top: 8px;
+  margin-bottom: 8px;
+  border: solid 1px #4198ef;
+  border-radius: 1rem;
+  padding: 2px;
+}

src/components/CUserBadge/CUserBadge.ts

@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import { GlobalStore } from '@store'
+import { UserStore } from '../../store/Modules'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { validationMixin } from 'vuelidate'
+
+import MixinBase from '../../mixins/mixin-base'
+import { IUserFields } from '../../model'
+
+@Component({
+  name: 'CUserBadge',
+  components: {  }
+})
+
+export default class CUserBadge extends MixinBase {
+  @Prop({ required: true }) public index: number
+  @Prop({ required: false, default: false }) public yourinvite: boolean
+  @Prop({ required: true }) public user: IUserFields
+  @Prop({ required: true }) public numpeople: number
+  @Prop({ required: true }) public mycolor: string
+  public $v
+  public $t: any
+
+  public getletter(user) {
+    return user.name[0].toUpperCase()
+  }
+
+  public getnumber(user, index) {
+    return index
+  }
+
+  public getstatecolor(user) {
+    return (user.profile.teleg_id) ? 'green' : 'gray'
+  }
+
+  public getmoneycolor(user) {
+    return (user.made_gift) ? 'green' : 'gray'
+  }
+
+  get madegift() {
+    return UserStore.state.my.made_gift
+  }
+
+  public getzoomcolor(user) {
+    return (user.profile.saw_zoom_presentation) ? 'green' : 'gray'
+  }
+
+  public get2peoplecolor() {
+    return (this.getnumpeople() >= 2) ? 'green' : 'gray'
+  }
+
+  public getnumpeople() {
+    return this.numpeople
+  }
+
+}

src/components/CUserBadge/CUserBadge.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <q-item class="q-my-sm q-pa-sm myuserbadge shadow-5" clickable v-ripple>
+      <q-item-section avatar>
+        <div class="row" style="margin-left: 4px;">
+          <q-avatar v-if="yourinvite" :text-color="mycolor" size="md">
+            {{ getnumber(user, index + 1) }}°
+          </q-avatar>
+          <q-avatar :color="mycolor" text-color="white" size="md">
+            {{ getletter(user) }}
+          </q-avatar>
+        </div>
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label>{{ user.name }} {{ user.surname }}<br>
+          <span class="text-grey">({{ user.username }})</span>
+        </q-item-label>
+        <!--<q-item-label caption lines="1">{{ user.email }}</q-item-label>-->
+      </q-item-section>
+
+      <q-item-section side>
+        <div class="row q-gutter-xs justify-center items-center">
+          <q-icon size="xs" name="fab fa-telegram" :color="getstatecolor(user)"></q-icon>
+          <q-icon size="xs" name="fas fa-video" :color="getzoomcolor(user)"></q-icon>
+          <q-avatar :text-color="mycolor" size="md">
+            {{ getnumpeople() }}
+          </q-avatar>
+          <q-icon size="xs" name="fas fa-user-friends" :color="get2peoplecolor()"></q-icon>
+        </div>
+      </q-item-section>
+    </q-item>
+  </div>
+</template>
+
+<script lang="ts" src="./CUserBadge.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './CUserBadge.scss';
+</style>

src/components/CUserBadge/index.ts

@@ -0,0 +1 @@
+export {default as CUserBadge} from './CUserBadge.vue'