21212

package.json

@@ -5,6 +5,7 @@
     "base-64": "^1.0.0",
     "crypto-js": "^4.1.1",
     "easemob-websdk": "^4.6.0",
+    "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "pinia": "^2.1.0",
     "vconsole": "^3.15.1"

pages/cashier/index.vue

@@ -118,20 +118,20 @@
 						消费分
 					</view>
 				</view> -->
-        <!-- <view class="yis">
+        <view class="yis">
           <view class="sgjd">
             {{ dataList.sun == undefined ? 0 : dataList.sun }}
           </view>
           <view class="sf"> 锁定会员数 </view>
-        </view> -->
-        <view class="yis">
+        </view>
+        <!-- <view class="yis">
           <view class="sgjd">
             {{
               dataList.visitorNumber == undefined ? 0 : dataList.visitorNumber
             }}
           </view>
           <view class="sf"> 访客数 </view>
-        </view>
+        </view> -->
         <view class="yis">
           <view class="sgjd">
             {{ dataList.number == undefined ? 0 : dataList.number }}

shop/perating/activitecode.vue

@@ -20,8 +20,9 @@
           src="https://cdn.bjtdba.com/vod/image/2025-02-18/20250218234259970.png"
           mode=""
         ></image>
+
         <view class="activite-cardImg">
-          <image :src="qrcode_src" mode="widthFix"></image>
+          <image :src="qrcode_src" mode="widthFix" ref="imagRef"></image>
         </view>
         <view class="activite-cardText">{{ code_id }}</view>
         <view class="activite-cardBtn"> 扫码即得养老金 </view>
@@ -43,20 +44,29 @@
           </view>
         </view>
       </view>
-
-      <view class="downLoadButton" @click="clickGeneratePicture">
+      <!-- <image class="activite-card-logo" :src="imageUrl" mode=""></image> -->
+      <!-- <view class="downLoadButton" @click="clickGeneratePicture">
         <image
           class="downLoad-image"
           src="../../static/saveImage.png"
           mode=""
         ></image>
         <view class="downLoad-text"> 保存图片 </view>
-      </view>
+      </view> -->
+      <!-- <view class="downLoadButton" @click="clickGeneratePicture2">
+        <image
+          class="downLoad-image"
+          src="../../static/saveImage.png"
+          mode=""
+        ></image>
+        <view class="downLoad-text"> 保存图片 </view>
+      </view> -->
     </view>
 
     <!-- ************************* 海报画板 **********************-->
     <view style="position: absolute; bottom: 10%; left: 0%" v-show="flag">
       <l-painter
+        v-if="poster"
         :board="poster"
         css="width: 750rpx;heigth:200rpx"
         isCanvasToTempFilePath
@@ -67,13 +77,26 @@
       >
       </l-painter>
     </view>
+
     <!-- ************************* 海报画板 **********************-->
+    <canvas
+      canvas-id="container"
+      id="container"
+      :style="{
+        width: canvasWidth + 'rpx',
+        height: canvasHeight + 'rpx',
+        opacity: 1,
+      }"
+    ></canvas>
   </view>
 </template>
 
 <script>
 import { queryByKey } from "@/commit/shop.js";
 import lPainter from "@/uni_modules/lime-painter/components/l-painter/l-painter.vue";
