Skip to content

G
gdtel-gztel-school-center-ui
Commit 7fe6c730 by 黄森林
Options

海报管理完成

parent 40a6b911
Showing with 76 additions and 34 deletions
src/components/sysmanage/codeMove.vue
......@@ -76,8 +76,8 @@ export default {
if(left<0){
left = 0;
}
if(left+this.width > 300){
left = 300-this.width;
if(left+this.width > 500){
left = 500-this.width;
}
if(top<0){
top = 0;
......
src/views/poster/PosterList.vue
......@@ -31,19 +31,19 @@
<!--列表-->
<s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
<template slot="createTime" slot-scope="text">
{{ text | dayjs}}
{{ text | dayjs}}
</template>
<template slot="picture" slot-scope="text">
<!--<img :src="text">-->
<img style="height: 50px" src="http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png">
</template>
<img :src="text" @click="imgClick(text)">
<!--<img @click="imgClick('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')" style="height: 50px" src="http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png">
--> </template>
<template slot="enable" slot-scope="text">
<span v-if="text == 0">不启用</span>
<span v-if="text == 1">启用</span>
<span v-if="text == 0">不启用</span>
<span v-if="text == 1">启用</span>
</template>
<template slot="operation" slot-scope="text, record">
<span>
<a @click="addPoster(record.picture)">新建海报</a>
<span>
<a @click="addPoster(record.picture,record.userId)">新建海报</a>
<a-divider type="vertical"/>
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
<a>删除</a>
......@@ -60,6 +60,19 @@
<a-modal :title="add ?'添加大学宽带信息': '编辑大学宽带信息'" :visible="modifyvisible" @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px">
</a-modal>
<a-drawer
title="海报图片"
placement="right"
:closable="false"
@close="pictureOnClose"
:visible="visiblepicture"
width="50%"
>
<div >
<img class="bg-img" :src="imgInfo">
</div>
</a-drawer>
</div>
</template>
......@@ -69,11 +82,6 @@
import {listPicture,uploadPicture,deletePicture,updateEnable} from "@/api/school-center/qrCode"
import {cloneObject} from '@/utils/util';
import newPoster from './newPoster'
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
export default {
name: "PosterList",
......@@ -82,6 +90,8 @@
},
data(){
return {
imgInfo:'',
visiblepicture:false,
pictureInfo:'',
Formtable: this.$form.createForm(this),
modifyvisible: false,
......@@ -106,16 +116,17 @@
universityId:''
},
columns: [
{dataIndex: 'picture', title: '图片 ', scopedSlots: {customRender: 'picture'}},
{dataIndex: 'createName', width: 100, title: '创建人'},
{dataIndex: 'createTime', width: 100, title: '创建时间 ', scopedSlots: {customRender: 'createTime'}},
{dataIndex: 'enable', width: 50, title: '启用状态', scopedSlots: {customRender: 'enable'}},
{dataIndex: 'picture', title: '图片 ', scopedSlots: {customRender: 'picture'},align: 'center'},
{dataIndex: 'createName', width: 100, title: '创建人',align: 'center'},
{dataIndex: 'createTime', width: 100, title: '创建时间 ', scopedSlots: {customRender: 'createTime'},align: 'center'},
{dataIndex: 'enable', width: 50, title: '启用状态', scopedSlots: {customRender: 'enable'},align: 'center'},
{
dataIndex: 'operation',
width: 100,
title: '操作',
scopedSlots: {customRender: 'operation'},
fixed: "right"
fixed: "right",
align: 'center'
}]
,
rowdata: parameter => {
......@@ -147,6 +158,14 @@
}
},
methods:{
pictureOnClose() {
this.imgInfo=''
this.visiblepicture = false;
},
imgClick(res){
this.imgInfo=res
this.visiblepicture=true
},
uploadPicture(file) {
return new Promise(resolve => {
const reader = new FileReader();
......@@ -179,9 +198,10 @@
};
});
},
addPoster(picture){
picture = 'http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png'
this.$refs.model1.showModal(picture);
addPoster(picture,id){
/* picture = 'http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png'*/
let url = 'http://hhrcode.winsun-aly.com/#/hhr/home?id='+id
this.$refs.model1.showModal(picture,url);
},
search() {
this.$refs.table.refresh({search: true})
......@@ -314,6 +334,10 @@
}
</script>
<style scoped>
<style scoped lang="less">
.bg-img {
margin-left: 20%;
width: 60%;
}
</style>
src/views/poster/newPoster.vue
<template>
<a-drawer
title="海报创建"
title="二维码创建"
placement="right"
:closable="true"
:visible="visible"
@close="onClose"
width="100%"
width="50%"
:bodyStyle="{'padding':0}"
destroyOnClose
>
......@@ -16,15 +16,15 @@
<span>选择图片</span>
<input ref="selectImgae" class="seletImg" type="file" @change="selectImage" />
</div>-->
<a-button @click="toImage" v-if="images != ''">生成图片</a-button>
<a-divider type="vertical"/>
<a-button @click="newCode" v-if="images != ''">生成二维码</a-button>
<a-button type="primary" @click="toImage" v-if="images != ''">生成图片</a-button>
<!-- <a-divider type="vertical"/>
<a-button @click="newCode" v-if="images != ''">生成二维码</a-button>-->
</a-col>
<a-col :span="6" v-if="images!=''">
<!--<a-col :span="6" v-if="images!=''">
<a-form-item label="二维码内容：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-model="codeText"></a-input>
</a-form-item>
</a-col>
</a-col>-->
<a-col :span="9" v-if="images!=''">
<a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-slider id="code" v-model="codeWidth" :max="300" />
......@@ -37,6 +37,19 @@
<code-move ref="code" :width="codeWidth"></code-move>
<img class="bg-img" :src="images" />
</div>
<a-divider />
</div>
<div style="margin-left: 10%">
<h2>使用说明</h2>
<h3>
1.使用鼠标可拖动二维码放置在图片内任何地方（注意：二维码位置不可超出图片范围）
</h3>
<h3>
2.使用图片上方的滑动条可以调节二维码大小
</h3>
<h3>
3.使用图片上方的生成图片按钮可以下载调节好的二维码图片
</h3>
</div>
</a-drawer>
</template>
......@@ -58,16 +71,21 @@ export default {
};
},
methods: {
showModal(picture) {
//picture = picture.replace('http://yrym.winsun-aly.com','/api');
showModal(picture,url) {
/* picture = picture.replace('http://yrym.winsun-aly.com','/api');*/
this.codeText=url
this.getBase64(picture, 'jpeg', (base64) =>{
// 给原生img对象的src属性赋值
this.images=base64;
this.visible = true;
});
setTimeout(() =>{
this.newCode()
},5);
},
onClose() {
this.visible = false;
this.codeWidth=150
},
selectImage() {
let file = this.$refs.selectImgae;
......@@ -180,7 +198,7 @@ export default {
}
.image-box {
width: 300px;
width: 500px;
height: auto;
overflow: hidden;
position: relative;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment