From 69a74309ed12cc13f0fa9fb90c5bffad17ade360 Mon Sep 17 00:00:00 2001 From: wjt <1797368093@qq.com> Date: 星期四, 27 六月 2024 13:34:56 +0800 Subject: [PATCH] 问题修改 --- qiye/qiyeIndex/qiyeIndex.vue | 257 ++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 210 insertions(+), 47 deletions(-) diff --git a/qiye/qiyeIndex/qiyeIndex.vue b/qiye/qiyeIndex/qiyeIndex.vue index 56ea366..8c89017 100644 --- a/qiye/qiyeIndex/qiyeIndex.vue +++ b/qiye/qiyeIndex/qiyeIndex.vue @@ -7,36 +7,48 @@ <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;"/> + <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" mode="widthFix" class="qrcode-1"></image> + <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> + <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' + 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() { @@ -44,41 +56,175 @@ activeNumber: 0, companyCode: 'code===', uqrcodeImage: '', - list1:[], - companyId:'', - msg:{} + list1: [], + companyId: '', + msg: {} } }, onReady() { - + }, onLoad(options) { - // if(options.id) { - // this.companyId = options.id||33 - // } - // else { - // this.companyId = uni.getStorageSync('qiyedata').companyId - // } - + + if (options.id && options.id != 'undefined') { + uni.setStorageSync('companyId', options.id) + this.companyId = options.id + } }, methods: { - httoInfo() { - httoInfo().then(val => { - console.log(val.data.data.deptId) - this.companyId = val.data.data.deptId - this.getInfo() + // 灏哹ase64 杞崲涓烘湰鍦板浘鐗� + 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) + } + }) }, - more1(){ + // 鏂囧瓧鎹㈣ + 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; + // 璁剧疆鏂囨湰鐨剎鍧愭爣浣嶇疆锛屼娇鍏跺眳涓� + 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; + // 璁剧疆鏂囨湰鐨剎鍧愭爣浣嶇疆锛屼娇鍏跺眳涓� + 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.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 =>{ + 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){ + for (let i = 0; i < data.length; i++) { + if (data[i].docTitle.length > 17) { data[i].docTitle = data[i].docTitle.slice(0, 17) + '...' } } @@ -86,15 +232,14 @@ }) 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 - } + success: res => { + this.uqrcodeImage = res.tempFilePath + } }); }) }, 500) @@ -103,7 +248,7 @@ // 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 // }) @@ -114,16 +259,17 @@ </script> <style> - page{ + page { background: #F7F7F7; } </style> <style lang="scss" scoped> - .head{ + .head { width: 100%; height: 518rpx; } - .hqzc{ + + .hqzc { position: absolute; border-radius: 5px; background: #fff; @@ -134,22 +280,26 @@ top: 500rpx; padding: 24rpx; box-sizing: border-box; - .line{ + + .line { width: 2rpx; height: 50rpx; background: #f1f1f1; margin-right: 18rpx; } - .img{ + + .img { width: 76rpx; height: 76rpx; margin-right: 18rpx; } - .more{ + + .more { width: 28rpx; height: 28rpx; } - .font{ + + .font { font-size: 26rpx; color: #4A4E60; margin-right: 50rpx; @@ -157,16 +307,27 @@ // text-align: center; } } - .hide-canvas{ + + .hide-canvas { display: none; } - .wbox{ + + .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{ + + .name { text-align: center; color: #202d44; font-size: 36rpx; @@ -176,16 +337,18 @@ padding-bottom: 20rpx; margin-bottom: 20rpx; } - .imgbox{ + + .imgbox { text-align: center; border-radius: 5rpx; border: 4rpx solid #CCDEFE; padding: 20rpx; width: 420rpx; margin: 0 auto; - + } - .qrcode-1{ + + .qrcode-1 { width: 400rpx; height: 400rpx; } -- Gitblit v1.9.1