From 25e3a4dfa1a53b5b1d0fc5ebaec56e350a41df34 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 2 Jul 2025 17:02:23 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E6=98=BE=E7=A4=BA=E7=BB=84=E4=BB=B6=E3=80=81=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=94=B6=E6=AC=BE=E6=96=B9=E5=BC=8F=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  | 147 ++++++++++++++++++++++++++++++++-----
 package.json                       |   1 +
 src/components/QrCode.vue          |  79 ++++++++++++++++++++
 src/views/agent/payInfoSetting.vue |  75 +++++++++++++++----
 4 files changed, 269 insertions(+), 33 deletions(-)
 create mode 100644 src/components/QrCode.vue

diff --git a/package-lock.json b/package-lock.json
index d9d620d..3bbc824 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "core-js": "^3.40.0",
         "element-ui": "^2.15.14",
         "lottie-web": "^5.12.2",
+        "qrcode": "^1.5.4",
         "regenerator-runtime": "^0.14.1",
         "vue": "^2.6.14",
         "vue-clickaway": "^2.2.2",
@@ -3447,7 +3448,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3456,7 +3456,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -4153,7 +4152,6 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -4363,7 +4361,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -4374,8 +4371,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colord": {
       "version": "2.9.3",
@@ -4982,6 +4978,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -5227,6 +5232,12 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -5420,8 +5431,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -6362,7 +6372,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -6532,7 +6541,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -7207,7 +7215,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7562,7 +7569,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -8464,7 +8470,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -8479,7 +8484,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -8504,7 +8508,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -8593,7 +8596,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8666,6 +8668,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.35",
       "resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.35.tgz",
@@ -9429,6 +9440,89 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmmirror.com/qs/-/qs-6.13.0.tgz",
@@ -9681,7 +9775,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9695,6 +9788,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
@@ -10114,6 +10213,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -10452,7 +10557,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -10466,7 +10570,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11753,6 +11856,12 @@
         "which": "bin/which"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/wildcard": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.1.tgz",
diff --git a/package.json b/package.json
index 9e024cc..fe6d2ba 100755
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "core-js": "^3.40.0",
     "element-ui": "^2.15.14",
     "lottie-web": "^5.12.2",
+    "qrcode": "^1.5.4",
     "regenerator-runtime": "^0.14.1",
     "vue": "^2.6.14",
     "vue-clickaway": "^2.2.2",
diff --git a/src/components/QrCode.vue b/src/components/QrCode.vue
new file mode 100644
index 0000000..5baa559
--- /dev/null
+++ b/src/components/QrCode.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="qr-code-container">
+      <!-- 二维码图片展示区域 -->
+      <div class="qr-code-image">
+        <img 
+          v-if="imageUrl" 
+          :src="imageUrl" 
+          alt="二维码" 
+          class="qr-code-img"
+        >
+        <!-- <div v-else class="empty-placeholder">
+          暂未配置
+        </div> -->
+      </div>
+      <!-- 自定义文案区域 -->
+      <slot name="desc"></slot>
+
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'QrCodeDisplay',
+    props: {
+      // 二维码图片URL
+      imageUrl: {
+        type: String,
+        default: ''
+      },
+      // 下方显示的文字
+    //   text: {
+    //     type: String,
+    //     default: '微信扫码支付'
+    //   }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .qr-code-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 200px; /* 可根据需要调整 */
+    margin: 0 auto;
+  }
+  
+  .qr-code-image {
+    width: 120px;
+    aspect-ratio: 1/1; /* 保持正方形 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    overflow: hidden;
+    /* margin-bottom: 12px; */
+  }
+  
+  .qr-code-img {
+    width: 120px;
+    height: 120px;
+    object-fit: contain;
+  }
+  
+  .empty-placeholder {
+    color: #999;
+    font-size: 14px;
+  }
+  
+  .qr-code-text {
+    font-size: 16px;
+    color: #333;
+    text-align: center;
+    font-weight: 500;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/agent/payInfoSetting.vue b/src/views/agent/payInfoSetting.vue
index 1571ed9..b80eb7a 100644
--- a/src/views/agent/payInfoSetting.vue
+++ b/src/views/agent/payInfoSetting.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="main-content12">
+    <div class="main-content12 payInfo_wrap">
         <!-- page content -->
         <div class="site-setting-wrap min-flex-right">
             <div class="siteMessage flex-common">
@@ -50,7 +50,19 @@
                                     <p>预览支付二维码</p>
                                 </div>
                                 <div class="preview-content">
-                                    
+                                     <!-- 有二维码的情况 -->
+                                    <QrCode 
+                                    v-if="qrCodeDataUrl"
+                                        :imageUrl="qrCodeDataUrl"
+                                        text="微信扫码支付"
+                                    >
+                                        <div class="flex gap8" slot="desc">
+                                            <img style="width: 16px;" src="@/assets/register/weixin.svg" alt="">
+                                            <span class="qrcode-title ft12">微信扫码支付</span>
+                                        </div>
+                                    </QrCode>
+                                    <span v-else class="desc_title">暂未配置</span>
+    
                                 </div>
                             </div>
                         </div>
@@ -131,6 +143,7 @@
                 </el-form>
             </div>
         </div>
+        <Footer></Footer>
         <div class="register-btns">
             <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancle">取消</GuipButton>
             <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText }}</GuipButton>
