会议室预约添加时间被占用的提醒以及修改下载pdf的功能

components/gx-upload.vue

@@ -13,7 +13,7 @@
         </view>
       </view>
     </view>
-    <text class="note">注：电子印章必须为透明底的PNG格式，其他格式将不被接受</text>
+    <!-- <text class="note">注：电子印章必须为透明底的PNG格式，其他格式将不被接受</text> -->
   </view>
 </template>
 

components/process-image.vue

@@ -0,0 +1,192 @@
+<script>
+import { BASE_URL, IMAGE_BASE_URL } from '@/utils/config';
+
+export default {
+  data() {
+    return {
+      imagePath: '',
+      processedImage: '',
+      isCanvasReady: false,
+      ctx: null // 存储canvas上下文
+    }
+  },
+  mounted() {
+    // 组件挂载后初始化canvas上下文
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.ctx = uni.createCanvasContext('myCanvas', this);
+        console.log('Canvas上下文初始化完成');
+      }, 100);
+    });
+  },
+  methods: {
+    // 上传图片
+    uploadImage() {
+      const that = this;
+      uni.chooseImage({
+        count: 1,
+        sourceType: ['album', 'camera'],
+        success: function(res) {
+          that.imagePath = res.tempFilePaths[0];
+          that.drawImageToCanvas();
+        }
+      });
+    },
+    
+    // 将图片绘制到Canvas
+    drawImageToCanvas() {
+      const that = this;
+      
+      // 确保ctx存在
+      if (!this.ctx) {
+        this.ctx = uni.createCanvasContext('myCanvas', this);
+      }
+      
+      // 清空Canvas
+      this.ctx.clearRect(0, 0, 300, 300);
+      
+      // 绘制图片
+      uni.getImageInfo({
+        src: that.imagePath,
+        success: function(res) {
+          that.ctx.drawImage(res.path, 0, 0, 300, 300);
+          that.ctx.draw(true, () => {
+            console.log('图片绘制完成');
+            that.isCanvasReady = true;
+            
+            // 重要：添加额外延迟确保Canvas完全渲染
+            setTimeout(() => {
+              uni.showToast({
+                title: '图片已加载，可以处理',
+                icon: 'success'
+              });
+            }, 200);
+          });
+        },
+        fail: function(err) {
+          console.error('获取图片信息失败', err);
+        }
+      });
+    },
+    
+    // 处理图片（移除白色背景）
+    processImage() {
+      if (!this.isCanvasReady) {
+        uni.showToast({
+          title: '请先上传图片',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      const that = this;
+      uni.showLoading({
+        title: '处理中...',
+        mask: true
+      });
+      
+      // 增加延迟时间确保Canvas完全渲染
+      setTimeout(() => {
+        // 获取Canvas像素数据
+        uni.canvasGetImageData({
+          canvasId: 'myCanvas',
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 300,
+          success: function(res) {
+            const data = res.data;
+            
+            // 遍历像素数据，将白色（或接近白色）变为透明
+            for (let i = 0; i < data.length; i += 4) {
+              const r = data[i];
+              const g = data[i + 1];
+              const b = data[i + 2];
+              
+              // 判断是否为白色或接近白色
+              if (r > 200 && g > 200 && b > 200) {
+                data[i + 3] = 0; // 设置Alpha通道为0
+              }
+            }
+            
+            // 将处理后的像素数据放回Canvas
+            uni.canvasPutImageData({
+              canvasId: 'myCanvas',
+              x: 0,
+              y: 0,
+              width: 300,
+              height: 300,
+              data: data,
+              success: function() {
+                // 将Canvas内容转换为图片
+                that.canvasToImage();
+              },
+              fail: function(err) {
+                uni.hideLoading();
+                console.error('像素数据放回失败', err);
+              }
+            });
+          },
+          fail: function(err) {
+            uni.hideLoading();
+            console.error('获取像素数据失败', err);
+            // 调试信息：检查canvas状态
+            that.checkCanvasStatus();
+          }
+        });
+      }, 500); // 增加延迟到500ms
+    },
+    
+    // 检查Canvas状态的方法
+    checkCanvasStatus() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('#myCanvas')
+        .boundingClientRect()
+        .exec((res) => {
+          if (res[0]) {
+            console.log('Canvas元素信息:', res[0]);
+          } else {
+            console.log('Canvas元素未找到');
+          }
+        });
+    },
+    
+    // 将Canvas转换为图片
+    canvasToImage() {
+      const that = this;
+      
+      // 增加延迟时间
+      setTimeout(() => {
+        uni.canvasToTempFilePath({
+          canvasId: 'myCanvas',
+          success: function(res) {
+            that.processedImage = res.tempFilePath;
+            uni.hideLoading();
+            
+            console.log("处理后的图片路径:", res.tempFilePath);
+            
+            // 触发自定义事件，让父组件处理上传
+            that.$emit('image-processed', res.tempFilePath);
+          },
+          fail: function(err) {
+            uni.hideLoading();
+            console.error('Canvas转换失败', err);
+          }
+        });
+      }, 300);
+    },
+    
+    // 可选：添加重新初始化方法
+    reinitializeCanvas() {
+      this.ctx = null;
+      this.isCanvasReady = false;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.ctx = uni.createCanvasContext('myCanvas', this);
+          console.log('Canvas重新初始化完成');
+        }, 100);
+      });
+    }
+  }
+}
+</script>

pages/ceshi/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <view class="container">
+    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
+    <button @tap="uploadImage">上传印章图片</button>
+    <button @tap="processImage" v-if="imagePath">处理图片</button>
+    <image :src="processedImage" v-if="processedImage" mode="widthFix"></image>
+  </view>
+</template>
+
+<script>
+	import { BASE_URL,IMAGE_BASE_URL } from '@/utils/config';
+export default {
+  data() {
+    return {
+      imagePath: '',
+      processedImage: ''
+    }
+  },
+  methods: {
+    // 上传图片
+    uploadImage() {
+      const that = this;
+      uni.chooseImage({
+        count: 1,
+        sourceType: ['album', 'camera'],
+        success: function (res) {
+          that.imagePath = res.tempFilePaths[0];
+          that.drawImageToCanvas();
+        }
+      });
+    },
+    
+    // 将图片绘制到Canvas
+    drawImageToCanvas() {
+      const that = this;
+      const ctx = uni.createCanvasContext('myCanvas', this);
+      
+      // 清空Canvas
+      ctx.clearRect(0, 0, 300, 300);
+      
+      // 绘制图片
+      uni.getImageInfo({
+        src: that.imagePath,
+        success: function (res) {
+          ctx.drawImage(res.path, 0, 0, 300, 300);
+          ctx.draw(false, () => {
+            console.log('图片绘制完成');
+          });
+        }
+      });
+    },
+    
+    // 处理图片（移除白色背景）
+    processImage() {
+      const that = this;
+      const ctx = uni.createCanvasContext('myCanvas', this);
+      
+      // 获取Canvas像素数据
+      uni.canvasGetImageData({
+        canvasId: 'myCanvas',
+        x: 0,
+        y: 0,
+        width: 300,
+        height: 300,
+        success: function(res) {
+          const data = res.data;
+          
+          // 遍历像素数据，将白色（或接近白色）变为透明
+          for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            
+            // 判断是否为白色或接近白色（可根据需要调整阈值）
+            if (r > 200 && g > 200 && b > 200) {
+              data[i + 3] = 0; // 设置Alpha通道为0（完全透明）
+            }
+          }
+          
+          // 将处理后的像素数据放回Canvas
+          uni.canvasPutImageData({
+            canvasId: 'myCanvas',
+            x: 0,
+            y: 0,
+            width: 300,
+            height: 300,
+            data: data,
+            success: function() {
+              // 将Canvas内容转换为图片
+              that.canvasToImage();
+            }
+          });
+        }
+      });
+    },
+    
+    // 将Canvas转换为图片
+    canvasToImage() {
+      const that = this;
+      uni.canvasToTempFilePath({
+        canvasId: 'myCanvas',
+        success: function(res) {
+          that.processedImage = res.tempFilePath;
+		  const fileList = [{
+		    url: res.tempFilePath,
+		    status: 'uploading'
+		  }];
+		  console.log("==fileList",fileList)
+		  
+		  // 4. 上传文件
+		 that.uploadFile(fileList[0]);
+          // 这里可以调用上传接口，将处理后的图片上传到服务器
+          console.log('处理后的图片路径:', res.tempFilePath);
+        },
+        fail: function(err) {
+          console.error('Canvas转换失败', err);
+        }
+      });
+    },
+	async uploadFile(file) {
+	  try {
+	    await new Promise((resolve, reject) => {
+	      uni.uploadFile({
+	        url: `${IMAGE_BASE_URL}/api/v1/upload`,
+	        filePath: file.url,
+	        name: 'file',
+	        header: { 
+	          'Authorization': `Bearer ${uni.getStorageSync('token')}`,
+	          'Content-Type': 'multipart/form-data'
+	        },
+	        success: (uploadRes) => {
+	          try {
+	            const data = JSON.parse(uploadRes.data);
+	            if (data.success) {
+	              resolve(data.data);
+	            } else {
+	              reject(data.message || '上传失败');
+	            }
+	          } catch (e) {
+	            reject('解析响应失败');
+	          }
+	        },
+	        fail: (err) => reject(err)
+	      });
+	    });
+	  } catch (err) {
+	    console.error('上传失败:', err);
+	    const index = this.fileList.findIndex(f => f.url === file.url);
+	    if (index !== -1) {
+	      this.$set(this.fileList, index, { 
+	        ...file, 
+	        status: 'failed',
+	        error: err.message || err 
+	      });
+	    }
+	    uni.showToast({ 
+	      title: `上传失败: ${err.message || err}`, 
+	      icon: 'none' 
+	    });
+	    throw err;
+	  }
+	},
+  }
+}
+</script>