+import html2canvas from "html2canvas";
+import { saveAs } from "file-saver";
+
 export default {
   components: {
     lPainter,
@@ -84,12 +107,14 @@ export default {
       qrcode_src: "",
       code_id: "",
       status: "",
-      imageUrl: "",
       picture: "",
       isHide: true,
-      poster: {},
+      poster: null,
       image: "",
       flag: false,
+      canvasWidth: 300, // 单位：rpx
+      canvasHeight: 300,
+      imageUrl: "",
     };
   },
   onLoad(e) {
@@ -105,7 +130,7 @@ export default {
   },
   methods: {
     queryByKey() {
-		const _this = this
+      const _this = this;
       queryByKey({
         key: "merchant_xiaochengxu_shenhe",
       }).then(
@@ -114,9 +139,9 @@ export default {
             this.status = res.data.data.status;
             uni.hideLoading();
 
-           this.$nextTick(()=>{
-			 _this.drawPoster();
-		   })
+            this.$nextTick(() => {
+              _this.drawPoster();
+            });
           }
         },
         (fail) => {
@@ -125,11 +150,59 @@ export default {
         }
       );
     },
+    async drawImageToCanvas() {
+      // const ctx = uni.createCanvasContext("myCanvas", this);
+      // 清空画布
+      // ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+      //  const img = new Image();
+      //   img.crossOrigin = 'anonymous'; // 设置跨域属性
+      //   img.src = 'https://example.com/your-image.jpg'; // 替换为实际的图片地址
+      const _this = this;
+      try {
+        const resData = await uni.getImageInfo({
+          src: decodeURIComponent(this.qrcode_src),
+        });
+        const res = resData[1] || {};
+        // 居中绘制图片（带缩放）
+        const imgWidth = res.width;
+        const imgHeight = res.height;
+        const scale = Math.min(
+          this.canvasWidth / imgWidth,
+          this.canvasHeight / imgHeight
+        );
+        const drawWidth = imgWidth * scale;
+        const drawHeight = imgHeight * scale;
+        const offsetX = (this.canvasWidth - drawWidth) / 2;
+        const offsetY = (this.canvasHeight - drawHeight) / 2;
+        console.log(res, "resData");
+        uni.canvasToTempFilePath({
+          x: offsetX,
+          y: offsetY,
+          width: imgWidth,
+          height: imgHeight,
+          destWidth: drawWidth,
+          destHeight: drawHeight,
+          canvasId: "container",
+          success: function (res) {
+            // 在H5平台下，tempFilePath 为 base64
+            // const imageUrl = `data:image/png;base64,${res.tempFilePath}`;
+            const imageUrl = `${res.tempFilePath}`;
+            const contentPath = _this.$refs.imagRef.contentPath;
+            _this.fileDwonload(imageUrl, contentPath);
+          },
+        });
+
+        // ctx.drawImage(res.path, offsetX, offsetY, drawWidth, drawHeight);
+        // ctx.draw();
+      } catch (err) {
+        console.error("图片加载失败:", err);
+      }
+    },
 
     // 绘制图片
     drawPoster() {
       //获取数据后，开始绘画
-	  const that =this
+      const that = this;
 
       this.poster = {
         width: "750rpx",
@@ -261,9 +334,9 @@ export default {
           },
         ],
       };
-      let base = this.poster;
-      const painter = that.$refs.posterRef || {};
-      painter.render(base);
+      // let base = this.poster;
+      // const painter = that.$refs.posterRef || {};
+      // painter.render(base);
     },
 
     topgi() {
@@ -296,89 +369,116 @@ export default {
         pathType: "url",
         success: (res) => {
           console.log(res.tempFilePath);
-          this.picture = res.tempFilePath
+          this.picture = res.tempFilePath;
           // 2.保存
-          this.saveImage()
+          this.saveImage();
         },
         fail(e) {
           console.log("???????????", e);
         },
       });
     },
-
+    clickGeneratePicture2() {
+      this.drawImageToCanvas();
+    },
     // 保存图片
     saveImage() {
       let that = this;
       console.log("xxxxxxxxxxxx");
-        console.log(that.picture);
-        if (that.picture !== "") {
-          uni.hideLoading();
-         //#ifdef App-PLUS
-		  uni.getSetting({
-            success(res) {
-              if (res.authSetting["scope.writePhotosAlbum"]) {
-                that.saveImageToAlbum();
-              } else if (
-                res.authSetting["scope.writePhotosAlbum"] === undefined
-              ) {
-                uni.authorize({
-                  scope: "scope.writePhotosAlbum",
-                  success() {
-                    uni.showModal({
-                      title: "保存成功",
-                      content: "图片已成功保存到相册，快去分享到您的圈子吧",
-                      showCancel: false,
-                    });
-                  },
-                  fail() {
-                    that.authConfirm();
-                  },
-                });
-              } else {
-                that.authConfirm();
-              }
-            },
-          });
-		  //#endif
-		   // #ifdef H5
-		   that.posterData()
-		   // #endif
-         
-        } else {
-          uni.showModal({
-            title: "提示",
-            content: "生成海报失败,请重试",
-            showCancel: false,
-          });
-        }
+      console.log(that.picture);
+      if (that.picture !== "") {
+        uni.hideLoading();
+        uni.getSetting({
+          success(res) {
+            if (res.authSetting["scope.writePhotosAlbum"]) {
+              that.saveImageToAlbum();
+            } else if (
+              res.authSetting["scope.writePhotosAlbum"] === undefined
+            ) {
+              uni.authorize({
+                scope: "scope.writePhotosAlbum",
+                success() {
+                  uni.showModal({
+                    title: "保存成功",
+                    content: "图片已成功保存到相册，快去分享到您的圈子吧",
+                    showCancel: false,
+                  });
+                },
+                fail() {
+                  that.authConfirm();
+                },
+              });
+            } else {
+              that.authConfirm();
+            }
+          },
+        });
+      } else {
+        uni.showModal({
+          title: "提示",
+          content: "生成海报失败,请重试",
+          showCancel: false,
+        });
+      }
     },
-    posterData() {
-      let path = this.picture;
-      let that = this;
-      // #ifdef H5
-      var eleLink = document.createElement("a");
-      eleLink.download = "filename";
-      eleLink.style.display = "none";
-      eleLink.href = path;
-      document.body.appendChild(eleLink);
-      eleLink.click();
-      // 然后移除
-      document.body.removeChild(eleLink);
-      // #endif
-      // #ifndef H5
-      uni.saveImageToPhotosAlbum({
-        filePath: path,
-        success(res) {
-          uni.showToast({
-            title: "图片已成功保存到相册，快去分享到您的圈子吧",
-            icon: "success",
-            duration: 2000,
-          });
+
+    fileDwonload(base64Data, path) {
+      uni.showLoading({ title: "保存中...", mask: true });
+   const _this =this
+      // const blob = this.base64ToBlob(base64Data);
+      // const blobUrl = URL.createObjectURL(blob);
+      const finName = "海报.jpg";
+      uni.downloadFile({
+        url: path, //请求地址
+        success: (res) => {
+          //下载成功
+          console.log(res, "下载成功");
+          if (res.statusCode === 200) {
+            //保存文件
+            let filePath = res.tempFilePath;
+            // #ifdef H5
+            saveAs(filePath, finName);
+            uni.showModal({
+              title: "保存成功",
+              content: "图片已成功保存到相册，快去分享到您的圈子吧",
+              showCancel: false,
+            });
+            // #endif
+            //  #ifdef MP-WEIXIN || APP-PLUS
+            uni.saveFile({
+              tempFilePath: filePath,
+              success: function (filRes) {
+                console.log(filRes, "=====>");
+              },
+              fail: function (err) {
+                console.log("保存失败");
+              },
+            });
+            // #endif
+            uni.hideLoading();
+          }
+        },
+        fail: (e) => {
+          console.log(e, "文件下载失败downloadFile");
+          uni.hideLoading();
+          _this.loadFiles(path, finName);
+          
+          // uni.showToast({
+          //   title: "文件下载保存失败",
+          //   icon: "error",
+          // });
         },
       });
-      // #endif
     },
-
+    loadFiles(url, fileName) {
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = fileName;
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    },
     // 未授权相册功能 重新弹窗
     authConfirm() {
       let that = this;
@@ -411,7 +511,20 @@ export default {
         },
       });
     },
+    base64ToBlob(base64) {
+      const parts = base64.split(";base64,");
+      const mimeType = parts[0].split(":")[1];
+      const base64Data = parts[1];
+      var binaryData = atob(base64.split(";base64,")[1]);
+      // const binaryData = atob(base64Data);
+      const arrayBuffer = new ArrayBuffer(binaryData.length);
+      const uint8Array = new Uint8Array(arrayBuffer);
+      for (let i = 0; i < binaryData.length; i++) {
+        uint8Array[i] = binaryData.charCodeAt(i);
+      }
 
+      return new Blob([uint8Array], { type: mimeType });
+    },
     // 保存到相册
     saveImageToAlbum() {
       uni.saveImageToPhotosAlbum({

shop/perating/statement.vue

@@ -78,21 +78,21 @@
 					消费分
 				</view>
 			</view> -->
-      <!-- <view class="yis">
+      <view class="yis">
 				<view class="sgjd">
 					{{dataList.sun==undefined?0:dataList.sun}}
 				</view>
 				<view class="sf">
 					锁定会员数
 				</view>
-			</view> -->
+			</view>
 
-      <view class="yis">
+      <!-- <view class="yis">
         <view class="sgjd">
           {{ dataList.visitorNumber == undefined ? 0 : dataList.visitorNumber }}
         </view>
         <view class="sf"> 访客数 </view>
-      </view>
+      </view> -->
       <view class="yis">
         <view class="sgjd">
           {{ dataList.number == undefined ? 0 : dataList.number }}