Bladeren bron

相机无权限提示--暂存

armg 1 dag geleden
bovenliggende
commit
d1d5d85936
1 gewijzigde bestanden met toevoegingen van 59 en 3 verwijderingen
  1. 59 3
      src/views/AIDesign/design.vue

+ 59 - 3
src/views/AIDesign/design.vue

@@ -73,10 +73,15 @@
           </div>
           <div class="image-buttons">
             <!-- 原生上传按钮 -->
-            <div class="upload-container">
+            <div class="upload-container" v-if="wxReady">
+              <button class="image-btn" @click="chooseImageFn" >
+                <span>选择图片</span>
+              </button>
+            </div>
+            <div class="upload-container" v-else>
               <input type="file" accept="image/*" class="native-upload-input" @change="handleFileChange">
               <button class="image-btn">
-                <span>选择图片</span>
+                <span>选择 图片</span>
               </button>
             </div>
           </div>
@@ -402,7 +407,7 @@ import { Component, Vue } from "vue-property-decorator";
 import { CreateDesign, GetEntity, GetReadState, UpdateReadState, GetProjectlist, GetDictList } from "@/api/indexAI";
 import { ImagePreview, Popover } from 'vant';
 import { Dialog } from 'vant';
-import { getWecomType, toLBHome, toXiaoChengxu } from '@/utils/index';
+import { getWecomType, toLBHome, toXiaoChengxu, getWxconfigNew } from '@/utils/index';
 declare let wx: any;
 import axios from "axios";
 
@@ -503,6 +508,12 @@ export default class extends Vue {
   private popover_actions = [{ text: "风格主要对应罗马柱类型,请按需选择", className: "actionsTit" }];
   private showChooseProject = false;
   private showProjectPopover = false;
+  private wxReady = false;
+  private chooseImageConfig = {
+    count: 1, // 最多选择1张,支持1-9
+    sizeType: ['compressed'], // 优先压缩图,节省流量
+    sourceType: ['album', 'camera'] // 同时支持相册和相机
+  }
   created() {
     // 图片头
     if (window.location.href.indexOf('aidesign.') > -1) {
@@ -520,6 +531,7 @@ export default class extends Vue {
     this.initialize();
     this.getPicList();//获取完选项各列表之后再去判断F_id并取值
     this.GetReadStateFn();
+    this.initWxConfig(); // 执行初始化
   }
   private initialize() {
     // 企微类型
@@ -554,6 +566,50 @@ export default class extends Vue {
     this.color_options = [];//外墙平涂列表
     this.color_selValue = '';// 外墙平涂选中的值
   }
+  async initWxConfig() {
+    try {
+      this.wxReady = await getWxconfigNew();
+    } catch (err) {
+      this.wxReady = false;
+    }
+  }
+  private chooseImageFn() {
+    console.log("====chooseImageFn===")
+    wx.chooseImage({
+      ...this.chooseImageConfig,
+      // 选择成功:获取临时素材 ID → 转换为 File 对象
+      success: (res) => {
+        const localId = res.localIds[0] // localIds 是临时素材ID数组,取第一张
+        console.log('选择图片成功,临时素材ID:', localId)
+        this.localIdToFile(localId) // 转换为可上传的 File 对象
+      },
+      cancel: () => {
+        console.log('用户取消选择图片')
+      },
+      // 失败回调:核心!捕获权限关闭/操作异常(企业微信原生支持)
+      fail: (err) => {
+        console.error('选择图片失败:', err)
+        alert('请先开启企业微信的「相册/相机」权限,再重新操作!')
+      }
+    })
+  }
+  private localIdToFile(localId) {
+    wx.getLocalImgData({
+      localId: localId,
+      // 获取 base64 成功 → 转换为 File
+      success: (res) => {
+        console.log("wx.getLocalImgData=",res)
+        this.handleAfterRead(res.localData);
+        // const file = this.base64ToFile(res.localData, `wecom-img-${Date.now()}.jpg`)
+        // console.log('转换后的 File 对象:', file)
+        // this.Userfile1 = file;
+      },
+      // 获取 base64 失败
+      fail: (err) => {
+        console.error('临时素材转换失败:', err)
+      }
+    })
+  }
   tabsChange(value: string) {
     if (value === '外墙平涂') {
       // 色卡默认第一个