From 60681abc1909ec75d7735d468c99f8c1f1c4c151 Mon Sep 17 00:00:00 2001
From: LJM <1129235084@qq.com>
Date: Thu, 18 May 2023 19:44:29 +0800
Subject: [PATCH] 登录注册
---
assets/css/mine/login.scss | 5 +++++
pages/mine/login.vue | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------
util/api.js | 20 +++++++++++++-------
util/util.js | 45 ++++++++++++++++++++++++++++++++++++++++++++-
4 files changed, 143 insertions(+), 29 deletions(-)
diff --git a/assets/css/mine/login.scss b/assets/css/mine/login.scss
index 9e5580b..6357f20 100644
--- a/assets/css/mine/login.scss
+++ b/assets/css/mine/login.scss
@@ -1,4 +1,6 @@
.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 {
diff --git a/pages/mine/login.vue b/pages/mine/login.vue
index 184f03b..8d7a390 100644
--- a/pages/mine/login.vue
+++ b/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: '提示',
diff --git a/util/api.js b/util/api.js
index 3c0dc87..36e87d3 100644
--- a/util/api.js
+++ b/util/api.js
@@ -1,20 +1,25 @@
-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
diff --git a/util/util.js b/util/util.js
index 4e003fd..7b03824 100644
--- a/util/util.js
+++ b/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
--
libgit2 0.25.0