From 52d57281e1b5ff875ba0a19b6bbfc2f27b4830fb Mon Sep 17 00:00:00 2001
From: CNine <cnine229@gmail.com>
Date: Sat, 1 Feb 2020 22:36:48 +0800
Subject: [PATCH] feat(roll-tools-api): add single qrcode generate demo

---
 src/api/roll-tools-api.js                     | 10 +++
 src/locales/main/lang/en.json                 |  5 +-
 src/locales/main/lang/zh-CN.json              |  5 +-
 src/routes/admin.js                           |  1 +
 src/store/modules/admin/menu.js               |  4 +
 .../admin/roll-tools-api/qrcode/index.vue     | 86 +++++++++++++++++++
 6 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 src/views/admin/roll-tools-api/qrcode/index.vue

diff --git a/src/api/roll-tools-api.js b/src/api/roll-tools-api.js
index 103ca56..2d7c1cb 100644
--- a/src/api/roll-tools-api.js
+++ b/src/api/roll-tools-api.js
@@ -48,6 +48,16 @@ export const client = () => {
     },
     address: {
       list: () => instance.get('/address/list')
+    },
+    qrcode: {
+      single: (content, { size = 500, type = 1 } = {}) =>
+        instance.get('/qrcode/create/single', {
+          params: {
+            content,
+            size,
+            type
+          }
+        })
     }
   }
 
diff --git a/src/locales/main/lang/en.json b/src/locales/main/lang/en.json
index f1a6995..88a0835 100644
--- a/src/locales/main/lang/en.json
+++ b/src/locales/main/lang/en.json
@@ -65,5 +65,8 @@
   "admin.login.rules.password.required": "password is required",
   "admin.login.rules.username.range": "username must be between {min} and {max} characters",
   "admin.login.rules.password.range": "password must be between {min} and {max} characters",
-  "admin.logout": "Logout"
+  "admin.logout": "Logout",
+  "QR Code": "QR Code",
+  "admin.roll-tools-api.qrcode.placeholder.content": "Please input content",
+  "admin.roll-tools-api.qrcode.generate": "Generate"
 }
diff --git a/src/locales/main/lang/zh-CN.json b/src/locales/main/lang/zh-CN.json
index 099ea2f..1c9bba9 100644
--- a/src/locales/main/lang/zh-CN.json
+++ b/src/locales/main/lang/zh-CN.json
@@ -65,5 +65,8 @@
   "admin.login.rules.password.required": "请填写密码",
   "admin.login.rules.username.range": "用户名在 {min} 到 {max} 个字符内",
   "admin.login.rules.password.range": "密码在 {min} 到 {max} 个字符内",
-  "admin.logout": "退出登陆"
+  "admin.logout": "退出登陆",
+  "QR Code": "二维码",
+  "admin.roll-tools-api.qrcode.placeholder.content": "请输入内容",
+  "admin.roll-tools-api.qrcode.generate": "立即生成"
 }
diff --git a/src/routes/admin.js b/src/routes/admin.js
index fc916a1..3c1f68d 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -40,6 +40,7 @@ export const routes = app => {
           'roll-tools-api/china-cities',
           'roll-tools-api/fuli-images',
           'roll-tools-api/ip-address',
+          'roll-tools-api/qrcode',
           'some-icon',
           'development',
           'forbidden',
diff --git a/src/store/modules/admin/menu.js b/src/store/modules/admin/menu.js
index 0ac2c74..a8eeb54 100644
--- a/src/store/modules/admin/menu.js
+++ b/src/store/modules/admin/menu.js
@@ -37,6 +37,10 @@ export const createMenu = () => [
         label: 'China Cities',
         index: `${pathPrefix}/roll-tools-api/china-cities`
       },
+      {
+        label: 'QR Code',
+        index: `${pathPrefix}/roll-tools-api/qrcode`
+      },
       {
         label: 'Fuli Images',
         index: `${pathPrefix}/roll-tools-api/fuli-images`
diff --git a/src/views/admin/roll-tools-api/qrcode/index.vue b/src/views/admin/roll-tools-api/qrcode/index.vue
new file mode 100644
index 0000000..6f24edf
--- /dev/null
+++ b/src/views/admin/roll-tools-api/qrcode/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <page-container>
+    <template #header>
+      <h2>
+        {{ $t('QR Code') }}
+        <el-link
+          icon="el-icon-link"
+          type="primary"
+          href="https://github.com/MZCretin/RollToolsApi#%E5%85%AB%E7%94%9F%E6%88%90%E4%BA%8C%E7%BB%B4%E7%A0%81"
+          target="_blank"
+          >{{ $t('Document link') }}</el-link
+        >
+      </h2>
+    </template>
+    <el-input
+      type="textarea"
+      :placeholder="$t('admin.roll-tools-api.qrcode.placeholder.content')"
+      v-model="content"
+      maxlength="255"
+      show-word-limit
+    />
+    <p>
+      <el-slider
+        :format-tooltip="v => v + 'px'"
+        v-model="size"
+        :max="maxSize"
+        :min="minSize"
+        show-input
+      ></el-slider>
+    </p>
+    <p>
+      <el-button
+        type="primary"
+        :disabled="!content.length"
+        @click="handleGenerate"
+        >{{ $t('admin.roll-tools-api.qrcode.generate') }}</el-button
+      >
+    </p>
+    <async
+      v-if="confirmed"
+      :api="$rta.apis.qrcode.single"
+      :args="confirmed"
+      :transform="transform"
+    >
+      <template v-slot:default="{ pending, error, data }">
+        <div v-if="pending">
+          Loading ...
+        </div>
+        <div v-else-if="error">
+          {{ error.message }}
+        </div>
+        <div v-else>
+          <el-image
+            :src="data.qrCodeUrl || data.qrCodeBase64"
+            fit="contain"
+          ></el-image>
+        </div>
+      </template>
+    </async>
+  </page-container>
+</template>
+
+<script>
+import { get } from 'lodash'
+
+export default {
+  inject: ['@adminContainer'],
+  data() {
+    return {
+      confirmed: null,
+      content: '',
+      size: 500,
+      maxSize: 1024,
+      minSize: 100
+    }
+  },
+  methods: {
+    transform(result) {
+      return get(result, 'data.data', {})
+    },
+    handleGenerate() {
+      this.confirmed = [this.content, { size: this.size }]
+    }
+  }
+}
+</script>