cansnow
143 lines
3.6 KiB
Vue
143 lines
3.6 KiB
Vue
<template>
|
|
<view class="register_container content_with_back">
|
|
<view class="back_icon">
|
|
<u-icon name="arrow-left" bold size="22" @click="back" />
|
|
</view>
|
|
<view class="title" v-if="isRegister">新用户注册</view>
|
|
<view class="title" v-else>忘记密码</view>
|
|
<u-form labelPosition="top" :model="userInfo" :rules="rules" :labelStyle="{
|
|
fontSize: '14px',
|
|
marginTop: '20rpx',
|
|
minWidth: '200rpx',
|
|
}" ref="registerForm">
|
|
<u-form-item prop="email" label="邮箱" v-if="userInfo.type == 'email'">
|
|
<u-input v-model="userInfo.email" border="surround" placeholder="请输入邮箱" clearable>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item prop="phoneNumber" label="手机号码" v-if="userInfo.type == 'mobile'">
|
|
<u-input v-model="userInfo.mobile" border="surround" placeholder="请输入手机号码" clearable>
|
|
<view slot="prefix" class="phoneNumber_areacode" @click="showPicker">
|
|
<text class="areacode_content">+{{ userInfo.region }}</text>
|
|
<u-icon class="arrow_down" name="arrow-down"></u-icon>
|
|
</view>
|
|
</u-input>
|
|
</u-form-item>
|
|
</u-form>
|
|
<view class="action_btn">
|
|
<u-button @click="sendSms" type="primary" :disabled="isRegister && !checked[0]">
|
|
{{ isRegister ? "下一步" : "获取验证码" }}
|
|
</u-button>
|
|
</view>
|
|
<AreaPicker ref="AreaPicker" @chooseArea="chooseArea" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AreaPicker from "@/components/AreaPicker";
|
|
import {
|
|
businessSendSms
|
|
} from "@/api/login";
|
|
import {
|
|
SmsUserFor
|
|
} from "@/constant";
|
|
import {
|
|
checkLoginError
|
|
} from "@/util/common";
|
|
export default {
|
|
components: {
|
|
AreaPicker,
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
mobile: "",
|
|
email: "",
|
|
region: "86",
|
|
invitationCode: "",
|
|
type:'mobile',
|
|
},
|
|
checked: [true],
|
|
rules: {
|
|
mobile: [{
|
|
type: "string",
|
|
required: true,
|
|
message: "请输入手机号码",
|
|
trigger: ["blur", "change"],
|
|
pattern: /^\d{11}$/,
|
|
}, ],
|
|
email: [{
|
|
type: "email",
|
|
required: true,
|
|
message: "请输入邮箱",
|
|
trigger: ["blur", "change"]
|
|
}, ],
|
|
},
|
|
isRegister: true,
|
|
pageStatus: "normal",
|
|
};
|
|
},
|
|
onLoad(param) {
|
|
this.isRegister = JSON.parse(param.isRegister);
|
|
if(process.env.NODE_ENV == 'development'){
|
|
this.userInfo.email = "commiu@outlook.com";
|
|
}
|
|
},
|
|
methods: {
|
|
sendSms() {
|
|
this.$refs.registerForm.validate().then((valid) => {
|
|
const options = {
|
|
mobile: this.userInfo.mobile,
|
|
email: this.userInfo.email,
|
|
region: `+${this.userInfo.region}`,
|
|
event: this.isRegister ? 'register' : "reset_pwd",
|
|
invitationCode: this.userInfo.invitationCode,
|
|
type:this.userInfo.type
|
|
};
|
|
businessSendSms(options)
|
|
.then(() => {
|
|
uni.$u.toast("验证码已发送！");
|
|
setTimeout(
|
|
() =>
|
|
uni.$u.route("/pages/login/verifyCode/index", {
|
|
userInfo: JSON.stringify(this.userInfo),
|
|
isRegister: this.isRegister,
|
|
}),
|
|
1000,
|
|
);
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
uni.$u.toast(checkLoginError(err));
|
|
});
|
|
});
|
|
},
|
|
back() {
|
|
uni.$u.route("/pages/login/index");
|
|
},
|
|
showPicker() {
|
|
this.$refs.AreaPicker.init();
|
|
},
|
|
chooseArea(areaCode) {
|
|
this.userInfo.region = areaCode;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.register_container {
|
|
margin-top: var(--status-bar-height);
|
|
background: linear-gradient(180deg,
|
|
rgba(0, 137, 255, 0.1) 0%,
|
|
rgba(255, 255, 255, 0) 100%);
|
|
|
|
.title {
|
|
font-size: 44rpx;
|
|
font-weight: 600;
|
|
color: $u-primary;
|
|
}
|
|
|
|
.action_btn {
|
|
padding-top: 20vh;
|
|
}
|
|
}
|
|
</style> |