jiuyiUniapp/jiuyi2/pages/login/register.vue

157 lines
3.4 KiB
Vue

<script setup>
/**
* 注册账号
*/
import {
ref,
reactive,
} from 'vue'
// 获取验证码
import getCode from '@/components/getCode/getCode.vue'
// 须知
import notice from '@/components/login/notice'
// api
import api from '@/api/index'
// 工具库
import util from '@/common/js/util.js'
// 加密
import CryptoJS from 'crypto-js';
// 显示密码
const showPwd = ref(false)
// 表单
const form = reactive({
// 手机号
phoneNumber: '',
// 密码
password: '',
// 邀请码
invitationCode: '',
// 验证码
verifyCode: '',
})
// 是否阅读
const read = ref(false)
// 登录
function handleLogin() {
const data = {
...form
}
// 校验
if (!data.phoneNumber) {
util.alert('请输入手机号')
return
}
if (!data.verifyCode) {
util.alert('请输入验证码')
return
}
if (!data.password) {
util.alert('请输入密码')
return
}
if (!read.value) {
util.alert('请阅读并勾选服务协议》和《隐私政策》')
return
}
data.password = CryptoJS.MD5(data.password).toString();
// 如果imei为空
if (!data.userImei) {
const info = uni.getSystemInfoSync()
//
data.userImei = info.deviceId
}
//
api.login.userRegister({
data: data,
}).then(rs => {
if (rs.code == 200) {
util.finalLogin(rs)
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
</script>
<template>
<view class="appbw">
<view class="container">
<view class="logo mauto">
<image class="logo br10" src="/static/logo.png" mode="aspectFit" />
</view>
<view class="form mt60 mlr60 mb30">
<view class="title mtb30">新用户注册</view>
<view class="inputBox mtb30 ptb10 plr30">
<input type="text" v-model="form.phoneNumber" placeholder="请输入手机号" />
</view>
<view class="rows mtb30">
<view class="inputBox f1 ptb10 plr30">
<input type="text" v-model="form.verifyCode" placeholder="请输入验证码" class="f1" />
</view>
<view class="getCode btn sm ml20 plr20">
<getCode :phone="form.phoneNumber" />
</view>
</view>
<view class="inputBox rows mtb20 ptb10 plr30">
<template v-if="showPwd">
<input v-model="form.password" placeholder="请输入密码" />
</template>
<template v-else>
<input :password="true" v-model="form.password" placeholder="请输入密码" />
</template>
<uni-icons :type="showPwd ? 'eye' : 'eye-slash'" color="#999" size="40rpx"
@click="showPwd = !showPwd" />
</view>
<view class="rows mtb30">
<view class="inputBox f1 ptb10 plr30">
<input type="text" v-model="form.invitationCode" placeholder="请输入推荐码" />
</view>
<view class="f1"></view>
</view>
<view class="rows c333 f24">
<navigator url="/pages/login/loginPhone" open-type="redirect">已有账号,去登录</navigator>
<navigator url="/pages/login/forget" open-type="redirect">忘记密码</navigator>
</view>
<view class="btn lg bar black mtb30" @click="handleLogin">登录</view>
</view>
</view>
<view class="footer">
<notice class="mb60" v-model:value="read" />
</view>
</view>
</template>
<style lang="scss">
//
.container {
margin-top: 15vh;
// 标志
.logo {
width: 200rpx;
height: 200rpx;
}
}
// 获取验证码
.getCode {
color: #666;
background-color: #fff;
}
</style>