资产页面

package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.6.4",
         "js-cookie": "^2.2.1",
         "postcss-pxtorem": "^5.1.1",
+        "qrcode": "^1.5.4",
         "vant": "^2.8.3",
         "vue": "^2.6.11",
         "vue-router": "^3.1.6",
@@ -2032,8 +2033,7 @@
     "node_modules/@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
-      "dev": true
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
     },
     "node_modules/@types/events": {
       "version": "3.0.0",
@@ -3893,7 +3893,6 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -4230,7 +4229,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
       "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "dev": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -4241,7 +4239,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
       "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4249,14 +4246,12 @@
     "node_modules/cliui/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/cliui/node_modules/string-width": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
       "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -4270,7 +4265,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
       "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.0"
       },
@@ -4340,8 +4334,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/color-string": {
       "version": "1.5.3",
@@ -5338,7 +5331,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5714,6 +5706,11 @@
       "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
       "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=="
+    },
     "node_modules/dir-glob": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
@@ -7086,7 +7083,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -8248,7 +8244,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9928,7 +9923,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -9979,7 +9973,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -10307,6 +10300,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -11183,6 +11184,22 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -11647,7 +11664,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11655,8 +11671,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
     "node_modules/requires-port": {
       "version": "1.0.0",
@@ -12131,8 +12146,7 @@
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "node_modules/set-value": {
       "version": "2.0.1",
@@ -14701,8 +14715,7 @@
     "node_modules/which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "node_modules/word-wrap": {
       "version": "1.2.3",
@@ -14726,7 +14739,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -14740,7 +14752,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
       "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -14749,7 +14760,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
       "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-      "dev": true,
       "dependencies": {
         "@types/color-name": "^1.1.1",
         "color-convert": "^2.0.1"
@@ -14765,7 +14775,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -14776,14 +14785,12 @@
     "node_modules/wrap-ansi/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/wrap-ansi/node_modules/string-width": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
       "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -14797,7 +14804,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
       "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.0"
       },
@@ -14844,8 +14850,7 @@
     "node_modules/y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-      "dev": true
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
     },
     "node_modules/yallist": {
       "version": "3.1.1",
@@ -14857,7 +14862,6 @@
       "version": "15.3.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.1.tgz",
       "integrity": "sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==",
-      "dev": true,
       "dependencies": {
         "cliui": "^6.0.0",
         "decamelize": "^1.2.0",
@@ -14879,7 +14883,6 @@
       "version": "18.1.3",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
       "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "dev": true,
       "dependencies": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
@@ -14892,7 +14895,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
       "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -14900,14 +14902,12 @@
     "node_modules/yargs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/yargs/node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/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"
@@ -14920,7 +14920,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -14932,7 +14931,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -14944,7 +14942,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -14953,7 +14950,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
       "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -14967,7 +14963,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
       "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.0"
       },

package.json

@@ -10,12 +10,13 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "js-cookie": "^2.2.1",
+    "postcss-pxtorem": "^5.1.1",
+    "qrcode": "^1.5.4",
     "vant": "^2.8.3",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
-    "vuex": "^3.1.3",
-    "js-cookie": "^2.2.1",
-    "postcss-pxtorem": "^5.1.1"
+    "vuex": "^3.1.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
@@ -27,9 +28,9 @@
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "compression-webpack-plugin": "^4.0.0",
+    "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
-    "eslint": "^6.7.2",
     "prettier": "^1.19.1",
     "sass": "^1.26.10",
     "sass-loader": "^9.0.2",

src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="app">
     <router-view></router-view>
-    <TabBar v-if="showTabBar"></TabBar>
+    <div class="tab-bar" v-if="!$route.meta.hideTabBar">
+      <TabBar></TabBar>
+    </div>
   </div>
 </template>
 
@@ -46,5 +48,15 @@ h1{
   color: #2c3e50;
   height: 100%;
   /* padding-bottom: 50px; */
+  min-height: 100vh;
+  position: relative;
+}
+
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
 }
 </style>

src/api/home.js

@@ -1,4 +1,17 @@
 import request from "@/utils/request";
 //获取轮播图
 export const getBanners = (data) => request({ url: "index/get_banners", method: "post", data,loading:true });
-export const getUserInfo = (data) => request({ url: "user/get_userinfo", method: "post", data,loading:true });
+export const getUserInfo = (data) => request({ url: "user/get_userinfo", method: "post", data,loading:true });
+
+// 领取邀请奖励
+export function getShareReward(renshu) {
+  const formData = new FormData();
+  formData.append('renshu', renshu);
+  
+  return request({
+    url: '/index/get_shareccb',
+    method: 'post',
+    data: formData,
+    loading: true
+  })
+}

src/api/profile.js

@@ -0,0 +1,32 @@
+import request from "@/utils/request";
+// 退出登录
+export const logout = (data) => request({ url: "user/logout", method: "post", data,loading:true });
+// 获取通知
+export const getNotification = () => request({ url: "index/gettong", method: "post", loading: true });
+// 套现
+export const cashOut = () => request({ url: "user/get_userinfo", method: "post", loading: true });
+// 养老金提现
+export const withdrawPension = () => request({ url: "index/tiyang", method: "post", loading: true });
+// 签到
+export const signIn = () => request({ url: "user/sign_in", method: "post", loading: true });
+// 提现
+export const withdrawCoin = (params) => request({ url: "index/withdrawCoinApp", method: "get", params, loading: true });
+// 获取银行卡信息
+export const getBankInfo = () => request({ url: "index/get_bank", method: "post", loading: true });
+// 获取ETH信息
+export const getEthInfo = () => request({ url: "index/get_eth_info", method: "get", loading: true });
+// 获取提现记录
+export const getWithdrawRecords = () => request({ url: "index/get_withrecods", method: "get", loading: true });
+// 获取礼品记录
+export const getPrizeRecords = () => request({ url: "index/get_jpjl", method: "get", loading: true });
+// 获取团队信息
+export const getMyTeam = (type) => {
+  const formData = new FormData();
+  formData.append('type', type);
+  return request({
+    url: 'index/get_myteam',
+    method: 'post',
+    data: formData,
+    loading: true
+  });
+};

src/main.js

@@ -15,7 +15,7 @@ Vue.config.productionTip = false;
 }) */
 router.beforeEach((to, from, next) => {
   //白名单路由
-  const whiteUrl = ["/login", "/forget", "/register", "/signin_github"];
+  const whiteUrl = ["/login", "/forget", "/register", "/signin_github","/usreMei"];
   if (getToken()) {
     if (to.path === "/login") {
       next("/home");

src/router/index.js

@@ -6,6 +6,19 @@ import Dynamic from "@/views/Dynamic.vue";
 import Profile from "@/views/Profile.vue";
 import ProfileDetail from "@/views/ProfileDetail.vue";
 import Register from "@/views/register.vue";
+import Charges from "@/views/charges.vue";
+import Financial from "@/views/financial.vue";
+import Signin from "@/views/Signin.vue";
+import Share from "@/views/Share.vue";
+import Mention from "@/views/Mention.vue";
+import UserCenter from "@/views/UserCenter.vue";
+import RealAuthentication from "@/views/RealAuthentication.vue";
+import BankCard from "@/views/BankCard.vue";
+import Member from "@/views/Member.vue";
+import TeamDetail from "@/views/TeamDetail.vue";
+import AssetCenter from "@/views/AssetCenter.vue";
+import OrderList from "@/views/OrderList.vue";
+import LeverList from "@/views/LeverList.vue";
 
 Vue.use(VueRouter);
 
@@ -44,6 +57,46 @@ const routes = [
     name: "Register",
     component: Register
   },
+  {
+    path: "/charges",
+    name: "Charges",
+    component: Charges,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/financial",
+    name: "Financial",
+    component: Financial,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/signin",
+    name: "Signin",
+    component: Signin,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/share",
+    name: "Share",
+    component: Share,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/mention",
+    name: "Mention",
+    component: Mention,
+    meta: {
+      hideTabBar: true
+    }
+  },
   {
     path: "/login",
     name: "login",
@@ -56,6 +109,70 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "forget" */ "../views/forget.vue")
   },
+  {
+    path: "/user-center",
+    name: "UserCenter",
+    component: UserCenter,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/real-authentication",
+    name: "RealAuthentication",
+    component: RealAuthentication,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/bank-card",
+    name: "BankCard",
+    component: BankCard,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/member",
+    name: "Member",
+    component: Member,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/team-detail",
+    name: "TeamDetail",
+    component: TeamDetail,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/asset-center",
+    name: "AssetCenter",
+    component: AssetCenter,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/order-list",
+    name: "OrderList",
+    component: OrderList,
+    meta: {
+      hideTabBar: true
+    }
+  },
+  {
+    path: "/lever-list",
+    name: "LeverList",
+    component: LeverList,
+    meta: {
+      hideTabBar: true
+    }
+  }
 ];
 
 const router = new VueRouter({

src/views/AssetCenter.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">资产中心</div>
+    </div>
+
+    <!-- 固定顶部资产信息 -->
+    <div class="fixedTop">
+      <div class="top">
+        <div class="flex totalView">
+          <div class="totalText" style="font-weight: bold;">账户总资产</div>
+          <img 
+            :src="isBalanceVisible ? require('@/assets/eye-open.png') : require('@/assets/eye-close.png')"
+            class="eye-icon"
+            @click="toggleBalance"
+          >
+        </div>
+        <div class="flex opts">
+          <div class="flex optsItem optsItem1">
+            <div class="botalNumView1">¥ {{ isBalanceVisible ? totalAssets : '******' }}</div>
+          </div>
+        </div>
+        <div class="flex">
+          <div class="flex optsItem optsItem1" style="flex-direction: column;">
+            <div class="optsItemText">财政补贴</div>
+            <div class="optsItemText">{{ isBalanceVisible ? (assetInfo.subsidy || '0.00') : '******' }}</div>
+          </div>
+          <div class="line-divider"></div>
+          <div class="flex optsItem optsItem2" style="flex-direction: column;">
+            <div class="optsItemText">现金储备</div>
+            <div class="optsItemText">{{ isBalanceVisible ? (assetInfo.cashReserve || '0.00') : '******' }}</div>
+          </div>
+          <div class="line-divider"></div>
+          <div class="flex optsItem optsItem3" style="flex-direction: column;">
+            <div class="optsItemText">万泰红利</div>
+            <div class="optsItemText">{{ isBalanceVisible ? (assetInfo.bonus || '0.00') : '******' }}</div>
+          </div>
+          <div class="line-divider"></div>
+          <div class="flex optsItem optsItem4" style="flex-direction: column;">
+            <div class="optsItemText">养生币</div>
+            <div class="optsItemText">{{ isBalanceVisible ? (ethInfo.balance || '0.00') : '******' }}</div>
+          </div>
+        </div>
+        <div class="flex opts"></div>
+      </div>
+      <div class="flex acc"></div>
+    </div>
+
+    <!-- 交易记录列表 -->
+    <div class="record-list">
+      <div class="listItem" v-for="(item, index) in transactions" :key="index">
+        <div class="flex listItemC">
+          <div>详细</div>
+          <div class="tr4">金额</div>
+          <div class="right">日期</div>
+        </div>
+        <div class="flex listItemB">
+          <div>{{ item.memo }}</div>
+          <div class="tr4">{{ item.money }}</div>
+          <div class="right gggg">{{ item.addtime }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+import { getEthInfo } from '@/api/profile';
+
+export default {
+  name: 'AssetCenter',
+  data() {
+    return {
+      userInfo: {},
+      ethInfo: {},
+      assetInfo: {
+        subsidy: '0.00',
+        cashReserve: '0.00',
+        bonus: '50805558.28'
+      },
+      transactions: [],
+      isBalanceVisible: true
+    }
+  },
+  computed: {
+    totalAssets() {
+      const bonus = parseFloat(this.assetInfo.bonus) || 0;
+      const subsidy = parseFloat(this.assetInfo.subsidy) || 0;
+      const cashReserve = parseFloat(this.assetInfo.cashReserve) || 0;
+      return (bonus + subsidy + cashReserve).toFixed(2);
+    }
+  },
+  created() {
+    this.getUserInfo();
+    this.getEthInfo();
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    async getEthInfo() {
+      try {
+        const res = await getEthInfo();
+        this.ethInfo = res.data;
+        if (res.data) {
+          this.transactions = res.data;
+        }
+      } catch (error) {
+        console.error('获取ETH信息失败:', error);
+      }
+    },
+    toggleBalance() {
+      this.isBalanceVisible = !this.isBalanceVisible;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #fff;
+  color: #000;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+  font-weight: bold;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #000;
+  border-bottom: 2px solid #000;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.fixedTop {
+  background: #ed4b39;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+
+.flex {
+  display: flex;
+}
+
+.totalView {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.totalText {
+  font-size: 16px;
+  color: #fff;
+  font-weight: normal;
+}
+
+.eye-icon {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.botalNumView1 {
+  font-size: 24px;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+}
+
+.line-divider {
+  width: 1px;
+  height: 40px;
+  background: #fff;
+  margin: 0;
+}
+
+.optsItem {
+  flex: 1;
+  text-align: center;
+  padding: 10px 0;
+}
+
+.optsItemText {
+  font-size: 14px;
+  color: #fff;
+  margin: 5px 0;
+  font-weight: normal;
+}
+
+.listItem {
+  background: #fff;
+  margin: 10px;
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.listItemC {
+  justify-content: space-between;
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.listItemB {
+  justify-content: space-between;
+  color: #333;
+  font-size: 14px;
+}
+
+.tr4 {
+  flex: 0 0 100px;
+  text-align: center;
+}
+
+.right {
+  flex: 0 0 150px;
+  text-align: right;
+}
+
+.gggg {
+  color: #999;
+}
+</style> 

src/views/BankCard.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">绑定银行卡</div>
+    </div>
+
+    <div class="main">
+      <div class="income-card funs">
+        <div class="u-field u-border-bottom">
+          <div class="u-field-inner u-label-postion-left">
+            <div class="u-label">
+              <span class="u-label-text">开户银行</span>
+            </div>
+            <div class="fild-body">
+              <div class="u-flex-1 u-flex">
+                <input 
+                  type="text" 
+                  class="u-field__input-wrap"
+                  placeholder="输入银行名称"
+                  v-model="formData.banktype"
+                  :disabled="!!bankInfo.status"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="income-card funs">
+        <div class="u-field u-border-bottom">
+          <div class="u-field-inner u-label-postion-left">
+            <div class="u-label">
+              <span class="u-label-text">开户地址</span>
+            </div>
+            <div class="fild-body">
+              <div class="u-flex-1 u-flex">
+                <input 
+                  type="text" 
+                  class="u-field__input-wrap"
+                  placeholder="输入银行开户地址"
+                  v-model="formData.address"
+                  :disabled="!!bankInfo.status"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="income-card funs">
+        <div class="u-field u-border-bottom">
+          <div class="u-field-inner u-label-postion-left">
+            <div class="u-label">
+              <span class="u-label-text">卡号姓名</span>
+            </div>
+            <div class="fild-body">
+              <div class="u-flex-1 u-flex">
+                <input 
+                  type="text" 
+                  class="u-field__input-wrap"
+                  placeholder="输入银行卡绑定姓名"
+                  v-model="formData.lastname"
+                  :disabled="!!bankInfo.status"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="income-card funs">
+        <div class="u-field u-border-bottom">
+          <div class="u-field-inner u-label-postion-left">
+            <div class="u-label">
+              <span class="u-label-text">银行账号</span>
+            </div>
+            <div class="fild-body">
+              <div class="u-flex-1 u-flex">
+                <input 
+                  type="text" 
+                  class="u-field__input-wrap"
+                  placeholder="输入银行卡账号"
+                  v-model="formData.banknum"
+                  :disabled="!!bankInfo.status"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div 
+        class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto"
+        @click="handleSubmit"
+      >
+        {{ bankInfo.status ? '已绑定' : '确认绑定' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBankInfo } from '@/api/profile';
+
+export default {
+  name: 'BankCard',
+  data() {
+    return {
+      bankInfo: {},
+      formData: {
+        banktype: '',
+        address: '',
+        lastname: '',
+        banknum: ''
+      }
+    }
+  },
+  created() {
+    this.getBankInfo();
+  },
+  methods: {
+    async getBankInfo() {
+      try {
+        const res = await getBankInfo();
+        this.bankInfo = res.data;
+        if (this.bankInfo.status) {
+          this.formData = {
+            banktype: this.bankInfo.banktype,
+            address: this.bankInfo.address,
+            lastname: this.bankInfo.lastname,
+            banknum: this.bankInfo.banknum
+          };
+        }
+      } catch (error) {
+        console.error('获取银行卡信息失败:', error);
+      }
+    },
+    async handleSubmit() {
+      if (this.bankInfo.status) return;
+      
+      if (!this.formData.banktype) {
+        alert('请输入开户银行');
+        return;
+      }
+      if (!this.formData.address) {
+        alert('请输入开户地址');
+        return;
+      }
+      if (!this.formData.lastname) {
+        alert('请输入卡号姓名');
+        return;
+      }
+      if (!this.formData.banknum) {
+        alert('请输入银行账号');
+        return;
+      }
+      // TODO: 实现银行卡绑定逻辑
+      alert('银行卡绑定成功');
+      await this.getBankInfo();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.main {
+  padding: 15px;
+}
+
+.income-card {
+  background: #fff;
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.u-field {
+  padding: 10px 15px;
+}
+
+.u-field-inner {
+  display: flex;
+  align-items: center;
+}
+
+.u-label {
+  flex: 0 0 65px;
+  font-size: 14px;
+  color: #333;
+}
+
+.fild-body {
+  flex: 1;
+}
+
+.u-flex-1 {
+  flex: 1;
+}
+
+.u-flex {
+  display: flex;
+}
+
+.u-field__input-wrap {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  color: #333;
+  background: transparent;
+}
+
+.u-field__input-wrap::placeholder {
+  color: #999;
+}
+
+.u-field__input-wrap:disabled {
+  color: #666;
+}
+
+.u-border-bottom {
+  position: relative;
+}
+
+.u-border-bottom::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background: rgba(85, 89, 105, 0.12);
+  transform: scaleY(0.5);
+}
+
+.mt30 { margin-top: 30px; }
+.h40 { height: 40px; }
+.lh40 { line-height: 40px; }
+.tc { text-align: center; }
+.white { color: #fff; }
+.ft14 { font-size: 14px; }
+.w90 { width: 90%; }
+.mauto { margin: 0 auto; }
+.radius28 { border-radius: 28px; }
+
+.bgBlue {
+  background: #ed4b39;
+  cursor: pointer;
+}
+
+.bgBlue:active {
+  opacity: 0.9;
+}
+</style> 

src/views/LeverList.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">礼品福利</div>
+    </div>
+
+    <!-- 记录列表 -->
+    <div class="llllll">
+      <div class="list">
+        <div class="listItem" v-for="(item, index) in records" :key="index">
+          <div class="flex listItemC">
+            <div>奖品名称</div>
+            <div class="tr4">领取状态</div>
+            <div class="right">中奖日期</div>
+          </div>
+          <div class="flex listItemB">
+            <div>{{ item.prize_name }}</div>
+            <div class="tr4">{{ getStatusText(item.status) }}</div>
+            <div class="right gggg">{{ item.addtime }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+import { getPrizeRecords } from '@/api/profile';
+
+export default {
+  name: 'LeverList',
+  data() {
+    return {
+      userInfo: {},
+      records: []
+    }
+  },
+  created() {
+    this.getUserInfo();
+    this.getRecords();
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    async getRecords() {
+      try {
+        const res = await getPrizeRecords();
+        this.records = res.data || [];
+      } catch (error) {
+        console.error('获取礼品记录失败:', error);
+      }
+    },
+    getStatusText(status) {
+      return status === 0 ? '申请邮寄' : '已领取';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #fff;
+  color: #000;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+  font-weight: bold;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #000;
+  border-bottom: 2px solid #000;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+}
+
+.llllll {
+  padding: 15px;
+}
+
+.list {
+  background: #f5f5f5;
+}
+
+.listItem {
+  background: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.listItemC {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.listItemB {
+  color: #333;
+  font-size: 14px;
+}
+
+.tr4 {
+  flex: 0 0 100px;
+  text-align: center;
+}
+
+.right {
+  flex: 0 0 150px;
+  text-align: right;
+}
+
+.gggg {
+  color: #999;
+}
+</style> 

src/views/Member.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">我的团队</div>
+    </div>
+
+    <!-- 用户信息卡片 -->
+    <div class="userinfo-card">
+      <div class="card-box">
+        <div class="user-section">
+          <div class="avatar-wrap">
+            <div class="avatar">
+              <img :src="userInfo.avatar" alt="头像">
+            </div>
+          </div>
+          <div class="portrait-box">
+            <div class="info-box"></div>
+            <div class="tuan">
+              <div class="ma">账 号： {{ userInfo.mobile }}</div>
+            </div>
+            <div class="tuan">
+              <div class="ma">邀请码 {{ userInfo.salt }}</div>
+              <div class="fuzi" @click="copyInviteCode">复 制</div>
+            </div>
+          </div>
+        </div>
+        <div class="balance-card-wrap">
+          <div class="balance-card">
+            <div class="tit">我的邀请收益</div>
+            <div class="xia">
+              <div class="num">
+                <span>{{ userInfo.inviteProfit || 0 }}</span>
+              </div>
+            </div>
+            <div class="tit" style="font-size: 3.4vw;">邀请好友立享返佣 ！</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main">
+      <!-- 收益卡片 -->
+      <div class="income-card funs" style="margin-top: 0;">
+        <div class="tit1">
+          <span>我的收益</span>
+          <div class="arrow-right">
+            <img src="@/assets/arrow-right.png" alt="箭头">
+          </div>
+        </div>
+        <div class="show-content">
+          <div class="view-category">
+            <div class="num1">
+              <span>{{ userInfo.level1Profit || 0 }}</span>
+            </div>
+            <div class="text">一级收益</div>
+          </div>
+          <div class="line"></div>
+          <div class="view-category">
+            <div class="num1">
+              <span>{{ userInfo.level2Profit || 0 }}</span>
+            </div>
+            <div class="text">二级收益</div>
+          </div>
+          <div class="line"></div>
+          <div class="view-category">
+            <div class="num1">
+              <span>{{ userInfo.level3Profit || 0 }}</span>
+            </div>
+            <div class="text">三级收益</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 我的团队卡片 -->
+      <div class="income-card funs">
+        <div class="tit1">
+          <span>我的团队</span>
+          <div class="arrow-right">
+            <img src="@/assets/arrow-right.png" alt="箭头">
+          </div>
+        </div>
+        <div class="show-content">
+          <div class="view-category">
+            <div class="num1">
+              <span>{{ userInfo.level1Count || 0 }}</span>
+            </div>
+            <div class="text">一级人数</div>
+          </div>
+          <div class="line"></div>
+          <div class="view-category">
+            <div class="num1">
+              <span>{{ userInfo.level2Count || 0 }}</span>
+            </div>
+            <div class="text">二级人数</div>
+          </div>
+          <div class="line"></div>
+          <div class="view-category">
+            <div class="num1">
+              <span>{{ userInfo.level3Count || 0 }}</span>
+            </div>
+            <div class="text">三级人数</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 工具卡片 -->
+      <div class="tool-card funs">
+        <div class="tool-item flex listItem" @click="$router.push('/share')">
+          <div class="item-right">
+            <div class="view-text">邀请好友</div>
+            <div class="view-image-right">
+              <img src="@/assets/arrow-right.png" alt="箭头">
+            </div>
+          </div>
+        </div>
+        <div class="u-line"></div>
+        
+        <div class="tool-item flex listItem" @click="$router.push('/team-detail')">
+          <div class="item-right">
+            <div class="view-text">团队明细</div>
+            <div class="view-image-right">
+              <img src="@/assets/arrow-right.png" alt="箭头">
+            </div>
+          </div>
+        </div>
+        <div class="u-line"></div>
+        
+        <div class="tool-item flex listItem" @click="$router.push('/asset-center')">
+          <div class="item-right">
+            <div class="view-text">收益记录</div>
+            <div class="view-image-right">
+              <img src="@/assets/arrow-right.png" alt="箭头">
+            </div>
+          </div>
+        </div>
+        <div class="u-line"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+import { getBankInfo } from '@/api/profile';
+
+export default {
+  name: 'Member',
+  data() {
+    return {
+      userInfo: {},
+      bankInfo: {}
+    }
+  },
+  created() {
+    this.getUserInfo();
+    this.getBankInfo();
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    async getBankInfo() {
+      try {
+        const res = await getBankInfo();
+        this.bankInfo = res.data;
+      } catch (error) {
+        console.error('获取银行卡信息失败:', error);
+      }
+    },
+    copyInviteCode() {
+      if (this.userInfo.salt) {
+        navigator.clipboard.writeText(this.userInfo.salt)
+          .then(() => {
+            alert('邀请码已复制');
+          })
+          .catch(() => {
+            alert('复制失败，请手动复制');
+          });
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 20px;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.userinfo-card {
+  background: #fff;
+  padding: 5px;
+  margin: 15px;
+  border-radius: 12px;
+}
+
+.card-box {
+  position: relative;
+}
+
+.user-section {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.avatar-wrap {
+  width: 60px;
+  height: 60px;
+  margin-right: 15px;
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.portrait-box {
+  flex: 1;
+}
+
+.tuan {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.ma {
+  color: #333;
+}
+
+.fuzi {
+  color: #ed4b39;
+  padding: 2px 8px;
+  border: 1px solid #ed4b39;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.balance-card {
+  background: url('../assets/memberbg.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 8px;
+  padding: 15px;
+  margin-top: 20px;
+  
+}
+
+.tit {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tit1 {
+  color: #000;
+  font-size: 14px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.arrow-right {
+  width: 5px;
+  height: 10px;
+}
+
+.arrow-right img {
+  width: 100%;
+  height: 100%;
+}
+
+.num {
+  font-size: 24px;
+  color: #fff;
+  font-weight: bold;
+  margin: 10px 0;
+}
+.num1{
+  font-size: 18px;
+  color: #000;
+  font-weight: bold;
+  margin: 10px 0;
+}
+.main {
+  margin: 15px;
+}
+
+.income-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+
+.show-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.view-category {
+  flex: 1;
+  text-align: center;
+}
+
+.line {
+  width: 1px;
+  height: 30px;
+  background: rgba(0,0,0,0.1);
+}
+
+.text {
+  font-size: 12px;
+  color: #666;
+  margin-top: 5px;
+}
+
+.tool-card {
+  background: #fff;
+  border-radius: 8px;
+}
+
+.tool-item {
+  padding: 15px;
+  cursor: pointer;
+}
+
+.item-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.view-text {
+  font-size: 14px;
+  color: #333;
+}
+
+.view-image-right {
+  width: 5px;
+  height: 10px;
+}
+
+.view-image-right img {
+  width: 100%;
+  height: 100%;
+}
+
+.u-line {
+  height: 1px;
+  background: rgba(0,0,0,0.1);
+  transform: scaleY(0.5);
+}
+
+.flex {
+  display: flex;
+}
+
+.listItem:active {
+  background: rgba(0,0,0,0.05);
+}
+</style> 

src/views/Mention.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="vh100">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">提现</div>
+    </div>
+
+    <div style="width: 95%; margin: 0 auto;">
+      <div style="margin-top: 20px;">温馨提示</div>
+      <div style="margin-top: 10px;">所有提现经国务院批准，由中央财政部联合拨款支出，用于帮扶人民群众救助贫困家庭，全程无需任何的费用</div>
+    </div>
+
+    <div class="ptb20 bgPart plr20">
+      <div class="bd_input ptb10 plr10 tc flex1 radius4">
+        <div class="flex between">
+          <span>当前币种</span>
+          <span>人民币</span>
+        </div>
+      </div>
+      <div class="ft18"></div>
+      <div class="mt10">可用 {{ availableBalance }}元</div>
+      <div class="mt10">提现最小 {{ minWithdrawAmount }}元</div>
+      <div class="mt10">预计到账 {{ amount || '0.00' }}元</div>
+    </div>
+
+    <div class="plr20">
+      <div class="mb20">
+        <div>提现金额</div>
+        <div class="flex alcenter between bdb1f">
+          <input 
+            type="number" 
+            class="h40 flex1 input-uni" 
+            placeholder="最低提现金额20"
+            v-model="amount"
+            pattern="[0-9]*"
+          >
+          <div class="flex alcenter">
+            <span class="blue ft14 pr10 bdr_white50">元</span>
+            <div class="pl10" @click="setMaxAmount">全部</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mb20">
+        <div>登录密码</div>
+        <div class="flex alcenter between bdb1f h40">
+          <input 
+            :type="showPassword ? 'text' : 'password'"
+            class="h40 flex1 input-uni" 
+            placeholder="请输入登录密码"
+            v-model="password"
+          >
+          <img 
+            :src="require(`@/assets/${showPassword ? 'eye-open.png' : 'eye-close.png'}`)" 
+            class="eye-icon"
+            @click="togglePassword"
+          >
+        </div>
+      </div>
+
+      <div 
+        class="mt40 bgBlue radius4 ptb10 white ft14 tc mb10 withdraw-btn"
+        @click="handleWithdraw"
+      >
+        提现
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+import { withdrawCoin } from '@/api/profile';
+
+export default {
+  name: 'Mention',
+  data() {
+    return {
+      userInfo: {},
+      amount: '',
+      password: '',
+      showPassword: false,
+      type: ''
+    }
+  },
+  computed: {
+    minWithdrawAmount() {
+      switch(this.type) {
+        case '1':
+          return 10000;
+        case '2':
+          return 10000;
+        default:
+          return 20;
+      }
+    },
+    availableBalance() {
+      switch(this.type) {
+        case '1':
+          return this.userInfo.coins || 0;
+        case '2':
+          return this.userInfo.money || 0;
+        default:
+          return this.userInfo.dayred || 0;
+      }
+    }
+  },
+  created() {
+    this.type = this.$route.query.type || '';
+    this.getUserInfo();
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    setMaxAmount() {
+      this.amount = this.availableBalance;
+    },
+    togglePassword() {
+      this.showPassword = !this.showPassword;
+    },
+    async handleWithdraw() {
+      if (!this.amount) {
+        alert('请输入提现金额');
+        return;
+      }
+      if (this.amount < this.minWithdrawAmount) {
+        alert(`提现金额不能小于${this.minWithdrawAmount}元`);
+        return;
+      }
+      if (!this.password) {
+        alert('请输入登录密码');
+        return;
+      }
+
+      try {
+        const params = {
+          type: this.type || '3',
+          price: this.amount,
+          payPwd: this.password
+        };
+        
+        await withdrawCoin(params);
+        alert('提现申请已提交');
+        // 刷新用户信息
+        await this.getUserInfo();
+      } catch (error) {
+        console.error('提现失败:', error);
+        alert('提现失败，请重试');
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.vh100 {
+  min-height: 100vh;
+  background:#fff;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.ptb20 { padding: 20px 0; }
+.plr20 { padding: 0 20px; }
+.ptb10 { padding: 10px 0; }
+.plr10 { padding: 0 10px; }
+.mt10 { margin-top: 10px; }
+.mt40 { margin-top: 40px; }
+.mb20 { margin-bottom: 20px; }
+.mb10 { margin-bottom: 10px; }
+.pr10 { padding-right: 10px; }
+.pl10 { padding-left: 10px; }
+
+.bgPart {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  margin :15px 0 ;
+}
+
+.bd_input {
+  background: #fff;
+  border: 1px solid #eee;
+}
+
+.flex { display: flex; }
+.between { justify-content: space-between;padding:  10px; }
+.alcenter { align-items: center; }
+.tc { text-align: center; }
+.flex1 { flex: 1; }
+.radius4 { border-radius: 4px; }
+.ft18 { font-size: 18px; }
+.ft14 { font-size: 14px; }
+.blue { color: #ed4b39; }
+.white { color: #fff; }
+
+.bdb1f {
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.bdr_white50 {
+  border-right: 1px solid rgba(255,255,255,0.5);
+}
+
+.h40 {
+  height: 40px;
+  line-height: 40px;
+}
+
+.input-uni {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  padding: 0 10px;
+}
+
+.eye-icon {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.bgBlue {
+  background: #ed4b39;
+  cursor: pointer;
+}
+
+.withdraw-btn:active {
+  opacity: 0.9;
+}
+</style> 

src/views/OrderList.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">提现记录</div>
+    </div>
+
+    <!-- 记录列表 -->
+    <div class="record-list">
+      <div class="listItem" v-for="(item, index) in records" :key="index">
+        <div class="flex listItemC">
+          <div>详细</div>
+          <div class="tr4">金额</div>
+          <div class="right">日期</div>
+        </div>
+        <div class="flex listItemB">
+          <div>{{ item.memo }}</div>
+          <div class="tr4">{{ item.money }}</div>
+          <div class="right gggg">{{ item.addtime }}</div>
+        </div>
+        <div class="flex listItemB status-row">
+          <div class="status-text">{{ getStatusText(item.status) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+import { getWithdrawRecords } from '@/api/profile';
+
+export default {
+  name: 'OrderList',
+  data() {
+    return {
+      userInfo: {},
+      records: []
+    }
+  },
+  created() {
+    this.getUserInfo();
+    this.getRecords();
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    async getRecords() {
+      try {
+        const res = await getWithdrawRecords();
+        this.records = res.data || [];
+      } catch (error) {
+        console.error('获取提现记录失败:', error);
+      }
+    },
+    getStatusText(status) {
+      const statusMap = {
+        1: '提现成功，已打款到账联名账户',
+        2: '提现失败请核对银行卡信息',
+        3: '提现申请审核中',
+        4: '已取消',
+        5: '审核已通过，打款中'
+      };
+      return statusMap[status] || '审核中';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #fff;
+  color: #000;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+  font-weight: bold;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #000;
+  border-bottom: 2px solid #000;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+}
+
+.record-list {
+  padding: 15px;
+}
+
+.listItem {
+  background: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.listItemC {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.listItemB {
+  color: #333;
+  font-size: 14px;
+  margin-bottom: 5px;
+}
+
+.tr4 {
+  flex: 0 0 100px;
+  text-align: center;
+}
+
+.right {
+  flex: 0 0 150px;
+  text-align: right;
+}
+
+.gggg {
+  color: #999;
+}
+
+.status-row {
+  width: 100%;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.status-text {
+  color: #666;
+  font-size: 14px;
+}
+</style> 

src/views/Profile.vue

@@ -1,37 +1,148 @@
 <template>
-  <div class="profile">
-    <div class="header">
-      <div class="title">个人中心</div>
+  <div class="usremei-container">
+    <!-- 第一个白色背景板块 -->
+    <div class="profile-card">
+      <div class="avatar-section">
+        <img src="@/assets/logo.png" class="avatar" alt="用户头像" />
+      </div>
+      <div class="info-row">
+        <span class="name">{{ userInfo.nickname }}</span>
+        <img src="@/assets/sign.png" class="sign-icon" alt="签到" @click="goToSignin" />
+      </div>
+      <div class="info-row">
+        <span class="label">手机号码</span>
+        <span class="value">{{ userInfo.mobile }}</span>
+      </div>
+      <div class="info-row">
+        <span class="label">邀请码</span>
+        <span class="value">{{ userInfo.salt }}</span>
+      </div>
+    </div>
+
+    <!-- 第二个银行卡板块 -->
+    <div class="bank-card">
+      <div class="bank-content">
+        <img src="@/assets/bank.png" class="bank-logo" alt="银行logo" />
+        <div class="bank-text">
+          <div class="bank-name">中国农业银行农泉联名账户</div>
+          <div><span style="font-size:13px;">余额：</span><span class="balance">{{ userInfo.ukaedu }}</span></div>
+        </div>
+        <div class="button-group">
+          <button class="action-btn button-click-effect" @click="goToCharges">缴纳税费</button>
+          <button class="action-btn button-click-effect" @click="goToFinancial">提升到账额度</button>
+        </div>
+      </div>
     </div>
-    <div class="content">
-      <div class="user-info" @click="goToDetail">
-        <div class="avatar">
-          <img src="" alt="avatar">
+
+    <!-- 收益板块组 -->
+    <div class="profit-section">
+      <!-- 第一行 -->
+      <div class="profit-block">
+        <div class="profit-left">
+          <div class="profit-header">
+            <span>每日分红</span>
+            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=3')">提现</button>
+          </div>
+          <div class="profit-amount">￥{{ userInfo.dayred }}</div>
+        </div>
+        <div class="profit-right">
+          <div class="profit-header">
+            <span>万泰股权</span>
+            <button class="profit-btn button-click-effect" @click="handleCashOut">套现</button>
+          </div>
+          <div class="profit-amount">￥{{ userInfo.guquan }}</div>
+        </div>
+      </div>
+
+      <!-- 第二行 -->
+      <div class="profit-block">
+        <div class="profit-left">
+          <div class="profit-header">
+            <span>财政补贴</span>
+            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=1')">提现</button>
+          </div>
+          <div class="profit-amount">￥{{ userInfo.coins }}</div>
+        </div>
+        <div class="profit-right">
+          <div class="profit-header">
+            <span>养老金</span>
+            <button class="profit-btn button-click-effect" @click="handlePensionWithdraw">提现</button>
+          </div>
+          <div class="profit-amount">￥{{ userInfo.xianjin }}</div>
         </div>
-        <div class="info">
-          <div class="name">张三</div>
-          <div class="phone">138****8888</div>
+      </div>
+
+      <!-- 第三行 -->
+      <div class="profit-block">
+        <div class="profit-left">
+          <div class="profit-header">
+            <span>万泰红利</span>
+            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=2')">提现</button>
+          </div>
+          <div class="profit-amount">￥{{ userInfo.money }}</div>
         </div>
-        <div class="arrow">
-          <i class="iconfont icon-right"></i>
+        <div class="profit-right">
+          <div class="profit-header">
+            <span>养生币</span>
+            <button class="profit-btn button-click-effect">抢福</button>
+          </div>
+          <div class="profit-amount">￥{{ userInfo.score }}</div>
         </div>
       </div>
-      <div class="menu-list">
-        <div class="menu-item">
-          <i class="iconfont icon-wallet"></i>
-          <span>我的钱包</span>
+    </div>
+
+    <!-- 应用中心板块 -->
+    <div class="app-center">
+      <div class="section-title">
+        <div class="title-line"></div>
+        <span>应用中心</span>
+      </div>
+      <div class="function-grid">
+        <div class="function-item button-click-effect" @click="$router.push('/user-center')">
+          <img src="@/assets/221.png" alt="实名认证" />
+          <span>实名认证</span>
+        </div>
+        <div class="function-item button-click-effect" @click="$router.push('/bank-card')">
+          <img src="@/assets/222.png" alt="银行卡绑定" />
+          <span>银行卡绑定</span>
         </div>
-        <div class="menu-item">
-          <i class="iconfont icon-order"></i>
-          <span>我的订单</span>
+        <div class="function-item button-click-effect" @click="$router.push('/member')">
+          <img src="@/assets/223.png" alt="我的团队" />
+          <span>我的团队</span>
         </div>
-        <div class="menu-item">
-          <i class="iconfont icon-settings"></i>
-          <span>设置</span>
+        <div class="function-item button-click-effect" @click="$router.push('/asset-center')">
+          <img src="@/assets/224.png" alt="资金明细" />
+          <span>资金明细</span>
         </div>
-        <div class="menu-item" @click="logOut">
-          <i class="iconfont icon-settings"></i>
-          <span>退出登录</span>
+        <div class="function-item button-click-effect" @click="$router.push('/order-list')">
+          <img src="@/assets/225.png" alt="提现记录" />
+          <span>提现记录</span>
+        </div>
+        <div class="function-item button-click-effect" @click="$router.push('/lever-list')">
+          <img src="@/assets/226.png" alt="礼品福利" />
+          <span>礼品福利</span>
+        </div>
+        <div class="function-item button-click-effect" @click="toAppDownload">
+          <img src="@/assets/227.png" alt="APP下载" />
+          <span>APP下载</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 退出登录按钮 -->
+    <div class="logout-wrapper">
+      <button class="logout-btn button-click-effect" @click="handleLogout">退出登录</button>
+    </div>
+
+    <!-- 自定义确认框 -->
+    <div class="confirm-dialog" v-if="showConfirm">
+      <div class="confirm-mask"></div>
+      <div class="confirm-content">
+        <div class="confirm-title">提示</div>
+        <div class="confirm-message">确认退出登录吗？</div>
+        <div class="confirm-btns">
+          <button class="confirm-btn cancel" @click="cancelLogout">取消</button>
+          <button class="confirm-btn confirm" @click="confirmLogout">确认</button>
         </div>
       </div>
     </div>
@@ -39,107 +150,575 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { getUserInfo } from '@/api/home';
+import { logout, cashOut, withdrawPension } from '@/api/profile';
 export default {
-  name: 'Profile', 
-  computed: {
-    ...mapGetters(["user"])
+  name: 'UsreMei',
+  data() {
+    return {
+      userInfo: {},
+      showConfirm: false
+    }
+  },
+  mounted() {
+    this.getUserInfo();
   },
   methods: {
-    goToDetail() {
-      this.$router.push('/profile/detail')
+    async getUserInfo() {
+      const res = await getUserInfo();
+      this.userInfo = res.data;
+    },
+    goToCharges() {
+      this.$router.push('/charges');
+    },
+    goToFinancial() {
+      this.$router.push('/financial');
     },
-    logOut() {
-      this.$store.dispatch("Logout");
-      this.$router.replace("login");
+    goToSignin() {
+      this.$router.push('/signin');
     },
+    async handleCashOut() {
+      try {
+        await cashOut();
+        alert('套现成功');
+        // 刷新用户信息
+        await this.getUserInfo();
+      } catch (error) {
+        console.error('套现失败:', error);
+        alert('套现失败，请重试');
+      }
+    },
+    async handlePensionWithdraw() {
+      try {
+        await withdrawPension();
+        alert('提现成功');
+        // 刷新用户信息
+        await this.getUserInfo();
+      } catch (error) {
+        console.error('提现失败:', error);
+        alert('提现失败，请重试');
+      }
+    },
+    handleLogout() {
+      this.showConfirm = true;
+    },
+    cancelLogout() {
+      this.showConfirm = false;
+    },
+    toAppDownload() {
+      window.open(this.userInfo.link[1].value, '_blank');
+    },
+    async confirmLogout() {
+      try {
+        await logout();
+        alert('退出成功');
+        // 清除本地存储的token等信息
+        localStorage.removeItem('token');
+        // 跳转到登录页
+        this.$router.replace('/login');
+      } catch (error) {
+        alert('退出失败，请重试');
+      } finally {
+        this.showConfirm = false;
+      }
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.profile {
+<style scoped>
+.usremei-container {
   min-height: 100vh;
-  background-color: #f5f5f5;
-
-  .header {
-    height: 44px;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-bottom: 1px solid #eee;
-
-    .title {
-      font-size: 18px;
-      font-weight: 500;
-    }
+  background-image: url('../assets/dabag.png');
+  background-size: cover;
+  background-position: center;
+  padding: 20px;
+  padding-top: 60px;
+  padding-bottom: 80px; /* 为底部tab预留空间 */
+  box-sizing: border-box; /* 确保padding不会增加容器高度 */
+  overflow-y: auto; /* 允许内容滚动 */
+  position: relative; /* 为fixed定位提供参考 */
+}
+
+.profile-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  position: relative;
+  padding-top: 60px;
+}
+
+.avatar-section {
+  position: absolute;
+  top: -40px; /* 让头像向上偏移，实现半超出效果 */
+  left: 20px; /* 左侧距离 */
+}
+
+.avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #fff; /* 添加白色边框使头像更突出 */
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  font-size: 16px;
+}
+
+.name {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sign-icon {
+  width: 50px;
+  height: 40px;
+}
+
+.label {
+  color: #666;
+}
+
+.value {
+  color: #333;
+}
+
+.bank-card {
+  background: url('../assets/gebg.png');
+  background-size: cover;
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.bank-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+}
+
+.bank-logo {
+  width: 50px; /* 稍微缩小logo */
+  height: 50px;
+  flex-shrink: 0;
+}
+
+.bank-text {
+  flex: 2; /* 给文字更多空间 */
+  min-width: 0;
+}
+
+.bank-name {
+  font-weight: bold;
+  font-size: 10px; /* 稍微减小字号 */
+  color: #333;
+  margin-bottom: 10px;
+  line-height: 1.2;
+  white-space: normal; /* 允许换行 */
+}
+
+.balance {
+  font-size: 18px;
+  color: #85370d;
+  font-weight: bold;  
+}
+
+.button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px; /* 减小按钮间距 */
+  flex-shrink: 0;
+  width: 90px; /* 固定按钮组宽度 */
+}
+
+.action-btn, .profit-btn, .logout-btn {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.action-btn {
+  background-color: #fb3f6c;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.action-btn:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
+.profit-btn {
+  background-color: #fb3f6c;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.profit-btn:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
+.function-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.function-item:active {
+  transform: scale(0.95);
+  opacity: 0.8;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.5;
+  }
+  20% {
+    transform: scale(25, 25);
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(40, 40);
   }
+}
 
-  .content {
-    .user-info {
-      display: flex;
-      align-items: center;
-      padding: 20px 15px;
-      background-color: #fff;
-      margin-bottom: 10px;
-
-      .avatar {
-        width: 60px;
-        height: 60px;
-        border-radius: 50%;
-        overflow: hidden;
-        margin-right: 15px;
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
+.action-btn::after,
+.profit-btn::after,
+.logout-btn::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5px;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.5);
+  opacity: 0;
+  border-radius: 100%;
+  transform: scale(1, 1) translate(-50%);
+  transform-origin: 50% 50%;
+}
 
-      .info {
-        flex: 1;
+.action-btn:active::after,
+.profit-btn:active::after,
+.logout-btn:active::after {
+  animation: ripple 0.4s ease-out;
+}
 
-        .name {
-          font-size: 18px;
-          font-weight: 500;
-          margin-bottom: 5px;
-        }
+/* 调整信息行的位置，让它不会被头像遮挡 */
+.info-row:first-of-type {
+  margin-top: 10px;
+}
 
-        .phone {
-          font-size: 16px;
-          color: #666;
-        }
-      }
+/* 移动端适配 */
+@media screen and (max-width: 375px) {
+  .usremei-container {
+    padding: 15px;
+    padding-top: 50px;
+    padding-bottom: 70px;
+  }
 
-      .arrow {
-        color: #999;
-        font-size: 20px;
-      }
-    }
+  .profile-card,
+  .bank-card {
+    padding: 15px;
+  }
 
-    .menu-list {
-      background-color: #fff;
-
-      .menu-item {
-        display: flex;
-        align-items: center;
-        padding: 16px;
-        border-bottom: 1px solid #eee;
-
-        i {
-          font-size: 20px;
-          margin-right: 10px;
-          color: #666;
-        }
-
-        span {
-          font-size: 16px;
-          color: #333;
-        }
-      }
-    }
+  .bank-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .bank-text {
+    width: 100%;
+    margin: 10px 0;
   }
+
+  .button-group {
+    width: 100%;
+  }
+
+  .action-btn {
+    width: 100%;
+  }
+}
+
+.profit-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 15px;
+  margin-bottom: 15px; /* 底部添加间距 */
+}
+
+.profit-block {
+  display: flex;
+  gap: 15px;
+  background: url('../assets/neibg.png');
+  background-size: cover;
+  border-radius: 12px;
+  padding: 6px;
+}
+
+.profit-left, .profit-right {
+  flex: 1;
+  padding: 10px;
+  position: relative; /* 为分隔线定位做准备 */
+}
+
+/* 添加分隔线 */
+.profit-block:not(:first-child) .profit-left::after {
+  content: '';
+  position: absolute;
+  right: -7.5px; /* 居中放置，gap的一半 */
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 70%;
+  background-color: #85370d;
+}
+
+.profit-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* margin-bottom: 10px; */
+}
+
+.profit-header span {
+  color: #85370d;
+  font-size: 14px;
+}
+
+.profit-amount {
+  font-size: 20px;
+  font-weight: bold;
+  color: #85370d;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 375px) {
+  .profit-block {
+    flex-direction: column;
+    gap: 10px;
+    padding: 6px;
+  }
+
+  .profit-left, .profit-right {
+    padding: 8px;
+  }
+
+  .profit-amount {
+    font-size: 18px;
+  }
+}
+
+.app-center {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 15px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.title-line {
+  width: 2px;
+  height: 16px;
+  background-color: #ff6b00;
+}
+
+.section-title span {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.function-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px 10px;
+}
+
+.function-item img {
+  width: 50px;
+  height: 50px;
+  object-fit: contain;
+}
+
+.function-item span {
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+}
+
+/* 移动端适配补充 */
+@media screen and (max-width: 375px) {
+  .app-center {
+    padding: 15px;
+  }
+
+  .function-grid {
+    gap: 15px 8px;
+  }
+
+  .function-item img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .function-item span {
+    font-size: 11px;
+  }
+}
+
+.logout-wrapper {
+  margin-top: 30px;
+  margin-bottom: 20px;
+  padding: 0 20px;
+}
+
+.logout-btn {
+  width: 100%;
+  background-color: #fb3f6c;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 12px 0;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.logout-btn:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
+/* 移动端适配补充 */
+@media screen and (max-width: 375px) {
+  .logout-btn {
+    padding: 10px 0;
+    font-size: 14px;
+  }
+}
+
+.button-click-effect {
+  position: relative !important;
+  overflow: hidden !important;
+  transition: all 0.2s !important;
+}
+
+.button-click-effect:active {
+  transform: scale(0.98) !important;
+  opacity: 0.9 !important;
+}
+
+/* 确认框样式 */
+.confirm-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+}
+
+.confirm-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.confirm-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  max-width: 300px;
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.confirm-title {
+  padding: 15px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  border-bottom: 1px solid #eee;
+}
+
+.confirm-message {
+  padding: 20px 15px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.confirm-btns {
+  display: flex;
+  border-top: 1px solid #eee;
+}
+
+.confirm-btn {
+  flex: 1;
+  padding: 12px;
+  text-align: center;
+  font-size: 14px;
+  background: #fff;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.confirm-btn.cancel {
+  color: #666;
+  border-right: 1px solid #eee;
+}
+
+.confirm-btn.confirm {
+  color: #fb3f6c;
+  font-weight: bold;
+}
+
+.confirm-btn:active {
+  opacity: 0.8;
+  background: #f5f5f5;
 }
 </style> 

src/views/RealAuthentication.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="vh100">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">实名认证</div>
+    </div>
+
+    <!-- 认证表单 -->
+    <div class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
+      <div class="flex between h40 lh40 pr10 tr flex1">
+        <span>证件认证</span>
+        <span>身份证</span>
+      </div>
+    </div>
+
+    <div class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
+      <span>证件姓氏：</span>
+      <input 
+        type="text" 
+        class="h40 lh40 pr10 tr flex1 input-uni" 
+        placeholder="姓名"
+        v-model="formData.realName"
+      >
+    </div>
+
+    <div class="flex bgwhite alcenter radius4 pl10 mt10 bdb_blue3">
+      <span>证件号码：</span>
+      <input 
+        type="text" 
+        class="h40 lh40 pr10 tr flex1 input-uni" 
+        placeholder="输入证件号码"
+        v-model="formData.idCard"
+      >
+    </div>
+
+    <div 
+      class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto"
+      @click="handleSubmit"
+    >
+      确 认
+    </div>
+
+    <div class="flex alcenter mt10">
+      <div class="bottom">
+        <ul>
+          <li style="height: 45px;">为保证您的权益请认真查看以下条例，如有疑问请及时联系在线客服</li>
+          <li>身份证件拍摄不完整有反光</li>
+          <li>提交信息和身份证件不一致</li>
+          <li style="height: 45px;">为了您的信息安全审核期间由AI机器人全程负责我们无法干预</li>
+          <li style="height: 45px;">使用虚假信息的用户我们将采取相应措施,包含且不限于封号、冻结资产、限制登录等</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'RealAuthentication',
+  data() {
+    return {
+      formData: {
+        realName: '',
+        idCard: ''
+      }
+    }
+  },
+  methods: {
+    async handleSubmit() {
+      if (!this.formData.realName) {
+        alert('请输入姓名');
+        return;
+      }
+      if (!this.formData.idCard) {
+        alert('请输入证件号码');
+        return;
+      }
+      // TODO: 实现实名认证提交逻辑
+      alert('认证信息提交成功');
+      this.$router.back();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.vh100 {
+  min-height: 100vh;
+  background: #fff;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.flex { display: flex; }
+.between { justify-content: space-between; }
+.alcenter { align-items: center; }
+.tc { text-align: center; }
+.tr { text-align: right; }
+.mt10 { margin-top: 10px; }
+.mt30 { margin-top: 30px; }
+.pl10 { padding-left: 10px; }
+.pr10 { padding-right: 10px; }
+.pt10 { padding-top: 10px; }
+.h40 { height: 40px; }
+.lh40 { line-height: 40px; }
+.ft14 { font-size: 14px; }
+.white { color: #fff; }
+.bgwhite { background: #fff; }
+.flex1 { flex: 1; }
+.w90 { width: 90%; }
+.mauto { margin: 0 auto; }
+
+.radius4 { border-radius: 4px; }
+.radius28 { border-radius: 28px; }
+
+.bgBlue {
+  margin-top: 20px;
+  background: #ed4b39;
+  cursor: pointer;
+}
+
+.bgBlue:active {
+  opacity: 0.9;
+}
+
+.bdb_blue3 {
+  border-bottom: 1px solid rgba(85, 89, 105, 0.12);
+}
+
+.input-uni {
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.bottom {
+  padding: 0 20px;
+  width: 100%;
+}
+
+.bottom ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.bottom li {
+  color: #666;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-bottom: 10px;
+  padding-left: 15px;
+  position: relative;
+}
+
+.bottom li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  width: 4px;
+  height: 4px;
+  background: #666;
+  border-radius: 50%;
+}
+</style> 

src/views/Share.vue

@@ -0,0 +1,377 @@
+<template>
+  <div class="share-container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">邀请好友</div>
+    </div>
+
+    <!-- 页面内容 -->
+    <div class="content vh100">
+      <div class="pt30">
+        <div class="tc">
+          <div class="tc_100">
+            <img class="logo-image" src="@/assets/logo.png" alt="Logo" />
+          </div>
+        </div>
+
+        <div class="invite-container">
+          <div class="qrcode-wrapper">
+            <img class="qrcode-image" :src="qrCodeUrl" alt="QR Code" />
+          </div>
+
+          <div class="invite-link">
+            <div class="link-text">{{ inviteLink }}</div>
+          </div>
+
+          <div class="action-buttons">
+            <div class="action-btn" @click="saveQRCode">保存二维码</div>
+            <div class="action-btn" @click="copyLink">复制链接</div>
+          </div>
+
+          <div class="divider">
+            <div class="divider-text">领取任务</div>
+          </div>
+
+          <div class="task-list">
+            <div v-for="task in tasks" :key="task.people" class="task-card">
+              <div class="task-header-row">
+                <div class="task-title">邀请{{ task.people }}人</div>
+                <div class="task-divider"></div>
+              </div>
+
+              <div class="task-content">
+                <div class="task-info-row">
+                  <span class="task-label">完成奖励</span>
+                  <span class="task-value reward-value">邀请{{ task.people }}人奖励财政补贴{{ task.money }}万元+{{ task.coins }}养生币</span>
+                </div>
+                <div class="task-info-row">
+                  <span class="task-label">完成标准</span>
+                  <span class="task-value">需实名认证</span>
+                </div>
+              </div>
+
+              <div class="task-footer">
+                <div class="task-action-btn" @click="claimReward(task)">领取</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+import { getShareReward } from '@/api/home';
+import QRCode from 'qrcode';
+
+export default {
+  name: 'Share',
+  data() {
+    return {
+      userInfo: {},
+      qrCodeUrl: '',  // Will be generated dynamically
+      tasks: [
+        { people: 6, money: 10, coins: 100 },
+        { people: 15, money: 20, coins: 200 },
+        { people: 30, money: 40, coins: 400 },
+        { people: 60, money: 88, coins: 800 },
+        { people: 100, money: 168, coins: 1200 },
+        { people: 200, money: 268, coins: 2000 }
+      ]
+    }
+  },
+  computed: {
+    inviteLink() {
+      return this.userInfo.inviteLink || '';
+    }
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+        // Generate QR code after getting user info
+        await this.generateQRCode();
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    async generateQRCode() {
+      try {
+        if (!this.inviteLink) {
+          console.error('邀请链接不存在');
+          return;
+        }
+        // Add a random parameter to make QR code unique but still point to same URL
+        const timestamp = new Date().getTime();
+        const randomStr = Math.random().toString(36).substring(7);
+        const urlWithNoise = `${this.inviteLink}&_=${timestamp}-${randomStr}`;
+        
+        // Generate QR code
+        const qrOptions = {
+          errorCorrectionLevel: 'H',
+          type: 'image/png',
+          quality: 0.92,
+          margin: 1,
+          color: {
+            dark: '#000000',
+            light: '#FFFFFF'
+          }
+        };
+        
+        this.qrCodeUrl = await QRCode.toDataURL(urlWithNoise, qrOptions);
+      } catch (error) {
+        console.error('生成二维码失败:', error);
+      }
+    },
+    saveQRCode() {
+      // Create a temporary link to download the QR code
+      const link = document.createElement('a');
+      link.download = 'invite-qrcode.png';
+      link.href = this.qrCodeUrl;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      alert('二维码已保存');
+    },
+    copyLink() {
+      // Copy link to clipboard
+      const textarea = document.createElement('textarea');
+      textarea.value = this.inviteLink;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      alert('链接已复制到剪贴板');
+    },
+    async claimReward(task) {
+      try {
+        const res = await getShareReward(task.people);
+        alert(res.msg);
+      } catch (error) {
+        alert(error.msg || '领取失败');
+      }
+    }
+  },
+  created() {
+    this.getUserInfo();
+  }
+}
+</script>
+
+<style scoped>
+.share-container {
+  min-height: 100vh;
+  background: url('../assets/dabag.png');
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.vh100 {
+  min-height: calc(100vh - 44px);
+}
+
+.pt30 {
+  padding-top: 30px;
+}
+
+.tc {
+  text-align: center;
+}
+
+.tc_100 {
+  margin-bottom: 30px;
+}
+
+.logo-image {
+  height: 80px;
+  object-fit: contain;
+}
+
+.invite-container {
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  margin: 0 15px;
+}
+
+.qrcode-wrapper {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.qrcode-image {
+  width: 200px;
+  height: 200px;
+}
+
+.invite-link {
+  background: #f8f8f8;
+  padding: 10px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.link-text {
+  color: #666;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30px;
+}
+
+.action-btn {
+  background: #ed4b39;
+  color: #fff;
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.divider {
+  text-align: center;
+  position: relative;
+  margin: 30px 0;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 30%;
+  height: 1px;
+  background: #eee;
+}
+
+.divider::before {
+  left: 0;
+}
+
+.divider::after {
+  right: 0;
+}
+
+.divider-text {
+  display: inline-block;
+  padding: 0 15px;
+  color: #999;
+  background: #fff;
+  position: relative;
+  z-index: 1;
+}
+
+.task-list {
+  margin-top: 20px;
+}
+
+.task-card {
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.task-header-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.task-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.task-divider {
+  flex: 1;
+  height: 1px;
+  background: #eee;
+  margin-left: 15px;
+}
+
+.task-info-row {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.task-label {
+  color: #666;
+  width: 70px;
+}
+
+.task-value {
+  flex: 1;
+  color: #333;
+}
+
+.reward-value {
+  color: #ed4b39;
+}
+
+.task-footer {
+  margin-top: 15px;
+  text-align: right;
+}
+
+.task-action-btn {
+  display: inline-block;
+  padding: 6px 15px;
+  background: #ed4b39;
+  color: #fff;
+  border-radius: 15px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.task-action-btn:active {
+  opacity: 0.9;
+}
+</style> 

src/views/Signin.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="signin-container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">每日签到</div>
+    </div>
+    <!-- 页面内容 -->
+    <div class="content vh100">
+      <div class="sign_bg">
+        <div class="sign_content_box">
+          <div class="sign_content">
+            <!-- 签到信息 -->
+            <div class="sign_content_title" style="font-size: 20px;">
+              已签到<span class="sign_content_title_span days-count">{{ userInfo.sign_days || 0 }}</span>天
+            </div>
+            <div class="sign_content_title">
+              每日签到获得<span class="sign_content_title_span">2800</span>元红利金＋<span class="sign_content_title_span">10</span>养生币
+            </div>
+            <div class="sign_content_title">
+              累计签到<span class="sign_content_title_span">10</span>天即可参与<span class="sign_content_title_span reward-text">抢福利</span>活动
+            </div>
+            <div class="sign_content_title">
+              累计签到<span class="sign_content_title_span">15</span>天额外获得<span class="sign_content_title_span">58000</span>红利金+<span class="sign_content_title_span">100</span>养生币
+            </div>
+            <div class="sign_content_title">
+              累计签到<span class="sign_content_title_span">30</span>天额外获得<span class="sign_content_title_span">88000</span>红利金+<span class="sign_content_title_span">300</span>养生币
+            </div>
+
+            <!-- 签到按钮 -->
+            <div 
+              class="sign-btn" 
+              :class="{ 'signed': hasSignedToday }"
+              @click="handleSignIn"
+            >
+              {{ hasSignedToday ? '今日已签到' : '签 到' }}
+            </div>
+
+            <!-- 分割线 -->
+            <div class="divider">
+              <div class="divider-line"></div>
+              <div class="divider-text">邀请好友获取更多奖励</div>
+              <div class="divider-line"></div>
+            </div>
+
+            <!-- 邀请按钮 -->
+            <div class="invite-section">
+              <div class="invite-btn" @click="$router.push('/share')">邀请好友</div>
+            </div>
+
+            <!-- 底部间隔 -->
+            <div class="bottom-gap"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+import { signIn } from '@/api/profile';
+
+export default {
+  name: 'Signin',
+  data() {
+    return {
+      userInfo: {},
+      dailyBonus: 2800,
+      dailyCoins: 10,
+      lastSignDate: null
+    }
+  },
+  computed: {
+    hasSignedToday() {
+      // 如果没有最后签到日期，说明还没签到过
+      if (!this.lastSignDate) return false;
+      
+      const today = new Date().toLocaleDateString();
+      return today === this.lastSignDate;
+    }
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+        // 获取本地存储的最后签到日期
+        this.lastSignDate = localStorage.getItem('lastSignDate');
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    async handleSignIn() {
+      // 如果今天已经签到，就不再调用接口
+      if (this.hasSignedToday) {
+        alert('今日已签到，请明天再来');
+        return;
+      }
+
+      try {
+        await signIn();
+        // 保存签到日期到本地存储
+        const today = new Date().toLocaleDateString();
+        localStorage.setItem('lastSignDate', today);
+        this.lastSignDate = today;
+        
+        alert('签到成功');
+        // 刷新用户信息以更新签到天数
+        await this.getUserInfo();
+      } catch (error) {
+        console.error('签到失败:', error);
+        alert('签到失败，请重试');
+      }
+    },
+    handleInvite() {
+      // 邀请处理逻辑
+    }
+  },
+  created() {
+    this.getUserInfo();
+  }
+}
+</script>
+
+<style scoped>
+.signin-container {
+  min-height: 100vh;
+  background: url('../assets/dabag.png');
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.vh100 {
+  min-height: 100vh;
+}
+
+.sign_bg {
+  padding: 20px;
+  padding-top: 100px;
+}
+
+.sign_content_box {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.sign_content {
+  padding: 20px;
+}
+
+.sign_content_title {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 15px;
+  /* text-align: center; */
+  line-height: 1.5;
+}
+
+.sign_content_title_span {
+  color: #ff5722 !important;
+  font-size: 18px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-weight: 700;
+  background: rgba(111, 101, 243, .10980392156862745);
+  border-radius: 10px;
+  display: inline-block;
+  margin: 0 3px;
+}
+
+/* 特殊处理已签到天数的样式，保持原来的大小 */
+.sign_content_title_span.days-count {
+  font-size: 24px;
+  font-weight: 900;
+}
+
+/* 确保抢福利文本和数字样式一致 */
+.sign_content_title_span.reward-text {
+  font-size: 18px;
+}
+
+.sign-btn {
+  width: 80%;
+  height: 30px;
+  line-height: 30px;
+  background: #ed4b39;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  margin: 30px auto 0;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.sign-btn.signed {
+  background: #999;
+  cursor: not-allowed;
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 30px 0;
+}
+
+.divider-line {
+  width: 100px;
+  height: 1px;
+  background: rgba(129, 134, 167, 0.35);
+}
+
+.divider-text {
+  color: rgb(129, 134, 167);
+  font-size: 13px;
+  margin: 0 15px;
+}
+
+.invite-section {
+  margin-top: 29px;
+}
+
+.invite-btn {
+  width: 80%;
+  height: 30px;
+  line-height: 30px;
+  background: #4a90e2;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  margin: 20px auto 0;
+  cursor: pointer;
+}
+
+.bottom-gap {
+  height: 40px;
+}
+
+/* 按钮点击效果 */
+.sign-btn:active,
+.invite-btn:active {
+  opacity: 0.9;
+  transform: scale(0.98);
+}
+</style> 

src/views/TeamDetail.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">团队明细</div>
+    </div>
+
+    <div class="content">
+      <!-- 切换按钮组 -->
+      <div class="tab-group">
+        <div 
+          class="tab-item" 
+          :class="{ active: currentType === 1 }"
+          @click="switchType(1)"
+        >一代</div>
+        <div 
+          class="tab-item" 
+          :class="{ active: currentType === 2 }"
+          @click="switchType(2)"
+        >二代</div>
+        <div 
+          class="tab-item" 
+          :class="{ active: currentType === 3 }"
+          @click="switchType(3)"
+        >三代</div>
+      </div>
+
+      <!-- 统计信息 -->
+      <div class="stats-bar">
+        <div class="stats-item">总人数：{{ teamInfo.totalCount || 0 }}人</div>
+        <div class="stats-item">有效总人数：{{ teamInfo.validCount || 0 }}人</div>
+      </div>
+
+      <!-- 团队列表 -->
+      <div class="team-list">
+        <!-- 这里可以添加团队成员列表 -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMyTeam } from '@/api/profile';
+
+export default {
+  name: 'TeamDetail',
+  data() {
+    return {
+      currentType: 1,
+      teamInfo: {
+        totalCount: 0,
+        validCount: 0
+      }
+    }
+  },
+  created() {
+    this.getTeamInfo();
+  },
+  methods: {
+    async getTeamInfo() {
+      try {
+        const res = await getMyTeam(this.currentType);
+        if (res && res.data) {
+          this.teamInfo = {
+            totalCount: res.data.totalCount || 0,
+            validCount: res.data.validCount || 0
+          };
+        }
+      } catch (error) {
+        console.error('获取团队信息失败:', error);
+        this.teamInfo = {
+          totalCount: 0,
+          validCount: 0
+        };
+      }
+    },
+    switchType(type) {
+      this.currentType = type;
+      this.getTeamInfo();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.content {
+  padding: 15px;
+}
+
+.tab-group {
+  width: 96%;
+  height: 40px;
+  background-color: #f8f8f8;
+  display: flex;
+  justify-content: space-between;
+  line-height: 40px;
+  text-align: center;
+  margin: 20px auto;
+  border-radius: 2px;
+}
+
+.tab-item {
+  width: 33.33%;
+  cursor: pointer;
+  color: #333;
+  transition: all 0.3s;
+}
+
+.tab-item:first-child {
+  border-radius: 2px 0 0 2px;
+}
+
+.tab-item:last-child {
+  border-radius: 0 2px 2px 0;
+}
+
+.tab-item.active {
+  background: #2196f3;
+  color: #fff;
+}
+
+.stats-bar {
+  width: 96%;
+  height: 40px;
+  background-color: #f8f8f8;
+  display: flex;
+  justify-content: space-between;
+  line-height: 40px;
+  text-align: center;
+  margin: 10px auto;
+  border-radius: 2px;
+}
+
+.stats-item {
+  width: 50%;
+  font-size: 14px;
+  color: #333;
+}
+
+.stats-item:first-child {
+  border-right: 0.5px solid #ccc;
+}
+
+.team-list {
+  margin-top: 15px;
+}
+</style> 

src/views/UserCenter.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="vh100">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">实名认证</div>
+    </div>
+
+    <div class="plr20 ptb10">
+      <div class="flex alcenter between ptb10 ft16">
+        <div class="ft18 bold">认证信息</div>
+        <div class="blue2" @click="$router.push('/real-authentication')">实名认证</div>
+      </div>
+
+      <div class="u-gap" style="height: 5px;"></div>
+
+      <div class="mt10 ft14">
+        <div class="flex alcenter mt10">
+          <img src="@/assets/tssp.png" class="wt15 h15" alt="提示" />
+          <div class="chengse ft14">丨为保障您的资产安全，请实名认证</div>
+        </div>
+
+        <div class="u-gap" style="height: 15px;"></div>
+        <div class="u-line"></div>
+      </div>
+
+      <div class="u-gap" style="height: 15px;"></div>
+
+      <!-- 认证状态展示 -->
+      <div class="auth-info">
+        <div class="info-item">
+          <span class="label">认证状态：</span>
+          <span class="value">{{ userInfo.is_auth ? '已认证' : '未认证' }}</span>
+        </div>
+        <div class="info-item" v-if="userInfo.is_auth">
+          <span class="label">真实姓名：</span>
+          <span class="value">{{ userInfo.real_name }}</span>
+        </div>
+        <div class="info-item" v-if="userInfo.is_auth">
+          <span class="label">身份证号：</span>
+          <span class="value">{{ userInfo.id_card }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/home';
+
+export default {
+  name: 'UserCenter',
+  data() {
+    return {
+      userInfo: {}
+    }
+  },
+  created() {
+    this.getUserInfo();
+  },
+  methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.vh100 {
+  min-height: 100vh;
+  background: #fff;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.plr20 { padding: 0 20px; }
+.ptb10 { padding: 10px; }
+.mt10 { margin-top: 10px; }
+.ft14 { font-size: 14px; }
+.ft16 { font-size: 16px; }
+.ft18 { font-size: 18px; }
+.bold { font-weight: bold; }
+
+.flex { display: flex; }
+.alcenter { align-items: center; }
+.between { justify-content: space-between; }
+
+.blue2 { color: #007AFF; }
+.chengse { color: #ff6b00; }
+
+.wt15 {
+  width: 15px;
+  height: 15px;
+}
+
+.h15 {
+  height: 15px;
+}
+
+.u-gap {
+  margin: 0;
+}
+
+.u-line {
+  margin: 0;
+  border-bottom: 1px solid rgba(85, 89, 105, 0.12);
+  width: 100%;
+  transform: scaleY(0.5);
+}
+
+.auth-info {
+  margin-top: 20px;
+}
+
+.info-item {
+  margin-bottom: 15px;
+  font-size: 14px;
+}
+
+.info-item .label {
+  color: #666;
+}
+
+.info-item .value {
+  color: #333;
+  margin-left: 5px;
+}
+</style> 

src/views/charges.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="charges-container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">转入</div>
+    </div>
+    <!-- 页面内容 -->
+    <div class="content">
+      <div class="recharge-card">
+        <div class="header">
+          <div class="title">{{ title }}</div>
+        </div>
+        <div class="headers">
+          <div class="titles">{{ amountText }}</div>
+        </div>
+        <div class="payment-method">
+          <div class="label">请选择支付方式</div>
+        </div>
+        <div class="amount-input">
+          <div class="label">{{ descriptionText }}</div>
+          <div class="input-wrapper">
+            <div class="input">{{ money }}</div>
+          </div>
+        </div>
+        <div class="submit-section">
+          <button class="submit-btn" :disabled="true">{{ submitButtonText }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNotification } from '@/api/profile';
+
+export default {
+  name: 'Charges',
+  data() {
+    return {
+      selectedPayment: '',
+      type: '',
+      money: 310,
+      title: '个人所得税'
+    }
+  },
+  computed: {
+    amountText() {
+      return this.type === '4' ? `额度费¥${this.money}缴纳成功立即打款到账` : `税费¥${this.money}缴纳成功立即打款到账`;
+    },
+    descriptionText() {
+      if (this.type === '4') {
+        switch (Number(this.money)) {
+          case 310:
+            return '提升完成可享受到账100万元内额度';
+          case 620:
+            return '提升完成可享受到账300万元内额度';
+          case 930:
+            return '提升完成可享受到账500万元内额度';
+          case 1240:
+            return '提升完成可享受到账1000万元内额度';
+          case 1550:
+            return '提升完成可享受到账2000万元内额度';
+          case 1860:
+            return '提升完成可享受到账2000万以上';
+          default:
+            return '提升完成可享受更高额度';
+        }
+      }
+      return '缴纳个人所得税款是每位公民的义务，缴纳成功立即打款到账';
+    },
+    submitButtonText() {
+      return this.type === '4' ? '立即提升' : '立即缴纳';
+    }
+  },
+  async created() {
+    // 从路由参数获取数据
+    const { type, money, title } = this.$route.query;
+    if (type) this.type = type;
+    if (money) this.money = money;
+    if (title) this.title = title;
+
+    try {
+      const res = await getNotification();
+      console.log('通知数据:', res);
+    } catch (error) {
+      console.error('获取通知失败:', error);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.charges-container {
+  min-height: 100vh;
+  background: url('../assets/xiaobh.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.content {
+  padding: 15px;
+  padding-top: 100px;
+  min-height: calc(100vh - 44px);
+}
+
+.recharge-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.header {
+  margin-bottom: 20px;
+}
+
+.header .title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.headers {
+  margin-bottom: 20px;
+}
+
+.titles {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+  font-weight: bold;
+  margin-top: 30px;
+  text-align: center; 
+}
+
+.payment-method {
+  margin-bottom: 20px;
+}
+
+.payment-method .label {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.payment-selector {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.amount-input {
+  margin-bottom: 30px;
+}
+
+.amount-input .label {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 15px;
+}
+
+.input-wrapper {
+  background: #f8f8f8;
+  border-radius: 8px;
+  padding: 15px;
+  text-align: center;
+}
+
+.input {
+  font-size: 24px;
+  color: #333;
+  text-align: left;
+}
+
+.submit-section {
+  margin-top: 30px;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 44px;
+  background-color: #ed4b39;
+  color: #acacac;
+  border: none;
+  border-radius: 22px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.submit-btn:disabled {
+  background-color: #f7f7f7;
+  cursor: not-allowed;
+}
+</style>

src/views/financial.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="financial-container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">提升额度</div>
+    </div>
+    <!-- 页面内容 -->
+    <div class="content">
+      <div class="wrap">
+        <div class="card-list">
+          <div v-for="(card, index) in cards" :key="index" class="card-col">
+            <div class="card-item">
+              <div class="card-image">
+                <img src="@/assets/card.jpg" alt="信用卡" draggable="false">
+              </div>
+              <div class="card-info">
+                <div class="limit-text">额度 {{ card.limit }}</div>
+                <button class="upgrade-button" @click="handleUpgrade(card)">立即提升</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Financial',
+  data() {
+    return {
+      cards: [
+        { limit: '100 万', amount: 310 },
+        { limit: '300 万', amount: 620 },
+        { limit: '500 万', amount: 930 },
+        { limit: '1000 万', amount: 1240 },
+        { limit: '2000 万', amount: 1550 },
+        { limit: '2000万以上', amount: 1860 }
+      ]
+    }
+  },
+  methods: {
+    handleUpgrade(card) {
+      this.$router.push({
+        path: '/charges',
+        query: {
+          type: '4',
+          money: card.amount,
+          title: '到账额度提升'
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.financial-container {
+  min-height: 100vh;
+  background: url('../assets/xiaobh.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: #ed4b39;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.content {
+  padding: 15px;
+  min-height: calc(100vh - 44px);
+}
+
+.wrap {
+  padding: 10px;
+}
+
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -4px;
+}
+
+.card-col {
+  width: 50%;
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.card-item {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.card-image {
+  width: 100%;
+  height: 0;
+  padding-bottom: 60%;
+  position: relative;
+  overflow: hidden;
+}
+
+.card-image img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-info {
+  padding: 12px;
+  text-align: center;
+}
+
+.limit-text {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 12px;
+  font-weight: bold;
+}
+
+.upgrade-button {
+  background: #ed4b39;
+  color: #fff;
+  border: none;
+  border-radius: 20px;
+  width: 80%;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0 auto;
+  display: block;
+}
+
+.upgrade-button:active {
+  opacity: 0.9;
+}
+</style>

yarn.lock

@@ -3068,6 +3068,11 @@
     "miller-rabin" "^4.0.0"
     "randombytes" "^2.0.0"
 
+"dijkstrajs@^1.0.1":
+  "integrity" "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+  "resolved" "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz"
+  "version" "1.0.3"
+
 "dir-glob@^2.0.0", "dir-glob@^2.2.2":
   "integrity" "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw=="
   "resolved" "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz"
@@ -6200,6 +6205,11 @@
   dependencies:
     "find-up" "^2.1.0"
 
+"pngjs@^5.0.0":
+  "integrity" "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+  "resolved" "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz"
+  "version" "5.0.0"
+
 "pnp-webpack-plugin@^1.6.4":
   "integrity" "sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg=="
   "resolved" "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz"
@@ -6698,6 +6708,15 @@
   "resolved" "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
   "version" "1.5.1"
 
+"qrcode@^1.5.4":
+  "integrity" "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg=="
+  "resolved" "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz"
+  "version" "1.5.4"
+  dependencies:
+    "dijkstrajs" "^1.0.1"
+    "pngjs" "^5.0.0"
+    "yargs" "^15.3.1"
+
 "qs@~6.5.2":
   "integrity" "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
   "resolved" "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
@@ -8754,7 +8773,7 @@
     "y18n" "^4.0.0"
     "yargs-parser" "^13.1.2"
 
-"yargs@^15.0.0":
+"yargs@^15.0.0", "yargs@^15.3.1":
   "integrity" "sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA=="
   "resolved" "https://registry.npmjs.org/yargs/-/yargs-15.3.1.tgz"
   "version" "15.3.1"