feat(roll-tools-api): add single qrcode generate demo

d2-projects · Feb 1, 2020 · 52d5728 · 52d5728
1 parent 248b07e
commit 52d5728
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>