pages/docList/index.vue

@@ -3,7 +3,7 @@
 
 		<view class="doc-content">
 			<view class="doc-file" v-for="item of docList" @click="downLoadFile(item)">
-				<image src="/static/imgs/word.png" alt="" srcset="" class="doc-img"/>
+				<image src="/static/imgs/PDF.png" alt="" srcset="" class="doc-img" />
 				<view class="doc-name">{{item.name}}</view>
 			</view>
 			<view style="margin-top: 20px;">
@@ -11,20 +11,31 @@
 			</view>
 		</view>
 		<u-modal :show="show" title="提示" @confirm="show=false">
-			<view>预约完成，请致电社区，并关注预约记录留意审核状态，谢谢！</view>
+			<view>
+				<view style="padding: 5px;font-size: 16px;line-height: 23px;">
+					预约完成，请致电社区，并关注预约记录留意审核状态，谢谢！
+				</view>
+				<view v-if="warnMsg" style="line-height: 21px;font-size: 14px;border-radius: 5px; padding: 5px;background: #ffac31;color: #ffffff;">{{warnMsg}}</view>
+			</view>
 		</u-modal>
 	</view>
 </template>
 
 <script>
-	import {IMAGE_BASE_URL,BASE_URL} from '@/utils/config';
+	import {
-	 import {downloadPdfFiles} from '@/utils/download.js'
+		IMAGE_BASE_URL,
+		BASE_URL
+	} from '@/utils/config';
+	import {
+		downloadPdfFiles
+	} from '@/utils/download.js'
 	export default {
 		data() {
 			return {
 				docList: [],
 				content: '预约完成，请致电社区，并关注预约记录留意审核状态，谢谢！',
 				show: false,
+				warnMsg: '',
 				nameList: {
 					'applyPdf': '申请表申请表申请表申请表申请表申请表申请表申请表申请表申请表',
 					'covenantPdf': '协议书'
@@ -34,9 +45,15 @@
 		onLoad(option) {
 			this.show = true
 			const obj = JSON.parse(option.files)
-			this.docList=[
+			this.warnMsg = obj.warnMsg
-				{name:obj.applyPdfName,url:BASE_URL+obj.covenantPdf},
+			this.docList = [{
-				{name:obj.covenantPdfName,url:BASE_URL+obj.applyPdf},
+					name: obj.applyPdfName,
+					url: BASE_URL + obj.covenantPdf
+				},
+				{
+					name: obj.covenantPdfName,
+					url: BASE_URL + obj.applyPdf
+				},
 			]
 		},
 		methods: {
@@ -69,9 +86,11 @@
 		height: 100vh;
 		/* margin: 10rpx; */
 	}
+
 	.doc-content {
 		margin: 10px;
 	}
+
 	.doc-file {
 		padding: 20rpx 10rpx;
 		display: flex;
@@ -79,20 +98,25 @@
 		/* margin: 10px; */
 		/* border-bottom: 1px solid #c9c9c9; */
 	}
+
 	.doc-file:not(:last-child) {
 		border-bottom: 1px solid #c9c9c9;
 	}
+
 	.doc-img {
-		width: 35px;
+		width: 25px;
-		height: 35px;
+		height: 28px;
 	}
+
 	.doc-name {
+		padding: 0 5px;
 		flex: 1;
 		color: #666666;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+
 	.nav-bar {
 		display: flex;
 		align-items: center;

pages/meetingDetail/index.vue

@@ -229,9 +229,12 @@
 	} from '@/utils/dict.js'
 	import gxsign from '../../components/sign/sign.vue';
 	import gxUpload from '../../components/gx-upload.vue';
+	// import processImage from '../../components/process-image.vue'
 		import instructionVue from '../../components/instruction.vue';
+		
 	export default {
 		components: {
+			// processImage,
 			instructionVue,
 			gxUpload,
 			gxsign
@@ -631,7 +634,7 @@
 							endTime: this.endTime,
 							counter: this.counter,
 							num: this.num,
-							applyType:1
+							applyType:this.applyType
 						}
 						await this.validateObject(userApplyInfo, this.applyRules)
 						const applyInfo = Object.assign(bookingInfo, userApplyInfo)
@@ -656,7 +659,7 @@
 							counter: this.counter,
 							num: this.num,
 							stampUrl: this.stampUrl,
-							applyType:2
+							applyType:this.applyType
 						}
 						await this.validateObject(userApplyInfo, this.applyRules)
 						const app = getApp()

utils/download.js

@@ -51,7 +51,7 @@ export const downloadPdfFiles = (file, showLoading = true) => {
             // 下载完成后自动打开
             wx.openDocument({
               filePath: res.tempFilePath,
-              fileType: 'docx',
+              fileType: 'pdf',
 			  showMenu: true,// 显示Android分享菜单
               success: () => {
                 console.log(`${file.name} 打开成功`);