From b5f084460e9e639358fbf91056a86be8d0a5c4b2 Mon Sep 17 00:00:00 2001
From: yaolonglong <yaolonglong15@163.com>
Date: 星期四, 09 十月 2025 20:18:57 +0800
Subject: [PATCH] 获取验证码功能
---
qiye/qiyeIndex/qiyeIndex.vue | 297 +++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 256 insertions(+), 41 deletions(-)
diff --git a/qiye/qiyeIndex/qiyeIndex.vue b/qiye/qiyeIndex/qiyeIndex.vue
index 4b462b9..91a48b8 100644
--- a/qiye/qiyeIndex/qiyeIndex.vue
+++ b/qiye/qiyeIndex/qiyeIndex.vue
@@ -1,72 +1,261 @@
<template>
<view>
<img src="/static/head.png" class="head" alt="" />
- <view class="hqzc">
+ <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" :key="index">{{item.docTitle}}</p>
+ <p v-for="(item,index) in list1" class="u-line-1" :key="index">{{item.docTitle}}</p>
</view>
- <img src="/static/i06.png" class="more" @click="more1()" alt="" />
+ <img src="/static/i06.png" class="more" alt="" style="width: 46rpx;height: 46rpx;" />
</view>
<view class="wbox">
<view class="name">
- {{msg.companyUser}}
+ {{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 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 {
+ 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.getInfo()
+ this.companyId = uni.getStorageSync('companyId')
+ this.httoInfo()
},
data() {
return {
activeNumber: 0,
companyCode: 'code===',
uqrcodeImage: '',
- list1:[],
- companyId:33,//todo
- msg:{}
+ list1: [],
+ companyId: '',
+ msg: {}
}
},
onReady() {
- this.$refs.uqrcode.toTempFilePath({
- success: res => {
- this.uqrcodeImage = res.tempFilePath
- }
- });
+
+ },
+ onLoad(options) {
+
+ if (options.id && options.id != 'undefined') {
+ uni.setStorageSync('companyId', options.id)
+ this.companyId = options.id
+ }
},
methods: {
- more1(){
+ // 灏哹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)
+ }
+
+ })
+ },
+ // 鏂囧瓧鎹㈣
+ 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.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 =>{
+ 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) + '...'
}
}
@@ -74,15 +263,23 @@
})
company(this.companyId).then(val => {
this.msg = val.data.data
- console.log(this.msg)
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
// })
@@ -93,16 +290,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;
@@ -113,39 +311,54 @@
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;
width: 450rpx;
- text-align: center;
+ // 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;
@@ -155,16 +368,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