提交 457935a1 编写于 作者: 芊里

验证码输入页面

上级 46220155
{ {
"pages": [{ "pages": [{
"path": "pages/list/list", "path": "pages/list/list",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh":true "enablePullDownRefresh": true
} }
},{ }, {
"path": "pages/list/news-list", "path": "pages/list/news-list",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh":true "enablePullDownRefresh": true
} }
}, },
{ {
"path": "pages/grid/grid", "path": "pages/grid/grid",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, { }, {
"path": "uni_modules/uni-login-page/pages/index/index", "path": "uni_modules/uni-login-page/pages/index/index",
"style": { "style": {
"navigationStyle": "custom", "navigationBarTitleText": "",
"backgroundColor": "transparent", "navigationBarBackgroundColor": "#FFFFFF",
"app-plus": { "app-plus": {
"animationType": "fade-in", "animationType": "fade-in",
"background": "transparent", "background": "transparent",
"popGesture": "none" "popGesture": "none",
} "titleNView": {
} "buttons": [{
// "navigationBarTitleText": "", "text": "帮助",
// "navigationBarBackgroundColor": "#FFFFFF", "type": "none",
// "app-plus": { "fontSize": "16px",
// "titleNView": { "width": "60px"
// "buttons": [{ }]
// "text": "帮助", }
// "type": "none", }
// "fontSize": "16px", }
// "width": "60px" // "navigationBarTitleText": "",
// }] // "navigationBarBackgroundColor": "#FFFFFF",
// } // "app-plus": {
// "titleNView": {
}, { // "buttons": [{
"path": "pages/search/search", // "text": "帮助",
"style": { // "type": "none",
"navigationStyle": "custom" // "fontSize": "16px",
} // "width": "60px"
}, { // }]
"path": "pages/list/detail", // }
"style": {
"app-plus": { }, {
"titleNView": { "path": "pages/search/search",
"buttons": [{ "style": {
"type": "share" "navigationStyle": "custom"
}], }
"type": "transparent" }, {
} "path": "pages/list/detail",
}, "style": {
"h5": { "app-plus": {
"titleNView": { "titleNView": {
"buttons": [], "buttons": [{
"type": "transparent" "type": "share"
} }],
}, "type": "transparent"
"navigationBarTitleText": "文章详情" }
} },
"h5": {
}, { "titleNView": {
"path": "pages/ucenter/ucenter", "buttons": [],
"style": { "type": "transparent"
"navigationStyle":"custom" }
} },
}, { "navigationBarTitleText": "文章详情"
"path": "pages/uni-feedback/uni-feedback", }
"style": {
"navigationBarTitleText": "问题反馈" }, {
} "path": "pages/ucenter/ucenter",
}, { "style": {
"path": "pages/about/about", "navigationStyle": "custom"
"style": { }
"navigationBarTitleText": "关于" }, {
} "path": "pages/uni-feedback/uni-feedback",
"style": {
}, { "navigationBarTitleText": "问题反馈"
"path": "pages/agree-list/agree-list", }
"style": { }, {
"navigationBarTitleText": "政策与协议" "path": "pages/about/about",
} "style": {
"navigationBarTitleText": "关于"
}, { }
"path": "pages/agree-list/privacy/privacy",
"style": { }, {
"navigationBarTitleText": "隐私政策" "path": "pages/agree-list/agree-list",
} "style": {
"navigationBarTitleText": "政策与协议"
}, { }
"path": "pages/agree-list/service/service",
"style": { }, {
"navigationBarTitleText": "服务协议" "path": "pages/agree-list/privacy/privacy",
} "style": {
"navigationBarTitleText": "隐私政策"
}, { }
"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
"style": { }, {
"disableScroll": true, "path": "pages/agree-list/service/service",
"app-plus": { "style": {
"backgroundColorTop": "transparent", "navigationBarTitleText": "服务协议"
"background": "transparent", }
"titleNView": false,
"scrollIndicator": false, }, {
"popGesture": "none", "path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
"animationType": "fade-in", "style": {
"animationDuration": 200 "disableScroll": true,
"app-plus": {
} "backgroundColorTop": "transparent",
} "background": "transparent",
}, { "titleNView": false,
"path": "pages/settings/settings", "scrollIndicator": false,
"style": { "popGesture": "none",
"navigationBarTitleText": "设置" "animationType": "fade-in",
} "animationDuration": 200
}, { }
"path": "pages/ucenter/edit/edit", }
"style": { }, {
"navigationBarTitleText": "编辑资料" "path": "pages/settings/settings",
} "style": {
}, { "navigationBarTitleText": "设置"
"path": "pages/ucenter/edit/uploadCutImageToUnicloud", }
"style": {
"navigationStyle": "custom" }, {
} "path": "pages/ucenter/edit/edit",
}, { "style": {
"path": "uni_modules/uni-login-page/pages/index/pwd-login", "navigationBarTitleText": "编辑资料"
"style": { }
"navigationBarTitleText": "", }, {
"navigationBarBackgroundColor": "#FFFFFF", "path": "pages/ucenter/edit/uploadCutImageToUnicloud",
"app-plus": { "style": {
"titleNView": { "navigationStyle": "custom"
"buttons": [{ }
"text": "帮助", }, {
"type": "none", "path": "uni_modules/uni-login-page/pages/index/pwd-login",
"fontSize": "16px", "style": {
"width": "60px" "navigationBarTitleText": "",
}] "navigationBarBackgroundColor": "#FFFFFF",
} "app-plus": {
} "titleNView": {
} "buttons": [{
}, { "text": "帮助",
"path": "uni_modules/uni-login-page/pages/index/pwd-retrieve", "type": "none",
"style": { "fontSize": "16px",
"navigationBarTitleText": "", "width": "60px"
"navigationBarBackgroundColor": "#FFFFFF", }]
"app-plus": { }
"titleNView": { }
"buttons": [{ }
"text": "帮助", }, {
"type": "none", "path": "uni_modules/uni-login-page/pages/index/pwd-retrieve",
"fontSize": "16px", "style": {
"width": "60px" "navigationBarTitleText": "",
}] "navigationBarBackgroundColor": "#FFFFFF",
} "app-plus": {
} "titleNView": {
} "buttons": [{
} "text": "帮助",
], "type": "none",
"globalStyle": { "fontSize": "16px",
"navigationBarTextStyle": "black", "width": "60px"
"navigationBarTitleText": "base-app", }]
"navigationBarBackgroundColor": "#F8F8F8", }
"backgroundColor": "#F8F8F8" }
}, }
"tabBar": { }, {
"color": "#7A7E83", "path": "uni_modules/uni-login-page/pages/index/phone-code",
"selectedColor": "#007AFF", "style": {
"borderStyle": "black", "navigationBarTitleText": "",
"backgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#FFFFFF",
"list": [{ "app-plus": {
"pagePath": "pages/list/list", "titleNView": {
"iconPath":"static/tabbar/list.png", "buttons": [{
"selectedIconPath":"static/tabbar/list_active.png", "text": "帮助",
"text": "列表" "type": "none",
}, { "fontSize": "16px",
"pagePath": "pages/grid/grid", "width": "60px"
"iconPath":"static/tabbar/grid.png", }]
"selectedIconPath":"static/tabbar/grid_active.png", }
"text": "宫格" }
}, { }
"pagePath": "pages/ucenter/ucenter",
"iconPath":"static/tabbar/me.png", }
"selectedIconPath":"static/tabbar/me_active.png", ],
"text": "我的" "globalStyle": {
}] "navigationBarTextStyle": "black",
} "navigationBarTitleText": "base-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#007AFF",
"borderStyle": "black",
"backgroundColor": "#F8F8F8",
"list": [{
"pagePath": "pages/list/list",
"iconPath": "static/tabbar/list.png",
"selectedIconPath": "static/tabbar/list_active.png",
"text": "列表"
}, {
"pagePath": "pages/grid/grid",
"iconPath": "static/tabbar/grid.png",
"selectedIconPath": "static/tabbar/grid_active.png",
"text": "宫格"
}, {
"pagePath": "pages/ucenter/ucenter",
"iconPath": "static/tabbar/me.png",
"selectedIconPath": "static/tabbar/me_active.png",
"text": "我的"
}]
}
} }
<template> <template>
<view class="short-code-btn" hover-class="hover" @click="clickBtn"> <view class="short-code-btn" hover-class="hover" @click="start">
<text class="inner-text" :class="reverseNumber==0?'inner-text-active':''">{{innerText}}</text> <text class="inner-text" :class="reverseNumber==0?'inner-text-active':''">{{innerText}}</text>
</view> </view>
</template> </template>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
}, },
methods: { methods: {
initClick() { initClick() {
this.clickBtn = debounce(() => { this.start = debounce(() => {
if (this.reverseNumber != 0) return; if (this.reverseNumber != 0) return;
this.$emit('getCode', () => { this.$emit('getCode', () => {
this.reverseNumber = Number(this.count); this.reverseNumber = Number(this.count);
......
<template> <template>
<view class="wrap" v-show="isShow"> <view class="wrap" v-show="isShow">
<uni-nav-bar @clickLeft="back" left-icon="back" right-text="帮助" :statusBar="true" :border="false"></uni-nav-bar>
<view class="wrap-content"> <view class="wrap-content">
<view class="content"> <view class="content">
<!-- 顶部文字 --> <!-- 顶部文字 -->
...@@ -100,7 +99,11 @@ ...@@ -100,7 +99,11 @@
if (!this.canGetShortMsg) return; if (!this.canGetShortMsg) return;
/** /**
* 发送验证吗 * 发送验证吗
*/ */
// 发送成功后跳转页面
uni.navigateTo({
url:'./phone-code?phoneNumber='+this.formData.phone+'&phoneArea='+this.currenPhoneArea
})
}, },
/** /**
* 去密码登录页 * 去密码登录页
...@@ -112,9 +115,6 @@ ...@@ -112,9 +115,6 @@
}, },
openLoginList() { openLoginList() {
this.$refs.loginActionSheet.open(); this.$refs.loginActionSheet.open();
},
back() {
uni.navigateBack()
} }
} }
} }
......
<template>
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">请输入验证码</text>
<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.code" maxlength="6" placeholder="请输入验证码">
<template slot="right">
<login-short-code ref="shortCode" @getCode="getCode"></login-short-code>
</template>
</uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
@click="submit">登录</button>
</uni-forms>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
phoneNumber: '',
phoneCode: '',
currenPhoneArea: '',
formData:{
code:''
},
rules: {
code: {
rules: [{
required: true,
errorMessage: '请输入验证码',
},
{
legn: /^.{6}$/,
errorMessage: '请输入6位验证码',
}
]
}
}
}
},
computed: {
tipText() {
return `验证码已通过短信发送至${this.currenPhoneArea} ${this.phoneNumber}。`;
},
canSubmit() {
let reg_phone = /^1\d{10}$/;
let reg_code = /^\d{6}$/;
let isPhone = reg_phone.test(this.phoneNumber);
let isCode = reg_code.test(this.formData.code);
return isPhone && isCode;
}
},
onLoad(event) {
if (event && event.phoneNumber) {
this.phoneNumber = event.phoneNumber;
this.currenPhoneArea = '+' + Number(event.phoneArea);
}
},
onReady() {
this.$refs.shortCode.start();
},
methods: {
/**
* 获取验证码倒计时
* 倒计时期间不会触发该方法
*/
getCode(done) {
if (this.phoneNumber == '') return uni.showToast({
title: '请填写手机号',
icon: 'none'
});
// 发送成功后开启倒计时
done();
},
/**
* 完成并提交
*/
submit(){
}
}
}
</script>
<style>
@import url("../../common/loginPage.css");
.phone-input-box{
margin-top: 20rpx;
}
</style>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class="wrap-content"> <view class="wrap-content">
<view class="content"> <view class="content">
<!-- 顶部文字 --> <!-- 顶部文字 -->
<text class="content-top-title">手机号密码登录</text> <text class="content-top-title">重置密码</text>
<login-ikonw class="login-iknow" :text="tipText"></login-ikonw> <login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) --> <!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules"> <uni-forms ref="form" :value="formData" :rules="rules">
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</template> </template>
</uni-easyinput> </uni-easyinput>
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false" <uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput> v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput>
</uni-forms-item> </uni-forms-item>
<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'" <button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
@click="submit">完成</button> @click="submit">完成</button>
...@@ -82,10 +82,6 @@ ...@@ -82,10 +82,6 @@
if (event && event.phoneNumber) { if (event && event.phoneNumber) {
this.phoneNumber = event.phoneNumber; this.phoneNumber = event.phoneNumber;
this.currenPhoneArea = '+' + Number(event.phoneArea); this.currenPhoneArea = '+' + Number(event.phoneArea);
}
else {
this.phoneNumber = '17731252731';
this.currenPhoneArea = '+86';
} }
}, },
methods: { methods: {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册