<template>
<view class="content margin">
<image :src="shareImage" class="share-image" mode="aspectFit"></image>
<canvasdrawer :painting="painting" class="canvasdrawer" @getImage="eventGetImage" />
<text>选择海报背景图片 最好为高600 宽375</text>
<button @click="fnChooseImg()">选择图片</button>
<view class="padding" style="background: #FFFFFF;box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);border-radius: 5upx;margin-top:15upx;">
<text>使用,分割，每行最好不要超过12个字符。</text>
<itemList title="文案输入" :showBottomBorder="true" type="input" placeholder="请输入文案内容" @inputEvent="inputEventText"
:subTitle="text"></itemList>
</view>
<button @click="eventDraw">绘制</button>
<button @click="eventSave">保存到本地</button>
<view class="img" style="visibility:hidden;">
<tki-qrcode ref="qrcode" :cid="cid" :val="val" :size="size" :unit="unit" :onval="onval" :loadMake="loadMake"
:usingComponents="usingComponents" @result="qrR" />
</view>
</view>
</template>
<script>
const util = require('../../utils/util.js')
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
import canvasdrawer from '@/components/uniapp-canvas-drawer/uniapp-canvas-drawer.vue'
import itemList from '../../components/item-list/item-list.vue';
import {
formatTimeBase
} from '@/common/public.js'
export default {
components: {
canvasdrawer,
tkiQrcode,
itemList
},
data() {
return {
list: {}, //获取的图片列表
listLength: 0,
defaltIndex: 0,
show: false,
painting: {},
shareImage: '',
couponList: [{
code: "18681616181",
}],
img: "", // 生成的图片base64或图片临时地址
cid: 'myqrcode', // canvasId，页面存在多个二维码组件时需设置不同的ID
val: 'https://rc.y018.cn/Teacher/Index/job_list', // 要生成的内容
size: 200, // 生成的二维码大小
unit: 'upx', // 大小单位尺寸 (upx or px)
onval: true, // 监听val值变化自动重新生成二维码
loadMake: true, // 组件初始化完成后自动生成二维码，val需要有值
usingComponents: true, // 是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
showLoading: false, // 是否显示loading
loadingText: '二维码生成中', // loading文字
date: "",
//使用自定义数据的参数
lsLocalImg: false,
localImgUrl: "",
localStr: [],
localText: ""
}
},
onLoad() {
//获取招聘老师个人信息并且填充到二维码内容中
const userInfo = uni.getStorageSync("userInfo");
this.val = `https://rc.y018.cn/Teacher/Index/job_list?username=${userInfo.username}`
//获取当日日期
this.date = formatTimeBase(Date.parse(new Date()), "Y年M月D日");
//获取轮播的图片信息
this.fnGetCarouselList();
},
watch: {
//侦听img是否被赋值，赋值后才能调用绘制海报的函数
img: function(val) {
this.img = val;
//绘制海报
setTimeout(() => {
this.eventDraw(this.lsLocalImg);
}, 500);
}
},
methods: {
//选择海报背景图片 最好为高600 宽375
fnChooseImg() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: ret => {
this.localImgUrl = ret.tempFilePaths[0];
this.lsLocalImg = true;
//绘制海报
setTimeout(() => {
this.eventDraw(this.lsLocalImg);
}, 500);
}
});
},
//获取轮播的图片信息
fnGetCarouselList() {
this.$ajax({
url: this.$api.rectuitrectuitCarouselList,
data: {
class: "qrcode"
},
}).then(ret => {
this.list = ret.data.rows;
this.listLength = this.list.length;
this.localStr = this.list[0].name.split(",");
console.log(JSON.stringify(this.localStr));
})
},
//获取二维码临时地址
qrR(res) {
this.img = res;
},
//绘制海报
eventDraw() {
uni.showLoading({
title: '绘制分享图片中',
mask: true
})
uni.downloadFile({
url: this.list[this.defaltIndex].img,
success: ret => {
if (ret.statusCode === 200) {
let tempFilePath = ret.tempFilePath;
//若lsLocalImg==true，则使用本地图片
if (this.localImgUrl != "") {
tempFilePath = this.localImgUrl;
}
if (this.localText != "") {
this.localStr = this.localText.split(",");
}
this.painting = {
width: 375,
height: 600,
clear: true,
views: [
//背景图片
{
type: 'image',
url: tempFilePath,
top: 0,
left: 0,
width: 375,
height: 600
},
//时间
{
type: 'text',
content: this.date,
color: 'white',
fontSize: 20,
top: 50,
left: 20,
bolder: false
},
//DITU
{
type: 'text',
content: "DITU",
color: 'white',
fontSize: 18,
top: 52,
left: 240,
bolder: true
},
//ZHIPIN
{
type: 'text',
content: "ZHIPIN",
color: 'white',
fontSize: 15,
top: 54,
left: 290,
bolder: false
},
//描述1
{
type: 'text',
content: this.localStr[0],
textAlign: 'left',
color: 'white',
fontSize: 24,
top: 150,
left: 20,
width: 125,
bolder: false,
breakWord: true,
MaxLineNumber: 2,
},
//描述2
{
type: 'text',
content: this.localStr[1],
textAlign: 'left',
color: 'white',
fontSize: 24,
top: 190,
left: 20,
width: 125,
bolder: false,
breakWord: true,
MaxLineNumber: 2,
},
//描述3
{
type: 'text',
content: this.localStr[2],
textAlign: 'left',
color: 'white',
fontSize: 24,
top: 230,
left: 20,
width: 125,
bolder: false,
breakWord: true,
MaxLineNumber: 2,
},
//描述4
{
type: 'text',
content: this.localStr[3],
textAlign: 'left',
color: 'white',
fontSize: 24,
top: 270,
left: 20,
width: 125,
bolder: false,
breakWord: true,
MaxLineNumber: 2,
},
//横线
{
type: 'rect',
background: "#ffffff",
top: 100,
left: 20,
width: 30,
height: 3
}, //矩形
{
type: 'rect',
background: "#ffffff",
top: 425,
left: 25,
width: 325,
height: 150
},
{
type: 'text',
content: uni.getStorageSync("userInfo").name,
fontSize: 22,
top: 450,
left: 40,
bolder: true
},
{
type: 'text',
content: "地图直聘・招聘经理",
fontSize: 16,
top: 475,
left: 40,
bolder: false
},
{
type: 'rect',
background: "black",
top: 534,
left: 40,
width: 168,
height: 25
},
{
type: 'rect',
background: "#ffffff",
top: 535,
left: 41,
width: 166,
height: 23
},
{
type: 'text',
content: "长按识别二维码,查看职位列表",
fontSize: 12,
top: 540,
left: 45,
},
//二维码
{
type: 'image',
url: this.img,
top: 440,
left: 220,
width: 120,
height: 120
},
]
}
}
}
});
},
eventSave() {
uni.saveImageToPhotosAlbum({
filePath: this.shareImage,
success(res) {
uni.showToast({
title: '保存图片成功',
icon: 'success',
duration: 2000
})
}
})
},
eventGetImage(event) {
uni.hideLoading()
const tempFilePath = event.tempFilePath;
const errMsg = event.errMsg;
if (errMsg === 'canvasdrawer:ok') {
this.shareImage = tempFilePath
this.painting = {}
}
},
inputEventText(ret) {
this.localText = ret;
},
}
}
</script>
<style lang="scss">
.share-image {
width: 600upx;
height: 888upx;
margin: 0 75upx;
border: 1px solid black;
}
button {
margin-top: 20upx;
}
</style>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
import canvasdrawer from '@/components/uniapp-canvas-drawer/uniapp-canvas-drawer.vue'
这两个插件后面完善的时候放上来。
