youngS
3 years ago
parent
7932dde3b4
commit
c8a69acb84
@ -0,0 +1,319 @@ |
|||||||
|
<template> |
||||||
|
<el-main> |
||||||
|
|
||||||
|
<el-row style="margin-bottom: 5px"> |
||||||
|
<el-col :span="3"> |
||||||
|
<el-radio-group v-model="searchfromtype"> |
||||||
|
<el-radio-button icon="el-icon-mobile-phone" label="android"><i |
||||||
|
class="iconfont icon-android2"/> |
||||||
|
</el-radio-button> |
||||||
|
<el-radio-button label="ios"><i class="iconfont icon-ios"/> |
||||||
|
</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
|
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="18"> |
||||||
|
<el-input |
||||||
|
v-model="keysearch" |
||||||
|
clearable |
||||||
|
placeholder="请输入名称搜索" |
||||||
|
@click="searchapps" |
||||||
|
@keyup.enter.native="searchapps"> |
||||||
|
</el-input> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
|
||||||
|
<el-button icon="el-icon-search" @click="searchFun"> |
||||||
|
</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :offset="5" :span="8"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" style="margin-top: 10px" |
||||||
|
@change="handleCheckAllChange">当前页全选【{{ checkedQrcodes.length }}】 |
||||||
|
</el-checkbox> |
||||||
|
</el-col> |
||||||
|
<el-col :span="13" style="float: right"> |
||||||
|
<el-button @click="savemany">批量保存选中下载码到本地</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<el-row id="showqr"> |
||||||
|
<el-checkbox-group v-model="checkedQrcodes" @change="handlecheckedQrcodesChange"> |
||||||
|
<el-col v-for="appinfo in qrcode_info_list" :key="appinfo.app_id" :span="5" style="margin-left: 40px"> |
||||||
|
<el-checkbox :label="appinfo.app_id" border style="height: 320px"> |
||||||
|
<el-card :body-style="{textAlign:'center',padding:'8px'}" shadow="hover"> |
||||||
|
<vue-qr :callback="qrback" |
||||||
|
:correctLevel="qrinfo.correctLevel" :logoCornerRadius="qrinfo.logoCornerRadius" |
||||||
|
:logoScale="qrinfo.logoScale" |
||||||
|
:logoSrc="appinfo.master_release.icon_url" |
||||||
|
:margin="qrinfo.margin" :qid="appinfo.app_id" |
||||||
|
:size="200" |
||||||
|
:text="short_url(appinfo)"> |
||||||
|
</vue-qr> |
||||||
|
<div style="margin: 5px 0 5px"> |
||||||
|
<i v-if="appinfo.type === 1" class=" type-icon iconfont icon-ios"/> |
||||||
|
<i v-if="appinfo.type === 0" class="type-icon iconfont icon-android2"/> |
||||||
|
|
||||||
|
<span>{{ appinfo.name }}</span> |
||||||
|
<div class="bottom clearfix"> |
||||||
|
<el-button plain size="small" type="primary" @click="go_download(appinfo)">预览</el-button> |
||||||
|
<el-button plain size="small" type="primary" @click="save_qr(appinfo)">保存本地</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-checkbox> |
||||||
|
</el-col> |
||||||
|
</el-checkbox-group> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
</el-main> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import {qrcodeinfo} from "@/restful"; |
||||||
|
import {getScrollHeight, getScrollTop, getUserInfoFun, getWindowHeight} from '@/utils' |
||||||
|
import VueQr from 'vue-qr'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "FirUserQrcode", |
||||||
|
components: { |
||||||
|
VueQr |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
has_next: false, |
||||||
|
firstloadflag: true, |
||||||
|
query: {'page': 1, size: 20}, |
||||||
|
searchflag: false, |
||||||
|
keysearch: '', |
||||||
|
searchfromtype: '', |
||||||
|
loadingobj: null, |
||||||
|
checkAll: false, |
||||||
|
checkedQrcodes: [], |
||||||
|
isIndeterminate: false, |
||||||
|
allQrcodeAppid: [], |
||||||
|
qrcode_info_list: [], |
||||||
|
orgqrcode_info_list: [], |
||||||
|
qrcode_img_info: {}, |
||||||
|
qrinfo: { |
||||||
|
logoScale: 0.3, |
||||||
|
logoCornerRadius: 12, |
||||||
|
correctLevel: 3, |
||||||
|
margin: 10 |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
auto_load() { |
||||||
|
if (getScrollTop() + getWindowHeight() >= getScrollHeight()) { |
||||||
|
if (this.has_next) { //先判断下一页是否有数据 |
||||||
|
if (this.autoloadflag) { |
||||||
|
this.autoloadflag = false; |
||||||
|
if (this.qrcode_info_list.length === 0) { |
||||||
|
this.query.page = 1; |
||||||
|
} else { |
||||||
|
this.query.page += 1; |
||||||
|
} |
||||||
|
if (this.searchfromtype !== '') { |
||||||
|
this.query.type = this.searchfromtype; |
||||||
|
} |
||||||
|
this.UserQrcodeFun(this.query); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
init_value() { |
||||||
|
this.checkAll = false; |
||||||
|
this.checkedQrcodes = []; |
||||||
|
this.isIndeterminate = false; |
||||||
|
this.qrcode_info_list = []; |
||||||
|
this.orgqrcode_info_list = []; |
||||||
|
this.checkedQrcodes = []; |
||||||
|
this.allQrcodeAppid = []; |
||||||
|
this.qrcode_img_info = {}; |
||||||
|
}, |
||||||
|
searchFun() { |
||||||
|
let keysearch = this.keysearch.replace(/^\s+|\s+$/g, ""); |
||||||
|
if (keysearch === '') { |
||||||
|
this.searchflag = false; |
||||||
|
this.init_value(); |
||||||
|
this.query.page = 1; |
||||||
|
if (this.searchfromtype) { |
||||||
|
this.UserQrcodeFun({"type": this.searchfromtype}); |
||||||
|
} else { |
||||||
|
this.UserQrcodeFun({}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.searchflag = true |
||||||
|
} |
||||||
|
if (this.searchflag) { |
||||||
|
this.qrcode_info_list = []; |
||||||
|
this.orgqrcode_info_list = []; |
||||||
|
if (this.searchfromtype) { |
||||||
|
this.UserQrcodeFun({"type": this.searchfromtype, 'page': 1, size: 999}); |
||||||
|
} else { |
||||||
|
this.UserQrcodeFun({'page': 1, size: 999}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
searchapps() { |
||||||
|
let keysearch = this.keysearch.replace(/^\s+|\s+$/g, ""); |
||||||
|
let newqrcode_info_list = []; |
||||||
|
for (let i = 0; i < this.orgqrcode_info_list.length; i++) { |
||||||
|
if (this.orgqrcode_info_list[i].name.search(keysearch) >= 0) { |
||||||
|
newqrcode_info_list.push(this.orgqrcode_info_list[i]); |
||||||
|
} |
||||||
|
} |
||||||
|
if (keysearch === "") { |
||||||
|
this.qrcode_info_list = this.orgqrcode_info_list.slice(); |
||||||
|
} else { |
||||||
|
this.qrcode_info_list = newqrcode_info_list.slice(); |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
get_appinfo_from_appid(app_id) { |
||||||
|
for (let i = 0; i < this.qrcode_info_list.length; i++) { |
||||||
|
if (app_id === this.qrcode_info_list[i].app_id) { |
||||||
|
return this.qrcode_info_list[i]; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
savemany() { |
||||||
|
for (let i = 0; i < this.checkedQrcodes.length; i++) { |
||||||
|
this.save_qr(this.get_appinfo_from_appid(this.allQrcodeAppid[i])) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCheckAllChange(val) { |
||||||
|
this.checkedQrcodes = val ? this.allQrcodeAppid : []; |
||||||
|
this.isIndeterminate = false; |
||||||
|
}, |
||||||
|
handlecheckedQrcodesChange(value) { |
||||||
|
let checkedCount = value.length; |
||||||
|
this.checkAll = checkedCount === this.allQrcodeAppid.length; |
||||||
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.allQrcodeAppid.length; |
||||||
|
}, |
||||||
|
go_download(appinfo) { |
||||||
|
let routeData = this.$router.resolve({name: 'FirDownload', params: {short: appinfo.short}}); |
||||||
|
let p_url = routeData.href; |
||||||
|
if (appinfo.preview_url && appinfo.preview_url.length > 6) { |
||||||
|
p_url = appinfo.preview_url + p_url |
||||||
|
} |
||||||
|
window.open(p_url, '_blank', ''); |
||||||
|
}, |
||||||
|
qrback(dataUrl, id) { |
||||||
|
this.qrcode_img_info[id] = dataUrl; |
||||||
|
this.allQrcodeAppid.push(id); |
||||||
|
}, |
||||||
|
short_url(appinfo) { |
||||||
|
const userinfo = this.$store.state.userinfo; |
||||||
|
if (userinfo.qrcode_domain_name && userinfo.qrcode_domain_name.length > 3) { |
||||||
|
return 'http://' + userinfo.qrcode_domain_name + '/' + appinfo.short; |
||||||
|
} |
||||||
|
return appinfo.preview_url; |
||||||
|
}, |
||||||
|
save_qr(appinfo) { |
||||||
|
let dtype = "I"; |
||||||
|
if (appinfo.master_release.release_type === 0) { |
||||||
|
dtype = "A"; |
||||||
|
} |
||||||
|
let a = document.createElement('a'); |
||||||
|
// 下载图名字 |
||||||
|
a.download = appinfo.name + '_' + dtype + "_下载码"; |
||||||
|
a.href = this.qrcode_img_info[appinfo.app_id]; |
||||||
|
//合成函数，执行下载 |
||||||
|
a.dispatchEvent(new MouseEvent('click')) |
||||||
|
}, |
||||||
|
UserQrcodeFun(params) { |
||||||
|
this.loadingobj = this.$loading({ |
||||||
|
lock: true, |
||||||
|
text: '加载中', |
||||||
|
spinner: 'el-icon-loading', |
||||||
|
// background: 'rgba(0, 0, 0, 0.7)' |
||||||
|
}); |
||||||
|
qrcodeinfo(data => { |
||||||
|
if (data.code === 1000) { |
||||||
|
if (this.firstloadflag) { |
||||||
|
window.addEventListener('scroll', this.auto_load); |
||||||
|
this.firstloadflag = false |
||||||
|
} |
||||||
|
this.autoloadflag = true; |
||||||
|
this.qrcode_info_list = this.qrcode_info_list.concat(data.data); |
||||||
|
this.has_next = data.has_next; |
||||||
|
this.orgqrcode_info_list = this.qrcode_info_list.slice(); //深拷贝 |
||||||
|
this.hdata = data.hdata; |
||||||
|
this.searchapps(); |
||||||
|
|
||||||
|
} else { |
||||||
|
this.$message.error("信息获取失败") |
||||||
|
} |
||||||
|
this.loadingobj.close(); |
||||||
|
}, {methods: 'GET', data: params}) |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
}, mounted() { |
||||||
|
getUserInfoFun(this); |
||||||
|
this.UserQrcodeFun() |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-vars |
||||||
|
keysearch: function (val, oldVal) { |
||||||
|
// this.searchapps() |
||||||
|
let keysearch = this.keysearch.replace(/^\s+|\s+$/g, ""); |
||||||
|
if (keysearch === "") { |
||||||
|
this.searchFun() |
||||||
|
} |
||||||
|
}, |
||||||
|
// eslint-disable-next-line no-unused-vars |
||||||
|
searchfromtype: function (val, oldVal) { |
||||||
|
this.qrcode_info_list = []; |
||||||
|
this.query.page = 1; |
||||||
|
// this.keysearch=''; |
||||||
|
this.searchFun(); |
||||||
|
// this.getappsFun({"type": this.searchfromtype}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.el-main { |
||||||
|
margin: 20px auto 100px; |
||||||
|
width: 1166px; |
||||||
|
position: relative; |
||||||
|
padding-bottom: 1px; |
||||||
|
color: #9b9b9b; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
border-radius: 1%; |
||||||
|
} |
||||||
|
|
||||||
|
.bottom { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.clearfix:before, |
||||||
|
.clearfix:after { |
||||||
|
display: table; |
||||||
|
content: ""; |
||||||
|
} |
||||||
|
|
||||||
|
.clearfix:after { |
||||||
|
clear: both |
||||||
|
} |
||||||
|
|
||||||
|
#showqr /deep/ .el-checkbox__input { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue