Skip to content

肖康 / H5_2.0

Go to a project
Commit 60681abc by LJM
Options

登录注册

parent d8bebc8f
Inline Side-by-side
Showing with 145 additions and 29 deletions
assets/css/mine/login.scss
.page-login {
height: 100vh;
background-color: #ffffff;
padding: 22rpx 60rpx 0 60rpx;
background: linear-gradient(200deg, #d6e8ff 0%, #ffffff 277px);
.icon-xxx {
......@@ -84,6 +86,9 @@
.code {
font-size: 26rpx;
color: #1969f9;
&.disabled {
color: #919399;
}
}
}
&.pwd {
......
pages/mine/login.vue
......@@ -20,11 +20,15 @@
</view>
</picker>
</view>
<input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" />
<input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" v-model="formParams.account" />
</view>
<view class="input-box verification-code row bothSide verCenter" style="margin-bottom: 24rpx;" v-if="verify_flag">
<input type="text" placeholder="请输入图中字符，不区分大小写" placeholder-style="color:#919399;" class="uni-input" v-model="formParams.verify" />
<image :src="url" class="pic" @click="refresh()"></image>
</view>
<view class="input-box code row bothSide verCenter mb40">
<input type="number" placeholder="请输入验证码" placeholder-style="color:#919399;" class="uni-input" />
<text class="code">获取验证码</text>
<input type="number" placeholder="请输入验证码" placeholder-style="color:#919399;" class="uni-input" v-model="formParams.sms_verify" />
<text class="code" @click="countdownChange()" :class="{ disabled: code_disabled }">{{ code_text }}</text>
</view>
</template>
<!-- 帐号登录 -->
......@@ -41,7 +45,7 @@
</view>
</picker>
</view>
<input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" />
<input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" v-model="formParams.account" />
</view>
<view class="text" @click="login_type = false">普通登录</view>
</view>
......@@ -58,8 +62,14 @@
</view>
</template>
<view class="input-box pwd row bothSide verCenter mb40">
<input type="number" placeholder="请输入密码" placeholder-style="color:#919399;" class="uni-input" v-model="formParams.pwd" />
<text class="iconfont icon-a-juxingbeifen14"></text>
<template v-if="pwd_flag">
<input type="password" placeholder="请输入密码" placeholder-style="color:#919399;" class="uni-input" v-model="formParams.pwd" />
<text class="iconfont icon-a-juxingbeifen14" @click="pwd_flag = false"></text>
</template>
<template v-else>
<input type="text" placeholder="请输入密码" placeholder-style="color:#919399;" class="uni-input" v-model="formParams.pwd" />
<text class="iconfont icon-juxing" @click="pwd_flag = true"></text>
</template>
</view>
</template>
<view class="btn row rowCenter verCenter" @click="submit()">{{ curr == 0 ? '登录/注册' : '登录' }}</view>
......@@ -72,31 +82,36 @@
</template>
<script>
import { Ichunt_Api, Api_Url } from '@/util/api.js';
import { setCookie } from '@/util/util.js';
import { Ichunt_Api, Api_Url, Code_Url } from '@/util/api.js';
import { setCookie, startCountdown } from '@/util/util.js';
export default {
data() {
return {
code_text: '获取验证码',
code_disabled: false,
login_type: false,
index: 0,
curr: 1,
curr: 0,
text_item: ['免密登录/注册', '账号登录'],
array: ['0086', '00886', '00853', '00852'],
verify_flag: false, //是否显示验证码
url: Ichunt_Api + '/public/verify',
pwd_flag: true,
url: Code_Url,
formParams: {
account: '18682159081',
pwd: '123456',
verify: ''
account: '',
verify: '',
intl_code: '0086',
sms_verify: '',
pwd: ''
}
};
},
onLoad() {
console.log(Ichunt_Api);
},
onLoad() {},
methods: {
bindPickerChange: function(e, type) {
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.index = e.detail.value;
this.formParams.intl_code = this.array[e.detail.value];
},
tab(index) {
this.curr = index;
......@@ -105,7 +120,50 @@ export default {
* 刷新验证码
*/
refresh() {
this.url = Ichunt_Api + '/public/verify?time=' + new Date().getTime();
this.url = Code_Url + '?time=' + new Date().getTime();
},
/**
* 手机验证码
*/
countdownChange() {
this.request(Api_Url + '/public/smsVerify', 'POST', { mobile: this.formParams.account, verify: this.formParams.verify, intl_code: this.formParams.intl_code }, true, true).then(res => {
if (res.err_code === 0) {
if (!this.code_disabled) {
const countdown = startCountdown({
duration: 60,
onTick: remainingTime => {
this.code_disabled = true;
this.code_text = `重新发送${remainingTime}S`;
},
onComplete: () => {
this.code_disabled = false;
this.code_text = `获取验证码`;
}
});
countdown.start();
}
} else if (res.err_code === 10001 || res.err_code === 10002) {
uni.showModal({
itle: '提示',
content: res.err_msg,
showCancel: false,
success: res => {
if (res.confirm) {
this.verify_flag = true;
this.refresh();
} else if (res.cancel) {
}
}
});
} else {
this.verify_flag = false;
uni.showModal({
itle: '提示',
content: res.err_msg,
showCancel: false
});
}
});
},
submit() {
this.request(Api_Url + '/login/action', 'POST', this.formParams, true, true).then(res => {
......@@ -118,9 +176,11 @@ export default {
setCookie('Yo4teW_csrf', res.data.cookie.Yo4teW_csrf, 7);
setCookie('Yo4teW_gid', res.data.cookie.Yo4teW_gid, 7);
setCookie('Yo4teW_uid', res.data.cookie.Yo4teW_uid, 7);
uni.navigateBack({
delta: 1
});
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 2000);
} else if (res.err_code === 10001 || res.err_code === 10002) {
uni.showModal({
itle: '提示',
......
util/api.js
let Ichunt_Api = ''; //3.0网站接口
let Api_Url = ''; //api项目url
let Api_Es = ''; //api项目url
let Api_ES_Go = ''; //型号联想
var Ichunt_Api = ''; //3.0网站接口
var Api_Url = ''; //api项目url
var Api_Es = ''; //api项目url
var Api_ES_Go = ''; //型号联想
var Code_Url = ''; //图形验证码
switch (window.location.hostname) {
case "m.ichunt.com":
Ichunt_Api = 'https://www.ichunt.com/v3';
Api_Url = "https://api.ichunt.com"
Api_Es = "//so12.ichunt.com"
Api_ES_Go = "https://s.ichunt.com"
Code_Url = "https://www.ichunt.com/v3/public/verify";
break;
default:
//本地proxy配置参考vue.config.js
Ichunt_Api = '/v3'
Api_Url = '/apis';
Api_Es = "/es"
Api_ES_Go = "http://192.168.1.237:9008"
Api_Es = "/es";
Api_ES_Go = "http://192.168.1.237:9008";
Code_Url = "http://www.liexin.com/v3/public/verify";
}
......@@ -22,5 +27,6 @@ module.exports = {
Ichunt_Api,
Api_Url,
Api_Es,
Api_ES_Go
Api_ES_Go,
Code_Url
}
\ No newline at end of file
util/util.js
......@@ -112,11 +112,54 @@ const getCookie = (name) => {
return '';
}
/**
* 手机验证码倒计时函数
* @param {Object} options - 配置项
* @param {number} options.duration - 倒计时时间，单位为秒，默认为60s
* @param {Function} options.onTick - 每秒执行的回调函数，参数为当前剩余时间
* @param {Function} options.onComplete - 完成倒计时后执行的回调函数
*/
const startCountdown = (options) => {
const duration = options.duration || 60; // 倒计时时间，默认为60秒
let remainingTime = duration; // 剩余时间
let timer = null; // 定时器
// 每秒执行一次的回调函数
const onTick = options.onTick || ((time) => {});
// 完成倒计时后执行的回调函数
const onComplete = options.onComplete || (() => {});
// 开始倒计时
function start() {
timer = setInterval(() => {
if (remainingTime <= 0) {
clearInterval(timer);
onComplete();
} else {
remainingTime--;
onTick(remainingTime);
}
}, 1000);
}
// 停止倒计时
function stop() {
clearInterval(timer);
onComplete();
}
// 返回 start 和 stop 方法
return {
start,
stop,
};
}
module.exports = {
request,
getPlatform,
setCookie,
getCookie
getCookie,
startCountdown
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment