From 01003c84aba06e109083fd2cc326ebf9eb54652b Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Thu, 24 Oct 2024 17:28:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/components/bindCons.vue |  4 +-
 src/views/shop/components/shopInfo.vue    | 51 +++++++++++++++++++----
 src/views/shop/shop_configuration.vue     |  4 +-
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/views/product/components/bindCons.vue b/src/views/product/components/bindCons.vue
index cd8108a..0809839 100644
--- a/src/views/product/components/bindCons.vue
+++ b/src/views/product/components/bindCons.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog top="10vh" :visible.sync="dialogVisible" :show-close="false" @close="reset">
+    <el-dialog top="5vh" :visible.sync="dialogVisible" :show-close="false" @close="reset">
         <div class="header_wrap">
             <div class="title">耗材信息</div>
             <div class="btn_wrap">
@@ -56,7 +56,7 @@
             </el-table-column>
         </el-table>
         <!-- 绑定到规格 -->
-        <el-table :data="tableData.cons" border v-show="type == 2" height="500px">
+        <el-table :data="tableData.cons" border v-show="type == 2">
             <el-table-column label="序号" type="index" width="100"></el-table-column>
             <el-table-column label="规格名称" prop="specSnap"></el-table-column>
             <el-table-column label="耗材" width="600">
diff --git a/src/views/shop/components/shopInfo.vue b/src/views/shop/components/shopInfo.vue
index d9e77ea..b91a002 100644
--- a/src/views/shop/components/shopInfo.vue
+++ b/src/views/shop/components/shopInfo.vue
@@ -15,10 +15,10 @@
                 showUpload = true;
               uploadIndex = 1;
               "></el-image>
-            <el-button type="primary" plain v-if="form.logo" @click="downloadImgHandle(form.logo)">下载</el-button>
+            <!-- <el-button type="primary" plain v-if="form.logo" @click="downloadImgHandle(form.logo)">下载</el-button> -->
           </div>
         </el-form-item>
-        <el-form-item label="门店照片">
+        <!-- <el-form-item label="门店照片">
           <div class="img_box">
             <el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
               style="width: 80px;height: 80px;" @click="
@@ -28,6 +28,13 @@
             <el-button type="primary" plain v-if="form.coverImg"
               @click="downloadImgHandle(form.coverImg)">下载</el-button>
           </div>
+        </el-form-item> -->
+        <el-form-item label="门店收款码">
+          <div class="img_box">
+            <canvas ref="canvas" id="QRCode_header" style="width: 80px;height: 80px;"></canvas>
+            <el-button size="mini" plain v-if="form.paymentQrcode"
+              @click="downloadCanvas(form.paymentQrcode)">下载</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="微信二维码">
           <div class="img_box">
@@ -36,15 +43,14 @@
                 showUpload = true;
               uploadIndex = 3;
               "></el-image>
-            <el-button type="primary" plain v-if="form.shopQrcode"
-              @click="downloadImgHandle(form.shopQrcode)">下载</el-button>
+            <el-button plain v-if="form.shopQrcode" @click="downloadImgHandle(form.shopQrcode)">下载</el-button>
           </div>
         </el-form-item>
         <el-form-item label="店铺小程序码">
           <div class="img_box">
             <el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
               style="width: 80px;height: 80px;"></el-image>
-            <el-button type="primary" plain v-if="form.shopQrcode"
+            <el-button size="mini" plain v-if="form.shopQrcode"
               @click="downloadImgHandle(form.smallQrcode)">下载</el-button>
           </div>
         </el-form-item>
@@ -199,6 +205,7 @@
 </template>
 
 <script>
+import QRCode from 'qrcode'
 import { getToken } from "@/utils/auth";
 import { mapGetters } from "vuex";
 import crudQiNiu from "@/api/tools/qiniu";
@@ -217,7 +224,8 @@ export default {
       endTime: "",
       formLoading: false,
       form: {
-        eatModel: []
+        eatModel: [],
+        paymentQrcode: ''
       },
       rules: {
         shopName: [
@@ -292,10 +300,32 @@ export default {
     this.tbShopInfo();
   },
   methods: {
-    // 下载图片
+    // 下载url图片
     downloadImgHandle(url) {
       if (url) window.open(url, '_blank')
     },
+    // 下载图片
+    downloadCanvas(url) {
+      if (url) {
+        this.saveCanvasAsImage(this.$refs.canvas, 'pay_code')
+      }
+    },
+    saveCanvasAsImage(canvas, filename) {
+      // 获取canvas的数据URL
+      const dataURL = canvas.toDataURL('image/png');
+
+      // 创建一个a标签用于下载
+      const downloadLink = document.createElement('a');
+      downloadLink.href = dataURL;
+      downloadLink.download = filename;
+      document.body.appendChild(downloadLink);
+
+      // 触发下载
+      downloadLink.click();
+
+      // 清理临时元素
+      document.body.removeChild(downloadLink);
+    },
     onSearchResult(res) {
       this.locationSearchList = res;
       this.amapOptions.center = [res[0].lng, res[0].lat];
@@ -326,7 +356,12 @@ export default {
           this.startTime = businessTime[0];
           this.endTime = businessTime[1];
         }
-      } catch (error) { }
+        QRCode.toCanvas(this.$refs.canvas, this.form.paymentQrcode, { margin: 0 }, function (error) {
+          console.log(error);
+        })
+      } catch (error) {
+        console.log(error);
+      }
     },
     // 保存
     submitHandle() {
diff --git a/src/views/shop/shop_configuration.vue b/src/views/shop/shop_configuration.vue
index c96e1bd..9d066f3 100644
--- a/src/views/shop/shop_configuration.vue
+++ b/src/views/shop/shop_configuration.vue
@@ -3,13 +3,13 @@
         <el-tabs v-model="activeName" type="card">
             <el-tab-pane label="店铺信息" name="1"></el-tab-pane>
             <!-- <el-tab-pane label="经营模式" name="8"></el-tab-pane> -->
-            <el-tab-pane label="基础配置" name="2"></el-tab-pane>
+            <!-- <el-tab-pane label="基础配置" name="2"></el-tab-pane> -->
             <!-- <el-tab-pane label="通知配置" name="3"></el-tab-pane> -->
             <el-tab-pane label="安全设置" name="4"></el-tab-pane>
             <!-- <el-tab-pane label="店铺装修" name="5"></el-tab-pane> -->
             <el-tab-pane label="跳转小程序" name="6" v-if="shopId == 1"></el-tab-pane>
             <el-tab-pane label="通知中心" name="7"></el-tab-pane>
-            <el-tab-pane label="店铺收款码" name="9"></el-tab-pane>
+            <!-- <el-tab-pane label="店铺收款码" name="9"></el-tab-pane> -->
         </el-tabs>
         <shopInfo v-if="activeName == 1" />
         <shopSetting v-if="activeName == 2" />