@@ -139,18 +152,14 @@
     
 </template>
 <script>
-// import GuipInput from '@/components/GuipInput.vue';
 import store from '@/store';
 import { mapState } from 'vuex';
 import GuipFormItem from '@/components/GuipFormItem.vue';
 import GuipInput from '@/components/GuipInput.vue';
-// import GuipTextarea from '@/components/GuipTextarea.vue';
-// import GuipRadio from '@/components/GuipRadio.vue';
-// import CustomDropdown from '@/components/CustomDropdown.vue';
 import GuipButton from '@/components/GuipButton.vue';
-// import GroupFormBtns from '@/components/GroupFormBtns.vue';
-// import {setHighActive} from '@/utils/common';
-
+import Footer from '@/components/Footer.vue';
+import QrCode from '@/components/QrCode.vue';
+import QRCode from 'qrcode'
 // 收款方式
 const PAY_TYPE_TAOBAO = 0;    // 淘宝
 const PAY_TYPE_WEIXIN = 2;    // 微信
@@ -169,6 +178,8 @@ export default {
         // GuipTextarea,
         // CustomDropdown,
         GuipButton,
+        QrCode,
+    Footer,
         // GroupFormBtns
 
     },
@@ -185,6 +196,7 @@ export default {
             payTypeJingdong: PAY_TYPE_JINGDONG,
             payTypePdd: PAY_TYPE_PDD,
             confirmText: '保存',
+            qrCodeDataUrl:''
         }
     },
     computed: {
@@ -198,6 +210,14 @@ export default {
         store.commit('SET_PAGETITLE', '支付授权');
 
         this.getPayment();
+    // 模拟生成二维码
+        QRCode.toDataURL('https://your-payment-link.com')
+        .then(url => {
+            this.qrCodeDataUrl = url
+        })
+        .catch(err => {
+            console.error(err)
+        })
     },
     methods: {
         getPayment() {
@@ -304,7 +324,7 @@ export default {
         },
         cancle() {
             this.getPayment();
-        }
+        },
     }
 }
 </script>
@@ -313,10 +333,21 @@ a {
   text-decoration: none;
   color: #006AFF;
 }
