322 lines
8.8 KiB
Vue
322 lines
8.8 KiB
Vue
<template>
|
||
<view>
|
||
<view class="logo">
|
||
<view class="img">
|
||
<image mode="widthFix" src="../../static/img/cycLogoImg.jpg"></image>
|
||
</view>
|
||
</view>
|
||
<view class="form re">
|
||
<view class="username">
|
||
<input placeholder="请输入用户账号(登录账号)" v-model="userName" @blur="nameSearch" @input="nameSearch" placeholder-style="color: rgba(255,255,255,0.8);"/>
|
||
<text v-if="!unique" class="nameAlready">用户名已存在</text>
|
||
</view>
|
||
<view class="username">
|
||
<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
|
||
<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);"/>
|
||
</view>
|
||
<view class="code">
|
||
<input placeholder="请输入验证码" v-model="code" placeholder-style="color: rgba(255,255,255,0.8);"/>
|
||
</view>
|
||
<view class="password">
|
||
<input placeholder="请输入密码(登录密码)" v-model="password" password=true placeholder-style="color: rgba(255,255,255,0.8);"/>
|
||
</view>
|
||
<view class="btn" @tap="doReg">立即注册</view>
|
||
<view class="res">
|
||
<view @tap="toLogin">已有账号立即登录</view>
|
||
</view>
|
||
<view class="wechartRegister">
|
||
<button id="wxRegister" open-type="getUserInfo" @getuserinfo="weChartReg">
|
||
<image src="../../static/img/share/wechart.png" class="wechartRegisterImg"></image>
|
||
</button>
|
||
|
||
<view class="wechartRegisterText">微信一键注册</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import md5 from "@/common/SDK/md5.min.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
phoneNumber:"",
|
||
userName:"",
|
||
code:'',
|
||
password:"",
|
||
getCodeText:'获取验证码',
|
||
getCodeBtnColor:"#ffffff",
|
||
getCodeisWaiting:false,
|
||
unique:true,
|
||
nickname:'',
|
||
code:''
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
Timer(){},
|
||
//获取验证码
|
||
getCode(){
|
||
uni.hideKeyboard()
|
||
if(this.getCodeisWaiting){
|
||
return ;
|
||
}
|
||
if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){
|
||
uni.showToast({title: '请填写正确手机号码',icon:"none"});
|
||
return false;
|
||
}
|
||
this.getCodeText = "发送中..."
|
||
this.getCodeisWaiting = true;
|
||
this.getCodeBtnColor = "rgba(255,255,255,0.5)"
|
||
//示例用定时器模拟请求效果
|
||
setTimeout(()=>{
|
||
uni.showToast({title: '验证码已发送',icon:"none"});
|
||
//示例默认1234，生产中请删除这一句。
|
||
// this.code=1234;
|
||
this.$u.api.getCode(this.phoneNumber).then(res=>{
|
||
debugger;
|
||
if(res.code===0){}else{}
|
||
})
|
||
this.setTimer();
|
||
},1000)
|
||
},
|
||
//定时器
|
||
setTimer(){
|
||
let holdTime = 60;
|
||
this.getCodeText = "重新获取(60)"
|
||
this.Timer = setInterval(()=>{
|
||
if(holdTime<=0){
|
||
this.getCodeisWaiting = false;
|
||
this.getCodeBtnColor = "#ffffff";
|
||
this.getCodeText = "获取验证码"
|
||
clearInterval(this.Timer);
|
||
return ;
|
||
}
|
||
this.getCodeText = "重新获取("+holdTime+")"
|
||
holdTime--;
|
||
|
||
},1000)
|
||
},
|
||
//验证用户名
|
||
nameSearch(){
|
||
let params = {username:this.userName};
|
||
this.$u.api.checkUserName(params).then(res=>{
|
||
if(res.code===0){
|
||
if(res.data==='true'){
|
||
this.unique = false;
|
||
}else{
|
||
this.unique = true;
|
||
}
|
||
debugger;
|
||
console.log(res)
|
||
}else{}
|
||
})
|
||
},
|
||
//微信一键注册
|
||
weChartReg(){
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '亲，授权微信登录后才能正常使用小程序功能',
|
||
success(modelRes) {
|
||
//如果用户点击了确定按钮
|
||
if (modelRes.confirm) {
|
||
uni.getUserProfile({
|
||
desc: '获取你的昵称',
|
||
success: profileRes => {
|
||
that.nickName = profileRes.userInfo.nickName;
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function (wxLoginRes) {
|
||
debugger;
|
||
console.log(wxLoginRes.code)
|
||
that.code = wxLoginRes.code;
|
||
let params = {nickname:that.nickName,code:wxLoginRes.code};
|
||
that.$u.api.wxReg(params).then(wxRegRes=>{
|
||
uni.hideLoading();
|
||
if(wxRegRes.code==0){
|
||
uni.showToast({
|
||
title: '注册成功',
|
||
icon: "success"
|
||
});
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function (ress) {
|
||
that.$u.api.login({
|
||
code: ress.code
|
||
}).then(
|
||
res => {
|
||
that.$u.vuex('vuex_token', res.data.token)
|
||
that.$u.api.getInfo().then(res => {
|
||
that.$u.vuex('vuex_user', res.data)
|
||
if(res.data.icon===""){
|
||
that.$u.vuex('vuex_user.icon', '/static/img/face.jpg')
|
||
}else{
|
||
that.$u.vuex('vuex_user.icon', that.vuex_host + 'public/' + res.data.icon)
|
||
}
|
||
uni.reLaunch({
|
||
url:'/pages/tabBar/home/home'
|
||
})
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
).catch(res=>{
|
||
uni.redirectTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
})
|
||
},
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: infoRes.data.msg,
|
||
icon:'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
})
|
||
},
|
||
fail: res => {
|
||
console.log(2);
|
||
console.log(res)
|
||
//拒绝授权
|
||
uni.showToast({
|
||
title: '您拒绝了请求,不能正常使用小程序',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
});
|
||
} else if (res.cancel) {
|
||
//如果用户点击了取消按钮
|
||
console.log(3);
|
||
uni.showToast({
|
||
title: '您拒绝了请求,不能正常使用小程序',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//注册
|
||
doReg(){
|
||
let that = this;
|
||
if(that.unique){
|
||
uni.hideKeyboard()
|
||
//模板示例部分验证规则
|
||
if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phoneNumber))){
|
||
uni.showToast({title: '请填写正确手机号码',icon:"none"});
|
||
return false;
|
||
}
|
||
uni.showLoading({
|
||
title: '提交中...'
|
||
})
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function (wxLoginRes) {
|
||
let params = {username:that.userName,mobphone:that.phoneNumber,code:wxLoginRes.code,phone_code:that.code,password:that.password};
|
||
that.$u.api.register(params).then(registerRes=>{
|
||
uni.hideLoading();
|
||
debugger;
|
||
if(registerRes.code===0){
|
||
that.toLogin();
|
||
}else{}
|
||
})
|
||
},
|
||
})
|
||
|
||
}else{
|
||
uni.showToast({title: '用户名已存在，请重新选择用户名',icon:"none"});
|
||
}
|
||
//模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
|
||
// setTimeout(()=>{
|
||
// uni.getStorage({
|
||
// key: 'UserList',
|
||
// success:(res)=>{
|
||
// //增加记录，密码md5
|
||
// res.data.push({username:this.phoneNumber,password:md5(this.password)})
|
||
// uni.setStorage({
|
||
// key: 'UserList',
|
||
// data: res.data,
|
||
// success: function () {
|
||
// uni.hideLoading()
|
||
// uni.showToast({title: '注册成功',icon:"success"});
|
||
// setTimeout(function(){
|
||
// uni.navigateBack();
|
||
// },1000)
|
||
// }
|
||
// });
|
||
// },
|
||
// fail:(e)=>{
|
||
// uni.hideLoading()
|
||
// console.log('error');
|
||
// //新建UserList
|
||
// uni.setStorage({
|
||
// key: 'UserList',
|
||
// data: [{username:this.phoneNumber,password:md5(this.password)}],
|
||
// success: function () {
|
||
// uni.hideLoading()
|
||
// uni.showToast({title: '注册成功',icon:"success"});
|
||
// setTimeout(function(){
|
||
// uni.navigateBack();
|
||
// },1000)
|
||
// },
|
||
// fail:function(e){
|
||
// console.log('set error:'+JSON.stringify(e));
|
||
// }
|
||
// });
|
||
// }
|
||
// });
|
||
// },1000)
|
||
//
|
||
},
|
||
weChartRegister(){
|
||
|
||
},
|
||
toLogin(){
|
||
uni.hideKeyboard()
|
||
uni.redirectTo({url: 'login'});
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../../static/css/login.scss";
|
||
.nameAlready{
|
||
font-size: 20rpx;
|
||
width: 170rpx;
|
||
color: #ff0000;
|
||
text-decoration: underline;
|
||
}
|
||
.wechartRegister{
|
||
text-align: center;
|
||
}
|
||
.wechartRegisterImg{
|
||
width: 100upx;
|
||
height: 100upx;
|
||
margin-top: 30upx;
|
||
}
|
||
.wechartRegisterText{
|
||
font-size: 22upx;
|
||
color: #ffffff;
|
||
}
|
||
#wxRegister{
|
||
background-color: #01a5e4 ;
|
||
height: max-content;
|
||
padding: 0;
|
||
border: none;
|
||
// line-height: 0;
|
||
}
|
||
#wxRegister::after{
|
||
border: none;
|
||
}
|
||
</style>
|