|
|
@@ -1,9 +1,13 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <nav-bar title="注册" color="#000"></nav-bar>
|
|
|
+ <nav-bar :title="steps == 0?'注册1/2':'创建账号密码2/2'" color="#000"></nav-bar>
|
|
|
+ <view class="line-box">
|
|
|
+ <view class="line line-bg" @click="steps = 0"></view>
|
|
|
+ <view class="line" :class="[ steps == 1?'line-bg':'' ]" @click="steps = 1"></view>
|
|
|
+ </view>
|
|
|
<view class="wrapper">
|
|
|
<view class="input-content">
|
|
|
- <view class="item-label">用户名</view>
|
|
|
+ <!-- <view class="item-label">用户名</view>
|
|
|
<view class="cu-form-group">
|
|
|
<input
|
|
|
:value="userName"
|
|
|
@@ -11,20 +15,20 @@
|
|
|
data-key="userName"
|
|
|
@input="inputChange"
|
|
|
/>
|
|
|
- </view>
|
|
|
- <view class="item-label">手机号</view>
|
|
|
- <view class="cu-form-group">
|
|
|
+ </view> -->
|
|
|
+ <view class="item-label" v-show="steps == 0">手机号码</view>
|
|
|
+ <view class="cu-form-group" v-show="steps == 0">
|
|
|
<input
|
|
|
type="number"
|
|
|
:value="phone"
|
|
|
- placeholder="请输入手机号"
|
|
|
+ placeholder="请输入登录的手机号码"
|
|
|
maxlength="11"
|
|
|
data-key="phone"
|
|
|
@input="inputChange"
|
|
|
/>
|
|
|
</view>
|
|
|
- <view class="item-label">验证码</view>
|
|
|
- <view class="cu-form-group padding-right-xs">
|
|
|
+ <view class="item-label" v-show="steps == 0">验证码</view>
|
|
|
+ <view class="cu-form-group padding-right-xs" v-show="steps == 0">
|
|
|
<input
|
|
|
type="number"
|
|
|
:value="code"
|
|
|
@@ -34,26 +38,40 @@
|
|
|
@input="inputChange"
|
|
|
@confirm="toLogin"
|
|
|
/>
|
|
|
- <button class="send-msg" @click="sendMsg" :disabled="sending">
|
|
|
+ <text class="send-msg" @click="sendMsg" :disabled="sending">
|
|
|
{{ sendTime }}
|
|
|
- </button>
|
|
|
+ </text>
|
|
|
</view>
|
|
|
|
|
|
- <view class="item-label">设置密码</view>
|
|
|
- <view class="cu-form-group">
|
|
|
+ <view class="item-label" v-show="steps == 1">密码</view>
|
|
|
+ <view class="cu-form-group" v-show="steps == 1">
|
|
|
<input
|
|
|
- type="password"
|
|
|
:value="password"
|
|
|
- placeholder="请设置密码"
|
|
|
+ :password="showPassword"
|
|
|
+ placeholder="输入密码"
|
|
|
placeholder-class="input-empty"
|
|
|
maxlength="20"
|
|
|
- minlength="6"
|
|
|
+ minlength="8"
|
|
|
data-key="password"
|
|
|
@input="inputChange"
|
|
|
@confirm="toLogin"
|
|
|
/>
|
|
|
+ <u-icon @click="changePassword" class="eye" :class="{ 'eye-active': !showPassword }" name="eye-fill"></u-icon>
|
|
|
</view>
|
|
|
- <view class="cu-form-group" style="margin-top: 32rpx" v-if="required == '是'">
|
|
|
+ <view v-show="steps == 1">
|
|
|
+ <u-line-progress class="line-progress" :show-percent="false" :active-color="progressColor" :percent="passwordStrength * 33.3"></u-line-progress>
|
|
|
+ <u-checkbox-group :wrap="true" @change="preventChange">
|
|
|
+ <u-checkbox shape="circle"
|
|
|
+ v-for="(item, index) in list" :key="index"
|
|
|
+ :name="item.name"
|
|
|
+ v-model="item.checked"
|
|
|
+ :readonly="true"
|
|
|
+ >
|
|
|
+ {{item.label}}
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="cu-form-group" style="margin-top: 32rpx" v-if="required == '是'">
|
|
|
<view class="item-label-code">邀请码</view>
|
|
|
<input
|
|
|
type=""
|
|
|
@@ -64,8 +82,8 @@
|
|
|
@input="inputChange"
|
|
|
@confirm="toLogin"
|
|
|
/>
|
|
|
- </view>
|
|
|
- <view class="cu-form-group" style="margin-top: 32rpx" v-if="required == '否'">
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="cu-form-group" style="margin-top: 32rpx" v-if="required == '否'">
|
|
|
<view class="item-label-code">邀请码</view>
|
|
|
<input
|
|
|
type=""
|
|
|
@@ -76,23 +94,23 @@
|
|
|
@input="inputChange"
|
|
|
@confirm="toLogin"
|
|
|
/>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
- <button class="confirm-btn" @click="toLogin">立即注册</button>
|
|
|
- <view class="footer">
|
|
|
+ <button class="confirm-btn" @click="nextStep" v-if="steps == 0">下一步</button>
|
|
|
+ <button class="confirm-btn" @click="toLogin" v-if="steps == 1">继续</button>
|
|
|
+ <!-- <view class="footer">
|
|
|
<text
|
|
|
@tap="isShowAgree"
|
|
|
class="cuIcon"
|
|
|
:class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'"
|
|
|
>同意</text
|
|
|
>
|
|
|
- <!-- 协议地址 -->
|
|
|
<navigator url="/my/setting/mimi" open-type="navigate">《隐私政策》</navigator>
|
|
|
和
|
|
|
<navigator url="/my/setting/xieyi" open-type="navigate"
|
|
|
>《用户服务协议》</navigator
|
|
|
>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -107,6 +125,7 @@ export default {
|
|
|
code: "",
|
|
|
phone: "",
|
|
|
password: "",
|
|
|
+ showPassword:true,
|
|
|
required: "否",
|
|
|
sending: false,
|
|
|
sendTime: "获取验证码",
|
|
|
@@ -115,7 +134,15 @@ export default {
|
|
|
state: "",
|
|
|
invitation: "",
|
|
|
platform: "",
|
|
|
- };
|
|
|
+ steps:0,
|
|
|
+ passwordStrength: 0, // 当前满足的条件数
|
|
|
+ list: [
|
|
|
+ { name: 'length', label: '最少8位数',checked: false, },
|
|
|
+ { name: 'number', label: '至少包含1个数字',checked: false, },
|
|
|
+ { name: 'upper', label: '只要包含一个大写字母',checked: false, }
|
|
|
+ ],
|
|
|
+ valueBackup: [],
|
|
|
+ };
|
|
|
},
|
|
|
components: {
|
|
|
navBar,
|
|
|
@@ -132,6 +159,20 @@ export default {
|
|
|
this.platform = "H5";
|
|
|
// #endif
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ progressColor() {
|
|
|
+ switch (this.passwordStrength) {
|
|
|
+ case 1:
|
|
|
+ return 'rgba(214, 44, 1, 1)';
|
|
|
+ case 2:
|
|
|
+ return 'rgba(250, 174, 22, 1)';
|
|
|
+ case 3:
|
|
|
+ return 'rgba(1, 107, 246, 1)';
|
|
|
+ default:
|
|
|
+ return 'rgba(237, 236, 239, 1)';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
showMa() {
|
|
|
//查询官方邀请码
|
|
|
@@ -202,7 +243,32 @@ export default {
|
|
|
inputChange(e) {
|
|
|
const key = e.currentTarget.dataset.key;
|
|
|
this[key] = e.detail.value;
|
|
|
+ if(key == 'password'){
|
|
|
+ this.checkPasswordStrength(this.password);
|
|
|
+ }
|
|
|
},
|
|
|
+ checkPasswordStrength(pwd) {
|
|
|
+ let strength = 0;
|
|
|
+ this.list.forEach(item => {
|
|
|
+ if (item.name === 'length') {
|
|
|
+ item.checked = pwd.length >= 8;
|
|
|
+ if (item.checked) strength++;
|
|
|
+ } else if (item.name === 'number') {
|
|
|
+ item.checked = /[0-9]/.test(pwd) && pwd.length >= 8;
|
|
|
+ if (item.checked) strength++;
|
|
|
+ } else if (item.name === 'upper') {
|
|
|
+ item.checked = /[A-Z]/.test(pwd) && pwd.length >= 8;
|
|
|
+ if (item.checked) strength++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.passwordStrength = strength;
|
|
|
+ this.valueBackup = this.list.map(i => i.checked);
|
|
|
+ },
|
|
|
+ preventChange() {
|
|
|
+ this.list.forEach((item, index) => {
|
|
|
+ item.checked = this.valueBackup[index];
|
|
|
+ });
|
|
|
+ },
|
|
|
navBack() {
|
|
|
uni.navigateBack();
|
|
|
},
|
|
|
@@ -212,33 +278,44 @@ export default {
|
|
|
url,
|
|
|
});
|
|
|
},
|
|
|
+ // 下一步
|
|
|
+ nextStep(){
|
|
|
+ const { phone,code } = this;
|
|
|
+ if (!phone) {
|
|
|
+ this.$queue.showToast("请输入手机号");
|
|
|
+ } else if (!code) {
|
|
|
+ this.$queue.showToast("请输入验证码");
|
|
|
+ }else{
|
|
|
+ this.steps = 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changePassword(){
|
|
|
+ this.showPassword = !this.showPassword;
|
|
|
+ },
|
|
|
+ // 注册
|
|
|
toLogin() {
|
|
|
const { userName, phone, password, code, showAgree, invitation } = this;
|
|
|
- if (!userName) {
|
|
|
- this.$queue.showToast("请输入用户名");
|
|
|
- } else if (!phone) {
|
|
|
+ if (!phone) {
|
|
|
this.$queue.showToast("请输入手机号");
|
|
|
} else if (!code) {
|
|
|
this.$queue.showToast("请输入验证码");
|
|
|
} else if (!password) {
|
|
|
this.$queue.showToast("请设置密码");
|
|
|
- } else if (password.length < 6) {
|
|
|
- this.$queue.showToast("密码位数必须大于六位");
|
|
|
- } else if (!showAgree) {
|
|
|
- this.$queue.showToast("请先同意《协议》");
|
|
|
- } else if (!invitation && this.required == "是") {
|
|
|
- this.$queue.showToast("请填写邀请码");
|
|
|
- } else if (!invitation && this.required == "否") {
|
|
|
- this.invitation = "";
|
|
|
+ } else if (password.length < 8) {
|
|
|
+ this.$queue.showToast("密码位数必须大于八位");
|
|
|
+ } else if (!/(?=.*[A-Z])(?=.*\d)/.test(password)) {
|
|
|
+ this.$queue.showToast("密码必须包含至少一个大写字母和一个数字");
|
|
|
+ }else {
|
|
|
+ // this.invitation = "";
|
|
|
this.logining = true;
|
|
|
this.$queue.showLoading("注册中...");
|
|
|
this.$Request
|
|
|
.post(`/app/Login/registApp`, {
|
|
|
- userName: userName,
|
|
|
+ userName: phone,
|
|
|
password: password,
|
|
|
phone: phone,
|
|
|
openId: this.$queue.getData("openid") ? this.$queue.getData("openid") : "",
|
|
|
- invitation: this.invitation,
|
|
|
+ // invitation: this.invitation,
|
|
|
platform: this.platform,
|
|
|
msg: code,
|
|
|
})
|
|
|
@@ -277,46 +354,47 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
- } else {
|
|
|
- this.logining = true;
|
|
|
- this.$queue.showLoading("注册中...");
|
|
|
- this.$Request
|
|
|
- .post(`/app/Login/registApp?msg=${code}`, {
|
|
|
- userName: userName,
|
|
|
- password: password,
|
|
|
- phone: phone,
|
|
|
- openId: this.$queue.getData("openid") ? this.$queue.getData("openid") : "",
|
|
|
- invitation: this.invitation,
|
|
|
- platform: this.platform,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$queue.setData("token", res.token);
|
|
|
- this.$queue.setData("userId", res.user.userId);
|
|
|
- this.$queue.setData("userName", res.user.userName);
|
|
|
- this.$queue.setData("phone", res.user.phone);
|
|
|
- this.$queue.setData(
|
|
|
- "avatar",
|
|
|
- res.user.avatar ? res.user.avatar : "../../static/logo.png"
|
|
|
- );
|
|
|
- this.$queue.setData("invitationCode", res.user.invitationCode);
|
|
|
- this.$queue.setData("inviterCode", res.user.inviterCode);
|
|
|
- this.getUserInfo();
|
|
|
- setTimeout(function () {
|
|
|
- uni.switchTab({
|
|
|
- url: "/pages/index/index",
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- } else {
|
|
|
- uni.showModal({
|
|
|
- showCancel: false,
|
|
|
- title: "注册失败",
|
|
|
- content: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
- }
|
|
|
+ }
|
|
|
+ // else {
|
|
|
+ // this.logining = true;
|
|
|
+ // this.$queue.showLoading("注册中...");
|
|
|
+ // this.$Request
|
|
|
+ // .post(`/app/Login/registApp?msg=${code}`, {
|
|
|
+ // userName: userName,
|
|
|
+ // password: password,
|
|
|
+ // phone: phone,
|
|
|
+ // openId: this.$queue.getData("openid") ? this.$queue.getData("openid") : "",
|
|
|
+ // invitation: this.invitation,
|
|
|
+ // platform: this.platform,
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // if (res.code === 0) {
|
|
|
+ // this.$queue.setData("token", res.token);
|
|
|
+ // this.$queue.setData("userId", res.user.userId);
|
|
|
+ // this.$queue.setData("userName", res.user.userName);
|
|
|
+ // this.$queue.setData("phone", res.user.phone);
|
|
|
+ // this.$queue.setData(
|
|
|
+ // "avatar",
|
|
|
+ // res.user.avatar ? res.user.avatar : "../../static/logo.png"
|
|
|
+ // );
|
|
|
+ // this.$queue.setData("invitationCode", res.user.invitationCode);
|
|
|
+ // this.$queue.setData("inviterCode", res.user.inviterCode);
|
|
|
+ // this.getUserInfo();
|
|
|
+ // setTimeout(function () {
|
|
|
+ // uni.switchTab({
|
|
|
+ // url: "/pages/index/index",
|
|
|
+ // });
|
|
|
+ // }, 1000);
|
|
|
+ // } else {
|
|
|
+ // uni.showModal({
|
|
|
+ // showCancel: false,
|
|
|
+ // title: "注册失败",
|
|
|
+ // content: res.msg,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // uni.hideLoading();
|
|
|
+ // });
|
|
|
+ // }
|
|
|
},
|
|
|
//获取用户信息
|
|
|
getUserInfo() {
|
|
|
@@ -356,6 +434,13 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+::v-deep .input-placeholder,.uni-input-placeholder {
|
|
|
+ color: #9ea1a8;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
page {
|
|
|
height: 100%;
|
|
|
background: #ffffff !important;
|
|
|
@@ -368,41 +453,75 @@ page {
|
|
|
line-height: 51.2rpx;
|
|
|
letter-spacing: 0px;
|
|
|
text-align: left;
|
|
|
- padding-bottom: 6rpx;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
margin-top: 32rpx;
|
|
|
}
|
|
|
.cu-form-group {
|
|
|
+ position: relative;
|
|
|
box-sizing: border-box;
|
|
|
border: 2rpx solid rgba(158, 161, 168, 1);
|
|
|
border-radius: 24rpx;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
padding: 8rpx 24rpx !important;
|
|
|
+ height: 96rpx;
|
|
|
+}
|
|
|
+.eye{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 24rpx;
|
|
|
+ font-size: 48rpx;
|
|
|
+ transform: translateY(-50%);
|
|
|
+}
|
|
|
+.eye-active{
|
|
|
+ color: #016bf6;
|
|
|
+}
|
|
|
+.line-progress{
|
|
|
+ margin: 32rpx 0;
|
|
|
}
|
|
|
.footer {
|
|
|
- padding-left: 140upx;
|
|
|
- margin-top: 32upx;
|
|
|
+ padding-left: 140rpx;
|
|
|
+ margin-top: 32rpx;
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
// color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
.send-msg {
|
|
|
- border-radius: 30px;
|
|
|
- color: white;
|
|
|
- height: 30px;
|
|
|
- font-size: 10px;
|
|
|
- line-height: 30px;
|
|
|
- background: #016bf6;
|
|
|
+ color: rgba(1, 107, 246, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
- padding-top: 32upx;
|
|
|
+ padding-top: 32rpx;
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
background: #ffffff !important;
|
|
|
}
|
|
|
+.line-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10rpx;
|
|
|
+}
|
|
|
+.line{
|
|
|
+ width: 20px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: rgba(153, 196, 250, 1);
|
|
|
+}
|
|
|
+.line-bg{
|
|
|
+ background-color: #016BF6;
|
|
|
+}
|
|
|
+::v-deep .u-checkbox__label{
|
|
|
+ margin-left: 20rpx;
|
|
|
+ color: rgba(76, 74, 83, 1);
|
|
|
+ font-family: Roboto;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
|
|
|
.wrapper {
|
|
|
position: relative;
|
|
|
@@ -412,21 +531,19 @@ page {
|
|
|
}
|
|
|
|
|
|
.input-content {
|
|
|
- // padding: 32upx 80upx;
|
|
|
padding: 32rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.confirm-btn {
|
|
|
- width: 600upx;
|
|
|
- height: 80upx;
|
|
|
- line-height: 80upx;
|
|
|
- border-radius: 60upx;
|
|
|
- margin-top: 32upx;
|
|
|
+ margin: 0 32rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 60rpx;
|
|
|
background: #016bf6;
|
|
|
-
|
|
|
color: #fff;
|
|
|
- font-size: 32upx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
|
|
|
&:after {
|
|
|
border-radius: 60px;
|