391 lines
11 KiB
Vue
391 lines
11 KiB
Vue
<template>
|
||
<!-- 登录 页面 -->
|
||
<view class="content h-100">
|
||
<view class="banner">
|
||
<!-- <image src="../../static/my/left.png" mode="" class="back" @click="goBack()"></image> -->
|
||
<view v-if="login_flag" class="page_title text-center x-text-white" >登录</view>
|
||
<view v-if="!login_flag" class="page_title text-center x-text-white">注册</view>
|
||
</view>
|
||
<view class="my_form padding-zy64">
|
||
<view class="my_form_menu d-flex">
|
||
<view class="menu_items" @click="chooseMenu(index)" :class="{menu_active: menu_index==index}" v-for="(item,index) of form_menu" :key='index'>{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 登录表单 -->
|
||
<view class="uni-common-mt my_input" v-if="menu_index==0">
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
|
||
<image src="../../static/my/phone.png" mode="" class="w-36 h-41"></image>
|
||
<input class="uni-input h-100 flex-1" type="text" cursor-spacing="20" focus placeholder="请输入手机号" v-model="phone"/>
|
||
</view>
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
|
||
<image src="../../static/my/suo.png" mode="" class="w-36 h-41"></image>
|
||
<input class="uni-input flex-1 mima" cursor-spacing="20" :type="is_type" placeholder="请输入密码" v-model="password"/>
|
||
<image src="../../static/my/bukan.png" mode="" class="is_seen" v-if="seen==false" @tap='change_seen()'></image>
|
||
<image src="../../static/my/kan.png" mode="" class="is_seen1" v-if="seen==true" @tap='change_seen()'></image>
|
||
</view>
|
||
<button class="public_blue_btn login" @click="toLogin()">登录</button>
|
||
<text class="forget_password" @click="forget_password()">忘记密码?</text>
|
||
</view>
|
||
<!-- 注册表单 -->
|
||
<view class="uni-common-mt my_input" v-if="menu_index==1">
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
|
||
<image src="../../static/my/phone.png" mode="" class="w-36 h-41"></image>
|
||
<input class="uni-input h-100 flex-1" type="number" focus placeholder="请输入手机号" v-model="phone"/>
|
||
</view>
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
|
||
<image src="../../static/my/loginadd.png" mode="" class="w-36 h-41"></image>
|
||
<input class="uni-input flex-1" type="number" placeholder="验证码" v-model="code" />
|
||
<view class="get_code x-text-red x-text-font24 text-right" v-if="get_code==false" @click="getCode()">获取验证码</view>
|
||
<view class="get_code x-text-red x-text-font24 w-50 text-right" v-else>{{count_time}}s后再次获取验证码</view>
|
||
</view>
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center j-sb">
|
||
<image src="../../static/my/suo.png" mode="" class="w-36 h-41"></image>
|
||
<input class="uni-input flex-1" :type="is_RseenType" placeholder="请设置密码" v-model="new_password" />
|
||
<image src="../../static/my/bukan.png" mode="" class="is_seen" v-if="Rseen==false" @tap='change_Rseen()'></image>
|
||
<image src="../../static/my/kan.png" mode="" class="is_seen1" v-if="Rseen==true" @tap='change_Rseen()'></image>
|
||
</view>
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center j-sb">
|
||
<image src="../../static/my/suo.png" mode="" class="w-36 h-41"></image>
|
||
<input class="uni-input flex-1" :type="is_rseenType" placeholder="确认密码" v-model="sure_password" />
|
||
<image src="../../static/my/bukan.png" mode="" class="is_seen" v-if="rseen==false" @tap='change_rseen()'></image>
|
||
<image src="../../static/my/kan.png" mode="" class="is_seen1" v-if="rseen==true" @tap='change_rseen()'></image>
|
||
</view>
|
||
<!-- <view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
|
||
<image src="../../static/my/phone.png" mode="" class="w-36 h-41"></image>
|
||
<input class="uni-input h-100 flex-1" type="number" focus placeholder="客服编号(选填)" v-model="kefu_num"/>
|
||
</view> -->
|
||
<button class="public_blue_btn login" @click="the_register()">注册</button>
|
||
<view class="agree d-flex">
|
||
<view>点击“注册”即表示您已阅读并同意</view>
|
||
<view class="x-text-red" @tap='look_Explain()'>《医点医滴会员服务协议》</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import verification from '../../common/verification.js' //正则验证
|
||
import public_function from '../../common/public_function.js' //公用方法
|
||
import X_login from '../../utils/models/x_login.js'
|
||
import {http_use,http_post} from '../../utils/http.js'
|
||
import {Config} from '../../utils/config.js'
|
||
import md5 from '../../common/ossutil/md5.min.js'
|
||
let Base64 = require('../../common/ossutil/base64.js');
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
seen:false,
|
||
Rseen:false,
|
||
rseen:false,
|
||
login_flag:true,
|
||
is_type:'password',
|
||
is_RseenType:'password',
|
||
is_rseenType:'password',
|
||
Base64:'',
|
||
phone:'',
|
||
password:'',
|
||
form_menu:[{
|
||
name:'登录',
|
||
id:0
|
||
},{
|
||
name:'注册',
|
||
id:1
|
||
}],
|
||
menu_index:0,
|
||
get_code: false, //判断是否点击了“获取验证码”按钮 是：true ； 否：false
|
||
code: '', // 验证码
|
||
new_password: '',
|
||
sure_password: '',
|
||
count_time: 60,
|
||
now_time:'',// 当前时间戳
|
||
is_sign:'' //签名
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
this.Base64 = Base64;
|
||
|
||
},
|
||
methods: {
|
||
// look_Explain
|
||
look_Explain(){
|
||
uni.navigateTo({
|
||
url:'./explain'
|
||
})
|
||
},
|
||
// 返回
|
||
goBack(){
|
||
uni.switchTab({
|
||
url: '/pages/home/home'
|
||
});
|
||
},
|
||
change_rseen(){
|
||
this.rseen = !this.rseen
|
||
|
||
if(this.rseen == true){
|
||
this.is_rseenType = 'text'
|
||
|
||
}else{
|
||
this.is_rseenType = 'password'
|
||
|
||
}
|
||
},
|
||
change_Rseen(){
|
||
this.Rseen = !this.Rseen
|
||
|
||
if(this.Rseen == true){
|
||
this.is_RseenType = 'text'
|
||
|
||
}else{
|
||
this.is_RseenType = 'password'
|
||
|
||
}
|
||
},
|
||
// 密码内容是否可见
|
||
change_seen(){
|
||
this.seen = !this.seen
|
||
if(this.seen == true){
|
||
this.is_type = 'text'
|
||
|
||
}else{
|
||
this.is_type = 'password'
|
||
|
||
}
|
||
},
|
||
// 注册
|
||
async the_register(){
|
||
verification.isNull(this.phone, this.code, this.new_password, this.sure_password) // 非空验证
|
||
if (verification.isNull.prototype.the_Null == true) {
|
||
verification.isPhone(this.phone); // 手机号格式验证
|
||
}
|
||
if (verification.isPhone.prototype.the_isPhone == true) {
|
||
verification.isSamePsd(this.new_password, this.sure_password); // 两次密码是否相同
|
||
}
|
||
if(this.new_password.length<6){
|
||
uni.showToast({
|
||
title: '请输入至少6位密码',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
if (
|
||
verification.isNull.prototype.the_Null == true &&
|
||
verification.isPhone.prototype.the_isPhone == true &&
|
||
verification.isSamePsd.prototype.the_isSamePsd == true &&
|
||
this.new_password.length>=6
|
||
) {
|
||
|
||
|
||
|
||
let res = await X_login.x_register(this.phone, this.code,this.new_password)
|
||
if(res.code ==200){
|
||
uni.showToast({
|
||
title: res.message,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
this.password = this.new_password
|
||
|
||
|
||
this.toLogin();
|
||
// setTimeout(function() {
|
||
// this.menu_index = 0
|
||
// }, 1000);
|
||
}
|
||
this.handleError(res, res => {
|
||
|
||
|
||
})
|
||
return
|
||
uni.navigateTo({
|
||
url: 'authentication'
|
||
});
|
||
}
|
||
},
|
||
// 获取验证码
|
||
async getCode() {
|
||
verification.isPhone(this.phone);
|
||
if(verification.isPhone.prototype.the_isPhone == true){
|
||
let res = await X_login.phonecode_app(this.phone, this.code,1)
|
||
if(res.data.errcode==-1){
|
||
uni.showToast({
|
||
title: res.data.errmsg,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}else{
|
||
this.get_code = !this.get_code
|
||
this.timer();
|
||
}
|
||
this.handleError(res, res => {
|
||
|
||
})
|
||
}
|
||
},
|
||
// 验证码计时器
|
||
timer() {
|
||
if (this.count_time > 0) {
|
||
this.count_time--;
|
||
this.get_code = true
|
||
setTimeout(this.timer, 1000);
|
||
} else {
|
||
this.count_time = 60;
|
||
this.get_code = false
|
||
|
||
}
|
||
},
|
||
// 选择菜单（登录或者注册）
|
||
chooseMenu(index){
|
||
// 解决登录 或 注册 重复点击标题切换
|
||
if (this.menu_index != index){
|
||
this.menu_index = index;
|
||
this.login_flag = !this.login_flag
|
||
}
|
||
},
|
||
// 登录
|
||
async toLogin(){
|
||
verification.isNull(this.phone, this.password) // 非空验证
|
||
if (verification.isNull.prototype.the_Null == true) {
|
||
verification.isUniCode(this.phone); // 判断是否出现汉字
|
||
}
|
||
if(this.password.length<6){
|
||
uni.showToast({
|
||
title: '请输入至少6位密码',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
if (
|
||
verification.isNull.prototype.the_Null == true &&
|
||
verification.isUniCode.prototype.the_isUniCode == true &&
|
||
this.password.length>=6
|
||
) {
|
||
this.now_time = (Date.parse(new Date()))/1000; //获取当前时间戳
|
||
this.is_sign = md5('123456' + 'test' + this.phone + md5(this.password) + this.now_time) //签名
|
||
let res = await X_login.login(this.phone, this.password,'test',this.now_time,this.is_sign)
|
||
this.handleError(res, res => {
|
||
uni.showToast({
|
||
title: res.message,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
|
||
Config.appid = res.data.client.appid; // appid
|
||
Config.uid = res.data.client.id; // uid
|
||
Config.access_token = res.data.access_token; // access_token
|
||
Config.refresh_token = res.data.refresh_token; // refresh_token
|
||
// 使用base64把字符串加密
|
||
Config.authentication = "USERID " + Base64.encode(Config.appid + '-' + Config.uid + '-' + Config.access_token + '-' + Config.refresh_token);
|
||
|
||
uni.setStorage({
|
||
key: 'isAuthentication',
|
||
data: Config.authentication,
|
||
success: function () {
|
||
|
||
}
|
||
});
|
||
|
||
setTimeout(function() {
|
||
uni.switchTab({
|
||
url: '../home/home'
|
||
})
|
||
}, 500);
|
||
})
|
||
}
|
||
},
|
||
// 忘记密码
|
||
forget_password(){
|
||
uni.navigateTo({
|
||
url: 'x_reset_assword'
|
||
});
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
.banner{
|
||
height:404upx;
|
||
padding-top:60upx;
|
||
position: relative;
|
||
background-image: url(../../static/my/login.png);
|
||
background-position: 100% 100%;
|
||
background-size: cover;
|
||
border:none;
|
||
outline: none;
|
||
.page_title{
|
||
font-size: 32upx;
|
||
}
|
||
.back{
|
||
position: absolute;
|
||
top:100upx;
|
||
left:33upx;
|
||
height:31upx;
|
||
width:19upx;
|
||
}
|
||
}
|
||
.login{
|
||
margin-top:60upx;
|
||
}
|
||
.my_form{
|
||
.my_form_menu{
|
||
.menu_items{
|
||
margin-right:44upx;
|
||
}
|
||
}
|
||
.menu_active{
|
||
color: #282828;
|
||
font-size: 32upx;
|
||
border-bottom:4upx solid #6B68DC;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.my_input{
|
||
padding:100upx 64upx;
|
||
.two_input{
|
||
border-bottom:1upx solid #F2F2F2;
|
||
height:100upx;
|
||
.uni-input{
|
||
border:none;
|
||
outline: none;
|
||
padding-left:20upx;
|
||
|
||
}
|
||
.is_seen{
|
||
|
||
height:20upx;
|
||
width:47upx;
|
||
}
|
||
.is_seen1{
|
||
|
||
height:30upx;
|
||
width:47upx;
|
||
}
|
||
}
|
||
}
|
||
.forget_password{
|
||
display: inline-block;
|
||
margin:15upx 0;
|
||
color: #6B6AD5;
|
||
border-bottom: 1upx solid #6B6AD5;
|
||
}
|
||
.agree {
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
white-space: normal !important;
|
||
text-overflow: ellipsis;
|
||
word-wrap: break-word;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical
|
||
}
|
||
}
|
||
</style>
|