增加分销功能,调整页面

This commit is contained in:
dzl
2025-09-05 15:57:33 +08:00
parent d8853a5db1
commit a967254fbc
9 changed files with 820 additions and 35 deletions

306
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"element-plus": "^2.4.4",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"qrcode": "^1.5.4",
"swiper": "^8.4.7",
"vue": "^3.3.11",
"vue-awesome-swiper": "^5.0.1",
@@ -1306,6 +1307,30 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -1363,6 +1388,15 @@
"node": ">= 0.4"
}
},
"node_modules/camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/chokidar": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -1379,6 +1413,35 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/cliui": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
"license": "ISC",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^6.2.0"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"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==",
"license": "MIT"
},
"node_modules/colorjs.io": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
@@ -1410,6 +1473,15 @@
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
"license": "MIT"
},
"node_modules/decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1433,6 +1505,12 @@
"node": ">=0.10"
}
},
"node_modules/dijkstrajs": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
"license": "MIT"
},
"node_modules/dom7": {
"version": "4.0.6",
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-4.0.6.tgz",
@@ -1498,6 +1576,12 @@
"vue": "^3.2.0"
}
},
"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==",
"license": "MIT"
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -1620,6 +1704,19 @@
"node": ">=8"
}
},
"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==",
"license": "MIT",
"dependencies": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -1680,6 +1777,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"license": "ISC",
"engines": {
"node": "6.* || 8.* || >= 10.*"
}
},
"node_modules/get-intrinsic": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -1796,6 +1902,15 @@
"node": ">=0.10.0"
}
},
"node_modules/is-fullwidth-code-point": {
"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==",
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/is-glob": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -1821,6 +1936,18 @@
"node": ">=0.12.0"
}
},
"node_modules/locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
"license": "MIT",
"dependencies": {
"p-locate": "^4.1.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1942,6 +2069,51 @@
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
"license": "MIT"
},
"node_modules/p-limit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
"license": "MIT",
"dependencies": {
"p-try": "^2.0.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/p-locate": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
"license": "MIT",
"dependencies": {
"p-limit": "^2.2.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/p-try": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1984,6 +2156,15 @@
}
}
},
"node_modules/pngjs": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
"license": "MIT",
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/postcss": {
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -2018,6 +2199,23 @@
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/qrcode": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
"integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
"license": "MIT",
"dependencies": {
"dijkstrajs": "^1.0.1",
"pngjs": "^5.0.0",
"yargs": "^15.3.1"
},
"bin": {
"qrcode": "bin/qrcode"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/readdirp": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -2032,6 +2230,21 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/require-main-filename": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
"license": "ISC"
},
"node_modules/rollup": {
"version": "4.44.2",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.44.2.tgz",
@@ -2416,6 +2629,12 @@
"node": ">=14.0.0"
}
},
"node_modules/set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
"license": "ISC"
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2431,6 +2650,32 @@
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
"license": "MIT"
},
"node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/supports-color": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -2699,6 +2944,67 @@
"vue": "^3.2.0"
}
},
"node_modules/which-module": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
"license": "ISC"
},
"node_modules/wrap-ansi": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/y18n": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
"license": "ISC"
},
"node_modules/yargs": {
"version": "15.4.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
"license": "MIT",
"dependencies": {
"cliui": "^6.0.0",
"decamelize": "^1.2.0",
"find-up": "^4.1.0",
"get-caller-file": "^2.0.1",
"require-directory": "^2.1.1",
"require-main-filename": "^2.0.0",
"set-blocking": "^2.0.0",
"string-width": "^4.2.0",
"which-module": "^2.0.0",
"y18n": "^4.0.0",
"yargs-parser": "^18.1.2"
},
"engines": {
"node": ">=8"
}
},
"node_modules/yargs-parser": {
"version": "18.1.3",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
"license": "ISC",
"dependencies": {
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/zrender": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",

View File

@@ -16,6 +16,7 @@
"element-plus": "^2.4.4",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"qrcode": "^1.5.4",
"swiper": "^8.4.7",
"vue": "^3.3.11",
"vue-awesome-swiper": "^5.0.1",

View File

@@ -27,8 +27,9 @@ export const getImageUrl = (imagePath) => {
// 如果图片路径以/uploads开头直接返回原路径
if (imagePath.startsWith('/uploads')) {
const cleanBaseURL = baseURL.replace(/\/$/, '')
// console.log('Image starts with /uploads, returning original path:', imagePath)
return imagePath
return `${cleanBaseURL}/jurongquan${imagePath}`
}
// 在开发环境下,也需要根据路径前缀处理

View File

@@ -45,6 +45,14 @@ const routes = [
title: '个人中心'
}
},
{
path: '/distribution',
name: 'Distribution',
component: () => import('@/views/Distribution.vue'),
meta: {
title: '分销'
}
},
{
path: '/loading',
name: 'Loading',

332
src/views/Distribution.vue Normal file
View File

@@ -0,0 +1,332 @@
<template>
<div class="distribution-page">
<!-- 导航栏 -->
<nav class="navbar">
<div class="nav-left">
<el-button
type="text"
@click="$router.go(-1)"
class="back-btn"
>
<el-icon><ArrowLeft /></el-icon>
</el-button>
</div>
<div class="nav-center">
<h1 class="nav-title">分销推广</h1>
</div>
<div class="nav-right">
<!-- 占位元素保持标题居中 -->
</div>
</nav>
<div class="page-content">
<!-- 分销说明 -->
<div class="intro-section">
<div class="intro-card">
<h3 class="intro-title">邀请好友注册</h3>
<p class="intro-desc">分享您的专属二维码邀请好友注册</p>
</div>
</div>
<!-- 二维码区域 -->
<div class="qrcode-section">
<div class="qrcode-card">
<h4 class="qrcode-title">我的推广二维码</h4>
<div class="qrcode-container">
<canvas
ref="qrcodeCanvas"
class="qrcode-canvas"
v-show="qrcodeGenerated"
></canvas>
<div v-show="!qrcodeGenerated" class="qrcode-loading">
<el-icon class="loading-icon"><Loading /></el-icon>
<span>生成中...</span>
</div>
</div>
<p class="qrcode-tip">扫描二维码好友可直接注册并绑定您的推荐关系</p>
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button
@click="shareQRCode"
>
分享二维码
</el-button>
</div>
</div>
</div>
<!-- 推广链接 -->
<div class="link-section">
<div class="link-card">
<h4 class="link-title">推广链接</h4>
<div class="link-container">
<el-input
v-model="inviteLink"
readonly
class="link-input"
>
<template #append>
<el-button @click="copyLink" type="primary">
复制
</el-button>
</template>
</el-input>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import {
ArrowLeft,
Loading
} from '@element-plus/icons-vue'
import QRCode from 'qrcode'
const router = useRouter()
const userStore = useUserStore()
// 响应式数据
const qrcodeCanvas = ref(null)
const qrcodeGenerated = ref(false)
const generating = ref(false)
const inviteLink = ref('')
// 生成邀请链接
const generateInviteLink = () => {
const userId = userStore.user?.id || userStore.user?.user_id || 'guest'
console.log(userStore.user.id,userStore.user.user_id)
const baseUrl = 'http://192.168.1.124:5173'
return `${baseUrl}/register?inviter=${userId}`
}
// 生成二维码
const generateQRCode = async () => {
try {
generating.value = true
qrcodeGenerated.value = false
// 生成邀请链接
const link = generateInviteLink()
inviteLink.value = link
// 等待DOM更新
await nextTick()
if (qrcodeCanvas.value) {
// 生成二维码到canvas
await QRCode.toCanvas(qrcodeCanvas.value, link, {
width: 200,
margin: 2,
color: {
dark: '#000000',
light: '#FFFFFF'
}
})
qrcodeGenerated.value = true
}
} catch (error) {
console.error('生成二维码失败:', error)
ElMessage.error('生成二维码失败')
} finally {
generating.value = false
}
}
// 复制链接
const copyLink = async () => {
try {
await navigator.clipboard.writeText(inviteLink.value)
ElMessage.success('链接已复制到剪贴板')
} catch (error) {
// 降级方案
const textArea = document.createElement('textarea')
textArea.value = inviteLink.value
document.body.appendChild(textArea)
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
ElMessage.success('链接已复制到剪贴板')
}
}
// 分享二维码
const shareQRCode = () => {
if (navigator.share && qrcodeCanvas.value) {
// 将canvas转换为blob
qrcodeCanvas.value.toBlob(async (blob) => {
const file = new File([blob], 'qrcode.png', { type: 'image/png' })
try {
await navigator.share({
title: '邀请注册',
text: '扫描二维码注册获得奖励',
files: [file]
})
} catch (error) {
console.log('分享取消或失败')
}
})
} else {
// 降级方案:复制链接
copyLink()
}
}
// 生命周期
onMounted(() => {
generateQRCode()
})
</script>
<style scoped>
.distribution-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 56px;
background: white;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 100;
}
.nav-left,
.nav-right {
flex: 1;
}
.nav-right {
display: flex;
justify-content: flex-end;
}
.back-btn {
color: #409eff;
font-size: 14px;
}
.nav-title {
margin: 0;
font-size: 18px;
font-weight: 500;
color: #333;
}
.page-content {
padding: 16px;
}
.intro-section,
.qrcode-section,
.link-section {
margin-bottom: 16px;
}
.intro-card,
.qrcode-card,
.link-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.intro-title,
.qrcode-title,
.link-title {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
color: #333;
}
.intro-desc {
margin: 0;
font-size: 14px;
color: #666;
line-height: 1.5;
}
.qrcode-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
min-height: 200px;
}
.qrcode-canvas {
border: 1px solid #eee;
border-radius: 8px;
}
.qrcode-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #666;
}
.loading-icon {
font-size: 24px;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.qrcode-tip {
text-align: center;
font-size: 12px;
color: #999;
margin: 0 0 20px 0;
}
.action-buttons {
display: flex;
gap: 12px;
justify-content: center;
}
.link-container {
margin-top: 12px;
}
.link-input {
width: 100%;
}
/* 响应式设计 */
@media (max-width: 480px) {
.action-buttons {
flex-direction: column;
}
}
</style>

View File

@@ -72,7 +72,7 @@
</div>
<!-- 欢迎弹窗 -->
<!-- <el-dialog
<el-dialog
v-model="showWelcomeDialog"
width="90%"
:style="{ height: '425px' }"
@@ -86,13 +86,25 @@
<div class="welcome-icon">🎉</div>
<h3>融汇通更新</h3>
<div class="welcome-features">
<div class="feature-item">
<span class="feature-icon">💎</span>
<span>获取融豆赚取积分</span>
<div class="announcements-container" v-if="announcements.length > 0">
<div
class="announcement-item"
v-for="announcement in announcements"
:key="announcement.id"
>
<div class="announcement-header">
<h4 class="announcement-title">{{ announcement.title }}</h4>
<span class="announcement-priority" :class="announcement.priority">{{ announcement.priority }}</span>
</div>
<div class="announcement-content">{{ announcement.content }}</div>
<div class="announcement-meta">
<span class="announcement-time">{{ formatDate(announcement.created_at) }}</span>
<span class="announcement-author">发布者: {{ announcement.creator_name }}</span>
</div>
</div>
</div>
<div class="feature-item">
<span class="feature-icon">🛒</span>
<span>积分商城兑换好礼</span>
<div v-else class="no-announcements">
<span>暂无更新信息</span>
</div>
</div>
</div>
@@ -101,7 +113,7 @@
<el-button @click="showWelcomeDialog = false">关闭</el-button>
</span>
</template>
</el-dialog> -->
</el-dialog>
</div>
</template>
@@ -115,6 +127,7 @@ import { useUserStore } from '../stores/user';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';
import api from '@/utils/api'
export default {
components: {
@@ -128,6 +141,9 @@ export default {
// 响应式数据
const userPoints = ref(0);
const showWelcomeDialog = ref(false);
const updateNotice = ref('');
const announcements = ref([]);
// 计算属性 - 获取用户名
const userName = computed(() => {
@@ -181,11 +197,31 @@ export default {
}
};
const getUpdateNotice = async () => {
try {
const response = await api.get('/announcements');
console.log('获取更新信息',response);
if (response.data.success && response.data.data.announcements) {
announcements.value = response.data.data.announcements;
// 设置第一个公告的标题作为默认显示
if (announcements.value.length > 0) {
updateNotice.value = announcements.value[0].title;
}
}
} catch (error) {
console.error('获取更新信息失败', error);
ElMessage.error('获取更新信息失败,请稍后重试');
}
}
// 定时刷新积分
let refreshInterval;
onMounted(() => {
getUserPoints();
getUpdateNotice();
// 每5分钟刷新一次积分可根据需求调整时间
refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000);
@@ -199,6 +235,18 @@ export default {
clearInterval(refreshInterval);
});
// 格式化日期
const formatDate = (dateString) => {
const date = new Date(dateString);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
};
return {
modules: [Autoplay, Pagination],
userPoints,
@@ -207,6 +255,9 @@ export default {
headerItems,
newsItems,
showWelcomeDialog,
updateNotice,
announcements,
formatDate,
getUserPoints, // 如果需要外部调用可以暴露
};
},
@@ -529,25 +580,110 @@ export default {
margin-top: 30px;
}
.feature-item {
display: flex;
align-items: center;
justify-content: flex-start;
.announcements-container {
max-height: 200px;
overflow-y: auto;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: var(--primary-color) #f1f1f1;
}
.announcements-container::-webkit-scrollbar {
width: 6px;
}
.announcements-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.announcements-container::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 3px;
}
.announcements-container::-webkit-scrollbar-thumb:hover {
background: var(--secondary-color);
}
.announcement-item {
padding: 12px 16px;
margin-bottom: 12px;
border-radius: 8px;
transition: var(--transition);
}
.feature-item:hover {
background: #e9ecef;
transform: translateX(4px);
.announcement-item:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.feature-icon {
font-size: 20px;
margin-right: 12px;
width: 24px;
text-align: center;
.announcement-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.announcement-title {
font-size: 14px;
font-weight: 600;
color: var(--dark-color);
margin: 0;
}
.announcement-priority {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
text-transform: uppercase;
}
.announcement-priority.high {
background: #ffebee;
color: #c62828;
}
.announcement-priority.medium {
background: #fff3e0;
color: #ef6c00;
}
.announcement-priority.low {
background: #e8f5e8;
color: #2e7d32;
}
.announcement-content {
font-size: 13px;
color: #555;
line-height: 1.4;
margin-bottom: 8px;
}
.announcement-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: #888;
}
.announcement-time,
.announcement-author {
font-size: 11px;
color: #888;
}
.no-announcements {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: #666;
font-style: italic;
}
:deep(.welcome-dialog .el-dialog__footer) {
@@ -615,11 +751,6 @@ export default {
padding: 10px 12px;
}
.feature-icon {
font-size: 18px;
margin-right: 10px;
}
:deep(.welcome-dialog .el-dialog__footer) {
padding: 10px 15px;
}

View File

@@ -897,12 +897,18 @@ export default {
const actualAmount = parseFloat(this.transferDialog.actualAmount)
// 处理voucher去掉开头的'https://minio.zrbjr.com'
let processedVoucher = this.transferDialog.voucher
if (processedVoucher.startsWith('https://minio.zrbjr.com')) {
processedVoucher = processedVoucher.replace('https://minio.zrbjr.com', '')
}
this.processing = true
try {
await api.post(`/matching/confirm-allocation/${this.transferDialog.allocationId}`, {
transferAmount: actualAmount,
description: this.transferDialog.description,
voucher: this.transferDialog.voucher
voucher: processedVoucher
})
this.$message.success('转账凭证已提交,转账记录已创建')
this.closeTransferDialog()

View File

@@ -160,6 +160,7 @@ export default {
const settings = ref([
{text:'账号安全',path:'/editpasswordpage'},
{text:'商户资料',path:'/editdetailspage'},
{text:'分销',path:'/distribution'},
{text:'通知设置'},
{text:'积分获取规则'},
{text:'隐私协议'},

View File

@@ -173,8 +173,7 @@ const formatDateTime = (dateTime) => {
const formatAddress = (address) => {
if (!address) return ''
const { province, city, district, detail } = address
return `${province || ''}${city || ''}${district || ''}${detail || ''}`
return address.detail_address || address.detail || ''
}
const fetchOrderData = async () => {
@@ -202,12 +201,12 @@ const fetchOrderData = async () => {
subtotal: order.total_amount || 0,
shippingFee: 0,
address: {
recipient: data.address?.receiver_name || order.username || '收件人',
phone: data.address?.receiver_phone || order.phone || '手机号',
province: data.address?.province_name || '',
city: data.address?.city_name || '',
district: data.address?.district_name || '',
detail: data.address?.detailed_address || '暂无地址信息'
recipient: data.address?.recipient_name || order.username || '收件人',
phone: data.address?.phone || order.phone || '手机号',
province: data.address?.province || '',
city: data.address?.city || '',
district: data.address?.district || '',
detail_address: data.order.address?.detail_address || '暂无地址信息'
},
cartItems: (data.items || order.items || []).map(item => ({
id: item.id,