二维码生成添加历史记录 #17

src/tool/cache.js

-import lsCache from "lscache"
-import p from "../../package"
+import lsCache from 'lscache'
+import p from '../../package'
 
 // 缓存key添加版本号
 const cacheNameConvert = function (name) {
-    return "v_" + (p.version.split('.').join("")) + '_' + name
-};
+    return 'v_' + (p.version.split('.').join('')) + '_' + name
+}
 
 export default {
     // expiry 过期时间 秒
-    set(name, value, expiry = 0) {
-        return lsCache.set(cacheNameConvert(name), value, expiry / 60);
+    set (name, value, expiry = 0) {
+        return lsCache.set(cacheNameConvert(name), value, expiry / 60)
     },
-    get(name, defaultValue = null) {
-        let data = lsCache.get(cacheNameConvert(name));
+    get (name, defaultValue = null) {
+        let data = lsCache.get(cacheNameConvert(name))
         return data ? data : defaultValue
     },
-    setnNoVersion(name, value, expiry = 0) {
-        return lsCache.set('nv_' + name, value, expiry / 60);
+    remove (name) {
+        lsCache.remove(cacheNameConvert(name))
     },
-    getNoVersion(name, defaultValue = null) {
-        let data = lsCache.get('nv_' + name);
+    setnNoVersion (name, value, expiry = 0) {
+        return lsCache.set('nv_' + name, value, expiry / 60)
+    },
+    getNoVersion (name, defaultValue = null) {
+        let data = lsCache.get('nv_' + name)
         return data ? data : defaultValue
-    }
+    },
 }
\ No newline at end of file

src/views/tool/qrCode.vue

 <template>
-    <div>
-        <Tabs v-model="current.operation">
-            <TabPane label="二维码生成" name="generate">
-                <Row :gutter="16">
-                    <Col span="12">
-                        <Input v-model="current.generateInput" :rows="14" type="textarea" placeholder="内容"></Input>
-                        <option-block>
-                            <FormItem>
-                                <Button type="primary" @click="generate()">生成</Button>
-                            </FormItem>
-                            <FormItem>
-                                <Checkbox v-model="current.generateIsShort">生成短连接</Checkbox>
-                            </FormItem>
-                            <FormItem v-if="current.generateIsShort">
-                                <Alert>短链接API由 t.cn 提供</Alert>
-                            </FormItem>
-                        </option-block>
-                    </Col>
-                    <Col span="12">
-                        <div style="text-align: center" v-html="current.generateOutput"></div>
-                        <p style="text-align: center" v-if="current.generateIsShort && current.generateShortUrl">短连接:{{current.generateShortUrl}}</p>
-                    </Col>
-                </Row>
-            </TabPane>
-            <TabPane label="二维码解析" name="reader">
-                <Row :gutter="16">
-                    <Col span="12">
-                        <Input v-model="current.readerInput" :rows="5" type="textarea" placeholder="请输入二维码图片地址或点击下方按钮上传图片"></Input>
-                        <option-block>
-                            <FormItem>
-                                <Button type="primary" @click="reader()">解析</Button>
-                            </FormItem>
-                            <FormItem>
-                                <Upload action="#" :before-upload="handleUpload">
-                                    <Button icon="ios-cloud-upload-outline">上传图片</Button>
-                                </Upload>
-                            </FormItem>
-                        </option-block>
-                        <Input v-model="current.readerOutput" :rows="5" type="textarea" placeholder="解析结果"></Input>
-                    </Col>
-                    <Col span="12" style="text-align: center" v-html="readerInputImg"></Col>
-                </Row>
-            </TabPane>
-        </Tabs>
-    </div>
+  <div>
+    <Tabs v-model="current.operation">
+      <TabPane label="二维码生成" name="generate">
+        <Row :gutter="16">
+          <Col span="14">
+            <Input v-model="current.generateInput" :rows="14" type="textarea" placeholder="内容"></Input>
+            <option-block>
+              <FormItem>
+                <Button type="primary" @click="generate()">生成</Button>
+              </FormItem>
+              <FormItem v-if="generateHistory.length() > 0">
+                <Dropdown placement="top-start" trigger="click" style="margin-left: 10px" @on-click="history">
+                  <a href="javascript:void(0)">
+                    历史记录
+                    <Icon type="ios-arrow-down"></Icon>
+                  </a>
+                  <DropdownMenu slot="list">
+                    <DropdownItem v-for="(v,i) in generateHistory.lists()" :v-key="i" :name="i">{{substr(v.input)}}</DropdownItem>
+                    <DropdownItem divided name="clear">清空历史记录</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+              </FormItem>
+              <FormItem>
+                <Checkbox v-model="current.generateIsShort">生成短连接</Checkbox>
+              </FormItem>
+              <FormItem v-if="current.generateIsShort">
+                <Alert>短链接API由 t.cn 提供</Alert>
+              </FormItem>
+            </option-block>
+          </Col>
+          <Col span="10">
+            <div style="text-align: center" v-html="current.generateOutput"></div>
+            <p style="text-align: center" v-if="current.generateIsShort && current.generateShortUrl">
+              短连接:{{current.generateShortUrl}}</p>
+          </Col>
+        </Row>
+      </TabPane>
+      <TabPane label="二维码解析" name="reader">
+        <Row :gutter="16">
+          <Col span="14">
+            <Input v-model="current.readerInput" :rows="5" type="textarea" placeholder="请输入二维码图片地址或点击下方按钮上传图片"></Input>
+            <option-block>
+              <FormItem>
+                <Button type="primary" @click="reader()">解析</Button>
+              </FormItem>
+              <FormItem>
+                <Upload action="#" :before-upload="handleUpload">
+                  <Button icon="ios-cloud-upload-outline">上传图片</Button>
+                </Upload>
+              </FormItem>
+            </option-block>
+            <Input v-model="current.readerOutput" :rows="5" type="textarea" placeholder="解析结果"></Input>
+          </Col>
+          <Col span="10" style="text-align: center" v-html="readerInputImg"></Col>
+        </Row>
+      </TabPane>
+    </Tabs>
+  </div>
 </template>
 <script>
-    import generator from "qrcode"
-    import qrcodeParser from "qrcode-parser"
-    import request from "ajax-request"
-    import isUrl from "is-url"
+    import generator from 'qrcode'
+    import qrcodeParser from 'qrcode-parser'
+    import request from 'ajax-request'
+    import cache from '../../tool/cache'
+    import isUrl from 'is-url'
+    import { trim } from '../../helper'
+
+    const generateHistoryCacheName = 'qrCodeGenerateHistoryCacheName'
+    const generateHistoryMaxLength = 15
+
+    class generateHistory {
+        data = []
+
+        constructor () {
+            this.data = cache.get(generateHistoryCacheName, [])
+        }
+
+        find (value) {
+            for (let i = 0; i < this.data.length; i++) {
+                if (this.data[i].input === value.input && this.data[i].isShort === value.isShort) {
+                    return true
+                }
+            }
+            return false
+        }
+
+        push (value) {
+            if (this.find(value)) {
+                return
+            }
+            if (this.data.length > generateHistoryMaxLength) {
+                this.data.pop()
+            }
+            this.data.push(value)
+            cache.set(generateHistoryCacheName, this.data, 86400)
+        }
+
+        getValue (index) {
+            return this.data[index]
+        }
+
+        lists () {
+            return this.data
+        }
+
+        length () {
+            return this.data.length
+        }
+
+        clear () {
+            this.data = []
+            cache.remove(generateHistoryCacheName)
+        }
+    }
 
     export default {
         computed: {
-            readerInputImg(){
-                if (this.current.readerInput){
-                    return `<img style="width:300px" src="${this.current.readerInput}" />`;
+            readerInputImg () {
+                if (this.current.readerInput) {
+                    return `<img style="width:300px" src="${this.current.readerInput}" />`
                 }
-                return "";
-            }
+                return ''
+            },
         },
-        created() {
-            this.current = Object.assign(this.current,this.$getToolData())
+        created () {
+            this.generateHistory = new generateHistory()
+            this.current = Object.assign(this.current, this.$getToolData())
         },
         methods: {
-            generate(){
-                if (!this.current.generateInput) return;
-                if (this.current.generateIsShort){
+            history (index) {
+                if (index === 'clear') {
+                    this.generateHistory.clear()
+                    return
+                }
+                let history = this.generateHistory.getValue(index)
+                this.current.generateInput = history.input
+                this.current.generateIsShort = history.isShort
+                this.generate(false)
+            },
+            generate (insertHistory = true) {
+                if (!this.current.generateInput) return
+                if (this.current.generateIsShort) {
                     if (!isUrl(this.current.generateInput)) {
-                        return this.$Message.error("生成短连接的内容是url");
+                        return this.$Message.error('生成短连接的内容是url')
                     }
                     request({
-                        url:"http://api.t.sina.com.cn/short_url/shorten.json",
-                        data:{"source": "2815391962", "url_long": this.current.generateInput},
-                    },(err, res, result)=>{
-                        if (err) return this.$Message.error("二维码短连接生成错误:"+err);
-                        result = JSON.parse(result);
-                        if(!result[0]['url_short']){
-                            return this.$Message.error("短连接生成错误");
-                        }
-                        else {
-                            this.current.generateShortUrl = result[0]['url_short'];
+                        url: 'http://api.t.sina.com.cn/short_url/shorten.json',
+                        data: { 'source': '2815391962', 'url_long': this.current.generateInput },
+                    }, (err, res, result) => {
+                        if (err) return this.$Message.error('二维码短连接生成错误:' + err)
+                        result = JSON.parse(result)
+                        if (!result[0]['url_short']) {
+                            return this.$Message.error('短连接生成错误')
+                        } else {
+                            this.current.generateShortUrl = result[0]['url_short']
                             this.generateHandle(this.current.generateShortUrl)
                         }
                     })
-                }
-                else{
-                    this.current.generateShortUrl = "";
+                } else {
+                    this.current.generateShortUrl = ''
                     this.generateHandle(this.current.generateInput)
                 }
-                this.$saveToolData(this.current);
+                if (insertHistory) {
+                    this.generateHistory.push({
+                        input: this.current.generateInput,
+                        isShort: this.current.generateIsShort,
+                    })
+                }
+                this.$saveToolData(this.current)
             },
-            reader(){
-                if (!this.current.readerInput){
-                    return;
+            reader () {
+                if (!this.current.readerInput) {
+                    return
                 }
-                qrcodeParser(this.current.readerInput).then((c)=>{
-                    this.current.readerOutput = c.data;
-                    this.$saveToolData(this.current);
-                    this.$Message.success("解析成功");
-                }).catch(()=>{
-                    return this.$Message.error("图片解析错误");
-                });
+                qrcodeParser(this.current.readerInput).then((c) => {
+                    this.current.readerOutput = c.data
+                    this.$saveToolData(this.current)
+                    this.$Message.success('解析成功')
+                }).catch(() => {
+                    return this.$Message.error('图片解析错误')
+                })
             },
-            generateHandle(str){
-                generator.toDataURL(str, (error,url) => {
-                    if (error) return this.$Message.error("二维码生成错误:"+error);
-                    this.$Message.success("生成成功");
-                    this.current.generateOutput = `<img style="width:300px" src="${url}" />`;
+            generateHandle (str) {
+                generator.toDataURL(str, (error, url) => {
+                    if (error) return this.$Message.error('二维码生成错误:' + error)
+                    this.$Message.success('生成成功')
+                    this.current.generateOutput = `<img style="width:300px" src="${url}" />`
                 })
             },
-            handleUpload(file){
-                let r = new FileReader();
-                r.readAsDataURL(file);
-                r.onloadend =  () => {
+            handleUpload (file) {
+                let r = new FileReader()
+                r.readAsDataURL(file)
+                r.onloadend = () => {
                     this.current.readerInput = r.result
                     this.reader()
-                };
-                return false;
-            }
+                }
+                return false
+            },
+            substr (str) {
+                str = trim(str.replace(/[\r\n]/g, ''))
+                const strLength = 100
+                return str.length > strLength ? str.substr(0, strLength) + '...' : str
+            },
         },
-        data() {
+        data () {
             return {
-                current:{
-                    generateInput: "",
-                    generateOutput: "",
+                generateHistory: {},
+                current: {
+                    generateInput: '',
+                    generateOutput: '',
                     generateIsShort: false,
-                    generateShortUrl: "",
-                    readerInput: "",
-                    readerOutput: "",
-                    operation:"generate"
-                }
+                    generateShortUrl: '',
+                    readerInput: '',
+                    readerOutput: '',
+                    operation: 'generate',
+                },
             }
         },
     }