Skip to content

1
1024程序员开源挑战赛

夜猫逐梦 / 1024程序员开源挑战赛
与 Fork 源项目一致

Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 3
Star 1
Fork 0
1
1024程序员开源挑战赛
提交 6c6122a6 编写于 作者: B baiy 提交者： ninecents
浏览文件
操作

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

上级 6d4463e8
隐藏空白更改
内联 并排
Showing with 205 addition and 118 deletion
src/tool/cache.js
浏览文件 @ 6c6122a6
import lsCache from "lscache" import lsCache from 'lscache'
import p from "../../package" import p from '../../package'
// 缓存key添加版本号 // 缓存key添加版本号
const cacheNameConvert = function (name) { const cacheNameConvert = function (name) {
return "v_" + (p.version.split('.').join("")) + '_' + name return 'v_' + (p.version.split('.').join('')) + '_' + name
}; }
export default { export default {
// expiry 过期时间 秒 // expiry 过期时间 秒
set(name, value, expiry = 0) { set (name, value, expiry = 0) {
return lsCache.set(cacheNameConvert(name), value, expiry / 60); return lsCache.set(cacheNameConvert(name), value, expiry / 60)
}, },
get(name, defaultValue = null) { get (name, defaultValue = null) {
let data = lsCache.get(cacheNameConvert(name)); let data = lsCache.get(cacheNameConvert(name))
return data ? data : defaultValue return data ? data : defaultValue
}, },
setnNoVersion(name, value, expiry = 0) { remove (name) {
return lsCache.set('nv_' + name, value, expiry / 60); lsCache.remove(cacheNameConvert(name))
}, },
getNoVersion(name, defaultValue = null) { setnNoVersion (name, value, expiry = 0) {
let data = lsCache.get('nv_' + name); return lsCache.set('nv_' + name, value, expiry / 60)
},
getNoVersion (name, defaultValue = null) {
let data = lsCache.get('nv_' + name)
return data ? data : defaultValue return data ? data : defaultValue
} },
} }
\ No newline at end of file
src/views/tool/qrCode.vue
浏览文件 @ 6c6122a6
<template> <template>
<div> <div>
<Tabs v-model="current.operation"> <Tabs v-model="current.operation">
<TabPane label="二维码生成" name="generate"> <TabPane label="二维码生成" name="generate">
<Row :gutter="16"> <Row :gutter="16">
<Col span="12"> <Col span="14">
<Input v-model="current.generateInput" :rows="14" type="textarea" placeholder="内容"></Input> <Input v-model="current.generateInput" :rows="14" type="textarea" placeholder="内容"></Input>
<option-block> <option-block>
<FormItem> <FormItem>
<Button type="primary" @click="generate()">生成</Button> <Button type="primary" @click="generate()">生成</Button>
</FormItem> </FormItem>
<FormItem> <FormItem v-if="generateHistory.length() > 0">
<Checkbox v-model="current.generateIsShort">生成短连接</Checkbox> <Dropdown placement="top-start" trigger="click" style="margin-left: 10px" @on-click="history">
</FormItem> <a href="javascript:void(0)">
<FormItem v-if="current.generateIsShort"> 历史记录
<Alert>短链接API由 t.cn 提供</Alert> <Icon type="ios-arrow-down"></Icon>
</FormItem> </a>
</option-block> <DropdownMenu slot="list">
</Col> <DropdownItem v-for="(v,i) in generateHistory.lists()" :v-key="i" :name="i">{{substr(v.input)}}</DropdownItem>
<Col span="12"> <DropdownItem divided name="clear">清空历史记录</DropdownItem>
<div style="text-align: center" v-html="current.generateOutput"></div> </DropdownMenu>
<p style="text-align: center" v-if="current.generateIsShort && current.generateShortUrl">短连接:{{current.generateShortUrl}}</p> </Dropdown>
</Col> </FormItem>
</Row> <FormItem>
</TabPane> <Checkbox v-model="current.generateIsShort">生成短连接</Checkbox>
<TabPane label="二维码解析" name="reader"> </FormItem>
<Row :gutter="16"> <FormItem v-if="current.generateIsShort">
<Col span="12"> <Alert>短链接API由 t.cn 提供</Alert>
<Input v-model="current.readerInput" :rows="5" type="textarea" placeholder="请输入二维码图片地址或点击下方按钮上传图片"></Input> </FormItem>
<option-block> </option-block>
<FormItem> </Col>
<Button type="primary" @click="reader()">解析</Button> <Col span="10">
</FormItem> <div style="text-align: center" v-html="current.generateOutput"></div>
<FormItem> <p style="text-align: center" v-if="current.generateIsShort && current.generateShortUrl">
<Upload action="#" :before-upload="handleUpload"> 短连接:{{current.generateShortUrl}}</p>
<Button icon="ios-cloud-upload-outline">上传图片</Button> </Col>
</Upload> </Row>
</FormItem> </TabPane>
</option-block> <TabPane label="二维码解析" name="reader">
<Input v-model="current.readerOutput" :rows="5" type="textarea" placeholder="解析结果"></Input> <Row :gutter="16">
</Col> <Col span="14">
<Col span="12" style="text-align: center" v-html="readerInputImg"></Col> <Input v-model="current.readerInput" :rows="5" type="textarea" placeholder="请输入二维码图片地址或点击下方按钮上传图片"></Input>
</Row> <option-block>
</TabPane> <FormItem>
</Tabs> <Button type="primary" @click="reader()">解析</Button>
</div> </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> </template>
<script> <script>
import generator from "qrcode" import generator from 'qrcode'
import qrcodeParser from "qrcode-parser" import qrcodeParser from 'qrcode-parser'
import request from "ajax-request" import request from 'ajax-request'
import isUrl from "is-url" 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 { export default {
computed: { computed: {
readerInputImg(){ readerInputImg () {
if (this.current.readerInput){ if (this.current.readerInput) {
return `<img style="width:300px" src="${this.current.readerInput}" />`; return `<img style="width:300px" src="${this.current.readerInput}" />`
} }
return ""; return ''
} },
}, },
created() { created () {
this.current = Object.assign(this.current,this.$getToolData()) this.generateHistory = new generateHistory()
this.current = Object.assign(this.current, this.$getToolData())
}, },
methods: { methods: {
generate(){ history (index) {
if (!this.current.generateInput) return; if (index === 'clear') {
if (this.current.generateIsShort){ 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)) { if (!isUrl(this.current.generateInput)) {
return this.$Message.error("生成短连接的内容是url"); return this.$Message.error('生成短连接的内容是url')
} }
request({ request({
url:"http://api.t.sina.com.cn/short_url/shorten.json", url: 'http://api.t.sina.com.cn/short_url/shorten.json',
data:{"source": "2815391962", "url_long": this.current.generateInput}, data: { 'source': '2815391962', 'url_long': this.current.generateInput },
},(err, res, result)=>{ }, (err, res, result) => {
if (err) return this.$Message.error("二维码短连接生成错误:"+err); if (err) return this.$Message.error('二维码短连接生成错误:' + err)
result = JSON.parse(result); result = JSON.parse(result)
if(!result[0]['url_short']){ if (!result[0]['url_short']) {
return this.$Message.error("短连接生成错误"); return this.$Message.error('短连接生成错误')
} } else {
else { this.current.generateShortUrl = result[0]['url_short']
this.current.generateShortUrl = result[0]['url_short'];
this.generateHandle(this.current.generateShortUrl) this.generateHandle(this.current.generateShortUrl)
} }
}) })
} } else {
else{ this.current.generateShortUrl = ''
this.current.generateShortUrl = "";
this.generateHandle(this.current.generateInput) 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(){ reader () {
if (!this.current.readerInput){ if (!this.current.readerInput) {
return; return
} }
qrcodeParser(this.current.readerInput).then((c)=>{ qrcodeParser(this.current.readerInput).then((c) => {
this.current.readerOutput = c.data; this.current.readerOutput = c.data
this.$saveToolData(this.current); this.$saveToolData(this.current)
this.$Message.success("解析成功"); this.$Message.success('解析成功')
}).catch(()=>{ }).catch(() => {
return this.$Message.error("图片解析错误"); return this.$Message.error('图片解析错误')
}); })
}, },
generateHandle(str){ generateHandle (str) {
generator.toDataURL(str, (error,url) => { generator.toDataURL(str, (error, url) => {
if (error) return this.$Message.error("二维码生成错误:"+error); if (error) return this.$Message.error('二维码生成错误:' + error)
this.$Message.success("生成成功"); this.$Message.success('生成成功')
this.current.generateOutput = `<img style="width:300px" src="${url}" />`; this.current.generateOutput = `<img style="width:300px" src="${url}" />`
}) })
}, },
handleUpload(file){ handleUpload (file) {
let r = new FileReader(); let r = new FileReader()
r.readAsDataURL(file); r.readAsDataURL(file)
r.onloadend = () => { r.onloadend = () => {
this.current.readerInput = r.result this.current.readerInput = r.result
this.reader() 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 { return {
current:{ generateHistory: {},
generateInput: "", current: {
generateOutput: "", generateInput: '',
generateOutput: '',
generateIsShort: false, generateIsShort: false,
generateShortUrl: "", generateShortUrl: '',
readerInput: "", readerInput: '',
readerOutput: "", readerOutput: '',
operation:"generate" operation: 'generate',
} },
} }
}, },
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或