Base Login

components/affiliate/AffiliateInfo.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="has-background-light px-5 pt-4 pb-2">
+      <Caption v-bind="{ title: 'Thông tin cộng tác viên' }"></Caption>
+      <div class="columns is-multiline mx-0">
+        <div class="column is-2">
+          <div class="field">
+            <label class="label">Mã số</label>
+            <div class="control fs-16">
+              {{ `CT${reginfo.user}` }}
+            </div>
+          </div>
+        </div>
+        <div class="column is-5">
+          <div class="field">
+            <label class="label">Link</label>
+            <div class="control fs-16">
+              <a @click="openLink()">{{ reginfo.link }}</a>
+              <p class="mt-2 hyperlink has-text-primary">
+                <span class="material-symbols-outlined" @click="copyContent()">content_copy</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="column is-3">
+          <label class="label">QR code</label>
+          <div class="field is-grouped">
+            <div class="control">
+              <img style="width: 80px" :src="`${$path()}static/files/${reginfo.qrcode}`" />
+            </div>
+            <div class="control">
+              <p class="hyperlink has-text-primary">
+                <span class="material-symbols-outlined" @click="download()">download</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="column is-2">
+          <div class="field">
+            <label class="label">Số dư</label>
+            <div class="control fs-16">
+              <span class="has-text-danger">{{ $numtoString(reginfo.balance) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mt-5" v-if="reginfo.status__code === 'wait'">
+      <p class="fs-16 has-text-primary">
+        Bạn đã đăng ký thành công. Vui lòng chờ phản hồi từ {{ company.name }}. Xin cảm ơn.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      company: this.$companyInfo(),
+    };
+  },
+  props: ['reginfo'],
+
+  methods: {
+    copyContent() {
+      this.$copyToClipboard(this.reginfo.link);
+    },
+    openLink() {
+      window.location.href = this.reginfo.link;
+    },
+    async download() {
+      let ulr = `${this.$path()}download?type=file&name=${this.reginfo.qrcode}`;
+      let response = await fetch(ulr);
+      const blob = await response.blob();
+      const urlDownload = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = urlDownload;
+      link.setAttribute('download', this.reginfo.qrcode);
+      link.click();
+      link.remove();
+    },
+  },
+};
+</script>