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))
},
setnNoVersion (name, value, expiry = 0) {
return lsCache.set('nv_' + name, value, expiry / 60)
}, },
getNoVersion(name, defaultValue = null) { getNoVersion (name, defaultValue = null) {
let data = lsCache.get('nv_' + name); 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
...@@ -3,12 +3,24 @@ ...@@ -3,12 +3,24 @@
<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 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> <FormItem>
<Checkbox v-model="current.generateIsShort">生成短连接</Checkbox> <Checkbox v-model="current.generateIsShort">生成短连接</Checkbox>
</FormItem> </FormItem>
...@@ -17,15 +29,16 @@ ...@@ -17,15 +29,16 @@
</FormItem> </FormItem>
</option-block> </option-block>
</Col> </Col>
<Col span="12"> <Col span="10">
<div style="text-align: center" v-html="current.generateOutput"></div> <div style="text-align: center" v-html="current.generateOutput"></div>
<p style="text-align: center" v-if="current.generateIsShort && current.generateShortUrl">短连接:{{current.generateShortUrl}}</p> <p style="text-align: center" v-if="current.generateIsShort && current.generateShortUrl">
短连接:{{current.generateShortUrl}}</p>
</Col> </Col>
</Row> </Row>
</TabPane> </TabPane>
<TabPane label="二维码解析" name="reader"> <TabPane label="二维码解析" name="reader">
<Row :gutter="16"> <Row :gutter="16">
<Col span="12"> <Col span="14">
<Input v-model="current.readerInput" :rows="5" type="textarea" placeholder="请输入二维码图片地址或点击下方按钮上传图片"></Input> <Input v-model="current.readerInput" :rows="5" type="textarea" placeholder="请输入二维码图片地址或点击下方按钮上传图片"></Input>
<option-block> <option-block>
<FormItem> <FormItem>
...@@ -39,98 +52,169 @@ ...@@ -39,98 +52,169 @@
</option-block> </option-block>
<Input v-model="current.readerOutput" :rows="5" type="textarea" placeholder="解析结果"></Input> <Input v-model="current.readerOutput" :rows="5" type="textarea" placeholder="解析结果"></Input>
</Col> </Col>
<Col span="12" style="text-align: center" v-html="readerInputImg"></Col> <Col span="10" style="text-align: center" v-html="readerInputImg"></Col>
</Row> </Row>
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </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() { },
this.current = Object.assign(this.current,this.$getToolData()) created () {
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
}, },
data() { substr (str) {
str = trim(str.replace(/[\r\n]/g, ''))
const strLength = 100
return str.length > strLength ? str.substr(0, strLength) + '...' : str
},
},
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.
先完成此消息的编辑！
想要评论请 注册 或