问题修改

wjt

2024-06-27 69a74309ed12cc13f0fa9fb90c5bffad17ade360

 qiye/qiyeIndex/qiyeIndex.vue

@@ -1,72 +1,230 @@
<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(){
         // 将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.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 +232,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 +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;
@@ -113,39 +280,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 +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;
      }