1450 lines
64 KiB
Vue
1450 lines
64 KiB
Vue
<template>
|
||
<div class="register-page">
|
||
<div class="register-container">
|
||
<div class="register-card">
|
||
<div class="register-header">
|
||
<h2>用户注册</h2>
|
||
<p>创建你的账号，开始使用炬融圈</p>
|
||
</div>
|
||
|
||
<el-form
|
||
ref="registerFormRef"
|
||
:model="registerForm"
|
||
:rules="registerRules"
|
||
class="register-form"
|
||
@submit.prevent="handleRegister"
|
||
>
|
||
|
||
<el-form-item prop="phone">
|
||
<el-input
|
||
v-model="registerForm.phone"
|
||
placeholder="请输入手机号"
|
||
size="large"
|
||
:prefix-icon="Message"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="smsCode">
|
||
<div class="sms-code-group">
|
||
<el-input
|
||
v-model="registerForm.smsCode"
|
||
placeholder="请输入短信验证码"
|
||
size="large"
|
||
:prefix-icon="ChatDotRound"
|
||
clearable
|
||
class="sms-input"
|
||
/>
|
||
<el-button
|
||
type="primary"
|
||
size="large"
|
||
:disabled="!canSendSMS || smsCountdown > 0"
|
||
:loading="sendingSMS"
|
||
@click="sendSMSCode"
|
||
class="sms-button"
|
||
>
|
||
{{ smsCountdown > 0 ? `${smsCountdown}s后重发` : '发送验证码' }}
|
||
</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="region">
|
||
<el-cascader
|
||
v-model="registerForm.region"
|
||
:options="regionOptions"
|
||
placeholder="请选择省市区"
|
||
size="large"
|
||
style="width: 100%"
|
||
:props="{ expandTrigger: 'hover', value: 'code' }"
|
||
:show-all-levels="true"
|
||
:collapse-tags="true"
|
||
:max-collapse-tags="1"
|
||
:teleported="false"
|
||
popper-class="mobile-cascader-popper"
|
||
@change="handleRegionChange"
|
||
>
|
||
<template #prefix>
|
||
<el-icon><Location /></el-icon>
|
||
</template>
|
||
</el-cascader>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="password">
|
||
<el-input
|
||
v-model="registerForm.password"
|
||
type="password"
|
||
placeholder="请输入密码"
|
||
size="large"
|
||
:prefix-icon="Lock"
|
||
show-password
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="confirmPassword">
|
||
<el-input
|
||
v-model="registerForm.confirmPassword"
|
||
type="password"
|
||
placeholder="请确认密码"
|
||
size="large"
|
||
:prefix-icon="Lock"
|
||
show-password
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="captcha">
|
||
<Captcha
|
||
ref="captchaRef"
|
||
v-model="registerForm.captcha"
|
||
placeholder="请输入验证码"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="agreement">
|
||
<el-checkbox
|
||
v-model="registerForm.agreement"
|
||
@click.prevent="showAgreementDialog"
|
||
:disabled="true"
|
||
>
|
||
<span @click="showAgreementDialog" class="agreement-text">
|
||
我已阅读并同意《炬融圈用户协议》<br>
|
||
《融豆使用协议》、《积分使用协议》<br>
|
||
《会员权益协议》、《用户隐私协议》
|
||
</span>
|
||
</el-checkbox>
|
||
<div class="agreement-hint">
|
||
<el-icon><InfoFilled /></el-icon>
|
||
<span>请点击查看协议和政策</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
size="large"
|
||
class="register-button"
|
||
:loading="userStore.loading"
|
||
@click="handleRegister"
|
||
>
|
||
{{ userStore.loading ? '注册中...' : '立即注册' }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div class="register-footer">
|
||
<p>
|
||
已有账号？
|
||
<el-link type="primary" @click="$router.push('/mylogin')">
|
||
立即登录
|
||
</el-link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 背景装饰 -->
|
||
<div class="background-decoration">
|
||
<div class="decoration-shape shape-1"></div>
|
||
<div class="decoration-shape shape-2"></div>
|
||
<div class="decoration-shape shape-3"></div>
|
||
<div class="decoration-shape shape-4"></div>
|
||
</div>
|
||
|
||
<el-drawer
|
||
direction="btt"
|
||
v-model="showAgreementDialogVisible"
|
||
size="90%"
|
||
show_close
|
||
title="协议和政策"
|
||
>
|
||
<div class="agreement-content">
|
||
<!-- 自定义导航栏 -->
|
||
<div class="custom-nav-bar">
|
||
<div
|
||
v-for="tab in agreementTabs"
|
||
:key="tab.name"
|
||
:class="['nav-item', { active: activeTab === tab.name }]"
|
||
@click="handleTabClick(tab.name)"
|
||
>
|
||
<span class="tab-label">{{ tab.label }}</span>
|
||
<el-icon v-if="tab.viewed" class="check-icon"><Check /></el-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 协议内容区域 -->
|
||
<div class="agreement-tabs-content">
|
||
<div v-show="activeTab === 'user-text'" class="user-text-content" ref="userContent">
|
||
<h3>炬融圈用户协议</h3>
|
||
<p>欢迎您使用炬融圈（以下简称"本网站"）提供的服务。本用户协议（以下简称"协议"）是您与本网站运营方（以下简称"运营方"）之间关于使用本网站服务所订立的具有法律效力的契约。您在访问、浏览、注册或使用本网站任何服务前，应仔细阅读并充分理解本协议全部条款，一旦您开始使用本网站服务，即视为您已自愿接受本协议所有内容的约束。</p>
|
||
<p>一、用户权利与义务</p>
|
||
<p>（一）您有权在符合本协议约定的前提下，合法使用本网站提供的信息查询、功能操作、内容互动等服务，运营方不得无故限制或剥夺您的合法使用权利。</p>
|
||
<p>（二）您在注册或使用本网站服务时，应提供真实、准确、完整的个人信息（如手机号、邮箱等），若信息发生变更，需及时更新；如因您提供虚假信息导致账号异常、服务无法使用或产生法律风险，均由您自行承担责任。</p>
|
||
<p>（三）您需遵守国家法律法规及本协议约定，不得利用本网站从事任何违法违规活动，包括但不限于：传播违法、色情、暴力、低俗等不良内容；窃取、泄露本网站或其他用户的信息；攻击、破坏本网站的系统或功能；利用本网站进行诈骗、传销等行为。</p>
|
||
<p>（四）您应妥善保管自己的账号（如用户名、手机号）及密码，对账号下的所有操作行为负责。若发现账号被盗用、异常登录等情况，需立即通知运营方，运营方将协助您进行核查与处理，但因您自身保管不当导致的损失，运营方不承担责任。</p>
|
||
<p>（五）您因充值享有账号对应的虚拟权益，包括融豆与积分。其中融豆可用于平台消费、项目投标及商户流通。未缴纳融豆服务费前，不可出售或转让融豆。平台可调整获取方式、使用规则及兑换比例，并公告用户（有关融豆的权利与义务约定详见《融豆使用协议》）。积分由获取融豆，按1:1生成积分，可用于兑换商品或抵扣消费。积分不可兑换现金，仅限平台指定场景使用。平台可设定积分有效期，并调整抵扣规则。（有关积分的权利与义务约定详见《融豆使用协议》）</p>
|
||
<p>（六）您有权支付399元后成为终身会员，享受平台板块访问、融豆获取资格及专属活动。会员权益仅限您本人使用，不可转让、出租或共享。运营商可根据运营需要调整会员服务内容和开放范围，并通过本网站相关页面向您公告。（有关会员的权利与义务约定详见《融豆使用协议》）</p>
|
||
<p>二、网站权利与义务</p>
|
||
<p>（一）运营方有权根据业务需求，在合理范围内调整本网站的服务内容、功能模块或界面设计，但重大调整需提前通过本网站公告、站内信等方式通知用户。</p>
|
||
<p>（二）运营方应按照本协议约定及相关法律法规，保护您的个人信息安全，具体信息保护规则详见本网站《用户隐私协议》，该政策为本协议的重要组成部分，与本协议具有同等法律效力。</p>
|
||
<p>（三）运营方有权对您使用本网站服务的行为进行监督与审核，若发现您违反本协议或法律法规，可根据情节严重程度采取警告、限制账号功能、冻结账号、终止服务等措施，并保留追究您法律责任的权利。</p>
|
||
<p>（四）运营方将尽力保障本网站的稳定运行，但因不可抗力（如自然灾害、政策调整）、第三方服务故障（如网络运营商问题）或技术维护等原因导致网站暂时无法使用的，运营方应及时通知用户，并尽快恢复服务，不承担由此造成的直接或间接损失。</p>
|
||
<p>三、内容规范</p>
|
||
<p>（一）您在本网站发布、上传、传播的内容（包括但不限于文字、图片、视频、评论等），需符合国家法律法规及公序良俗，不得侵犯他人的知识产权、名誉权、隐私权等合法权益。若因您的内容引发侵权纠纷或法律责任，均由您自行承担，与运营方无关。</p>
|
||
<p>（二）本网站上的所有官方内容（如网站介绍、服务说明、原创文章等）的知识产权归运营方所有，未经运营方书面许可，您不得擅自复制、转载、传播或用于商业用途。</p>
|
||
<p>（三）运营方对用户发布的内容仅进行一般性审核，不保证内容的真实性、准确性或完整性，不对用户因依赖此类内容而产生的损失负责；若用户举报或运营方发现违规内容，有权立即删除该内容，并对相关账号进行处理。</p>
|
||
<p>四、知识产权</p>
|
||
<p>（一）本网站的软件系统、界面设计、商标、logo、文字内容、图片素材等所有知识产权，均归运营方或相关权利人所有，受《中华人民共和国著作权法》《商标法》等法律法规保护。</p>
|
||
<p>（二）您在本网站发布的原创内容，知识产权归您所有，但您同意授予运营方免费、非独占、可转授权的权利，允许运营方在本网站及关联平台上展示、传播该内容，用于服务优化或合理推广（如需用于商业合作，运营方需另行获得您的书面许可）。</p>
|
||
<p>五、免责声明</p>
|
||
<p>（一）本网站仅提供信息展示与服务对接，不对第三方提供的产品、服务或信息的真实性、合法性负责，您与第三方之间的交易或互动产生的纠纷，由您与第三方自行解决，运营方不承担连带责任。</p>
|
||
<p>（二）因技术漏洞、网络攻击、不可抗力等非运营方可控因素，导致本网站服务中断、数据丢失或您的权益受损，运营方在采取合理补救措施后，不承担由此产生的直接或间接损失。</p>
|
||
<p>（三）您明确知晓网络服务存在不确定性风险，自愿承担使用本网站服务过程中的所有风险，包括但不限于因信息误差、账号安全、内容合规等产生的风险。</p>
|
||
<p>六、协议的变更与终止</p>
|
||
<p>（一）运营方有权根据法律法规更新或业务调整，对本协议内容进行修改，修改后的协议将通过本网站首页公告或站内信等方式通知您，公告发布后7日内无异议的，视为您接受变更；若您不同意变更，可停止使用本网站服务。</p>
|
||
<p>（二）若您出现以下情形，运营方有权单方面终止本协议，停止为您提供服务，且不承担任何责任：</p>
|
||
<p>1. 严重违反本协议约定或法律法规，经运营方警告后仍不改正；</p>
|
||
<p>2. 账号长期（超过12个月）未使用且无有效联系方式；</p>
|
||
<p>3. 您的账号被司法机关认定为用于违法活动；</p>
|
||
<p>4. 法律法规或监管要求强制运营方终止服务。</p>
|
||
<p>（三）本协议终止后，您应立即停止使用本网站服务，运营方将根据法律法规要求保留您的相关信息，但不再为您提供信息查询、功能使用等服务。</p>
|
||
<p>七、争议解决</p>
|
||
<p>（一）若您与运营方就本协议的履行或解释产生争议，应首先通过友好协商解决。</p>
|
||
<p>（二）协商不成的，任何一方均有权向运营方所在地有管辖权的人民法院提起诉讼。</p>
|
||
<p>（三）本协议的成立、生效、履行、解释及争议解决，均适用中华人民共和国法律（不包括冲突法规则）。</p>
|
||
<p>特别提示：您确认已完整阅读、理解并接受本协议全部条款，包括《用户隐私协议》及本网站发布的其他规则。若您对本协议有任何疑问，可通过本网站“联系我们”板块与运营方沟通。</p>
|
||
<p>运营方名称：</p>
|
||
<p>联系地址：</p>
|
||
<p>联系电话：</p>
|
||
<p>生效日期：</p>
|
||
</div>
|
||
<div v-show="activeTab === 'bean-text'" class="bean-text-content" ref="beanContent">
|
||
<h3>融豆使用协议</h3>
|
||
<p>欢迎您使用炬融圈（以下简称"本平台"）提供的融豆服务。本《融豆使用协议》（以下简称"本协议"）是您（以下简称"用户"）与本平台运营方（以下简称"运营方"）之间关于使用融豆服务所订立的专项协议，是《炬融圈用户协议》的重要组成部分。您在使用融豆服务前，应仔细阅读并充分理解本协议全部条款，一旦您开始使用融豆服务，即视为您已阅读并同意接受本协议及《炬融圈用户协议》所有内容的约束。</p>
|
||
<p>一、定义</p>
|
||
<p>（一）融豆：指由平台发行的一种虚拟权益凭证，可在平台指定的消费、投标及商户流通场景中使用。融豆的官方出售价格为1元人民币兑换1融豆。</p>
|
||
<p>（二）平台商户：指经平台认证并授权，允许在其经营场景中接受融豆进行支付、结算或抵扣的商户。</p>
|
||
<p>（三）消费板块：指平台为用户提供的各类业务场景的总称，包括但不限于商品购买、服务消费、数字产品购买及项目投标等。</p>
|
||
<p>二、融豆的获取与性质</p>
|
||
<p>（一）用户可通过官方充值渠道以人民币购买融豆，基础兑换比例为1元人民币兑换1融豆。平台有权不定期推出优惠促销活动（如折扣、赠送等），以调整的实际售价向用户出售融豆，具体活动规则以平台官方公告为准。</p>
|
||
<p>（二）您明确知晓并同意，融豆是平台内部的虚拟权益凭证，不可直接兑换为法定货币，不具备现金属性。</p>
|
||
<p>（三）融豆仅存在于用户在本平台的账户内，其使用、转让和流通严格限制在本平台生态系统之内。严禁任何用户之间或用户与第三方之间，在本平台之外进行融豆的私下转让、交易、赠与或任何形式的兑付。该行为严重违反本协议，平台有权对相关账户进行严厉处罚。</p>
|
||
<p>三、融豆用途与范围</p>
|
||
<p>（一）平台消费使用</p>
|
||
<p>融豆可在本平台所有开放的消费板块中使用，包括但不限于购买实体商品、支付服务费用（如教育、医疗、生活服务等）、购买数字产品（如课程订阅、软件功能解锁、会员权益等）。用户在使用融豆支付时，可按照平台公布的规则抵扣相应比例的现金，从而降低实际现金支出。</p>
|
||
<p>（二）项目投标使用</p>
|
||
<p>用户可将融豆用于平台发布的特定项目投标，作为投标保证金或部分项目费用的抵扣。中小企业用户使用融豆参与投标，有助于降低投标的现金门槛。平台通过融豆结算体系，可建立更清晰的内部信用与参与记录。</p>
|
||
<p>（三）商户流通</p>
|
||
<p>融豆仅限于在平台认证的商户体系内流通。用户或商户若希望进行融豆的转让或交易，必须首先向平台支付年度服务费，方可获得相应权限。融豆仅可用于经平台认可的支付、抵扣或结算行为。在未按规定支付服务费之前，用户不得以任何形式出售、转让或赠予融豆。</p>
|
||
<p>四、融豆服务费</p>
|
||
<p>（一）平台为维护融豆体系的稳定运行、提供风控管理及保障融豆价值，有权向申请接入融豆支付体系的商户按年度收取技术服务费。</p>
|
||
<p>（二）商户支付服务费接入融豆体系后，可增加来自平台用户的流量与交易机会，提高客户黏性，获得与平台更深度的合作价值。</p>
|
||
<p>五、使用限制</p>
|
||
<p>（一）您不得将融豆用于任何非法交易、洗钱、套现、赌博等违反中华人民共和国法律法规及公序良俗的用途。</p>
|
||
<p>（二）您明确知晓并同意，融豆是平台内部的虚拟权益凭证，不可直接兑换为法定货币，不具备现金属性。</p>
|
||
<p>（三）严禁任何用户离开本平台生态系统，进行融豆的私下转让、交易或兑付。该行为被视为严重违规。</p>
|
||
<p>（四）如运营方发现您通过作弊、利用系统漏洞、参与欺诈活动、使用非官方渠道充值或进行私下交易等违反本协议的方式违规获取或处置融豆，运营方有权在不事先通知的情况下，扣除或清零您账号内的全部融豆，并保留暂停、终止向您提供服务的权利及追究您相应法律责任的权利。</p>
|
||
<p>六、平台权利与免责声明</p>
|
||
<p>（一）运营方有权根据业务发展、法律法规要求或市场变化，单方面调整融豆的获取方式（包括出售价格和优惠活动）、使用规则、兑换比例及适用场景，并将通过网站公告、站内信等合理方式通知用户。调整公告发布后，若您继续使用融豆服务，即视为接受变更后的规则。</p>
|
||
<p>（二）平台提供的融豆商品或服务以当时的状态为准，如遇缺货、停产或不可抗力因素，平台可提供等值替代或取消兑换，用户/商户不得要求额外赔偿。</p>
|
||
<p>（三）融豆为虚拟权益凭证，不具备现金属性，不受《人民币管理条例》及相关金融监管政策约束。</p>
|
||
<p>（四）因不可抗力（如自然灾害、政策调控、网络攻击）、第三方服务故障（如支付渠道问题、电信运营商网络中断）或必要的系统维护升级导致融豆功能暂时无法使用或数据异常的，运营方将尽快恢复服务，不承担由此给您造成的任何直接或间接损失。</p>
|
||
<p>七、协议效力</p>
|
||
<p>（一）本协议是《炬融圈用户协议》的补充协议，与其具有同等法律效力。本协议未约定事项，均以《炬融圈用户协议》及相关平台规则为准。</p>
|
||
<p>（二）若本协议与《炬融圈用户协议》存在冲突，应以本协议约定为准。</p>
|
||
<p>八、争议解决</p>
|
||
<p>（一）若您与运营方就本协议的履行或解释产生争议，应首先通过友好协商解决。</p>
|
||
<p>（二）协商不成的，任何一方均有权向运营方所在地有管辖权的人民法院提起诉讼。</p>
|
||
<p>（三）本协议的成立、生效、履行、解释及争议解决，均适用中华人民共和国法律（不包括冲突法规则）。</p>
|
||
<p>特别提示：您确认已完整阅读、理解并接受本协议全部条款。您在使用融豆服务过程中产生的任何疑问，可通过本网站官方公布的联系方式与运营方沟通。</p>
|
||
<p>运营方名称：</p>
|
||
<p>联系地址：</p>
|
||
<p>联系电话：</p>
|
||
<p>生效日期：</p>
|
||
</div>
|
||
<div v-show="activeTab === 'points-text'" class="points-text-content">
|
||
<h3>积分使用协议</h3>
|
||
<p>欢迎您使用[炬融圈]（以下简称"本平台"）提供的积分服务。本《积分使用协议》（以下简称"本协议"）是您（以下简称"用户"）与本平台运营方（以下简称"运营方"）之间关于使用积分服务所订立的专项协议，是《炬融圈用户协议》的重要组成部分。您在使用积分服务前，应仔细阅读并充分理解本协议全部条款。您对积分的任何获取、使用等行为，即视为您已阅读并同意接受本协议及上述协议所有内容的约束。</p>
|
||
<p>一、定义</p>
|
||
<p>（一）融豆：指由平台发行的一种虚拟权益凭证，可用于平台内消费、投标及其他指定用途。</p>
|
||
<p>（二）积分：指用户在获取融豆的同时，平台按照1:1比例生成的虚拟积分，可用于兑换、抵扣等平台指定场景。</p>
|
||
<p>（三）积分商城：指平台专门为积分兑换设置的线上渠道，用户可在商城中使用积分兑换商品或服务。</p>
|
||
<p>二、积分获取</p>
|
||
<p>（一）用户通过购买、活动奖励、项目投标或其他合法途径获得融豆时，平台将同步生成与融豆数量相等的积分（比例为1:1）。</p>
|
||
<p>（二）积分仅记录在用户的个人账户内，不可转让、出售、赠与或提现。</p>
|
||
<p>（三）平台保留根据运营需要调整积分获取规则（包括但不限于获取比例、获取方式等）的权利，并通过公告或通知方式予以公布。</p>
|
||
<p>三、积分使用</p>
|
||
<p>（一）积分兑换</p>
|
||
<p>1. 用户可在积分商城使用积分兑换实物商品、虚拟权益、优惠券或服务等。</p>
|
||
<p>2. 积分商城内商品的种类、数量、库存情况以平台实时发布为准，平台保留调整或下架商品的权利。</p>
|
||
<p>3. 积分兑换一经确认，不支持退还或撤销。</p>
|
||
<p>（二）积分抵扣</p>
|
||
<p>1. 用户在部分消费场景中可使用积分抵扣部分商品或服务价格。</p>
|
||
<p>2. 折算标准为：1 融豆 = 10,000 积分，具体抵扣比例与上限以平台实际规则为准。</p>
|
||
<p>3. 平台有权根据业务需要对抵扣规则进行调整，并通过公告形式通知用户。</p>
|
||
<p>（三）使用限制</p>
|
||
<p>1. 积分不可直接兑换现金或作为现金存储使用。</p>
|
||
<p>2. 积分仅限于平台指定的使用场景，不得用于违反法律法规的交易或行为。</p>
|
||
<p>四、积分有效期</p>
|
||
<p>（一）积分自生成之日起，默认长期有效；平台有权基于运营管理需要设定有效期，并提前公告。（例如：平台可能设定积分自获得之日起至当年12月30日有效，或自获得之日起N年内有效等，具体以公告为准）。</p>
|
||
<p>（二）超过有效期未使用的积分将自动作废，用户不得要求补偿或赔偿。</p>
|
||
<p>五、积分清零与扣除</p>
|
||
<p>（一）如因系统故障、作弊、刷单、虚假交易或其他不正当手段获取积分，平台有权随时清零或扣除相关积分，并保留追究法律责任的权利。</p>
|
||
<p>（二）用户账户被注销、冻结或因违规被封禁的，其剩余积分将全部作废。</p>
|
||
<p>六、平台权利与免责</p>
|
||
<p>（一）平台有权根据实际运营需求，对积分的获取方式、使用规则、兑换比例及适用范围进行调整，并通过平台公告或通知的方式告知用户，公告或通知一经发布即视为有效通知。</p>
|
||
<p>（二）平台所提供的积分商品或服务以当时所示状态（“现状”）为准，不保证商品或服务的适销性、适用性或持续供应。如遇缺货、停产、政策调整或不可抗力因素，平台有权提供等值替代品或直接取消订单，用户不得要求额外赔偿。</p>
|
||
<p>（三）积分为平台发行的虚拟权益，不具备现金属性，不得折算为人民币或其他任何法定货币，不受《人民币管理条例》及相关金融监管政策的保障。</p>
|
||
<p>（四）平台对因网络故障、系统维护、不可抗力或第三方原因导致的积分获取、兑换、抵扣失败或延迟，不承担赔偿责任，但将尽力协助用户解决相关问题。</p>
|
||
<p>七、用户义务</p>
|
||
<p>（一）用户应合法合规使用积分，不得利用积分从事违法活动或损害他人利益。</p>
|
||
<p>（二）用户应妥善保管账户信息，因个人原因造成的积分损失（如账户被盗）由用户自行承担。</p>
|
||
<p>（三）用户在使用积分过程中，须遵守本协议及平台其他相关规则。</p>
|
||
<p>八、协议效力</p>
|
||
<p>（一）本协议是《炬融圈用户协议》的补充协议，与其具有同等法律效力。本协议未约定事项，均以《炬融圈用户协议》及相关平台规则为准。</p>
|
||
<p>（二）若本协议与《炬融圈用户协议》存在冲突，应以本协议约定为准。</p>
|
||
<p>九、争议解决</p>
|
||
<p>（一）若您与运营方就本协议的履行或解释产生争议，应首先通过友好协商解决。</p>
|
||
<p>（二）协商不成的，任何一方均有权向运营方所在地有管辖权的人民法院提起诉讼。</p>
|
||
<p>（三）本协议的成立、生效、履行、解释及争议解决，均适用中华人民共和国法律（不包括冲突法规则）。</p>
|
||
<p>特别提示：您确认已完整阅读、理解并接受本协议全部条款。您在使用积分服务过程中产生的任何疑问，可通过本网站官方公布的联系方式与运营方沟通。</p>
|
||
<p>运营方名称：</p>
|
||
<p>联系地址：</p>
|
||
<p>联系电话：</p>
|
||
<p>生效日期：</p>
|
||
</div>
|
||
<div v-show="activeTab === 'vip-text'" class="vip-text-content">
|
||
<h3>会员权益协议</h3>
|
||
<p>欢迎您使用[炬融圈]（以下简称"本平台"）提供的会员服务。本《会员权益协议》（以下简称"本协议"）是您（以下简称"会员"或"用户"）与本平台运营方（以下简称"运营方"）之间关于使用会员服务所订立的专项协议，是《炬融圈用户协议》及《融豆使用协议》的重要组成部分。您在使用会员服务前，应仔细阅读并充分理解本协议全部条款。您购买或使用会员服务的任何行为，即视为您已阅读并同意接受本协议及上述协议所有内容的约束。</p>
|
||
<p>一、会员资格与费用</p>
|
||
<p>（一）会员资格获取：用户支付人民币399元后，即可成为平台终身会员，获得终身有效的会员资格。</p>
|
||
<p>（二）资格限制：会员资格与初始购买账号绑定，一经确认，不得转让、转售、赠与、继承或要求退款。</p>
|
||
<p>（三）费用调整：平台有权根据市场与运营实际情况，在未来调整新用户购买会员服务的费用标准，此等调整对已缴费会员的既有权益不产生任何影响。</p>
|
||
<p>二、会员权益</p>
|
||
<p>作为平台会员，您可专享以下权益（统称"会员权益"）：</p>
|
||
<p>（一）板块访问权限</p>
|
||
<p>会员可无限制查看和使用平台现有及未来新增的所有业务板块，包括但不限于：</p>
|
||
<p>1. 项目投标板块：发布、参与及管理投标项目。</p>
|
||
<p>2. 积分商城板块：使用积分兑换专属商品或享受会员价。</p>
|
||
<p>3. 直播平台：观看专属直播内容，与主播互动。</p>
|
||
<p>4. 其他经平台不时开放或指定的功能板块。</p>
|
||
<p>（二）融豆获取与使用资格</p>
|
||
<p>1. 会员享有通过平台规定方式（如充值、参与活动等）获取并持有融豆的专属资格。</p>
|
||
<p>2. 会员可在平台内使用融豆进行消费、参与项目投标或在其他指定场景中使用。</p>
|
||
<p>3. 在未按平台规则支付融豆年度服务费之前，会员仅享有融豆的使用权，不得将融豆出售、转让或用于任何平台禁止的交易。融豆的具体使用规则以《融豆使用协议》为准。</p>
|
||
<p>（三）专属优惠与特权</p>
|
||
<p>1. 会员在商城购买特定商品或服务时，可享受专属折扣价或会员价。</p>
|
||
<p>2. 平台将不定期为会员提供专属优惠券、红包、限时特权等，具体以平台实际发放为准。</p>
|
||
<p>（四）专属活动与服务</p>
|
||
<p>1. 平台可根据运营需要，不定期为会员提供额外的专属活动、新品试用、优先购买权或客户服务（如专属客服通道），具体以平台实际公布为准。</p>
|
||
<p>2. 平台可能提供会员等级成长体系，根据会员活跃度或消费行为提供更多增值权益。</p>
|
||
<p>三、使用限制</p>
|
||
<p>（一）身份绑定：会员权益仅限本人使用，与会员账号严格绑定，不得以任何形式出租、出借、共享或转让给任何第三方。</p>
|
||
<p>（二）行为规范：会员不得利用会员身份从事任何违法、违规、扰乱平台秩序或损害平台及其他用户利益的行为。</p>
|
||
<p>（三）违规处理：如会员违反本协议或平台其他规则，平台有权根据情节严重程度，采取包括但不限于警告、暂停部分或全部会员权益、冻结账号、终止会员资格且不退还任何已缴纳费用等措施，并保留追究法律责任的权利。</p>
|
||
<p>四、平台权利与免责声明</p>
|
||
<p>（一）权益调整：平台有权根据实际运营情况、法律法规要求或为提升服务质量，对会员权益的具体内容、形式、开放范围及有效期等进行合理调整（包括增加、减少或变更），并通过平台公告、站内信等合理方式告知会员。该等调整对公告发布前已产生的权益产生影响时，平台将提供合理解决方案。</p>
|
||
<p>（二）服务状态：平台提供的会员服务及相关权益以"现状"和"可提供"的状态为准。平台将尽力维护服务的稳定性，但不保证所有服务、功能、优惠或合作品牌永久不变、持续供应或不中断。</p>
|
||
<p>（三）免责情形：因不可抗力（如自然灾害、政策管制）、网络故障、系统维护、技术故障、第三方服务中断或运营商原因（如银行、支付平台故障）导致会员权益无法正常享用或延迟的，平台不承担赔偿责任，但将采取合理措施尽力协助解决或恢复。</p>
|
||
<p>（四）最终解释权：平台保留在法律允许的范围内对本协议及会员权益的具体实施细则进行单方面解释的权利。</p>
|
||
<p>五、协议效力</p>
|
||
<p>（一）本协议是《炬融圈用户协议》及《融豆使用协议》的补充协议，与其具有同等法律效力。本协议未约定事项，均以《炬融圈用户协议》、《融豆使用协议》及相关平台规则为准。</p>
|
||
<p>（二）若本协议与《炬融圈用户协议》或《融豆使用协议》存在冲突，应以本协议约定为准。</p>
|
||
<p>六、争议解决</p>
|
||
<p>（一）若您与运营方就本协议的履行或解释产生争议，应首先通过友好协商解决。</p>
|
||
<p>（二）协商不成的，任何一方均有权向运营方所在地有管辖权的人民法院提起诉讼。</p>
|
||
<p>（三）本协议的成立、生效、履行、解释及争议解决，均适用中华人民共和国法律（不包括冲突法规则）。</p>
|
||
<p>特别提示：您确认已完整阅读、理解并接受本协议全部条款。您在使用会员服务过程中产生的任何疑问，可通过本网站官方公布的联系方式与运营方沟通。</p>
|
||
<p>运营方名称：</p>
|
||
<p>联系地址：</p>
|
||
<p>联系电话：</p>
|
||
<p>生效日期：</p>
|
||
</div>
|
||
<div v-show="activeTab === 'privacy-text'" class="privacy-text-content">
|
||
<h3>用户隐私协议</h3>
|
||
<p>欢迎您使用炬融圈平台服务！本《用户隐私协议》（以下简称"本协议"）由炬融圈平台运营方（以下简称"运营方"或"我们")与注册并使用平台服务的用户（以下简称"用户"或"您")共同订立。本协议旨在明确说明运营方在您注册、使用融豆、积分、会员服务及其他相关功能过程中收集、使用、存储和保护您个人信息的方式及您所享有的权利。请您在使用平台服务前，仔细阅读并充分理解本协议全部内容。您注册、登录或使用平台服务的行为，即视为您已阅读、理解并同意接受本协议所有条款的约束。</p>
|
||
<p>一、信息收集范围</p>
|
||
<p>（一）为向您提供平台服务，我们可能会收集以下类型的个人信息：</p>
|
||
<p>注册信息：您在注册账户时提供的姓名、手机号、邮箱地址、身份证号、账户名、密码及其他身份认证信息。</p>
|
||
<p>1. 账户及服务信息：您的融豆余额、积分数量、会员状态、交易记录、项目投标信息、订单详情及支付记录。</p>
|
||
<p>2. 使用行为信息：您使用平台服务时产生的访问记录、浏览历史、点击流、操作日志、设备标识信息（如IP地址）、大致位置信息等。</p>
|
||
<p>3. 第三方信息：当您选择使用第三方账号（如微信）登录或使用第三方支付服务时，在您授权的前提下，我们从第三方处获得的与您相关的信息。</p>
|
||
<p>二、信息使用目的</p>
|
||
<p>（一）我们收集和使用您的信息，主要基于以下目的：</p>
|
||
<p>为您创建、维护并管理用户账户，提供并保障融豆、积分、会员等核心服务的正常运行。</p>
|
||
<p>1. 支持融豆的充值、消费、流转以及积分的获取、兑换、抵扣等功能，确保交易与投标流程的安全、稳定。</p>
|
||
<p>优化平台的产品性能、服务内容及界面设计，提升您的用户体验。</p>
|
||
<p>2. 进行风险控制、安全监测，用于防范、发现、调查欺诈、危害安全、违规或非法行为。</p>
|
||
<p>3. 向您发送与服务相关的通知、告警、活动信息及会员权益资讯，或在获得您同意后，提供个性化推荐。</p>
|
||
<p>4. 履行适用的法律法规，配合政府部门、司法机关的监管或执法要求。</p>
|
||
<p>三、信息共享、转让与披露</p>
|
||
<p>（一）我们高度重视您的个人信息安全，承诺不会将您的个人信息出售给任何第三方。</p>
|
||
<p>（二）仅在以下必要情形下，我们可能会共享、转让或披露您的个人信息：</p>
|
||
<p>1. 获得您的明确同意或授权。</p>
|
||
<p>2. 为完成融豆支付、积分兑换或会员权益兑现，与经平台认证的商户进行必要共享。</p>
|
||
<p>3. 应法律法规、司法行政机关、监管机构的强制性要求而进行披露。</p>
|
||
<p>4. 为维护运营方、用户及社会公共利益免受损害而必要披露。</p>
|
||
<p>5. 随着我们业务的持续发展，我们及我们的关联方有可能进行合并、收购、资产转让或类似的交易，您的个人信息有可能作为此类交易的一部分而被转移。 我们将要求新的持有您个人信息的公司、组织继续受本协议的约束；否则，我们将要求该公司、组织重新征求您的授权同意。</p>
|
||
<p>（三）与我们共享信息的第三方，将被要求严格遵守保密义务，并仅能为提供上述目的之服务而使用您的信息。</p>
|
||
<p>四、信息存储与保护</p>
|
||
<p>（一）我们将采取符合行业标准的合理技术措施和管理流程，保护您的个人信息免遭泄露、丢失、篡改或未经授权的访问。</p>
|
||
<p>（二）您的账户信息和密码属于敏感信息，请您务必妥善保管。因您个人原因导致上述信息泄露或丢失而造成的损失，运营方不承担责任。</p>
|
||
<p>（三）我们可能会根据业务需要，在中华人民共和国境内或境外的服务器上存储您的信息。无论在何处存储，我们都将确保其受到与本协议所述标准相当的保护，并严格遵守数据出境的相关法律法规。</p>
|
||
<p>五、用户权利</p>
|
||
<p>（一）您有权通过平台提供的功能查询、访问、更新及更正您的个人信息。</p>
|
||
<p>（二）您可以联系我们请求删除您的个人信息或限制对其的处理。但请您理解，删除必要信息可能导致您无法继续使用部分或全部平台服务，包括融豆、积分及会员权益的管理与使用。</p>
|
||
<p>（三）您可以选择不提供某些个人信息，但这同样可能导致我们无法为您提供相应的服务。</p>
|
||
<p>六、儿童用户保护</p>
|
||
<p>（一）平台主要面向成年人。若您是未满18周岁的未成年人，请在您的父母或其他监护人的指导下仔细阅读本协议，并在征得您的父母或其他监护人同意后使用我们的服务。</p>
|
||
<p>（二）我们不会故意收集未满18周岁未成年人的个人信息。如果我们发现自己在未获得可证实的监护人同意的情况下收集了未成年人的个人信息，将会立即设法删除相关数据或进行匿名化处理。</p>
|
||
<p>七、安全与免责</p>
|
||
<p>（一）我们将尽力为您的信息提供安全保护，但对于因不可抗力、计算机病毒、黑客攻击、网络通道故障及其他非运营方可控的第三方原因导致的信息泄露、丢失或被篡改，运营方不承担赔偿责任，但我们将协助您降低相关风险。</p>
|
||
<p>（二）您应妥善保管自己的账户、密码及手机验证码等身份要素，所有通过您的账户和密码进行的操作均视为您本人的行为，由此导致的任何风险和责任由您自行承担。</p>
|
||
<p>（三）停止运营免责：如运营方终止服务或运营，我们将根据适用法律法规的要求，及时停止继续收集您个人信息的活动，并通过网站公告、推送通知等一种或多种方式进行告知。在终止服务或运营后，我们会对您的个人信息进行删除或匿名化处理，但法律法规或监管部门另有规定的除外。对于因运营方停止运营导致的任何直接或间接损失，运营方不承担赔偿责任。</p>
|
||
<p>八、协议的变更与通知</p>
|
||
<p>（一）为了给您提供更好的服务，本协议可能会不时更新。我们会通过在平台网站发布更新版本、推送系统通知或其他合适的方式提醒您相关内容的更新，也请您定期访问平台以便及时了解最新的隐私政策。</p>
|
||
<p>（二）变更后的协议将在公布后7日生效。若您在本协议内容修订后继续使用平台服务，即表示您已充分阅读、理解并接受修订后的协议。如果您不同意变更后的内容，您有权停止使用平台服务。</p>
|
||
<p>九、协议效力</p>
|
||
<p>（一）本协议是《炬融圈用户协议》的重要组成部分，与其具有同等法律效力。</p>
|
||
<p>（二）本协议未尽事宜，按照前述相关协议及平台现有规则执行。</p>
|
||
<p>十、争议解决</p>
|
||
<p>（一）若您与运营方就本协议的履行或解释产生争议，应首先通过友好协商解决。</p>
|
||
<p>（二）协商不成的，任何一方均有权向运营方所在地有管辖权的人民法院提起诉讼。</p>
|
||
<p>（三）本协议的成立、生效、履行、解释及争议解决，均适用中华人民共和国法律（不包括冲突法规则）。</p>
|
||
<p>特别提示：您确认已完整阅读、理解并接受本协议全部条款。您在使用积分服务过程中产生的任何疑问，可通过本网站官方公布的联系方式与运营方沟通。</p>
|
||
<p>运营方名称：</p>
|
||
<p>联系地址：</p>
|
||
<p>联系电话：</p>
|
||
<p>生效日期：</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<div class="read-status">
|
||
|
||
</div>
|
||
<div class="dialog-buttons">
|
||
<el-button @click="closeAgreementDialog">取消</el-button>
|
||
<el-button type="primary" @click="confirmAgreement" :disabled="!(userViewed && beanViewed && pointsViewed && vipViewed && privacyViewed)">确认已阅读</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted } from 'vue';
|
||
import { useRouter, useRoute } from 'vue-router';
|
||
import { useUserStore } from '@/stores/user';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import {
|
||
User,
|
||
Lock,
|
||
Message,
|
||
Edit,
|
||
ChatDotRound,
|
||
CreditCard,
|
||
Location,
|
||
InfoFilled,
|
||
Check,
|
||
} from '@element-plus/icons-vue';
|
||
import Captcha from '@/components/Captcha.vue';
|
||
import api from '@/utils/api'
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const userStore = useUserStore();
|
||
|
||
// 表单引用
|
||
const registerFormRef = ref();
|
||
const captchaRef = ref();
|
||
|
||
// 表单数据
|
||
const registerForm = reactive({
|
||
username: '',
|
||
phone: '',
|
||
region: [],
|
||
province: '',
|
||
city: '',
|
||
district: '',
|
||
district_id: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
captcha: '',
|
||
smsCode: '',
|
||
agreement: false,
|
||
});
|
||
|
||
// 协议查看状态
|
||
const userViewed = ref(false);
|
||
const beanViewed = ref(false);
|
||
const pointsViewed = ref(false);
|
||
const vipViewed = ref(false);
|
||
const privacyViewed = ref(false);
|
||
|
||
// 协议弹窗相关状态
|
||
const showAgreementDialogVisible = ref(false);
|
||
const activeTab = ref('user-text');
|
||
const userContent = ref();
|
||
const beanContent = ref();
|
||
|
||
// 协议标签页数据
|
||
const agreementTabs = ref([
|
||
{ name: 'user-text', label: '炬融圈用户协议', viewed: false },
|
||
{ name: 'bean-text', label: '融豆使用协议', viewed: false },
|
||
{ name: 'points-text', label: '积分使用协议', viewed: false },
|
||
{ name: 'vip-text', label: '会员权益协议', viewed: false },
|
||
{ name: 'privacy-text', label: '用户隐私协议', viewed: false }
|
||
]);
|
||
|
||
// 短信验证码相关状态
|
||
const sendingSMS = ref(false);
|
||
const smsCountdown = ref(0);
|
||
const canSendSMS = computed(() => {
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
return phoneRegex.test(registerForm.phone);
|
||
});
|
||
|
||
// 地区数据
|
||
const regions = ref([]);
|
||
const regionOptions = ref([]);
|
||
const cities = computed(() => {
|
||
const citySet = new Set();
|
||
regions.value.forEach((region) => {
|
||
if (region.city_name) {
|
||
citySet.add(region.city_name);
|
||
}
|
||
});
|
||
return Array.from(citySet).sort();
|
||
});
|
||
|
||
const filteredDistricts = computed(() => {
|
||
if (!registerForm.city) return [];
|
||
return regions.value.filter(
|
||
(region) => region.city_name === registerForm.city
|
||
);
|
||
});
|
||
|
||
// 自定义验证函数
|
||
const validateUsername = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback(new Error('请输入用户名'));
|
||
} else if (value.length < 3) {
|
||
callback(new Error('用户名至少3个字符'));
|
||
} else if (value.length > 20) {
|
||
callback(new Error('用户名不能超过20个字符'));
|
||
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
|
||
callback(new Error('用户名只能包含字母、数字、下划线和中文'));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
const validatePassword = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback(new Error('请输入密码'));
|
||
} else if (value.length < 6) {
|
||
callback(new Error('密码至少6个字符'));
|
||
} else if (value.length > 20) {
|
||
callback(new Error('密码不能超过20个字符'));
|
||
} else if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(value)) {
|
||
callback(new Error('密码必须包含字母和数字'));
|
||
} else {
|
||
// 如果确认密码已输入，重新验证确认密码
|
||
if (registerForm.confirmPassword) {
|
||
registerFormRef.value?.validateField('confirmPassword');
|
||
}
|
||
callback();
|
||
}
|
||
};
|
||
|
||
const validateConfirmPassword = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback(new Error('请确认密码'));
|
||
} else if (value !== registerForm.password) {
|
||
callback(new Error('两次输入的密码不一致'));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
const validateAgreement = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback(new Error('请阅读并同意协议和政策'));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
// 表单验证规则
|
||
const registerRules = {
|
||
username: [{ validator: validateUsername, trigger: 'blur' }],
|
||
phone: [
|
||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||
{
|
||
pattern: /^1[3-9]\d{9}$/,
|
||
message: '请输入正确的手机号',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
|
||
smsCode: [
|
||
{ required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||
{ pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' },
|
||
],
|
||
region: [{ required: true, message: '请选择省市区', trigger: 'change' }],
|
||
password: [{ validator: validatePassword, trigger: 'blur' }],
|
||
confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
|
||
captcha: [
|
||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||
{ min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' },
|
||
],
|
||
agreement: [{ validator: validateAgreement, trigger: 'change' }],
|
||
};
|
||
|
||
// 发送短信验证码
|
||
const sendSMSCode = async () => {
|
||
if (!canSendSMS.value || sendingSMS.value || smsCountdown.value > 0) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
sendingSMS.value = true;
|
||
|
||
const response = await fetch('/api/sms/send', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
phone: registerForm.phone,
|
||
}),
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
ElMessage.success('验证码发送成功，请查收短信');
|
||
// 开始倒计时
|
||
startCountdown();
|
||
} else {
|
||
ElMessage.error(result.message || '发送失败，请重试');
|
||
}
|
||
} catch (error) {
|
||
console.error('发送短信验证码失败:', error);
|
||
ElMessage.error('发送失败，请检查网络连接');
|
||
} finally {
|
||
sendingSMS.value = false;
|
||
}
|
||
};
|
||
|
||
// 开始倒计时
|
||
const startCountdown = () => {
|
||
smsCountdown.value = 60;
|
||
const timer = setInterval(() => {
|
||
smsCountdown.value--;
|
||
if (smsCountdown.value <= 0) {
|
||
clearInterval(timer);
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
// 加载省市区级联数据
|
||
const loadRegionOptions = async () => {
|
||
const provincesResponse = await api.get('/regions/provinces');
|
||
regionOptions.value = provincesResponse.data.data || [];
|
||
};
|
||
|
||
// 处理级联选择器变化
|
||
const handleRegionChange = (value) => {
|
||
if (value && value.length === 3) {
|
||
registerForm.province = value[0];
|
||
registerForm.city = value[1];
|
||
registerForm.district = value[2];
|
||
registerForm.district_id = value[2];
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 城市变化处理
|
||
*/
|
||
const onCityChange = () => {
|
||
// 清空区域选择
|
||
registerForm.district_id = '';
|
||
};
|
||
|
||
// 处理注册
|
||
const handleRegister = async () => {
|
||
if (!registerFormRef.value || !captchaRef.value) return;
|
||
|
||
try {
|
||
// 先验证表单
|
||
const valid = await registerFormRef.value.validate();
|
||
if (!valid) return;
|
||
|
||
// 获取验证码信息
|
||
const captchaInfo = captchaRef.value.getCaptchaInfo();
|
||
|
||
// 提交注册请求（包含验证码信息）
|
||
const registerData = {
|
||
username: registerForm.phone,
|
||
phone: registerForm.phone,
|
||
city: registerForm.city,
|
||
district_id: registerForm.district_id,
|
||
password: registerForm.password,
|
||
smsCode: registerForm.smsCode,
|
||
captchaId: captchaInfo.captchaId,
|
||
captchaText: captchaInfo.captchaText,
|
||
province: registerForm.province,
|
||
inviter: registerForm.inviter,
|
||
};
|
||
console.log(registerData,'registerData');
|
||
console.log(registerForm,'registerForm')
|
||
const result = await userStore.register(registerData);
|
||
|
||
if (result.success) {
|
||
// 检查是否需要支付
|
||
if (result.needPayment) {
|
||
ElMessage.success('用户信息创建成功，请完成支付以激活账户');
|
||
// 跳转到支付页面
|
||
router.push({
|
||
path: '/payment',
|
||
});
|
||
} else {
|
||
ElMessage.success('注册成功！请登录');
|
||
router.push('/mylogin');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('注册失败:', error);
|
||
// 注册失败后刷新验证码
|
||
if (captchaRef.value) {
|
||
await captchaRef.value.refreshCaptcha();
|
||
}
|
||
registerForm.captcha = '';
|
||
}
|
||
};
|
||
|
||
// 显示协议弹窗
|
||
const showAgreementDialog = () => {
|
||
showAgreementDialogVisible.value = true;
|
||
activeTab.value = 'user-text';
|
||
// 弹窗打开时默认用户协议已读
|
||
userViewed.value = true;
|
||
// 标记第一个标签页为已读
|
||
agreementTabs.value[0].viewed = true;
|
||
};
|
||
|
||
// 关闭协议弹窗
|
||
const closeAgreementDialog = () => {
|
||
showAgreementDialogVisible.value = false;
|
||
};
|
||
|
||
// 确认已阅读协议
|
||
const confirmAgreement = () => {
|
||
if (userViewed.value && beanViewed.value && pointsViewed.value && vipViewed.value && privacyViewed.value) {
|
||
registerForm.agreement = true;
|
||
showAgreementDialogVisible.value = false;
|
||
ElMessage.success('已确认阅读协议和政策');
|
||
} else {
|
||
ElMessage.warning('请先查看协议和政策');
|
||
}
|
||
};
|
||
|
||
// 处理选项卡切换
|
||
const handleTabClick = (tabName) => {
|
||
activeTab.value = tabName;
|
||
|
||
// 标记对应协议为已读
|
||
const tab = agreementTabs.value.find(t => t.name === tabName);
|
||
if (tab) {
|
||
tab.viewed = true;
|
||
}
|
||
|
||
// 更新原有的viewed状态
|
||
if (tabName === 'user-text') {
|
||
userViewed.value = true;
|
||
} else if (tabName === 'bean-text') {
|
||
beanViewed.value = true;
|
||
} else if (tabName === 'points-text') {
|
||
pointsViewed.value = true;
|
||
} else if (tabName === 'vip-text') {
|
||
vipViewed.value = true;
|
||
} else if (tabName === 'privacy-text') {
|
||
privacyViewed.value = true;
|
||
}
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
// 图片上传成功处理
|
||
const handleUploadSuccess = (response, field) => {
|
||
ElMessage.success('图片上传成功');
|
||
};
|
||
|
||
// 图片上传失败处理
|
||
const handleUploadError = (error) => {
|
||
ElMessage.error('图片上传失败，请重试');
|
||
};
|
||
|
||
const invite = async () => {
|
||
const inviter = route.query.inviter;
|
||
console.log('邀请人ID:', inviter);
|
||
if (inviter) {
|
||
registerForm.inviter = inviter;
|
||
}
|
||
}
|
||
|
||
// 组件挂载时的处理
|
||
onMounted(() => {
|
||
// 如果已经登录，直接跳转
|
||
if (userStore.isAuthenticated) {
|
||
const redirectPath = route.query.redirect || '/';
|
||
router.push(redirectPath);
|
||
}
|
||
|
||
|
||
// 加载省市区级联数据
|
||
loadRegionOptions();
|
||
|
||
invite();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.register-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.register-container {
|
||
width: 100%;
|
||
max-width: 450px;
|
||
padding: 20px;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.register-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 16px;
|
||
padding: 40px 30px;
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.register-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.register-header h2 {
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.register-header p {
|
||
color: #909399;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.register-form {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.register-button {
|
||
width: 100%;
|
||
height: 44px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.register-footer {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.register-footer p {
|
||
color: #606266;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.document-upload-section {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.document-upload-section .el-divider {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.document-upload-section .el-form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.document-upload-section .el-form-item .el-form-item__label {
|
||
font-weight: 500;
|
||
color: #606266;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.feature-item .el-icon {
|
||
color: #409eff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.upload-preview {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.upload-preview img {
|
||
width: 100px;
|
||
height: 100px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
border: 1px solid #dcdfe6;
|
||
}
|
||
|
||
.upload-demo {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.background-decoration {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.decoration-shape {
|
||
position: absolute;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
animation: float 8s ease-in-out infinite;
|
||
}
|
||
|
||
.shape-1 {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
top: 15%;
|
||
left: 15%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.shape-2 {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 20px;
|
||
top: 70%;
|
||
right: 20%;
|
||
animation-delay: 2s;
|
||
}
|
||
|
||
.shape-3 {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
bottom: 25%;
|
||
left: 25%;
|
||
animation-delay: 4s;
|
||
}
|
||
|
||
.shape-4 {
|
||
width: 120px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
top: 40%;
|
||
right: 10%;
|
||
animation-delay: 6s;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0px) rotate(0deg);
|
||
opacity: 0.7;
|
||
}
|
||
50% {
|
||
transform: translateY(-15px) rotate(180deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 480px) {
|
||
.register-container {
|
||
padding: 15px;
|
||
}
|
||
|
||
.register-card {
|
||
padding: 30px 20px;
|
||
}
|
||
|
||
.features-list {
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
/* Element Plus 组件样式覆盖 */
|
||
:deep(.el-input__wrapper) {
|
||
border-radius: 8px;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
border-radius: 8px;
|
||
}
|
||
|
||
:deep(.el-divider__text) {
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
color: #909399;
|
||
}
|
||
|
||
:deep(.el-checkbox__label) {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 输入框聚焦效果 */
|
||
:deep(.el-input__wrapper:hover),
|
||
:deep(.el-input__wrapper.is-focus) {
|
||
box-shadow: 0 0 0 1px #409eff inset;
|
||
}
|
||
|
||
/* 加载状态样式 */
|
||
.register-button.is-loading {
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 动画效果 */
|
||
.register-card {
|
||
animation: slideInUp 0.6s ease-out;
|
||
}
|
||
|
||
@keyframes slideInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 错误状态样式 */
|
||
:deep(.el-form-item.is-error .el-input__wrapper) {
|
||
box-shadow: 0 0 0 1px #f56c6c inset;
|
||
}
|
||
|
||
/* 成功状态样式 */
|
||
:deep(.el-form-item.is-success .el-input__wrapper) {
|
||
box-shadow: 0 0 0 1px #67c23a inset;
|
||
}
|
||
|
||
/* 协议对话框样式 */
|
||
:deep(.agreement-dialog),
|
||
:deep(.privacy-dialog) {
|
||
.el-message-box__content {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
/* 密码强度指示器 */
|
||
.password-strength {
|
||
margin-top: 5px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.strength-weak {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.strength-medium {
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.strength-strong {
|
||
color: #67c23a;
|
||
}
|
||
|
||
/* 短信验证码样式 */
|
||
.sms-code-group {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.sms-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.sms-button {
|
||
flex-shrink: 0;
|
||
min-width: 120px;
|
||
height: 40px;
|
||
}
|
||
|
||
.sms-button:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 协议相关样式 */
|
||
.agreement-hint {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.agreement-hint .el-icon {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.agreement-text {
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.agreement-text:hover {
|
||
color: #66b1ff;
|
||
}
|
||
|
||
/* 协议弹窗样式 */
|
||
:deep(.agreement-dialog) {
|
||
.el-dialog__body {
|
||
padding: 20px;
|
||
max-height: 60vh;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.agreement-content {
|
||
height: 100%;
|
||
}
|
||
|
||
/* 自定义导航栏样式 */
|
||
.custom-nav-bar {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #c1c1c1 #f1f1f1;
|
||
flex-wrap: nowrap;
|
||
-webkit-overflow-scrolling: touch;
|
||
overscroll-behavior-x: contain;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
background: #fff;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.custom-nav-bar::-webkit-scrollbar {
|
||
height: 6px;
|
||
}
|
||
|
||
.custom-nav-bar::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.custom-nav-bar::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.custom-nav-bar::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
.nav-item {
|
||
flex: none;
|
||
min-width: 120px;
|
||
white-space: nowrap;
|
||
padding: 12px 16px;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
transition: all 0.3s ease;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
color: #409eff;
|
||
}
|
||
|
||
.nav-item.active {
|
||
color: #409eff;
|
||
border-bottom-color: #409eff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav-item .check-icon {
|
||
margin-left: 5px;
|
||
color: #67c23a;
|
||
}
|
||
|
||
/* 导航栏滑动容器 */
|
||
:deep(.el-tabs__nav-wrap) {
|
||
overflow-x: auto !important;
|
||
overflow-y: hidden !important;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #c1c1c1 #f1f1f1;
|
||
flex-wrap: nowrap !important;
|
||
/* 启用触摸滚动 */
|
||
-webkit-overflow-scrolling: touch;
|
||
/* 确保可以拖动滚动 */
|
||
overscroll-behavior-x: contain;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap::-webkit-scrollbar) {
|
||
height: 6px !important;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap::-webkit-scrollbar-track) {
|
||
background: #f1f1f1 !important;
|
||
border-radius: 3px !important;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap::-webkit-scrollbar-thumb) {
|
||
background: #c1c1c1 !important;
|
||
border-radius: 3px !important;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap::-webkit-scrollbar-thumb:hover) {
|
||
background: #a8a8a8 !important;
|
||
}
|
||
|
||
:deep(.el-tabs__nav) {
|
||
display: flex !important;
|
||
width: max-content !important;
|
||
min-width: 100% !important;
|
||
flex-wrap: nowrap !important;
|
||
}
|
||
|
||
:deep(.el-tabs__item) {
|
||
flex: none !important;
|
||
min-width: 120px !important;
|
||
white-space: nowrap !important;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
margin: 0 4px;
|
||
border-radius: 6px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 确保协议弹窗内的标签页可以正常滚动 */
|
||
:deep(.el-drawer .el-tabs__nav-wrap) {
|
||
overflow-x: auto !important;
|
||
overflow-y: hidden !important;
|
||
}
|
||
|
||
:deep(.agreement-dialog .el-tabs__item:hover) {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
:deep(.agreement-dialog .el-tabs__item.is-active) {
|
||
background-color: #409eff;
|
||
color: white;
|
||
}
|
||
|
||
.tab-label {
|
||
margin-right: 4px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 统一所有协议内容样式 */
|
||
.user-text-content,
|
||
.bean-text-content,
|
||
.points-text-content,
|
||
.vip-text-content,
|
||
.privacy-text-content {
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
line-height: 1.6;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 8px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.user-text-content h3,
|
||
.bean-text-content h3,
|
||
.points-text-content h3,
|
||
.vip-text-content h3,
|
||
.privacy-text-content h3 {
|
||
color: #303133;
|
||
margin-bottom: 16px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.user-text-content p,
|
||
.bean-text-content p,
|
||
.points-text-content p,
|
||
.vip-text-content p,
|
||
.privacy-text-content p {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.user-text-content strong,
|
||
.bean-text-content strong,
|
||
.points-text-content strong,
|
||
.vip-text-content strong,
|
||
.privacy-text-content strong {
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.check-icon {
|
||
color: #67c23a;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.user-text-content::-webkit-scrollbar,
|
||
.bean-text-content::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.user-text-content::-webkit-scrollbar-track,
|
||
.bean-text-content::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.user-text-content::-webkit-scrollbar-thumb,
|
||
.bean-text-content::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.user-text-content::-webkit-scrollbar-thumb:hover,
|
||
.bean-text-content::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
:deep(.el-link.viewed:hover) {
|
||
color: #529b2e !important;
|
||
}
|
||
|
||
/* 移动端级联选择器样式优化 */
|
||
:deep(.mobile-cascader-popper) {
|
||
max-width: calc(100vw - 20px) !important;
|
||
left: 10px !important;
|
||
right: 10px !important;
|
||
transform: none !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
:deep(.mobile-cascader-popper .el-cascader-panel) {
|
||
max-width: 100% !important;
|
||
overflow-x: hidden !important;
|
||
display: flex !important;
|
||
gap: 0 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
:deep(.mobile-cascader-popper .el-cascader-menu) {
|
||
min-width: 33.33% !important;
|
||
max-width: 33.33% !important;
|
||
width: 33.33% !important;
|
||
flex-shrink: 0 !important;
|
||
flex-grow: 0 !important;
|
||
overflow-x: hidden !important;
|
||
border-right: 1px solid #e4e7ed;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
:deep(.mobile-cascader-popper .el-cascader-menu:last-child) {
|
||
border-right: none !important;
|
||
}
|
||
|
||
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
|
||
padding: 6px 3px !important;
|
||
line-height: 1.1 !important;
|
||
font-size: 12px !important;
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
margin: 0 !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
:deep(.mobile-cascader-popper) {
|
||
max-width: calc(100vw - 16px) !important;
|
||
left: 8px !important;
|
||
right: 8px !important;
|
||
}
|
||
|
||
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
|
||
padding: 5px 2px !important;
|
||
font-size: 11px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 360px) {
|
||
:deep(.mobile-cascader-popper) {
|
||
max-width: calc(100vw - 12px) !important;
|
||
left: 6px !important;
|
||
right: 6px !important;
|
||
}
|
||
|
||
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
|
||
padding: 4px 1px !important;
|
||
font-size: 10px !important;
|
||
line-height: 1.0 !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
|
||
padding: 3px 1px !important;
|
||
font-size: 9px !important;
|
||
}
|
||
}
|
||
</style>
|