gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(invitation): 添加邀请注册功能并支持小程序码

Browse Source 
- 新增邀请注册功能，允许管理员生成邀请链接和二维码
- 支持网页注册和小程序码注册两种方式
- 实现自动建立推荐关系的功能
- 添加邀请统计和自定义小程序页面等扩展功能
- 优化用户体验和错误处理
This commit is contained in:
赵忠林
2025-09-05 16:58:49 +08:00
parent cf74d2670c
commit 5da7d1b2ad
8 changed files with 1459 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -1,6 +1,6 @@
VITE_APP_NAME=后台管理(开发环境)
#VITE_API_URL=http://127.0.0.1:9200/api
#VITE_SERVER_API_URL=http://127.0.0.1:8000/api
VITE_SERVER_API_URL=http://127.0.0.1:8000/api
#VITE_API_URL=https://cms-api.s209.websoft.top/api

201
docs/invitation-feature.md Normal file
View File

@@ -0,0 +1,201 @@
# 邀请注册功能使用说明
## 功能概述
邀请注册功能允许管理员生成邀请链接和二维码，邀请新用户注册并自动建立推荐关系。支持网页二维码和小程序码两种方式。
## 功能特点
- ✅ **简单易用**：基于现有推荐关系功能，无需复杂配置
- ✅ **双重支持**：支持网页注册和小程序注册
- ✅ **自动关联**：用户注册后自动建立推荐关系
- ✅ **多种分享**：支持链接复制、二维码下载等分享方式
## 使用流程
### 管理员操作
1. **进入管理页面**
- 访问 `/shop/admin` 商店管理员页面
- 点击"邀请注册"按钮
2. **生成邀请码**
- 弹窗会自动生成包含当前用户ID的邀请链接
- 选择二维码类型：网页二维码或小程序码
3. **分享邀请**
- 复制邀请链接发送给用户
- 下载二维码图片分享
- 让用户直接扫描屏幕上的二维码
### 用户注册
#### 网页注册流程
1. 用户点击邀请链接或扫描网页二维码
2. 进入注册页面，会显示邀请提示信息
3. 填写注册信息完成注册
4. 系统自动建立与邀请人的推荐关系
#### 小程序注册流程
1. 用户扫描小程序码进入小程序
2. 小程序自动识别邀请参数
3. 用户在小程序内完成注册
4. 系统自动建立推荐关系
## 技术实现
### 邀请链接格式
```
网页注册: https://domain.com/register?inviter=123
小程序码: scene参数为 invite_123
```
### 核心文件
1. **邀请弹窗组件**
```
src/views/shop/shopAdmin/components/invitation-modal.vue
```
2. **小程序码API**
```
src/api/miniprogram/index.ts
```
3. **注册页面优化**
```
src/views/passport/register/index.vue
```
### API接口
#### 生成小程序码
```typescript
// 生成邀请注册小程序码
generateInviteRegisterCode(inviterId: number): Promise<string>
// 参数说明
{
page: 'pages/register/index', // 小程序注册页面
scene: 'invite_123', // 邀请参数
width: 180, // 二维码宽度
envVersion: 'trial' // 环境版本
}
```
#### 建立推荐关系
```typescript
// 绑定推荐关系
bindUserReferee(data: UserReferee): Promise<string>
// 参数说明
{
dealerId: 123, // 邀请人ID
userId: 456, // 被邀请人ID
level: 1 // 推荐层级
}
```
## 配置说明
### 小程序码配置
在 `src/api/miniprogram/index.ts` 中可以配置：
```typescript
// 基础URL配置
const BaseUrl = SERVER_API_URL;
// 小程序页面配置
const MINIPROGRAM_PAGES = {
register: 'pages/register/index', // 注册页面
index: 'pages/index/index' // 首页
};
// 环境配置
const ENV_VERSION = 'trial'; // release | trial | develop
```
### 注册页面配置
在注册页面中，系统会自动检测URL参数：
- `inviter`: 邀请人ID
- 检测到邀请参数时显示邀请提示
## 错误处理
### 常见问题
1. **小程序码加载失败**
- 检查小程序码生成接口是否正常
- 确认 `BaseUrl` 配置正确
- 查看网络连接状态
2. **推荐关系建立失败**
- 检查用户ID是否正确获取
- 确认推荐关系API接口正常
- 查看控制台错误日志
3. **邀请链接无效**
- 确认URL参数格式正确
- 检查注册页面参数解析逻辑
### 调试方法
1. **开启控制台日志**
```javascript
// 在浏览器控制台查看
localStorage.setItem('debug', 'true');
```
2. **检查网络请求**
- 打开浏览器开发者工具
- 查看Network标签页的API请求
3. **验证参数传递**
```javascript
// 检查邀请参数
const urlParams = new URLSearchParams(window.location.search);
console.log('邀请人ID:', urlParams.get('inviter'));
```
## 扩展功能
### 自定义小程序页面
可以根据需要修改小程序码跳转的页面：
```typescript
export async function generateCustomInviteCode(inviterId: number, page: string) {
return generateMiniProgramCode({
page: page,
scene: `invite_${inviterId}`,
width: 180,
checkPath: true,
envVersion: 'trial'
});
}
```
### 添加邀请统计
可以扩展功能添加邀请统计：
```typescript
// 统计邀请成功数量
export async function getInviteStats(inviterId: number) {
// 查询推荐关系表统计数据
return listUserReferee({ dealerId: inviterId });
}
```
## 注意事项
1. **权限控制**：确保只有管理员可以生成邀请码
2. **参数验证**：注册时需要验证邀请人ID的有效性
3. **重复注册**：防止同一用户重复建立推荐关系
4. **小程序配置**：确保小程序端正确处理scene参数
## 更新日志
- **v1.0.0**: 基础邀请注册功能
- **v1.1.0**: 添加小程序码支持
- **v1.2.0**: 优化用户体验和错误处理

50
src/api/miniprogram/index.ts Normal file
View File

@@ -0,0 +1,50 @@
import {MODULES_API_URL} from '@/config/setting';
/**
* 小程序码参数
*/
export interface MiniProgramCodeParam {
page?: string;
scene: string;
width?: number;
checkPath?: boolean;
envVersion?: 'release' | 'trial' | 'develop';
}
/**
* 生成小程序码
*/
export async function generateMiniProgramCode(data: MiniProgramCodeParam) {
try {
const url = '/wx-login/getOrderQRCodeUnlimited/' + data.scene;
const fullUrl = MODULES_API_URL + `${url}`;
console.log('生成小程序码URL:', fullUrl);
console.log('小程序码参数:', data);
console.log('scene 参数:', data.scene);
// 直接返回URL，让浏览器处理图片加载
// scene 参数中包含了租户ID信息
return fullUrl;
} catch (error: any) {
console.error('生成小程序码失败:', error);
throw new Error(error.message || '生成小程序码失败');
}
}
/**
* 生成邀请小程序码
*/
export async function generateInviteCode(inviterId: number) {
const scene = `uid_${inviterId}`;
console.log('生成邀请小程序码 scene:', scene);
return generateMiniProgramCode({
page: 'pages/index/index',
scene: scene,
width: 180,
checkPath: true,
envVersion: 'trial'
});
}

5
src/router/routes.ts
View File

@@ -30,6 +30,11 @@ export const routes = [
component: () => import('@/views/bszx/bszxPayCert/index.vue'),
meta: { title: '查看证书' }
},
{
path: '/dealer/register',
component: () => import('@/views/passport/dealer/register.vue'),
meta: { title: '邀请注册' }
},
// {
// path: '/forget',
// component: () => import('@/views/passport/forget/index.vue'),

844
src/views/passport/dealer/register.vue Normal file
View File

@@ -0,0 +1,844 @@
<template>
<div
:class="[
'login-wrapper',
['', 'login-form-right', 'login-form-left'][direction]
]"
:style="{
backgroundImage: 'url(' + config?.loginBgImg + ')'
}"
>
<div class="logo-login" v-if="config?.siteName">
<img
:src="
config.sysLogo ||
'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg'
"
class="logo"
/>
<h4>{{ config.siteName }}</h4>
</div>
<div class="company-name" v-if="config?.loginTitle">{{
config?.loginTitle
}}
</div>
<a-form
ref="formRef"
:model="form"
:rules="rules"
class="login-form ele-bg-white"
>
<div class="login-title flex justify-center items-center px-12">
<h4
class="title-btn"
>注册</h4
>
</div>
<template v-if="loginType === 'account'">
<!-- 邀请信息显示 -->
<div v-if="inviterId" style="margin-bottom: 16px; padding: 12px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 4px;">
<div style="color: #52c41a; font-size: 14px;">
<check-circle-outlined style="margin-right: 4px;" />
您正在通过邀请链接注册，注册成功后将自动建立推荐关系
</div>
</div>
<a-form-item name="phone">
<a-input
allow-clear
size="large"
:maxlength="11"
v-model:value="form.phone"
:placeholder="`请输入手机号码`"
>
<template #addonBefore> +86</template>
</a-input>
</a-form-item>
<a-form-item name="code">
<div class="login-input-group">
<a-input
placeholder="请输入验证码"
v-model:value="form.code"
size="large"
:maxlength="6"
allow-clear
@pressEnter="onLoginBySms"
/>
<a-button
class="login-captcha"
:disabled="!!countdownTime"
@click="openImgCodeModal"
>
<span v-if="!countdownTime">发送验证码</span>
<span v-else>已发送 {{ countdownTime }} s</span>
</a-button>
</div>
</a-form-item>
<a-form-item name="companyName">
<div class="flex">
<a-input
allow-clear
size="large"
placeholder="公众号|小程序名称"
v-model:value="form.companyName"
>
</a-input>
<a-button
class="ele-btn-icon"
size="large"
style="margin-left: 10px; width: 137px"
@click="openMapPicker"
>
<AimOutlined />选取
</a-button>
</div>
</a-form-item>
<!-- <a-form-item name="companyName">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- size="large"-->
<!-- :maxlength="11"-->
<!-- v-model:value="form.companyName"-->
<!-- :placeholder="`请输入店铺名称`"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item name="email">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- size="large"-->
<!-- v-model:value="form.email"-->
<!-- :placeholder="`(选填)请输入电子邮箱`"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item name="category">
<industry-select
v-model:value="form.category"
valueField="label"
allow-clear
size="large"
placeholder="所属行业"
class="ele-fluid"
@change="onIndustry"
/>
</a-form-item>
<a-form-item>
<a-checkbox v-model:checked="form.remember">
同意 <a href="https://website.websoft.top/xieyi/01.html" target="_blank">《服务协议及隐私政策》</a>
</a-checkbox>
</a-form-item>
<a-form-item>
<a-button
block
size="large"
type="primary"
:disabled="!form.remember"
:loading="loading"
@click="submit"
>
注册
</a-button>
<div class="register text-center pt-5"><a @click="push('/login')">已有账号，立即登录</a></div>
</a-form-item>
</template>
<template v-if="loginType === 'sms'">
<a-form-item name="phone">
<a-input
allow-clear
size="large"
:maxlength="11"
v-model:value="form.phone"
:placeholder="`请输入手机号码`"
>
<template #addonBefore> +86</template>
</a-input>
</a-form-item>
<a-form-item name="code">
<div class="login-input-group">
<a-input
placeholder="请输入验证码"
v-model:value="form.code"
size="large"
:maxlength="6"
allow-clear
@pressEnter="onLoginBySms"
/>
<a-button
class="login-captcha"
:disabled="!!countdownTime"
@click="openImgCodeModal"
>
<span v-if="!countdownTime">发送验证码</span>
<span v-else>已发送 {{ countdownTime }} s</span>
</a-button>
</div>
</a-form-item>
<a-form-item>
<a-button
block
size="large"
type="primary"
:loading="loading"
@click="onLoginBySms"
>
{{ loading ? t('login.loading') : t('login.login') }}
</a-button>
</a-form-item>
</template>
</a-form>
<div class="login-copyright">
<a-space>
<span>© {{ new Date().getFullYear() }}</span>
<span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
</a-space>
</div>
<!-- 编辑弹窗 -->
<a-modal
:width="340"
:footer="null"
title="发送验证码"
v-model:visible="visible"
>
<div class="login-input-group" style="margin-bottom: 16px">
<a-input
v-model:value="imgCode"
:maxlength="5"
size="large"
placeholder="请输入图形验证码"
allow-clear
@pressEnter="sendCode"
/>
<a-button class="login-captcha">
<img alt="" :src="captcha" @click="changeCaptcha"/>
</a-button>
</div>
<a-button
block
size="large"
type="primary"
:loading="codeLoading"
@click="sendCode"
>
立即发送
</a-button>
</a-modal>
</div>
<!-- 地图位置选择弹窗 -->
<ele-map-picker
:need-city="true"
:dark-mode="darkMode"
v-model:visible="showMap"
:center="[108.374959, 22.767024]"
:search-type="1"
:zoom="12"
@done="onDone"
/>
</template>
<script lang="ts" setup>
import {ref, reactive, unref, watch, onMounted} from 'vue';
import {useI18n} from 'vue-i18n';
import {useRouter} from 'vue-router';
import {getTenantId} from '@/utils/domain';
import {Form, message} from 'ant-design-vue';
import { AimOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';
import {goHomeRoute, cleanPageTabs} from '@/utils/page-tab-util';
import {loginBySms, getCaptcha} from '@/api/passport/login';
import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
import {TEMPLATE_ID, THEME_STORE_NAME} from '@/config/setting';
import {sendSmsCaptcha} from '@/api/passport/login';
import useFormData from '@/utils/use-form-data';
import {FormInstance} from 'ant-design-vue/es/form';
import {configWebsiteField} from '@/api/cms/cmsWebsiteField';
import {Config} from '@/api/cms/cmsWebsiteField/model';
import {phoneReg} from 'ele-admin-pro';
import {push} from "@/utils/common";
import {useThemeStore} from "@/store/modules/theme";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {createCmsWebSite} from "@/api/layout";
import { bindUserReferee } from '@/api/user/referee';
const useForm = Form.useForm;
const {currentRoute} = useRouter();
const {t} = useI18n();
const { locale } = useI18n();
// 登录框方向, 0 居中, 1 居右, 2 居左
const direction = ref(0);
// 加载状态
const loading = ref(false);
// 是否显示tenantId填写输入框
const showTenantId = ref(true);
const loginType = ref('account');
const config = ref<Config>();
// 是否开启响应式布局
const themeStore = useThemeStore();
const { darkMode } = storeToRefs(themeStore);
// 配置信息
const {form} = useFormData<CmsWebsite>({
// 站点ID
websiteId: undefined,
// 网站名称
websiteName: undefined,
// 网站标识
websiteCode: undefined,
// 网站LOGO
websiteIcon: undefined,
// 网站LOGO
websiteLogo: undefined,
// 网站LOGO(深色模式)
websiteDarkLogo: undefined,
// 网站类型
websiteType: undefined,
// 网站关键词
keywords: undefined,
// 域名前缀
prefix: undefined,
// 绑定域名
domain: undefined,
// 全局样式
style: undefined,
// 后台管理地址
adminUrl: undefined,
// 应用版本 10标准版 20专业版 30永久授权
version: undefined,
// 服务到期时间
expirationTime: undefined,
// 模版ID
templateId: TEMPLATE_ID,
// 行业类型(父级)
industryParent: undefined,
// 行业类型(子级)
industryChild: undefined,
// 企业ID
companyId: undefined,
// 所在国家
country: undefined,
// 所在省份
province: undefined,
// 所在城市
city: undefined,
// 所在辖区
region: undefined,
// 经度
longitude: undefined,
// 纬度
latitude: undefined,
// 街道地址
address: undefined,
// 联系电话
phone: undefined,
// 电子邮箱
email: undefined,
// ICP备案号
icpNo: undefined,
// 公安备案
policeNo: undefined,
// 备注
comments: undefined,
// 是否推荐
recommend: undefined,
// 是否运行中
running: undefined,
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
status: undefined,
// 维护说明
statusText: undefined,
// 关闭说明
statusClose: undefined,
// 全局样式
styles: undefined,
// 语言
lang: undefined,
// 排序号
sortNumber: undefined,
// 用户ID
userId: undefined,
// 是否删除, 0否, 1是
deleted: undefined,
// 租户id
tenantId: undefined,
// 创建时间
createTime: undefined,
// 修改时间
updateTime: undefined,
// 网站配置
config: undefined,
// 短信验证码
smsCode: undefined,
// 短信验证码
code: undefined,
// 是否管理员
isSuperAdmin: true,
// 企业名称
companyName: undefined,
});
// 验证码 base64 数据
const captcha = ref('');
// 验证码内容, 实际项目去掉
const text = ref('');
// 是否显示图形验证码弹窗
const visible = ref(false);
// 图形验证码
const imgCode = ref('');
// 发送验证码按钮loading
const codeLoading = ref(false);
// 验证码倒计时时间
const countdownTime = ref(0);
// 验证码倒计时定时器
let countdownTimer: number | null = null;
// 是否显示地图选择弹窗
const showMap = ref(false);
// 邀请人ID
const inviterId = ref<number>();
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
// 表单验证规则
const rules = reactive({
companyName: [
{
required: true,
message: '请输入店铺名称',
type: 'string'
}
],
category: [
{
required: true,
message: '请选择行业分类',
type: 'string'
}
],
phone: [
{
pattern: phoneReg,
required: true,
type: 'string',
message: '手机号格式不正确',
trigger: 'blur'
}
],
// address: [
// {
// required: true,
// message: '请选择店铺位置',
// type: 'string'
// }
// ],
password: [
{
required: true,
message: t('login.password'),
type: 'string'
}
],
code: [
{
required: true,
message: t('login.code'),
type: 'string'
}
],
smsCode: [
{
required: true,
message: t('login.code'),
type: 'string'
}
]
});
/* 显示发送短信验证码弹窗 */
const openImgCodeModal = () => {
if (!form.phone) {
message.error('请输入手机号码');
return;
}
imgCode.value = '';
changeCaptcha();
visible.value = true;
};
/* 发送短信验证码 */
const sendCode = () => {
if (!imgCode.value) {
message.error('请输入图形验证码');
return;
}
if (text.value !== imgCode.value.toLowerCase()) {
message.error('图形验证码不正确');
return;
}
codeLoading.value = true;
sendSmsCaptcha({phone: form.phone}).then(() => {
message.success('短信验证码发送成功, 请注意查收!');
visible.value = false;
codeLoading.value = false;
countdownTime.value = 30;
// 开始对按钮进行倒计时
countdownTimer = window.setInterval(() => {
if (countdownTime.value <= 1) {
countdownTimer && clearInterval(countdownTimer);
countdownTimer = null;
}
countdownTime.value--;
}, 1000);
});
};
const {resetFields} = useForm(form, rules);
const goHome = () => {
const {query} = unref(currentRoute);
goHomeRoute(query.from as string);
localStorage.removeItem(THEME_STORE_NAME);
};
const onIndustry = (item: any) => {
form.industryParent = item[0];
form.industryChild = item[1];
form.category = `${item[0]}/${item[1]}`;
};
/* 打开位置选择 */
const openMapPicker = () => {
showMap.value = true;
};
/* 地图选择后回调 */
const onDone = (location: CenterPoint) => {
if (location) {
console.log(location);
form.companyName = `${location.name}`;
form.province = `${location.city?.province}`;
form.city = `${location.city?.city}`;
form.region = `${location.city?.district}`;
form.address = `${location.address}`;
form.longitude = `${location.lng}`;
form.latitude = `${location.lat}`;
}
showMap.value = false;
};
const onLoginBySms = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
form.code = form.smsCode?.toLowerCase();
loginBySms(form)
.then((msg) => {
message.success(msg);
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
})
.catch((e: Error) => {
message.error(e.message);
loading.value = false;
});
})
.catch(() => {
});
};
/* 保存编辑 */
const submit = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 普通注册流程
createCmsWebSite(form)
.then(async (msg) => {
// 如果有邀请人，注册成功后建立推荐关系
if (inviterId.value) {
try {
const userId = localStorage.getItem('UserId');
if (userId) {
await bindUserReferee({
dealerId: inviterId.value,
userId: Number(userId),
level: 1
});
message.success('注册成功，已建立推荐关系');
}
} catch (e) {
console.error('建立推荐关系失败:', e);
// 不影响注册流程，只是推荐关系建立失败
}
}
setTimeout(() => {
// 登录成功
message.success(msg);
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
}, 2000)
})
.catch(() => {
message.error('该手机号码已经被注册');
loading.value = false;
});
})
.catch(() => {
});
};
/* 获取图形验证码 */
const changeCaptcha = () => {
configWebsiteField({
lang: locale.value
}).then((data) => {
config.value = data;
});
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
getCaptcha()
.then((data) => {
captcha.value = data.base64;
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
text.value = data.text;
// 自动回填验证码, 实际项目去掉这个
// form.code = data.text;
// resetFields();
})
.catch((e) => {
message.error(e.message);
});
};
// 首次加载
changeCaptcha();
// 检查URL参数中的邀请人ID
onMounted(() => {
const urlParams = new URLSearchParams(window.location.search);
const inviterParam = urlParams.get('inviter');
if (inviterParam) {
inviterId.value = Number(inviterParam);
}
});
watch(
currentRoute,
() => {
// 解析二级域名获取租户ID
const tenantId = getTenantId();
if (tenantId) {
form.tenantId = Number(tenantId);
showTenantId.value = false;
}
const tid = localStorage.getItem('TenantId');
if (tid) {
form.tenantId = Number(tid);
showTenantId.value = false;
}
},
{immediate: true}
);
</script>
<style lang="less" scoped>
/* 背景 */
.login-wrapper {
padding: 48px 16px 0 16px;
position: relative;
box-sizing: border-box;
background-image: url('@/assets/bg-2.jpeg');
background-color: var(--grey-5);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
}
}
.company-name {
position: absolute;
top: 17%;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: #ffffff;
}
/* 卡片 */
.login-form {
width: 450px;
margin: 0 auto;
max-width: 100%;
padding: 0 28px;
box-sizing: border-box;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
border-radius: 2px;
position: relative;
z-index: 2;
h4 {
padding: 22px 0;
text-align: center;
}
.title-btn {
cursor: pointer;
}
.login-title {
display: flex;
justify-content: space-around;
line-height: 50px;
.active {
color: #007dff;
}
}
}
.login-form-right .login-form {
margin: 0 15% 0 auto;
}
.login-form-left .login-form {
margin: 0 auto 0 15%;
}
/* 验证码 */
.login-input-group {
display: flex;
align-items: center;
background-repeat: no-repeat;
:deep(.ant-input-affix-wrapper) {
flex: 1;
}
.login-captcha {
width: 102px;
height: 40px;
margin-left: 10px;
padding: 0;
& > img {
width: 100%;
height: 100%;
}
}
}
/* 第三方登录图标 */
.login-oauth-icon {
color: #fff;
padding: 5px;
margin: 0 12px;
font-size: 18px;
border-radius: 50%;
cursor: pointer;
}
.work-icon {
width: 50px;
height: 50px;
}
/* 底部版权 */
.login-copyright {
color: #eee;
text-align: center;
padding: 48px 0 22px 0;
position: relative;
z-index: 1;
}
/* 响应式 */
@media screen and (min-height: 640px) {
.login-wrapper {
padding-top: 0;
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
margin-top: -230px;
}
.login-form-right .login-form,
.login-form-left .login-form {
left: auto;
right: 15%;
transform: translateX(0);
margin: -230px auto auto auto;
}
.login-form-left .login-form {
right: auto;
left: 15%;
}
.login-copyright {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
}
@media screen and (max-width: 768px) {
.login-form-right .login-form,
.login-form-left .login-form {
left: 50%;
right: auto;
margin-left: 0;
margin-right: auto;
transform: translateX(-50%);
}
}
.wwLogin_qrcode_head {
padding: 10px 0 40px 0 !important;
}
.logo-login {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
cursor: pointer;
img {
width: 28px;
height: 28px;
border-radius: 4px;
}
h4 {
margin-left: 6px;
color: #ffffff;
font-size: 20px;
}
}
</style>

43
src/views/passport/register/index.vue
View File

@@ -14,6 +14,7 @@
config.sysLogo ||
'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg'
"
alt="登录页面LOGO"
class="logo"
/>
<h4>{{ config.siteName }}</h4>
@@ -35,14 +36,6 @@
>
</div>
<template v-if="loginType === 'account'">
<!-- 邀请信息显示 -->
<div v-if="inviterId" style="margin-bottom: 16px; padding: 12px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 4px;">
<div style="color: #52c41a; font-size: 14px;">
<check-circle-outlined style="margin-right: 4px;" />
您正在通过邀请链接注册，注册成功后将自动建立推荐关系
</div>
</div>
<a-form-item name="phone">
<a-input
allow-clear
@@ -235,12 +228,12 @@
</template>
<script lang="ts" setup>
import {ref, reactive, unref, watch, onMounted} from 'vue';
import {ref, reactive, unref, watch} from 'vue';
import {useI18n} from 'vue-i18n';
import {useRouter} from 'vue-router';
import {getTenantId} from '@/utils/domain';
import {Form, message} from 'ant-design-vue';
import { AimOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { AimOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';
import {goHomeRoute, cleanPageTabs} from '@/utils/page-tab-util';
import {loginBySms, getCaptcha} from '@/api/passport/login';
@@ -256,7 +249,6 @@ import {push} from "@/utils/common";
import {useThemeStore} from "@/store/modules/theme";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {createCmsWebSite} from "@/api/layout";
import { bindUserReferee } from '@/api/user/referee';
const useForm = Form.useForm;
const {currentRoute} = useRouter();
@@ -391,8 +383,6 @@ const countdownTime = ref(0);
let countdownTimer: number | null = null;
// 是否显示地图选择弹窗
const showMap = ref(false);
// 邀请人ID
const inviterId = ref<number>();
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
@@ -563,24 +553,6 @@ const submit = () => {
// 普通注册流程
createCmsWebSite(form)
.then(async (msg) => {
// 如果有邀请人，注册成功后建立推荐关系
if (inviterId.value) {
try {
const userId = localStorage.getItem('UserId');
if (userId) {
await bindUserReferee({
dealerId: inviterId.value,
userId: Number(userId),
level: 1
});
message.success('注册成功，已建立推荐关系');
}
} catch (e) {
console.error('建立推荐关系失败:', e);
// 不影响注册流程，只是推荐关系建立失败
}
}
setTimeout(() => {
// 登录成功
message.success(msg);
@@ -624,15 +596,6 @@ const changeCaptcha = () => {
// 首次加载
changeCaptcha();
// 检查URL参数中的邀请人ID
onMounted(() => {
const urlParams = new URLSearchParams(window.location.search);
const inviterParam = urlParams.get('inviter');
if (inviterParam) {
inviterId.value = Number(inviterParam);
}
});
watch(
currentRoute,
() => {

172
src/views/shop/shopAdmin/components/__tests__/invitation-modal.test.ts Normal file
View File

@@ -0,0 +1,172 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { mount } from '@vue/test-utils';
import { message } from 'ant-design-vue/es';
import InvitationModal from '../invitation-modal.vue';
// Mock dependencies
vi.mock('@/api/miniprogram', () => ({
generateInviteRegisterCode: vi.fn().mockResolvedValue('https://example.com/miniprogram-code.jpg')
}));
vi.mock('ant-design-vue/es', () => ({
message: {
success: vi.fn(),
error: vi.fn()
}
}));
vi.mock('vue-router', () => ({
useRouter: () => ({
push: vi.fn()
})
}));
// Mock QrCode component
vi.mock('@/components/QrCode/index.vue', () => ({
default: {
name: 'QrCode',
props: ['value', 'size', 'margin'],
template: '<div class="qr-code-mock">QR Code: {{ value }}</div>'
}
}));
describe('InvitationModal', () => {
let wrapper: any;
beforeEach(() => {
// Mock localStorage
Object.defineProperty(window, 'localStorage', {
value: {
getItem: vi.fn().mockReturnValue('123')
}
});
// Mock window.location
Object.defineProperty(window, 'location', {
value: {
origin: 'https://example.com'
}
});
wrapper = mount(InvitationModal, {
props: {
visible: true,
inviterId: 123
},
global: {
stubs: {
'a-modal': {
template: '<div class="modal-mock"><slot /></div>'
},
'a-typography-title': {
template: '<h4><slot /></h4>'
},
'a-typography-text': {
template: '<span><slot /></span>'
},
'a-input': {
template: '<input :value="value" />'
},
'a-button': {
template: '<button @click="$emit(\'click\')"><slot /></button>'
},
'a-radio-group': {
template: '<div><slot /></div>',
props: ['value'],
emits: ['update:value', 'change']
},
'a-radio-button': {
template: '<button><slot /></button>',
props: ['value']
},
'a-space': {
template: '<div class="space"><slot /></div>'
},
'a-spin': {
template: '<div class="spin">Loading...</div>'
}
}
}
});
});
it('should render correctly', () => {
expect(wrapper.find('.modal-mock').exists()).toBe(true);
expect(wrapper.text()).toContain('邀请新用户注册');
});
it('should generate correct invitation link', () => {
const expectedLink = 'https://example.com/register?inviter=123';
expect(wrapper.vm.invitationLink).toBe(expectedLink);
});
it('should show web QR code by default', () => {
expect(wrapper.vm.qrCodeType).toBe('web');
expect(wrapper.find('.qr-code-mock').exists()).toBe(true);
});
it('should copy invitation link', async () => {
// Mock clipboard API
Object.defineProperty(navigator, 'clipboard', {
value: {
writeText: vi.fn().mockResolvedValue(undefined)
}
});
await wrapper.vm.copyLink();
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
'https://example.com/register?inviter=123'
);
expect(message.success).toHaveBeenCalledWith('邀请链接已复制到剪贴板');
});
it('should handle clipboard fallback', async () => {
// Mock clipboard API failure
Object.defineProperty(navigator, 'clipboard', {
value: undefined
});
// Mock document methods
const mockTextArea = {
value: '',
select: vi.fn(),
style: {}
};
document.createElement = vi.fn().mockReturnValue(mockTextArea);
document.body.appendChild = vi.fn();
document.body.removeChild = vi.fn();
document.execCommand = vi.fn().mockReturnValue(true);
await wrapper.vm.copyLink();
expect(document.createElement).toHaveBeenCalledWith('textarea');
expect(message.success).toHaveBeenCalledWith('邀请链接已复制到剪贴板');
});
it('should load miniprogram code when switching to miniprogram type', async () => {
await wrapper.setData({ qrCodeType: 'miniprogram' });
await wrapper.vm.onQRCodeTypeChange();
expect(wrapper.vm.loadingMiniCode).toBe(false);
expect(wrapper.vm.miniProgramCodeUrl).toBe('https://example.com/miniprogram-code.jpg');
});
it('should reset state when modal opens', async () => {
// Set some state
await wrapper.setData({
qrCodeType: 'miniprogram',
miniProgramCodeUrl: 'some-url',
loadingMiniCode: true
});
// Trigger watch
await wrapper.setProps({ visible: false });
await wrapper.setProps({ visible: true });
expect(wrapper.vm.qrCodeType).toBe('web');
expect(wrapper.vm.miniProgramCodeUrl).toBe('');
expect(wrapper.vm.loadingMiniCode).toBe(false);
});
});

217
src/views/shop/shopAdmin/components/invitation-modal.vue
View File

@@ -13,7 +13,7 @@
分享以下链接或二维码，邀请用户注册并自动建立推荐关系
</a-typography-text>
</div>
<!-- 邀请链接 -->
<div style="margin-bottom: 20px">
<a-input
@@ -28,35 +28,76 @@
</template>
</a-input>
</div>
<!-- 二维码 -->
<!-- 二维码选择 -->
<div style="margin-bottom: 16px">
<a-radio-group v-model:value="qrCodeType" @change="onQRCodeTypeChange">
<a-radio-button value="web">网页二维码</a-radio-button>
<a-radio-button value="miniprogram">小程序码</a-radio-button>
</a-radio-group>
</div>
<!-- 二维码显示 -->
<div style="margin-bottom: 20px">
<div style="display: inline-block; padding: 10px; background: white; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)">
<QrCode
<!-- 网页二维码 -->
<ele-qr-code-svg
v-if="qrCodeType === 'web'"
:value="invitationLink"
:size="200"
:margin="10"
/>
<!-- 小程序码 -->
<div v-else-if="qrCodeType === 'miniprogram'" style="width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;">
<img
v-if="miniProgramCodeUrl"
:src="miniProgramCodeUrl"
style="width: 180px; height: 180px; object-fit: contain;"
alt="小程序码"
@error="onMiniProgramCodeError"
@load="onMiniProgramCodeLoad"
/>
<a-spin v-else-if="loadingMiniCode" tip="正在生成小程序码..." />
<div v-else style="color: #999; text-align: center;">
<div>小程序码加载失败</div>
<a-button size="small" @click="loadMiniProgramCode">重新加载</a-button>
</div>
</div>
</div>
</div>
<!-- 使用说明 -->
<div style="text-align: left; background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 20px">
<div style="font-weight: 500; margin-bottom: 8px">使用说明：</div>
<div style="font-size: 12px; color: #666; line-height: 1.5">
1. 复制邀请链接发送给用户，或让用户扫描二维码<br>
2. 用户点击链接进入注册页面<br>
3. 用户完成注册后，系统自动建立推荐关系<br>
4. 您可以在"推荐关系管理"中查看邀请结果
<template v-if="qrCodeType === 'web'">
1. 复制邀请链接发送给用户，或让用户扫描网页二维码<br>
2. 用户点击链接或扫码进入注册页面<br>
3. 用户完成注册后，系统自动建立推荐关系<br>
4. 您可以在"推荐关系管理"中查看邀请结果
</template>
<template v-else>
1. 让用户扫描小程序码进入小程序<br>
2. 小程序会自动识别邀请信息<br>
3. 用户在小程序内完成注册后，系统自动建立推荐关系<br>
4. 您可以在"推荐关系管理"中查看邀请结果
</template>
</div>
</div>
<!-- 调试信息 -->
<div v-if="showDebugInfo" style="margin-bottom: 16px; padding: 8px; background: #f0f0f0; border-radius: 4px; font-size: 12px;">
<div><strong>调试信息:</strong></div>
<div>邀请人ID: {{ inviterId }}</div>
<div>邀请链接: {{ invitationLink }}</div>
<div v-if="qrCodeType === 'miniprogram'">小程序码URL: {{ miniProgramCodeUrl }}</div>
<div>BaseUrl: {{ baseUrl }}</div>
</div>
<!-- 操作按钮 -->
<div>
<a-space>
<a-button @click="downloadQRCode">下载二维码</a-button>
<a-button type="primary" @click="copyLink">复制链接</a-button>
<a-button @click="goToRefereeManage">查看推荐关系</a-button>
</a-space>
</div>
</div>
@@ -67,7 +108,7 @@
import { ref, computed, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import { useRouter } from 'vue-router';
import QrCode from '@/components/QrCode/index.vue';
import { generateInviteCode } from '@/api/miniprogram';
const emit = defineEmits<{
(e: 'update:visible', visible: boolean): void;
@@ -80,11 +121,26 @@ const props = defineProps<{
const router = useRouter();
// 二维码类型
const qrCodeType = ref<'web' | 'miniprogram'>('web');
// 小程序码URL
const miniProgramCodeUrl = ref<string>('');
// 小程序码加载状态
const loadingMiniCode = ref(false);
// 显示调试信息
const showDebugInfo = ref(false);
// 基础URL（用于调试）
const baseUrl = ref('');
// 获取邀请人ID
const inviterId = computed(() => {
return props.inviterId || Number(localStorage.getItem('UserId'));
});
// 生成邀请链接
const invitationLink = computed(() => {
const baseUrl = window.location.origin;
const inviterId = props.inviterId || localStorage.getItem('UserId');
return `${baseUrl}/register?inviter=${inviterId}`;
return `${baseUrl}/dealer/register?inviter=${inviterId.value}`;
});
// 复制链接
@@ -104,35 +160,128 @@ const copyLink = async () => {
}
};
// 下载二维码
const downloadQRCode = () => {
// 加载小程序码
const loadMiniProgramCode = async () => {
const currentInviterId = inviterId.value;
if (!currentInviterId) {
console.error('邀请人ID不存在');
message.error('邀请人ID不存在');
return;
}
console.log('开始加载小程序码，邀请人ID:', currentInviterId);
loadingMiniCode.value = true;
try {
// 查找二维码canvas元素
const canvas = document.querySelector('.ant-modal-body canvas') as HTMLCanvasElement;
if (canvas) {
const link = document.createElement('a');
link.download = `邀请注册二维码.png`;
link.href = canvas.toDataURL();
link.click();
message.success('二维码已下载');
} else {
message.error('下载失败，请稍后重试');
}
} catch (e) {
message.error('下载失败');
const codeUrl = await generateInviteCode(currentInviterId);
console.log('小程序码生成成功:', codeUrl);
miniProgramCodeUrl.value = codeUrl;
message.success('小程序码加载成功');
} catch (e: any) {
console.error('加载小程序码失败:', e);
message.error(`小程序码加载失败: ${e.message}`);
} finally {
loadingMiniCode.value = false;
}
};
// 跳转到推荐关系管理
const goToRefereeManage = () => {
router.push('/shop/user-referee');
updateVisible(false);
// 小程序码加载错误
const onMiniProgramCodeError = () => {
console.error('小程序码图片加载失败');
message.error('小程序码显示失败');
};
// 小程序码加载成功
const onMiniProgramCodeLoad = () => {
console.log('小程序码图片加载成功');
};
// 二维码类型切换
const onQRCodeTypeChange = () => {
if (qrCodeType.value === 'miniprogram' && !miniProgramCodeUrl.value) {
loadMiniProgramCode();
}
};
// 下载二维码
const downloadQRCode = () => {
try {
if (qrCodeType.value === 'web') {
// 下载网页二维码 - 查找SVG元素
const svgElement = document.querySelector('.ant-modal-body svg') as SVGElement;
if (svgElement) {
// 将SVG转换为Canvas再下载
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
// 获取SVG的XML字符串
const svgData = new XMLSerializer().serializeToString(svgElement);
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);
img.onload = () => {
canvas.width = img.width || 200;
canvas.height = img.height || 200;
ctx?.drawImage(img, 0, 0);
const link = document.createElement('a');
link.download = `邀请注册二维码.png`;
link.href = canvas.toDataURL('image/png');
link.click();
URL.revokeObjectURL(url);
message.success('二维码已下载');
};
img.onerror = () => {
URL.revokeObjectURL(url);
message.error('二维码下载失败');
};
img.src = url;
} else {
message.error('未找到二维码，请稍后重试');
}
} else {
// 下载小程序码
if (miniProgramCodeUrl.value) {
const link = document.createElement('a');
link.download = `邀请小程序码.png`;
link.href = miniProgramCodeUrl.value;
link.target = '_blank';
link.click();
message.success('小程序码已下载');
} else {
message.error('小程序码未加载');
}
}
} catch (e) {
console.error('下载失败:', e);
message.error('下载失败');
}
};
// 更新visible
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 监听弹窗显示状态
watch(() => props.visible, (visible) => {
if (visible) {
// 重置状态
qrCodeType.value = 'web';
miniProgramCodeUrl.value = '';
loadingMiniCode.value = false;
showDebugInfo.value = false;
// 获取调试信息
import('@/config/setting').then(({ SERVER_API_URL }) => {
baseUrl.value = SERVER_API_URL;
});
}
});
</script>
<style lang="less" scoped>