<template>
|
<view>
|
<img src="/static/head.png" class="head" alt="" />
|
<view class="hqzc" @click="more1()">
|
<img src="/static/hqzc.png" class="img" alt="" />
|
<view class="line"></view>
|
<view class="font">
|
<p v-for="(item,index) in list1" class="u-line-1" :key="index">{{item.docTitle}}</p>
|
</view>
|
<img src="/static/i06.png" class="more" alt="" style="width: 46rpx;height: 46rpx;" />
|
</view>
|
<view class="wbox">
|
<view class="name">
|
{{msg.companyName}}
|
</view>
|
<view class="imgbox">
|
<image :src="uqrcodeImage" @longpress="saveImage" mode="widthFix" class="qrcode-1"></image>
|
<view style="color: gray;font-size: 24rpx;text-align: center;">长按保存二维码</view>
|
</view>
|
|
<img src="/static/qiye/q05.png" style="width: 100%;height: 201rpx;" alt="" />
|
|
</view>
|
<view style="height: 50rpx;"></view>
|
<uqrcode :errorCorrectLevel="1" class="hide-canvas" :size="470" sizeUnit="rpx" v-if="companyCode" ref="uqrcode"
|
canvas-id="qrcode" :value="companyCode"
|
:options="{ backgroundColor: '#000000',useDynamicSize: true, areaColor: '#ffffff', foregroundColor: '#ffffff' }">
|
</uqrcode>
|
<tabsCom :activeNumber.sync="activeNumber"></tabsCom>
|
<!-- 绘制图片canvas -->
|
<canvas class="hide-canvas1" canvas-id="canvas" ref="canvas-image"></canvas>
|
</view>
|
</template>
|
|
<script>
|
import tabsCom from '@/qiye/components/bottom.vue'
|
import {
|
docList
|
} from '@/api/index.js'
|
import {
|
company
|
} from '@/api/qiye.js'
|
import {
|
getInfo as httoInfo
|
} from '@/api/auth.js'
|
export default {
|
components: {
|
tabsCom
|
},
|
onShow() {
|
this.companyId = uni.getStorageSync('companyId')
|
this.httoInfo()
|
},
|
data() {
|
return {
|
activeNumber: 0,
|
companyCode: 'code===',
|
uqrcodeImage: '',
|
list1: [],
|
companyId: '',
|
msg: {}
|
}
|
},
|
onReady() {
|
|
},
|
onLoad(options) {
|
|
if (options.id && options.id != 'undefined') {
|
uni.setStorageSync('companyId', options.id)
|
this.companyId = options.id
|
}
|
},
|
methods: {
|
// 将base64 转换为本地图片
|
base64ToImage() {
|
return new Promise((resolve, reject) => {
|
try {
|
var save = wx.getFileSystemManager();
|
|
var number = Math.random();
|
|
//保存本地图片文件路径，也是绘图路径
|
|
let filePath = wx.env.USER_DATA_PATH + '/pic' + number + '.png'
|
save.writeFile({ // 写文件
|
filePath,
|
data: this.uqrcodeImage.slice(22),
|
encoding: 'base64',
|
success: (res) => {
|
wx.getImageInfo({ // 读取图片
|
src: filePath,
|
success: (res) => {
|
// console.log(res)
|
if (res?.path) {
|
resolve(res.path)
|
} else {
|
reject(res)
|
}
|
},
|
error: (res) => {
|
reject(res)
|
}
|
})
|
}
|
})
|
} catch (err) {
|
uni.showToast({
|
title: '获取失败，请稍后重试',
|
icon: 'none'
|
})
|
reject(err)
|
}
|
|
})
|
},
|
// 文字换行
|
wrapText(context, text, x, y, maxWidth, lineHeight) {
|
try{
|
var words = text.split('');
|
var line = '';
|
for (var n = 0; n < words.length; n++) {
|
var testLine = line + words[n] + ' ';
|
var metrics = context.measureText(testLine);
|
var testWidth = metrics.width;
|
if (testWidth > maxWidth && n > 0) {
|
console.log(x,y)
|
context.fillText(line, x, y);
|
line = words[n] + ' ';
|
y += lineHeight;
|
} else {
|
line = testLine;
|
}
|
|
if (n === words.length - 1) {
|
const textWidth = context.measureText(line).width;
|
// 设置文本的x坐标位置，使其居中
|
const xPosition = (300 - textWidth) / 2
|
context.fillText(line, xPosition, y);
|
}
|
}
|
}catch(err) {
|
uni.showToast({
|
title: '转换失败，请稍后重试',
|
icon: 'none'
|
})
|
}
|
},
|
async saveImage() {
|
try {
|
const context = uni.createCanvasContext('canvas', this)
|
const value = await this.base64ToImage()
|
context.setFillStyle('white');
|
context.fillRect(0, 0, 300, 400);
|
context.drawImage(value, 0, 0, 300, 300)
|
// 计算文本的宽度
|
context.setFontSize(20);
|
const textWidth = context.measureText(this.msg.companyName).width;
|
// 设置文本的x坐标位置，使其居中
|
const xPosition = (300 - textWidth) / 2
|
let position = 0
|
if(xPosition > 0) {
|
position = xPosition
|
}
|
context.setFillStyle('#111111'); // 设置文字颜色为红色
|
this.wrapText(context, this.msg.companyName, position, 330, 300, 30)
|
context.draw(true, () => {
|
setTimeout(() => {
|
uni.canvasToTempFilePath({
|
canvasId: "canvas",
|
success: val => {
|
console.log(val)
|
const tempFilePath = val.tempFilePath;
|
uni.getSetting({
|
success(res) {
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
uni.authorize({
|
scope:'scope.writePhotosAlbum',
|
success() {
|
uni.saveImageToPhotosAlbum({
|
filePath: tempFilePath,
|
success: () => {
|
uni.showToast({
|
title: '图片保存成功',
|
icon: 'success',
|
duration: 2000
|
});
|
},
|
fail: () => {
|
uni.showToast({
|
title: '图片保存失败',
|
icon: 'none'
|
});
|
}
|
});
|
},
|
fail(err){
|
console.log(err)
|
}
|
})
|
}else{
|
uni.saveImageToPhotosAlbum({
|
filePath: tempFilePath,
|
success: () => {
|
uni.showToast({
|
title: '图片保存成功',
|
icon: 'success',
|
duration: 2000
|
});
|
},
|
fail: () => {
|
uni.showToast({
|
title: '图片保存失败',
|
icon: 'none'
|
});
|
}
|
});
|
}
|
}
|
})
|
},
|
fail: err => {
|
uni.showToast({
|
title: '转换图片路径失败',
|
icon: 'none'
|
});
|
}
|
}, this)
|
}, 1500)
|
|
})
|
} catch (err) {
|
uni.showToast({
|
title: '保存失败，请稍后重试',
|
icon: 'none'
|
});
|
}
|
},
|
httoInfo() {
|
// httoInfo().then(val => {
|
// // console.log(val.data.data.deptId)
|
// this.getInfo()
|
// })
|
this.getInfo()
|
},
|
more1() {
|
uni.navigateTo({
|
url: `/pages/hqzc/list`
|
})
|
},
|
getInfo() {
|
docList({
|
pageNum: 1,
|
pageSize: 2
|
}).then(val => {
|
let data = val.data.rows
|
for (let i = 0; i < data.length; i++) {
|
if (data[i].docTitle.length > 17) {
|
data[i].docTitle = data[i].docTitle.slice(0, 17) + '...'
|
}
|
}
|
this.list1 = data
|
})
|
company(this.companyId).then(val => {
|
this.msg = val.data.data
|
this.companyCode = this.msg.companyCode
|
uni.setStorageSync('qiyedata', this.msg)
|
setTimeout(() => {
|
this.$nextTick(() => {
|
this.$refs.uqrcode.toTempFilePath({
|
success: res => {
|
this.uqrcodeImage = res.tempFilePath
|
}
|
});
|
})
|
}, 500)
|
// this.msg.createTime = this.msg.createTime.slice(0, 10)
|
// this.msg.docContent = decodeURIComponent(this.msg.docContent)
|
// console.log(this.msg.docContent)
|
// getDicts('doc_type').then(val => {
|
// console.log(this.msg.docType)
|
|
// const value = val.data.data.find(item => item.dictValue == this.msg.docType)
|
// this.type = value.dictLabel
|
// })
|
})
|
},
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #F7F7F7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.head {
|
width: 100%;
|
height: 518rpx;
|
}
|
|
.hqzc {
|
position: absolute;
|
border-radius: 5px;
|
background: #fff;
|
display: flex;
|
width: calc(100vw - 64rpx);
|
align-items: center;
|
left: 32rpx;
|
top: 500rpx;
|
padding: 24rpx;
|
box-sizing: border-box;
|
|
.line {
|
width: 2rpx;
|
height: 50rpx;
|
background: #f1f1f1;
|
margin-right: 18rpx;
|
}
|
|
.img {
|
width: 76rpx;
|
height: 76rpx;
|
margin-right: 18rpx;
|
}
|
|
.more {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
|
.font {
|
font-size: 26rpx;
|
color: #4A4E60;
|
margin-right: 50rpx;
|
width: 450rpx;
|
// text-align: center;
|
}
|
}
|
|
.hide-canvas {
|
display: none;
|
}
|
|
.hide-canvas1 {
|
position: fixed;
|
bottom: 12000rpx;
|
width: 600rpx;
|
height: 800rpx;
|
// border: 2rpx solid;
|
}
|
|
.wbox {
|
background: #fff;
|
border-radius: 5px;
|
padding: 24rpx;
|
box-sizing: border-box;
|
margin: 120rpx 32rpx;
|
|
.name {
|
text-align: center;
|
color: #202d44;
|
font-size: 36rpx;
|
font-weight: bold;
|
line-height: 44rpx;
|
border-bottom: 1px dashed #f1f1f1;
|
padding-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.imgbox {
|
text-align: center;
|
border-radius: 5rpx;
|
border: 4rpx solid #CCDEFE;
|
padding: 20rpx;
|
width: 420rpx;
|
margin: 0 auto;
|
|
}
|
|
.qrcode-1 {
|
width: 400rpx;
|
height: 400rpx;
|
}
|
}
|
</style>
|