+.payInfo_wrap{
+    height: calc(100% - 80px);
+    box-sizing: border-box;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
 .register-btns {
   // height: 78px;
   /* 自动布局 */
   // width: 344px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -335,11 +366,24 @@ a {
     width: 100%;
     height: 100%;
     text-align: left;
+    padding: 24px 20px;
+    box-sizing: border-box;
 }
 
 .preview-title {
-    padding-top: 24px;
-    padding-left: 20px;
+    // padding-top: 24px;
+    // padding-left: 20px;
+}
+.qrcode-title{
+    font-size: 12px;
+    line-height: 13px;
+    letter-spacing: 0.08em;
+    color: #0DAF49;
+}
+.desc_title{
+    font-size: 16px;
+    letter-spacing: 0.08em;
+    color: #626573;
 }
 .preview-title p {
     font-size: 14px;
@@ -351,10 +395,12 @@ a {
 
 .preview-content {
     margin-top: 20px;
-    margin-left: 20px;
+    // margin-left: 20px;
+    padding: 16px;
+    box-sizing: border-box;
     background: #FFFFFF;
     width: 100%;
-    height: 200px;
+    min-height: 138px;
 }
 
 .beforeNotice {
@@ -428,6 +474,7 @@ a {
 
 .site-setting-wrap {
     width: 100%;
+    flex: 1;
 }
 
 </style>
\ No newline at end of file

From 60c187ee887aab1e22d6227f1477b47128ced81e Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 2 Jul 2025 17:55:48 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E3=80=81=E5=A2=9E=E5=8A=A0swtich=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E3=80=81=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=8D=95=E7=8B=AC=E9=A1=B9?=
 =?UTF-8?q?=E5=8F=AF=E7=82=B9=E5=87=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GuipSwitch.vue      |  22 ++--
 src/components/SetLeftMenu.vue     |  27 +++--
 src/router/index.js                |   2 +-
 src/views/agent/payInfoSetting.vue | 206 ++++++++++++++++++++-----------------
 src/views/elementGroups.vue        |  11 +-
 5 files changed, 157 insertions(+), 111 deletions(-)

diff --git a/src/components/GuipSwitch.vue b/src/components/GuipSwitch.vue
index 4792c09..128903c 100644
--- a/src/components/GuipSwitch.vue
+++ b/src/components/GuipSwitch.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form-item>
-        <div class="flex switchWrap">
-            <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText
+        <div class="switchWrap">
+            <span :class="['switchDesc',{'fl':float =='left'},{'fr':float =='right'}]" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText
                 }}</span>
 
             <el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" v-bind="$attrs"
@@ -47,6 +47,10 @@ export default {
             type: String,
             default: '#BABDC2',
         },
+        float: {
+            type: String,
+            default: 'left',
+        },
         disabled: {
             type: Boolean,
             default: false,
@@ -94,18 +98,24 @@ export default {
 </script>
 <style scoped>
 .switchWrap {
-    align-items: center;
+    /* align-items: center; */
+}
+.fl{
+    float: left;
+    margin-right: 12px;
+}
+.fr{
+    float: right;
+    margin-left: 12px;
 }
-
 .switchDesc {
     font-size: 12px;
     font-weight: normal;
-    line-height: 13px;
+    line-height: 20px;
     letter-spacing: 0.08em;
     font-variation-settings: "opsz" auto;
     /* text/text_3 */
     color: #626573;
     display: inline-block;
-    margin-right: 15px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/SetLeftMenu.vue b/src/components/SetLeftMenu.vue
index 5b20f10..ef96ebc 100644
--- a/src/components/SetLeftMenu.vue
+++ b/src/components/SetLeftMenu.vue
@@ -2,9 +2,8 @@
   <aside class="sidebar">
     <ul style="margin: 0;">
       <li v-for="(item, index) in menuList" :key="item.path + random()">
-        <div
-          :class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']">
-          <!-- @click="gotoPath(item, index)" 暂时先注释 -->
+        <div 
+          :class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']" @click="gotoPath(item, index)">
           <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
             :isActive="($route.path == item.path || (item.noToPath && curIndex == index))" />
           <span class="title_text">{{ item.name }}</span>
@@ -47,8 +46,8 @@ export default {
   },
 
   watch: {
-    '$route'(to, from) {
-      console.log(to, from);
+    '$route'() {
+      // console.log(to, from);
       // 路由变化时重新计算位置
       this.$nextTick(() => {
         this.calculateFloorOffsets();
@@ -105,9 +104,18 @@ export default {
 
       const scrollPosition = this.getScrollPosition();
       let activeFloor = null;
+      console.log(this.curIndex,scrollPosition,'this.curIndex===');
 
       // 从下往上查找当前可见区域对应的楼层
-      for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
+      // for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
+      //   const item = this.menuList[this.curIndex].list[i];
+      //   if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
+      //     activeFloor = item.desc;
+      //     break;
+      //   }
+      // }
+      // 从上往下
+      for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) {
         const item = this.menuList[this.curIndex].list[i];
         if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
           activeFloor = item.desc;
@@ -147,14 +155,15 @@ export default {
     //     ele.classList.remove('ceshi')
     //   }, 1000)
     // }
-    gotoPath(item, index) {
+    gotoPath(item) {
       let path = item.path;
+      this.activeFloor = null
       if (!path) {
-        this.curIndex = index;
+        this.curIndex = 0;
         return;
       }
       if (this.$route.path != path) {
-        this.curIndex = index;
+        this.curIndex = 0;
         this.scrollLock = false;
         this.handleScroll();
         
diff --git a/src/router/index.js b/src/router/index.js
index 9f82c60..606731c 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,7 +17,7 @@ const blackHeaderList = [
   '/franchise'
 ];
 const blackFooterList = [
-  '/', '/franchise'
+  '/', '/franchise','/agent/payInfoSetting'
 ];
 // const whiteSlideList = ['/', '/ui', 
 //   '/agent/siteList', 
diff --git a/src/views/agent/payInfoSetting.vue b/src/views/agent/payInfoSetting.vue
index b80eb7a..7b3fa36 100644
--- a/src/views/agent/payInfoSetting.vue
+++ b/src/views/agent/payInfoSetting.vue
@@ -4,7 +4,7 @@
         <div class="site-setting-wrap min-flex-right">
             <div class="siteMessage flex-common">
                 <h3>支付授权</h3>
-                <el-form v-if="payType==payTypeTaoBao">
+                <el-form v-if="payType == payTypeTaoBao">
                     <div class="flex-wrap">
                         <div class="flex-left" style="max-width:100%">
                             <div class="beforeNotice">
@@ -15,31 +15,39 @@
                                 <p class="mt10 flex">
                                     如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
                                 </p>
-                            </div> 
+                            </div>
                         </div>
                     </div>
                 </el-form>
-                <el-form v-else-if="payType==payTypeWeixin">
+                <el-form v-else-if="payType == payTypeWeixin">
                     <div class="flex-wrap">
                         <div class="flex-left">
                             <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                                 <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
-                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" prop="company_short_name" placeholder="6字以内">
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name"
+                                    prop="company_short_name" placeholder="6字以内">
                                 </GuipInput>
                             </GuipFormItem>
                             <GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）">
-                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
-                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id" prop="mch_id" placeholder="请输入商户号">
+                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
+                                        target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id"
+                                    prop="mch_id" placeholder="请输入商户号">
                                 </GuipInput>
                             </GuipFormItem>
                             <GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥">
-                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span>
-                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2" prop="payinfo.apiv2" placeholder="请输入微信支付秘钥">
+                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
+                                        target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">
+                                        注意，支付密钥不能设置为纯数字</p></span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2"
+                                    prop="payinfo.apiv2" placeholder="请输入微信支付秘钥">
                                 </GuipInput>
                             </GuipFormItem>
                             <GuipFormItem column="column" class="mb24" label="4. 公众号APPID">
-                                <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
-                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid" prop="payinfo.appid" placeholder="请输入公众号APPID">
+                                <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/'
+                                        target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid"
+                                    prop="payinfo.appid" placeholder="请输入公众号APPID">
                                 </GuipInput>
                             </GuipFormItem>
                         </div>
@@ -50,38 +58,36 @@
                                     <p>预览支付二维码</p>
                                 </div>
                                 <div class="preview-content">
-                                     <!-- 有二维码的情况 -->
-                                    <QrCode 
-                                    v-if="qrCodeDataUrl"
-                                        :imageUrl="qrCodeDataUrl"
-                                        text="微信扫码支付"
-                                    >
+                                    <!-- 有二维码的情况 -->
+                                    <QrCode v-if="qrCodeDataUrl" :imageUrl="qrCodeDataUrl" text="微信扫码支付">
                                         <div class="flex gap8" slot="desc">
                                             <img style="width: 16px;" src="@/assets/register/weixin.svg" alt="">
                                             <span class="qrcode-title ft12">微信扫码支付</span>
                                         </div>
                                     </QrCode>
                                     <span v-else class="desc_title">暂未配置</span>
-    
+
                                 </div>
                             </div>
                         </div>
                     </div>
                 </el-form>
-                <el-form v-else-if="payType==payTypeAlipay">
+                <el-form v-else-if="payType == payTypeAlipay">
                     <div class="flex-wrap">
                         <div class="flex-left">
-                            <div v-if="payinfo.is_pay_public==0">
+                            <div v-if="payinfo.is_pay_public == 0">
                                 <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                                     <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
-                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" placeholder="6字以内"></GuipInput>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column"
+                                        v-model="payinfo.short_name" placeholder="6字以内"></GuipInput>
                                 </GuipFormItem>
                                 <GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
                                     <span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span>
-                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入公司支付宝账号"></GuipInput>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
+                                        placeholder="请输入公司支付宝账号"></GuipInput>
                                 </GuipFormItem>
                             </div>
-                            <div v-if="payinfo.is_pay_public==1">
+                            <div v-if="payinfo.is_pay_public == 1">
                                 <div class="beforeNotice">
                                     <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
                                     <p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
@@ -89,11 +95,14 @@
                                 </div>
                                 <GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
                                     <span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
-                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column"
+                                        v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput>
                                 </GuipFormItem>
                                 <GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
                                     <span class="desc" slot="formRight">请输入有效账号</span>
-                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号"></GuipInput>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column"
+                                        v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号">
+                                    </GuipInput>
                                 </GuipFormItem>
                             </div>
                         </div>
@@ -104,29 +113,31 @@
                                     <p>预览支付二维码</p>
                                 </div>
                                 <div class="preview-content">
-                                    
+
                                 </div>
                             </div>
                         </div>
                     </div>
                 </el-form>
-                <el-form v-else-if="payType==payTypePdd">
+                <el-form v-else-if="payType == payTypePdd">
                     <div class="flex-wrap">
                         <div class="flex-left" style="max-width:100%">
                             <div class="beforeNotice">
                                 <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
-                                <p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
+                                <p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex"
+                                        target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
                                 <p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                 <p class="mt5 flex gray">授权成功后点击下方“同步授权”。</p>
                             </div>
                             <GuipFormItem column="column" class="mb24" label="账号名称">
                                 <!-- <span class="desc" slot="formRight">账号名称</span> -->
-                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
+                                    placeholder="请输入账号名称"></GuipInput>
                             </GuipFormItem>
                         </div>
                     </div>
                 </el-form>
-                <el-form v-else-if="payType==payTypeJingdong">
+                <el-form v-else-if="payType == payTypeJingdong">
                     <div class="flex-wrap">
                         <div class="flex-left" style="max-width:100%">
                             <div class="beforeNotice">
@@ -136,7 +147,8 @@
                             </div>
                             <GuipFormItem column="column" class="mb24" label="账号名称">
                                 <!-- <span class="desc" slot="formRight">账号名称</span> -->
-                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
+                                    placeholder="请输入账号名称"></GuipInput>
                             </GuipFormItem>
                         </div>
                     </div>
@@ -146,10 +158,11 @@
         <Footer></Footer>
         <div class="register-btns">
             <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancle">取消</GuipButton>
-            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText }}</GuipButton>
+            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText
+            }}</GuipButton>
         </div>
     </div>
-    
+
 </template>
 <script>
 import store from '@/store';
@@ -179,7 +192,7 @@ export default {
         // CustomDropdown,
         GuipButton,
         QrCode,
-    Footer,
+        Footer,
         // GroupFormBtns
 
     },
@@ -196,7 +209,7 @@ export default {
             payTypeJingdong: PAY_TYPE_JINGDONG,
             payTypePdd: PAY_TYPE_PDD,
             confirmText: '保存',
-            qrCodeDataUrl:''
+            qrCodeDataUrl: ''
         }
     },
     computed: {
@@ -210,21 +223,21 @@ export default {
         store.commit('SET_PAGETITLE', '支付授权');
 
         this.getPayment();
-    // 模拟生成二维码
+        // 模拟生成二维码
         QRCode.toDataURL('https://your-payment-link.com')
-        .then(url => {
-            this.qrCodeDataUrl = url
-        })
-        .catch(err => {
-            console.error(err)
-        })
+            .then(url => {
+                this.qrCodeDataUrl = url
+            })
+            .catch(err => {
+                console.error(err)
+            })
     },
     methods: {
         getPayment() {
             this.$http('POST', '/agentnew/ajax_get_payinfo', {
                 payid: this.$route.query.payid,
-            },{
-                headers:{
+            }, {
+                headers: {
                     'Auth': this.token
                 }
             }).then(response => {
@@ -243,33 +256,33 @@ export default {
         },
         // 确认按钮事件
         addPayment() {
-        if (this.payType == PAY_TYPE_TAOBAO) {
-            window.open(this.payinfo.authurl, '_blank');
-            
-        } else if (this.payType == PAY_TYPE_WEIXIN) {
-            this.$http('POST', '/agentnew/ajax_add_weixinpay', {
-                payid: this.$route.query.payid,
-                company_short_name: this.payinfo.short_name,
-                mch_id: this.payinfo.mch_id,
-                apiv2: this.payinfo.apiv2,
-                appid: this.payinfo.appid
-            }, {
-                headers: {
-                    'Auth': this.token
-                }
-            }).then(response => {
-                this.$nextTick(() => {
-                    if (response.status) {
-                        this.$Message.success(response.info);
-                    } else {
-                        this.$Message.error(response.info);
+            if (this.payType == PAY_TYPE_TAOBAO) {
+                window.open(this.payinfo.authurl, '_blank');
+
+            } else if (this.payType == PAY_TYPE_WEIXIN) {
+                this.$http('POST', '/agentnew/ajax_add_weixinpay', {
+                    payid: this.$route.query.payid,
+                    company_short_name: this.payinfo.short_name,
+                    mch_id: this.payinfo.mch_id,
+                    apiv2: this.payinfo.apiv2,
+                    appid: this.payinfo.appid
+                }, {
+                    headers: {
+                        'Auth': this.token
                     }
+                }).then(response => {
+                    this.$nextTick(() => {
+                        if (response.status) {
+                            this.$Message.success(response.info);
+                        } else {
+                            this.$Message.error(response.info);
+                        }
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
                 })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
 
-            } else if (this.payType == PAY_TYPE_ALIPAY) { 
+            } else if (this.payType == PAY_TYPE_ALIPAY) {
                 this.$http('POST', '/agentnew/ajax_add_alipay', {
                     payid: this.$route.query.payid,
                     company_short_name: this.payinfo.short_name,
@@ -286,10 +299,10 @@ export default {
                         if (response.status) {
                             if (this.payinfo.is_pay_public == 1) {
                                 this.$Message.success(response.info);
-                            } else { 
+                            } else {
                                 window.open(response.data.authurl, '_blank');
                             }
-                            
+
                         } else {
                             this.$Message.error(response.info);
                         }
@@ -315,7 +328,7 @@ export default {
                 }).catch(error => {
                     console.error(error, 'error')
                 })
-            } else if (this.payType == PAY_TYPE_JINGDONG) { 
+            } else if (this.payType == PAY_TYPE_JINGDONG) {
                 window.open(this.payinfo.authurl, '_blank');
             }
         },
@@ -330,36 +343,39 @@ export default {
 </script>
 <style lang="scss" scoped>
 a {
-  text-decoration: none;
-  color: #006AFF;
+    text-decoration: none;
+    color: #006AFF;
 }
-.payInfo_wrap{
+
+.payInfo_wrap {
     height: calc(100% - 80px);
     box-sizing: border-box;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
 }
+
 .register-btns {
-  // height: 78px;
-  /* 自动布局 */
-  // width: 344px;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  background: #FFFFFF;
-  padding: 16px 0px;
-  /* 蓝色阴影_常规 */
-  box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
-
-  button:nth-child(1) {
-    margin-right: 56px;
-  }
+    // height: 78px;
+    /* 自动布局 */
+    // width: 344px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background: #FFFFFF;
+    padding: 16px 0px;
+    /* 蓝色阴影_常规 */
+    box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
+
+    button:nth-child(1) {
+        margin-right: 56px;
+    }
 }
+
 .preview {
     background: #FAFAFA;
     border-radius: 4px;
@@ -374,17 +390,20 @@ a {
     // padding-top: 24px;
     // padding-left: 20px;
 }
-.qrcode-title{
+
+.qrcode-title {
     font-size: 12px;
     line-height: 13px;
     letter-spacing: 0.08em;
     color: #0DAF49;
 }
-.desc_title{
+
+.desc_title {
     font-size: 16px;
     letter-spacing: 0.08em;
     color: #626573;
 }
+
 .preview-title p {
     font-size: 14px;
     font-weight: bold;
@@ -476,5 +495,4 @@ a {
     width: 100%;
     flex: 1;
 }
-
 </style>
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 552b9a1..d7afe6c 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -297,8 +297,17 @@
                     <label for="">开关L</label>
                     <!-- active-value 开启状态的值 -->
                     <!-- inactive-value 关闭状态的值 -->
-                    <GuipSwitch :modelValue="switchValue" activeText="默认类型" inactiveText="关闭" @change="onSwitchChange">
+                    <GuipSwitch :modelValue="switchValue" activeText="默认类型boolean" inactiveText="关闭" @change="onSwitchChange">
                     </GuipSwitch>
+                </div>
+                <div class="ele-item">
+                    <label for="">开关L</label>
+                    <!-- 左侧不需要添加float 属性 -->
+                    <GuipSwitch :modelValue="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭" @change="onSwitchChange">
+                    </GuipSwitch>
+                </div>
+                <div class="ele-item">
+                    <label for="">开关L</label>
                     <GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange">
                     </GuipSwitch>
                     <GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange">