Yuan/ZangShiQi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始上传

Browse Source
This commit is contained in:
Mr. Hu
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
addon/pc/source/os/pages/auth/find.vue Executable file
View File

@@ -0,0 +1,256 @@
<template>
<div class="el-row-wrap find-pass">
<ul>
<li>
<div>
<p class="ns-bg-color">1</p>
<p class="ns-text-color">输入手机号</p>
</div>
<span class="line-2 ns-border-color"></span>
</li>
<li id="current2">
<span class="line-1" :class="step >= 2 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
<div>
<p :class="step >= 2 ? 'ns-bg-color' : 'ns-bg-color-gray'">2</p>
<p :class="step >= 2 ? 'ns-text-color' : 'ns-text-color-gray'">验证身份</p>
</div>
<span class="line-2" :class="step >= 2 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
</li>
<li id="current3">
<span class="line-1" :class="step >= 3 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
<div>
<p :class="step >= 3 ? 'ns-bg-color' : 'ns-bg-color-gray'">3</p>
<p :class="step >= 3 ? 'ns-text-color' : 'ns-text-color-gray'">重置密码</p>
</div>
<span class="line-2" :class="step >= 3 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
</li>
<li id="current4">
<span class="line-1" :class="step >= 4 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
<div>
<p :class="step >= 4 ? 'ns-bg-color' : 'ns-bg-color-gray'">4</p>
<p :class="step >= 4 ? 'ns-text-color' : 'ns-text-color-gray'">完成</p>
</div>
</li>
</ul>
<el-row>
<el-col :span="12" :offset="6">
<div class="grid-content bg-purple">
<el-form :model="formData" :rules="rules" ref="ruleForm" class="ns-forget-pass-form">
<div class="ns-forget-pass">
<template v-if="step == 1">
<el-form-item prop="mobile" key="1">
<el-input v-model="formData.mobile" placeholder="请输入注册手机号">
<template slot="prepend">
<i class="el-icon-mobile-phone"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="nextStep('ruleForm')">下一步</el-button>
</el-form-item>
</template>
<template v-else-if="step == 2">
<el-form-item prop="vercode" key="2">
<el-input v-model="formData.vercode" autocomplete="off" placeholder="请输入验证码" maxlength="4">
<template slot="prepend">
<i class="el-icon-picture-outline"></i>
</template>
<template slot="append">
<img :src="captcha.img" mode class="captcha" @click="getCaptcha" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="dynacode" key="3">
<el-input v-model="formData.dynacode" maxlength="4" autocomplete="off" placeholder="请输入短信动态码">
<template slot="prepend">
<i class="el-icon-mobile"></i>
</template>
<template slot="append">
<div class="dynacode" :class="dynacodeData.seconds == 120 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendMobileCode('ruleForm')">
{{ dynacodeData.codeText }}
</div>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="nextStepToSetPass('ruleForm')">下一步</el-button>
</el-form-item>
</template>
<template v-else-if="step == 3">
<el-form-item prop="pass" key="4">
<el-input v-model.trim="formData.pass" type="password" autocomplete="off" placeholder="请输入新的登录密码">
<template slot="prepend">
<i class="el-icon-lock"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="repass" key="5">
<el-input v-model.trim="formData.repass" type="password" autocomplete="off" placeholder="请再次输入新密码">
<template slot="prepend">
<i class="el-icon-lock"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPass('ruleForm')">重置密码</el-button>
</el-form-item>
</template>
<template v-else-if="step == 4">
<span class="ns-reset-success">重置密码成功</span>
<el-form-item>
<router-link to="/auth/login">
<el-button type="primary">重新登录</el-button>
</router-link>
</el-form-item>
</template>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import find from '~/assets/js/auth/find.js';
export default {
name: 'find_pass',
layout: 'login',
mixins: [find]
};
</script>
<style lang="scss" scoped>
.el-row-wrap {
width: $width;
margin: 0 auto;
border: 1px solid #e5e5e5;
ul {
margin: 50px auto 0;
width: 1032px;
height: 51px;
li {
position: relative;
float: left;
width: 258px;
height: 51px;
text-align: center;
div p:first-child {
display: inline-block;
width: 28px;
height: 28px;
line-height: 28px;
color: #fff;
border-radius: 28px;
}
div p:nth-child(2) {
margin-top: 10px;
}
.line-1 {
position: absolute;
left: 0;
top: 14px;
display: inline-block;
width: 100px;
border-top: solid 2px;
}
.line-2 {
position: absolute;
right: 0;
top: 14px;
display: inline-block;
width: 100px;
border-top: solid 2px;
}
.ns-bg-color-gray {
background-color: #b7b7b7;
}
.ns-text-color-gray {
color: #898989;
}
.ns-border-color-gray {
border-color: #e5e5e5 !important;
}
}
}
}
.el-form {
box-sizing: border-box;
padding: 80px 0 50px;
.captcha {
vertical-align: top;
max-width: inherit;
max-height: 38px;
line-height: 38px;
cursor: pointer;
}
.dynacode {
cursor: pointer;
}
[class*=' el-icon-'],
[class^='el-icon-'] {
font-size: 16px;
}
.ns-forget-pass {
width: 60%;
margin: 0 auto;
}
button {
width: 100%;
}
.ns-reset-success {
display: inline-block;
font-size: 16px;
text-align: center;
width: 100%;
height: 50px;
line-height: 50px;
}
}
</style>
<style lang="scss">
.find-pass {
.ns-forget-pass-form {
.el-form-item__error {
/* 错误提示信息 */
padding-left: 57px;
}
.el-tabs__active-bar,
.el-tabs__nav-wrap::after {
/* 清除tab标签底部横线 */
height: 0;
}
/* 立即注册 */
.el-form-item__content {
line-height: 20px;
}
}
}
</style>

403
addon/pc/source/os/pages/auth/login.vue Executable file
View File

@@ -0,0 +1,403 @@
<template>
<div class="ns-login-wrap" :style="{ background: backgroundColor }" v-loading="loadingAd" @keypress="keypress">
<div class="el-row-wrap el-row-wrap-login">
<el-row>
<el-col :span="13">
<el-carousel height="460px" class="ns-login-bg" @change="handleChange" v-if="adList.length">
<el-carousel-item v-for="item in adList" :key="item.adv_id">
<el-image :src="$img(item.adv_image)" fit="cover" @click="$util.pushToTab(item.adv_url.url)" />
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="11" class="ns-login-form" style="float:right;margin-right:70px">
<div class="grid-content bg-purple">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="账号登录" name="first" v-if="registerConfig.login.indexOf('username') != -1">
<el-form v-if="activeName == 'first'" :model="formData" :rules="accountRules" ref="ruleForm">
<el-form-item prop="account">
<el-input v-model="formData.account" placeholder="请输入账号">
<template slot="prepend">
<i class="iconfont icon-zhanghao"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="formData.password" autocomplete="off" placeholder="请输入登录密码">
<template slot="prepend">
<i class="iconfont icon-mima"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="vercode">
<el-input v-model="formData.vercode" autocomplete="off" placeholder="请输入验证码" maxlength="4">
<template slot="prepend">
<i class="iconfont icon-yanzhengma"></i>
</template>
<template slot="append">
<img :src="captcha.img" mode class="captcha" @click="getCaptcha" />
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="12">
<el-checkbox v-model="formData.checked">七天自动登录</el-checkbox>
</el-col>
<el-col :span="12" class="ns-forget-pass">
<router-link to="/auth/find" class>忘记密码</router-link>
</el-col>
</el-row>
</el-form-item>
<el-form-item style="margin-bottom: 18px;">
<el-button type="primary" @click="accountLogin('ruleForm')">登录</el-button>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="24">
<div class="bg-purple-light" style="padding: 0 0 10px 0;" :style="wechatConfigStatus ? 'border-bottom: 1px solid #ebebeb' : ''">
没有账号？
<router-link to="/auth/register"><p style="color: #fd274a;">立即注册</p></router-link>
<!-- <i class="iconfont icon-arrow-right"></i> -->
</div>
</el-col>
</el-row>
<el-col :span="18" v-if="wechatConfigStatus">
<div style="margin-left: 100px; margin-top: 20px; position: relative;" class="go-wx-login iconfont icon-weixin-copy" @click="weixinLogin()">
<p style="font-size: 14px; text-indent: 10px; position: absolute;top: 1px;">使用微信扫码登录</p>
</div>
</el-col>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="手机动态码登录" name="second" v-if="registerConfig.login.indexOf('mobile') != -1">
<el-form v-if="activeName == 'second'" :model="formData" :rules="mobileRules" ref="mobileRuleForm" class="ns-login-mobile">
<el-form-item prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机号">
<template slot="prepend">
<i class="iconfont icon-shouji-copy"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="vercode">
<el-input v-model="formData.vercode" autocomplete="off" placeholder="请输入验证码" maxlength="4">
<template slot="prepend">
<i class="iconfont icon-yanzhengma"></i>
</template>
<template slot="append">
<img :src="captcha.img" mode class="captcha" @click="getCaptcha" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="dynacode">
<el-input v-model="formData.dynacode" maxlength="4" placeholder="请输入短信动态码">
<template slot="prepend">
<i class="iconfont icon-dongtaima"></i>
</template>
<template slot="append">
<div class="dynacode" :class="dynacodeData.seconds == 120 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendMobileCode('mobileRuleForm')">
{{ dynacodeData.codeText }}
</div>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="mobileLogin('mobileRuleForm')">登录</el-button>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="24">
<div class="bg-purple-light" style="padding: 0 0 10px 0;" :style="wechatConfigStatus ? 'border-bottom: 1px solid #ebebeb' : ''">
<router-link to="/auth/register">立即注册</router-link>
<i class="iconfont icon-arrow-right"></i>
</div>
</el-col>
</el-row>
<el-col :span="18" v-if="wechatConfigStatus">
<div style="margin-left: 100px; margin-top: 20px; position: relative;" class="go-wx-login iconfont icon-weixin-copy" @click="weixinLogin()">
<p style="font-size: 14px; text-indent: 10px; position: absolute;top: 1px;">使用微信扫码登录</p>
</div>
</el-col>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</el-col>
<div class="wx-login" :class="ischecked == true ? 'wx-login-display' : ''">
<p class="wx-login-title">微信扫码登录</p>
<div class="qrcode"><img :src="img" /></div>
<div style="display: flex;">
<p class="iconfont icon-arrowLeft" @click="closeWx()"></p>
<p class="wx-login-footer" @click="closeWx()">使用账号密码登录</p>
</div>
</div>
<div class="wx-login1" :class="ischecked1 == true ? 'wx-login-display1' : ''">
<p class="wx-login-title1">扫码成功</p>
<el-col :span="11" class="ns-login-form ns-login-form2">
<div class="grid-content bg-purple">
<el-form :model="formData" :rules="wechatRules" ref="wechatRuleForm">
<el-form-item prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机号">
<template slot="prepend">
<i class="iconfont icon-shouji-copy"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="vercode">
<el-input v-model="formData.vercode" autocomplete="off" placeholder="请输入验证码" maxlength="4">
<template slot="prepend">
<i class="iconfont icon-yanzhengma"></i>
</template>
<template slot="append">
<img :src="captcha.img" mode class="captcha" @click="getCaptcha" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="dynacode">
<el-input v-model="formData.dynacode" maxlength="4" placeholder="请输入短信动态码">
<template slot="prepend">
<i class="iconfont icon-dongtaima"></i>
</template>
<template slot="append">
<div class="dynacode" :class="dynacodeData.seconds == 120 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendWechatMobileCode('wechatRuleForm')">
{{ dynacodeData.codeText }}
</div>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="wechatLogin('wechatRuleForm')">确定</el-button>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="12">
<div class="go-wx-login iconfont" @click="closeWx1()">
<p>使用其他方式登录</p>
</div>
</el-col>
<el-col :span="12">
<div class="bg-purple-light">
<router-link to="/auth/register">立即注册</router-link>
<i class="iconfont icon-arrow-right"></i>
</div>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</el-col>
</div>
</el-row>
</div>
</div>
</template>
<script>
import login from '~/assets/js/auth/login.js';
export default {
name: 'login',
layout: 'login',
mixins: [login]
};
</script>
<style lang="scss" scoped>
.icon-arrowLeft {
line-height: 55px;
font-size: 30px;
margin-right: 10px;
margin-left: 130px;
}
.ns-login-wrap {
width: 100%;
height: 500px;
min-width: $width;
.el-row-wrap-login {
width: 1200px;
margin: 0 auto;
.ns-login-bg {
margin-top: 40px;
}
.ns-login-form {
width: 400px;
margin-left: 50px;
background: #ffffff;
margin-top: 25px;
.el-form {
.captcha {
vertical-align: top;
max-width: inherit;
max-height: 38px;
line-height: 38px;
cursor: pointer;
}
.dynacode {
cursor: pointer;
}
[class*=' el-icon-'],
[class^='el-icon-'] {
font-size: 16px;
}
}
.grid-content {
padding: 10px 20px;
}
.el-form-item__error {
padding-left: 50px;
}
button {
width: 100%;
}
.ns-forget-pass {
text-align: right;
}
i {
font-size: 18px;
}
.bg-purple-light {
display: flex;
justify-content: flex-end;
align-items: center;
i {
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 50%;
background-color: $base-color;
color: #ffffff;
font-size: 12px;
margin-left: 8px;
}
}
}
.ns-login-form2 {
margin-left: 9px;
}
}
}
.icon-weixin-copy {
color: #09bb07;
font-size: 26px;
p {
font-size: 16px;
color: #000;
display: inline-block;
padding-right: 15px;
}
}
.go-wx-login {
cursor: pointer;
}
.wx-login-display {
display: block !important;
}
.wx-login {
width: 410px;
height: 460px;
background: #fff;
position: absolute;
top: 22px;
right: 90px;
z-index: 10;
display: none;
.wx-login-title {
text-align: center;
margin-top: 30px;
font-weight: 600;
font-size: 16px;
color: #fc183e;
}
img {
width: 200px;
margin: 45px 105px;
}
.wx-login-footer {
margin-top: 15px;
text-align: center;
cursor: pointer;
}
}
.wx-login-display1 {
display: block !important;
}
.wx-login1 {
width: 410px;
height: 460px;
background: #fff;
position: absolute;
top: 22px;
right: 90px;
z-index: 11;
display: none;
.wx-login-title1 {
text-align: center;
margin-top: 30px;
font-weight: 600;
}
.wx-login-footer1 {
margin-top: 15px;
text-align: center;
cursor: pointer;
}
}
</style>
<style lang="scss">
.ns-login-form {
.el-form-item__error {
/* 错误提示信息 */
padding-left: 57px;
}
.el-tabs__active-bar,
.el-tabs__nav-wrap::after {
/* 清除tab标签底部横线 */
height: 0;
}
/* 立即注册 */
.el-form-item__content {
line-height: 20px;
}
}
</style>

787
addon/pc/source/os/pages/auth/register.vue Executable file
View File

@@ -0,0 +1,787 @@
<template>
<div class="register">
<div class="box-card">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户注册" name="first" v-if="registerConfig.register.indexOf('username') != -1">
<el-form v-if="activeName == 'first'" :model="registerForm" :rules="registerRules" ref="registerRef" label-width="80px" label-position="right" show-message>
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="registerForm.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input v-model="registerForm.checkPass" placeholder="请输入确认密码" type="password"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="registerForm.code" placeholder="请输入验证码" maxlength="4">
<template slot="append">
<img :src="captcha.img" mode class="captcha" @click="getCode" />
</template>
</el-input>
</el-form-item>
</el-form>
<div class="xy" @click="check">
<div class="xy-wrap">
<div class="iconfont" :class="ischecked ? 'icon-xuanze-duoxuan' : 'icon-xuanze'"></div>
<div class="content">
阅读并同意
<b @click.stop="getAggrement">《服务协议》</b>
</div>
</div>
<div class="toLogin" @click="toLogin">已有账号，立即登录</div>
</div>
<el-button @click="register">立即注册</el-button>
</el-tab-pane>
<el-tab-pane label="手机动态码注册" name="second" v-if="registerConfig.register.indexOf('mobile') != -1">
<el-form v-if="activeName == 'second'" :model="registerForm" :rules="mobileRules" ref="mobileRuleForm">
<el-form-item prop="mobile">
<el-input v-model="registerForm.mobile" placeholder="请输入手机号">
<template slot="prepend">
<i class="iconfont icon-shouji-copy"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="vercode">
<el-input v-model="registerForm.vercode" autocomplete="off" placeholder="请输入验证码" maxlength="4">
<template slot="prepend">
<i class="iconfont icon-yanzhengma"></i>
</template>
<template slot="append">
<img :src="captcha.img" mode class="captcha" @click="getCode" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="dynacode">
<el-input v-model="registerForm.dynacode" maxlength="4" placeholder="请输入短信动态码">
<template slot="prepend">
<i class="iconfont icon-dongtaima"></i>
</template>
<template slot="append">
<div class="dynacode" :class="dynacodeData.seconds == 120 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendMobileCode('mobileRuleForm')">
{{ dynacodeData.codeText }}
</div>
</template>
</el-input>
</el-form-item>
</el-form>
<div class="xy" @click="check">
<div class="xy-wrap">
<div class="iconfont" :class="ischecked ? 'icon-xuanze-duoxuan' : 'icon-xuanze'"></div>
<div class="content">
阅读并同意
<b @click.stop="getAggrement">《服务协议》</b>
</div>
</div>
<div class="toLogin" @click="toLogin">已有账号，立即登录</div>
</div>
<el-button @click="registerMobile">立即注册</el-button>
</el-tab-pane>
</el-tabs>
<el-dialog :title="agreement.title" :visible.sync="aggrementVisible" width="60%" :before-close="aggrementClose" :lock-scroll="false" center>
<div v-html="agreement.content" class="xyContent"></div>
</el-dialog>
</div>
<!-- 浮层区 -->
<div class="floatLayer-wrap" v-show="is_show && reward" :style="{ width: bgWidth, height: bgHeight }">
<div class="reward-wrap">
<img :src="$util.img('public/uniapp/register_reward/register_reward_img.png')" mode="widthFix" class="bg-img-head" />
<img :src="$util.img('public/uniapp/register_reward/register_reward_money.png')" mode="widthFix" class="bg-img-money" />
<img :src="$util.img('public/uniapp/register_reward/register_reward_head.png')" mode="widthFix" class="bg-img" />
<div class="wrap">
<div>
<div class="reward-content">
<div class="reward-item" v-if="reward && reward.point > 0">
<div class="head">积分奖励</div>
<div class="content">
<div class="info">
<div>
<span class="num">{{ reward.point }}</span>
<span class="type">积分</span>
</div>
<div class="desc">用于下单时抵现或兑换商品等</div>
</div>
<div class="tip" @click="closeRewardPopup('point')">立即查看</div>
</div>
</div>
<div class="reward-item" v-if="reward && reward.growth > 0">
<div class="head">成长值</div>
<div class="content">
<div class="info">
<div>
<span class="num">{{ reward.growth }}</span>
<span class="type">成长值</span>
</div>
<div class="desc">用于提升会员等级</div>
</div>
<div class="tip" @click="closeRewardPopup('growth')">立即查看</div>
</div>
</div>
<div class="reward-item" v-if="reward && reward.balance > 0">
<div class="head">红包奖励</div>
<div class="content">
<div class="info">
<div>
<span class="num">{{ reward.balance }}</span>
<span class="type">元</span>
</div>
<div class="desc">不可提现下单时可用</div>
</div>
<div class="tip" @click="closeRewardPopup('balance')">立即查看</div>
</div>
</div>
<div class="reward-item" v-if="reward && reward.coupon_list.length > 0">
<div class="head">优惠券奖励</div>
<div class="content" v-for="(item, index) in reward.coupon_list" :key="index">
<div class="info">
<div>
<span class="num coupon-name">{{ item.coupon_name }}</span>
</div>
<div class="desc" v-if="item.at_least > 0">满{{ item.at_least }}{{ item.type == 'discount' ? '打' + item.discount + '折' : '减' + item.money }}</div>
<div class="desc" v-else>无门槛，{{ item.type == 'discount' ? '打' + item.discount + '折' : '减' + item.money }}</div>
</div>
<div class="tip" @click="closeRewardPopup('coupon')">立即查看</div>
</div>
</div>
</div>
</div>
</div>
<div class="close-btn" @click="closeRewardPopup()"><i class="iconfont icon-guanbi"></i></div>
</div>
</div>
</div>
</template>
<script>
import {getRegisterAgreement, registerConfig, registerMobileCode, getRegisterReward} from '@/api/auth/register';
import {captcha} from '@/api/website';
export default {
name: 'register',
layout: 'login',
components: {},
data() {
var checkPassValidata = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.registerForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
let self = this;
var passwordValidata = function (rule, value, callback) {
let regConfig = self.registerConfig;
if (!value) {
return callback(new Error('请输入密码'));
} else {
if (regConfig.pwd_len > 0) {
if (value.length < regConfig.pwd_len) {
return callback(new Error('密码长度不能小于' + regConfig.pwd_len + '位'));
} else {
callback();
}
}
if (regConfig.pwd_complexity != '') {
let passwordErrorMsg = '密码需包含',
reg = '';
if (regConfig.pwd_complexity.indexOf('number') != -1) {
reg += '(?=.*?[0-9])';
passwordErrorMsg += '数字';
} else if (regConfig.pwd_complexity.indexOf('letter') != -1) {
reg += '(?=.*?[a-z])';
passwordErrorMsg += '、小写字母';
} else if (regConfig.pwd_complexity.indexOf('upper_case') != -1) {
reg += '(?=.*?[A-Z])';
passwordErrorMsg += '、大写字母';
} else if (regConfig.pwd_complexity.indexOf('symbol') != -1) {
reg += '(?=.*?[#?!@$%^&*-])';
passwordErrorMsg += '、特殊字符';
} else {
reg += '';
passwordErrorMsg += '';
}
reg = new RegExp(reg);
if (reg.test(value)) {
return callback(new Error(passwordErrorMsg));
} else {
callback();
}
}
}
};
var isMobile = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
if (/^\d{11}$/.test(value)) {
callback();
} else {
callback(new Error('请输入正确的手机号'));
}
}
};
return {
registerForm: {
username: '',
password: '',
checkPass: '',
code: '',
mobile: '',
vercode: '',
dynacode: '',
key: ''
},
registerRules: {
username: [
{
required: true,
message: '请输入用户名',
trigger: 'blur'
}
],
password: [
{
required: true,
validator: passwordValidata,
trigger: 'blur'
}
],
checkPass: [
{
required: true,
validator: checkPassValidata,
trigger: 'blur'
}
],
code: [
{
required: true,
message: '请输入验证码',
trigger: 'blur'
}
]
},
mobileRules: {
mobile: [
{
required: true,
validator: isMobile,
trigger: 'blur'
}
],
vercode: [
{
required: true,
message: '请输入验证码',
trigger: 'blur'
}
],
dynacode: [
{
required: true,
message: '请输入短信动态码',
trigger: 'blur'
}
]
},
dynacodeData: {
seconds: 120,
timer: null,
codeText: '获取动态码',
isSend: false
}, // 动态码
ischecked: false,
agreement: '',
aggrementVisible: false,
captcha: {
// 验证码
id: '',
img: ''
},
registerConfig: {
register: ''
},
activeName: 'first', // tab切换
reward: null,
is_show: false,
bgWidth: '',
bgHeight: ''
};
},
created() {
this.getCode();
this.registerAggrement();
this.getRegisterConfig();
this.getRegisterReward();
if (process.client) {
this.bgWidth = document.documentElement.clientWidth + 'px';
this.bgHeight = document.documentElement.clientHeight + 'px';
}
},
head() {
return {
title: '注册-' + this.$store.state.site.siteInfo.site_name
};
},
methods: {
closeRewardPopup(type) {
this.is_show = false;
switch (type) {
case 'point':
this.$router.push('/member/my_point');
break;
case 'balance':
this.$router.push('/member/account');
break;
case 'growth':
this.$router.push('/member');
break;
case 'coupon':
this.$router.push('/member/coupon');
break;
default:
this.$router.push('/member');
this.is_show = false;
}
},
getRegisterReward() {
getRegisterReward()
.then(res => {
if (res.code >= 0) {
let data = res.data;
if (data.is_use == 1 && (data.value.point > 0 || data.value.balance > 0 || data.value.growth > 0 || data.value.coupon_list.length > 0)) {
this.reward = data.value;
}
}
})
},
sendMobileCode(formName) {
if (this.dynacodeData.seconds != 120) return;
this.$refs[formName].clearValidate('dynacode');
this.$refs[formName].validateField('mobile', valid => {
if (valid) {
return false;
}
});
this.$refs[formName].validateField('vercode', valid => {
if (!valid) {
registerMobileCode({
mobile: this.registerForm.mobile,
captcha_id: this.captcha.id,
captcha_code: this.registerForm.vercode
})
.then(res => {
if (res.code >= 0) {
this.registerForm.key = res.data.key;
if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
this.dynacodeData.timer = setInterval(() => {
this.dynacodeData.seconds--;
this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
}, 1000);
}
}
})
.catch(err => {
this.$message.error(err.message);
});
} else {
return false;
}
});
},
handleClick(tab, event) {
},
check() {
this.ischecked = !this.ischecked;
},
toLogin() {
this.$router.push('/auth/login');
},
// 获取注册配置
getRegisterConfig() {
registerConfig().then(res => {
if (res.code >= 0) {
this.registerConfig = res.data.value;
if (this.registerConfig.register == '') {
this.$message({
message: '平台未启用注册',
type: 'warning',
duration: 2000,
onClose: () => {
this.$router.push({name: 'login', params: {third_party: true}});
}
});
} else if (this.registerConfig.register.indexOf('username') != -1) {
this.activeName = 'first';
} else {
this.activeName = 'second';
}
}
});
},
// 账号密码注册
register() {
this.$refs.registerRef.validate(valid => {
if (valid) {
if (!this.ischecked) {
return this.$message({
message: '请先阅读协议并勾选',
type: 'warning'
});
}
var data = {
username: this.registerForm.username.trim(),
password: this.registerForm.password
};
var user_test = /^[A-Za-z0-9]+$/;
if (!user_test.test(data.username)) {
return this.$message({
message: '用户名只能输入数字跟英文',
type: 'warning'
});
}
if (this.captcha.id != '') {
data.captcha_id = this.captcha.id;
data.captcha_code = this.registerForm.code;
}
this.$store
.dispatch('member/register_token', data)
.then(res => {
if (res.code >= 0) {
if (this.reward) {
this.is_show = true;
} else {
this.$router.push('/member');
}
}
})
.catch(err => {
this.$message.error(err.message);
this.getCode();
});
} else {
return false;
}
});
},
// 手机号注册
registerMobile() {
this.$refs.mobileRuleForm.validate(valid => {
if (valid) {
if (!this.ischecked) {
return this.$message({
message: '请先阅读协议并勾选',
type: 'warning'
});
}
var data = {
mobile: this.registerForm.mobile,
key: this.registerForm.key,
code: this.registerForm.dynacode
};
if (this.captcha.id != '') {
data.captcha_id = this.captcha.id;
data.captcha_code = this.registerForm.code;
}
this.$store
.dispatch('member/registerMobile_token', data)
.then(res => {
if (res.code >= 0) {
if (this.reward) {
this.is_show = true;
} else {
this.$router.push('/member');
}
}
})
.catch(err => {
this.$message.error(err.message);
this.getCode();
});
} else {
return false;
}
});
},
aggrementClose() {
this.aggrementVisible = false;
},
// 获取协议
registerAggrement() {
getRegisterAgreement().then(res => {
if (res.code >= 0) {
this.agreement = res.data;
}
});
},
getAggrement() {
this.aggrementVisible = true;
},
// 获取验证码
getCode() {
captcha({
captcha_id: 'this.captcha.id'
})
.then(res => {
if (res.code >= 0) {
this.captcha = res.data;
this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
}
})
.catch(err => {
this.$message.error(err.message);
});
}
}
};
</script>
<style lang="scss" scoped>
.register {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.box-card {
width: 500px;
margin: 0 auto;
display: flex;
background-color: #ffffff;
padding: 0 30px 30px 30px;
flex-direction: column;
padding-bottom: 256px;
.register-title {
border-bottom: 1px solid #f1f1f1;
text-align: left;
margin-bottom: 20px;
font-size: 16px;
color: $base-color;
padding: 10px 0;
}
.register-account {
width: 100%;
text-align: center;
}
.code {
width: 80%;
text-align: left;
}
.el-form {
margin: 0 30px;
.captcha {
vertical-align: top;
max-width: inherit;
max-height: 38px;
line-height: 38px;
cursor: pointer;
}
}
.xyContent {
height: 600px;
overflow-y: scroll;
}
.xy {
margin-left: 110px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
margin-right: 30px;
.toLogin {
cursor: pointer;
}
.xy-wrap {
display: flex;
align-items: center;
font-size: $ns-font-size-base;
cursor: pointer;
.iconfont {
display: flex;
align-content: center;
}
.content {
margin-left: 3px;
b {
color: $base-color;
}
}
}
.icon-xuanze-duoxuan {
color: $base-color;
}
}
.el-button {
margin: 20px 0 0 25px;
background-color: $base-color;
color: #ffffff;
width: calc(100% - 60px);
}
}
.floatLayer-wrap {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
position: absolute;
.reward-wrap {
width: 400px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.bg-img {
width: 100%;
will-change: transform;
}
.bg-img-head {
position: absolute;
top: -90px;
width: 100%;
}
.bg-img-money {
position: absolute;
width: 100%;
left: -20px;
top: 80px;
z-index: 10;
}
.wrap {
width: calc(100% - 1px);
height: 100%;
background-color: #ef3030;
margin-top: -40px;
padding-bottom: 30px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
& > div {
position: relative;
}
}
.reward-content {
margin: 0 25px 0 25px;
}
.reward-item {
.head {
color: #fff;
text-align: center;
line-height: 1;
margin: 10px 0;
}
.content {
display: flex;
padding: 8px 13px;
background: #fff;
border-radius: 5px;
margin-bottom: 5px;
width: auto;
.info {
flex: 1;
}
.tip {
color: #ff222d;
padding: 5px 0 5px 15px;
width: 70px;
letter-spacing: 1px;
border-left: 1px dashed #e5e5e5;
height: 40px;
line-height: 40px;
}
.num {
font-size: 26px;
color: #ff222d;
font-weight: bolder;
line-height: 1;
}
.coupon-name {
font-size: 19px;
}
.type {
font-size: $ns-font-size-base;
margin-left: 5px;
line-height: 1;
}
.desc {
margin-top: 4px;
color: $base-color;
font-size: $ns-font-size-base;
line-height: 1;
}
}
}
.btn {
position: absolute;
width: calc(100% - 50px);
bottom: 20px;
left: 25px;
.btn-img {
width: 100%;
}
}
}
}
.close-btn {
text-align: center;
margin-top: 20px;
.iconfont {
color: #fff;
font-size: 20px;
}
}
.clear {
content: '';
display: block;
clear: both;
}
</style>