384 lines
8.4 KiB
Vue
384 lines
8.4 KiB
Vue
<template>
|
||
<view class="login_register">
|
||
<view class="nav-bar" style="position: relative;">
|
||
<image style="display: block;width: 100%;height: 100%;" :src="myTopBgSrc"></image>
|
||
</view>
|
||
<view class="handle-area">
|
||
<view class="login-area">
|
||
<form style="display: block;" @submit="formSubmit">
|
||
<view class="login-item">
|
||
<image class="login-icon" src="../../static/login/avatar.png"></image>
|
||
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
|
||
type="text" name="name" v-model="name" placeholder="请输入您的姓名" />
|
||
</view>
|
||
<view class="login-item">
|
||
<image class="login-icon" src="../../static/login/avatar.png"></image>
|
||
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
|
||
type="number" name="phone" v-model="phone" placeholder="请输入您的手机号" />
|
||
</view>
|
||
<view class="login-item">
|
||
<image class="login-icon" src="../../static/login/password.png"></image>
|
||
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
|
||
type="text" name="code" v-model="code" placeholder="请输入验证码" />
|
||
<button class="getMessageCode" @click="getCode">{{codeTips}}</button>
|
||
</view>
|
||
<!-- <u-verification-code seconds="30" ref="uCode" @change="codeChange"></u-verification-code> -->
|
||
<view class="">
|
||
<button type="default" form-type="submit" class="login-btn">注册</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
<view class="privacy">
|
||
<view class="privacyIn">
|
||
<u-checkbox-group>
|
||
<u-checkbox v-model="checkedShow"></u-checkbox>
|
||
</u-checkbox-group>
|
||
<view class="privacyCon">
|
||
我已阅读并同意《<text style="color: #2d8cff;" @click="agreementFn(1)">用户协议</text>》和《<text
|
||
style="color: #2d8cff;" @click="agreementFn(2)">隐私政策</text>》
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-popup v-model="agreement" mode='center' :mask='true' border-radius='20' width='85%' height='75%'
|
||
:closeable='true'>
|
||
<view style="padding: 30upx;" v-html="content">{{content}}</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
var that;
|
||
export default {
|
||
data() {
|
||
return {
|
||
agreement: false,
|
||
checkedShow: true,
|
||
name: '',
|
||
phone: '',
|
||
message: '',
|
||
code: "",
|
||
myTopBgSrc: require("../../static/login/my-bg.jpg"),
|
||
codeTips: "获取验证码",
|
||
type:'',
|
||
content:''
|
||
}
|
||
},
|
||
onLoad(params) {
|
||
this.type = params.type;
|
||
},
|
||
methods: {
|
||
//检查form表单是否填写完整
|
||
checkedParams(obj) {
|
||
let that =this;
|
||
if (obj.name == "" || obj.name == undefined || obj.name == null) {
|
||
myShowToast('用户名不能为空');
|
||
return false;
|
||
};
|
||
if (obj.phone == "" || obj.phone == undefined || obj.phone == null) {
|
||
myShowToast('手机号不能为空');
|
||
return false;
|
||
};
|
||
if (obj.code == "" || obj.code == undefined || obj.code == null) {
|
||
myShowToast('验证码不能为空');
|
||
return false;
|
||
};
|
||
if (that.checkedShow == false) {
|
||
myShowToast('请勾选用户协议和隐私政策');
|
||
return false;
|
||
}
|
||
|
||
function myShowToast(text) {
|
||
uni.showToast({
|
||
title: text,
|
||
icon: 'none'
|
||
})
|
||
};
|
||
return true;
|
||
},
|
||
formSubmit(e) {
|
||
uni.showLoading({
|
||
title: '提交中'
|
||
});
|
||
var that = this;
|
||
let obj = e.target.value;
|
||
obj.type= that.type;
|
||
if (!that.checkedParams(obj)) return;
|
||
that.$u.api.visitorRegister(obj).then(res => {
|
||
uni.hideLoading();
|
||
if(res.err_msg){
|
||
this.$u.toast(res.err_msg);
|
||
}else{
|
||
uni.reLaunch({
|
||
url: '/pages/login/login_'
|
||
})
|
||
}
|
||
|
||
}).catch(e => {
|
||
console.log(e)
|
||
uni.showToast({
|
||
title: e.err_msg,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
|
||
},
|
||
ranStr(e) {
|
||
//形参e,需要产生随机字符串的长度
|
||
//如果没有传参，默认生成32位长度随机字符串
|
||
e = e || 32;
|
||
//模拟随机字符串库
|
||
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
|
||
a = t.length,//字符串t的长度，随机数生成最大值
|
||
n = "";
|
||
for (let i = 0; i < e; i++) {
|
||
//随机生成长度为e的随机字符串拼接
|
||
n += t.charAt(Math.floor(Math.random() * a));
|
||
}
|
||
//返回随机组合字符串
|
||
return n
|
||
},
|
||
codeChange(text) {
|
||
this.codeTips = text;
|
||
},
|
||
// 获取验证码
|
||
getCode(e) {
|
||
debugger;
|
||
console.log(this.phone);
|
||
if (this.phone !== '') {
|
||
uni.showLoading({
|
||
title: '正在获取验证码',
|
||
mask: true
|
||
})
|
||
this.$u.api.getCode({
|
||
phone: this.phone
|
||
}).then(res => {
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
})
|
||
} else {
|
||
// this.$u.toast('倒计时结束后再发送');
|
||
this.$u.toast('请输入手机号');
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.privacy {
|
||
width: 100%;
|
||
height: 40upx;
|
||
padding: 0 40upx;
|
||
margin-bottom: 25upx;
|
||
position: fixed;
|
||
bottom: 20upx;
|
||
.privacyIn {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.privacyCon {
|
||
font-size: 26upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wxBig {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 100upx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
|
||
.Wxtitle {
|
||
text-align: center;
|
||
width: 100%;
|
||
padding: 0 50upx;
|
||
|
||
.WxtitleIn {
|
||
width: 100%;
|
||
font-size: 26upx;
|
||
color: #808080;
|
||
position: relative;
|
||
}
|
||
|
||
.WxtitleIn::after {
|
||
content: '';
|
||
width: 217upx;
|
||
height: 2upx;
|
||
background-color: #f6f6f6;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 18upx;
|
||
}
|
||
|
||
.WxtitleIn::before {
|
||
content: '';
|
||
width: 217upx;
|
||
height: 2upx;
|
||
background-color: #f6f6f6;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 18upx;
|
||
}
|
||
}
|
||
|
||
.wx {
|
||
width: 70upx;
|
||
height: 70upx;
|
||
margin-top: 50upx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.login_register {
|
||
position: relative;
|
||
background-color: #f3fbff;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.nav-bar {
|
||
height: 494upx;
|
||
background-color: #2cade8;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.handle-area {
|
||
width: 705upx;
|
||
height: auto;
|
||
background-color: #FFFFFF;
|
||
border-radius: 10upx;
|
||
position: absolute;
|
||
top: 360upx;
|
||
left: 50%;
|
||
padding-bottom: 80upx;
|
||
transform: translateX(-50%);
|
||
box-shadow: 0px 5px 9px 5px rgba(141, 169, 185, 0.3);
|
||
}
|
||
.login-area{
|
||
padding-top: 80upx;
|
||
}
|
||
.login-item {
|
||
width: 635upx;
|
||
height: 88upx;
|
||
border-radius: 88upx;
|
||
margin: 0 auto;
|
||
background-color: #ebf6ff;
|
||
padding-left: 72upx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin-bottom: 56upx;
|
||
}
|
||
|
||
.loginItemInput {
|
||
border-radius: 0 88upx 88upx 0;
|
||
}
|
||
|
||
.code-img-item {
|
||
padding-left: 72upx;
|
||
}
|
||
|
||
.login-item .login-icon {
|
||
width: 22upx;
|
||
height: 28upx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 35upx;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.login-item input {
|
||
height: 100%;
|
||
line-height: 88upx;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 26upx;
|
||
}
|
||
|
||
.my-code-input {
|
||
width: 300upx;
|
||
}
|
||
|
||
.code-img {
|
||
width: 155upx;
|
||
height: 53upx;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 20upx;
|
||
transform: translateY(-50%);
|
||
background-color: #EEEEEE;
|
||
}
|
||
|
||
.getMessageCode {
|
||
width: fit-content;
|
||
position: absolute;
|
||
top: 10%;
|
||
right: 20upx;
|
||
height: 80%;
|
||
color: #ffffff;
|
||
font-size: 26upx;
|
||
border-color: #19be6b;
|
||
background-color: #19be6b;
|
||
z-index: 100;
|
||
border-radius: 36upx !important;
|
||
}
|
||
|
||
.login-btn,
|
||
.register-btn {
|
||
width: 635upx;
|
||
height: 88upx;
|
||
border-radius: 88upx;
|
||
margin: 0 auto;
|
||
background-color: #1d7ef3;
|
||
font-family: AdobeHeitiStd-Regular;
|
||
font-size: 30upx;
|
||
line-height: 88upx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.to-login {
|
||
font-family: AdobeHeitiStd-Regular;
|
||
font-size: 24upx;
|
||
line-height: 72upx;
|
||
color: #2c6fd9 !important;
|
||
border: none !important;
|
||
margin-top: 20upx;
|
||
}
|
||
|
||
.code-item {
|
||
position: relative;
|
||
}
|
||
|
||
.my-code {
|
||
width: 376upx;
|
||
}
|
||
|
||
.code {
|
||
width: 155upx;
|
||
height: 53upx;
|
||
background-color: #0075ff;
|
||
border-radius: 27upx;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 20upx !important;
|
||
line-height: 53upx;
|
||
color: #fefeff;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 20upx;
|
||
transform: translateY(-50%);
|
||
padding-left: 12upx;
|
||
padding-right: 12upx;
|
||
}
|
||
</style>
|