注册
注册模块的接口 api
//获取验证码
//URL:/api/user/passport/sendCode/{phone} method:get
export const reqGetCode = (phone) =>
requests({ url: `/user/passport/sendCode/${phone}`, method: "get" });
//注册
//url:/api/user/passport/register method:post phone code password
export const reqUserRegister = (data) =>
requests({ url: "/user/passport/register", data, method: "post" });
注册 模块的vue文件
<template>
<div class="register-container">
<!-- 注册内容 -->
<div class="register">
<h3>
注册新用户
<span class="go"
>我有账号,去 <a href="login.html" target="_blank">登陆</a>
</span>
</h3>
<div class="content">
<label>手机号:</label>
<input type="text" placeholder="请输入你的手机号" v-model="phone" />
<span class="error-msg">错误提示信息</span>
</div>
<div class="content">
<label>验证码:</label>
<input type="text" placeholder="请输入验证码" v-model="code" />
<button style="width: 100px; height: 38px" @click="getCode">
获取验证码
</button>
<span class="error-msg">错误提示信息</span>
</div>
<div class="content">
<label>登录密码:</label>
<input
type="text"
placeholder="请输入你的登录密码"
v-model="password"
/>
<span class="error-msg">错误提示信息</span>
</div>
<div class="content">
<label>确认密码:</label>
<input type="text" placeholder="请输入确认密码" v-model="password1" />
<span class="error-msg">错误提示信息</span>
</div>
<div class="controls">
<input name="m1" type="checkbox" :checked="agree" />
<span>同意协议并注册《尚品汇用户协议》</span>
<span class="error-msg">错误提示信息</span>
</div>
<div class="btn">
<button @click="userRegister">完成注册</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Register",
data() {
return {
// 收集表单数据--手机号
phone: "",
//验证码
code: "",
//密码
password: "",
//确认密码
password1: "",
//是否同意
agree: true,
};
},
methods: {
//获取验证码
async getCode() {
//const { phone } = this-------const phone = this.phone
try {
const { phone } = this;
// 有phone的数据 才会派发action
//等待结果要用await async
phone && (await this.$store.dispatch("getCode", phone));
} catch (error) {}
},
//用户注册
async userRegister() {
try {
//如果成功路由跳转
const {phone,code, password,password1} =this;
//发请求之前判断条件都有
//等待成功
phone&&code&&password==password1 &&await this.$store.dispatch("userRegister",{phone,code, password})
this.$router.push("/login")
} catch (error) {
alert(error.message);
}
},
},
};
</script>
<style lang="less" scoped>
.register-container {
.register {
width: 1200px;
height: 445px;
border: 1px solid rgb(223, 223, 223);
margin: 0 auto;
h3 {
background: #ececec;
margin: 0;
padding: 6px 15px;
color: #333;
border-bottom: 1px solid #dfdfdf;
font-size: 20.04px;
line-height: 30.06px;
span {
font-size: 14px;
float: right;
a {
color: #e1251b;
}
}
}
div:nth-of-type(1) {
margin-top: 40px;
}
.content {
padding-left: 390px;
margin-bottom: 18px;
position: relative;
label {
font-size: 14px;
width: 96px;
text-align: right;
display: inline-block;
}
input {
width: 27