Skip to content

U
uni-starter

梦想橡皮擦 / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 0
Fork 0
U
uni-starter
提交 2b828b6a 编写于 作者: 芊 芊里
浏览文件
操作

输入框使用easyInput

上级 988eede8
隐藏空白更改
内联 并排
Showing with 210 addition and 375 deletion
uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
浏览文件 @ 2b828b6a
......@@ -2,6 +2,7 @@
<view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#dd524d':styles.color}">
<view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}"
:style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}">
<slot name="left"></slot>
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons>
<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}"
:name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled"
......
uni_modules/uni-login-page/common/loginPage.css
浏览文件 @ 2b828b6a
......@@ -63,13 +63,24 @@ page {
.phone-area {
padding: 0 20rpx;
font-size: 30rpx;
font-size: 30rpx;
/* #ifdef APP-NVUE */
border-right-width: 1rpx;
border-right-color: #d7d9d8;
/* #endif */
/* #ifndef APP-NVUE */
border-right: 1rpx solid #d7d9d8;
/* #endif */
}
.phone-input {
flex: 1;
border-left-width: 1px;
border-left-color: #d7d9d8;
flex: 1;
/* #ifndef APP-NVUE */
border-left: 1rpx solid #D7D9D8;
/* #endif */
/* #ifdef APP-NVUE */
border-left-width: 1rpx;
border-left-color: #d7d9d8;
/* #endif */
padding: 0 20rpx;
font-size: 30rpx;
}
......@@ -83,8 +94,6 @@ page {
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
......
uni_modules/uni-login-page/common/myStyle.css 已删除 100644 → 0
浏览文件 @ 988eede8
.flex{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
}
.w-750{
width: 750rpx;
}
.w-630{
width: 630rpx;
}
.w-400{
width: 400rpx;
}
.w-375{
width: 375rpx;
}
.flex-1{
flex: 1;
}
.flex-column{
flex-direction: column;
}
.flex-row{
flex-direction: row;
}
.flex-wrap{
flex-wrap: wrap;
}
.flex-nowrap{
flex-wrap: nowrap;
}
.align-center{
align-items: center;
}
.align-start{
align-items: flex-start;
}
.align-end{
align-items: flex-end;
}
.justify-center{
justify-content: center;
}
.justify-start{
justify-content: flex-start;
}
.justify-end{
justify-content: flex-end;
}
.justify-between{
justify-content: space-between;
}
.round{
border-radius: 6rpx;
}
.round-0{
border-radius: 0rpx;
}
.round-1{
border-radius: 10rpx;
}
.p-1{
padding: 10rpx;
}
.p-2{
padding: 20rpx;
}
.p-3{
padding: 30rpx;
}
.p-4{
padding: 40rpx;
}
.p-5{
padding: 50rpx;
}
.px-1{
padding-left: 10rpx;
padding-right: 10rpx;
}
.px-2{
padding-left: 20rpx;
padding-right: 20rpx;
}
.px-3{
padding-left: 30rpx;
padding-right: 30rpx;
}
.px-4{
padding-left: 40rpx;
padding-right: 40rpx;
}
.px-5{
padding-left: 50rpx;
padding-right: 50rpx;
}
.py-1{
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.py-2{
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.py-3{
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.py-4{
padding-top: 40rpx;
padding-bottom: 40rpx;
}
.py-5{
padding-top: 50rpx;
padding-bottom: 50rpx;
}
.pt-1{
padding-top: 10rpx;
}
.pt-2{
padding-top: 20rpx;
}
.pt-5{
padding-top: 50rpx;
}
.m-1{
margin: 10rpx;
}
.m-2{
margin: 20rpx;
}
.m-3{
margin: 30rpx;
}
.m-4{
margin: 40rpx;
}
.m-5{
margin: 50rpx;
}
.mt-2{
margin-top: 20rpx;
}
.mt-5{
margin-top: 50rpx;
}
.mx-1{
margin-left: 10rpx;
margin-right: 10rpx;
}
.mx-2{
margin-left: 20rpx;
margin-right: 20rpx;
}
.mx-3{
margin-left: 30rpx;
margin-right: 30rpx;
}
.mx-4{
margin-left: 40rpx;
margin-right: 40rpx;
}
.mx-5{
margin-left: 50rpx;
margin-right: 50rpx;
}
.my-1{
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.my-2{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.my-3{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.my-4{
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.my-5{
margin-top: 50rpx;
margin-bottom: 50rpx;
}
.font-blod{
font-weight: bold;
}
.font-bolder{
font-weight: 900;
}
.font-lighter{
font-weight: 100;
}
.font-normal{
font-weight: normal;
}
.font-20{
font-size: 20rpx;
}
.font-22{
font-size: 22rpx;
}
.font-24{
font-size: 24rpx;
}
.font-26{
font-size: 26rpx;
}
.font-28{
font-size: 28rpx;
}
.font-30{
font-size: 30rpx;
}
.font-32{
font-size: 32rpx;
}
.font-34{
font-size: 34rpx;
}
.font-36{
font-size: 36rpx;
}
.font-40{
font-size: 40rpx;
}
.font-50{
font-size: 50rpx;
}
.font-60{
font-size: 60rpx;
}
.font-100{
font-size: 100rpx;
}
.text-white{
color: #FFFFFF;
}
.text-sub{
color: #8a8f8b;
}
.bg-white{
background-color: #FFFFFF;
}
.hover{
opacity: 0.8;
}
.border-test{
/* #ifdef APP-NVUE */
border-width: 1rpx;
border-color: #DD524D;
/* #endif */
/* #ifndef APP-NVUE */
border: 1rpx solid #DD524D;
box-sizing: border-box;
/* #endif */
}
\ No newline at end of file
uni_modules/uni-login-page/components/auth-btn/auth-btn.vue
浏览文件 @ 2b828b6a
......@@ -105,7 +105,7 @@
</script>
<style>
@import url("../../common/myStyle.css");
/* @import url("../../common/myStyle.css"); */
.auth-logo {
width: 84rpx;
height: 84rpx;
......
uni_modules/uni-login-page/pages/index/index.vue
浏览文件 @ 2b828b6a
<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="content">
<!-- 顶部文字 -->
<text class="content-top-title">登陆后即可展示自己</text>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="phone-area">{{currenPhoneArea}}</text>
</picker>
<input type="number" class="phone-input" maxlength="11" placeholder="请输入手机号"
v-model="phoneNumber" />
</view>
<!-- tip -->
<text class="tip-text">未注册的手机号验证通过后蒋自动注册</text>
<!-- 发送按钮 -->
<view class="send-btn-box" hover-class="hover"
@click="sendShortMsg" :class="canGetShortMsg?'send-btn-active':''">
<text class="send-btn-text">获取短信验证码</text>
</view>
<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.phone" maxlength="11" placeholder="请输入手机号">
<template slot="left">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="phone-area">{{currenPhoneArea}}</text>
</picker>
</template>
</uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canGetShortMsg" :type="canGetShortMsg?'primary':'default'"
@click="sendShortMsg">获取短信验证码</button>
</uni-forms>
<!-- tip -->
<text class="tip-text">未注册的手机号验证通过后将自动注册</text>
<!-- 其他登录方式 -->
<view class="auth-box">
......@@ -33,7 +33,7 @@
</view>
</view>
<!-- 登录按钮弹窗 -->
<login-action-sheet ref="loginActionSheet"></login-action-sheet>
<login-action-sheet ref="loginActionSheet"></login-action-sheet>
<uni-quick-login></uni-quick-login>
</view>
</template>
......@@ -41,8 +41,8 @@
<script>
export default {
data() {
return {
isShow:false,
return {
isShow: false,
link: [{
text: '用户协议',
to: '/baidu.com'
......@@ -52,21 +52,47 @@
}],
phoneArea: ['+86', '+87'],
currenPhoneArea: '+86',
phoneNumber: ''
phoneNumber: '',
formData: {
phone: ''
},
rules: {
// 对phone字段进行必填验证
phone: {
rules: [{
required: true,
errorMessage: '请输入手机号',
},
{
pattern: /^1\d{10}$/,
errorMessage: '手机号格式不正确',
}
]
}
}
}
},
onReady() {
setTimeout(()=>{
this.isShow = true
},1500);
},
onReady() {
setTimeout(() => {
this.isShow = true
}, 1500);
},
computed: {
canGetShortMsg() {
let reg = /^1\d{10}$/;
return reg.test(this.phoneNumber);
return reg.test(this.formData.phone);
}
},
methods: {
// 触发提交表单
submit() {
this.$refs.form.submit().then(res => {
console.log('表单数据信息：', res);
}).catch(err => {
console.log('表单错误信息：', err);
})
},
selectPhoneArea(event) {
this.currenPhoneArea = this.phoneArea[event.detail.value];
},
......@@ -86,21 +112,32 @@
},
openLoginList() {
this.$refs.loginActionSheet.open();
},
back(){
uni.navigateBack()
},
back() {
uni.navigateBack()
}
}
}
</script>
<style>
@import url("../../common/loginPage.css");
.content-top-title{
text-align: center;
}
.login-iknow{
justify-content: center;
<style>
@import url("../../common/loginPage.css");
.content-top-title {
text-align: center;
}
.login-iknow {
justify-content: center;
}
.phone-area {
/* #ifdef APP-NVUE */
border-right-width: 1rpx;
border-right-color: #d7d9d8;
/* #endif */
/* #ifndef APP-NVUE */
border-right: 1rpx solid #d7d9d8;
/* #endif */
}
</style>
\ No newline at end of file
</style>
uni_modules/uni-login-page/pages/index/pwd-login.vue
浏览文件 @ 2b828b6a
......@@ -4,27 +4,24 @@
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">手机号密码登录</text>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="phone-area">{{currenPhoneArea}}</text>
</picker>
<input type="number" class="phone-input" placeholder="请输入手机号" maxlength="11" v-model="phoneNumber" />
</view>
<view class="phone-input-box">
<input type="password" :password="true" class="phone-input pwd-input" placeholder="请输入密码"
v-model="password" />
</view>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 发送按钮 -->
<view class="send-btn-box" hover-class="hover"
@click="pwdLogin" :class="canLogin?'send-btn-active':''">
<text class="send-btn-text">登录</text>
</view>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<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.phone" maxlength="11" placeholder="请输入手机号">
<template slot="left">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="phone-area">{{currenPhoneArea}}</text>
</picker>
</template>
</uni-easyinput>
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canLogin" :type="canLogin?'primary':'default'"
@click="pwdLogin">登录</button>
</uni-forms>
<!-- 忘记密码 -->
<view class="auth-box">
......@@ -50,16 +47,45 @@
to: 'baidu'
}],
phoneArea: ['+86', '+87'],
currenPhoneArea: '+86',
currenPhoneArea: '+86',
formData: {
phone: '',
pwd:''
},
rules: {
phone: {
rules: [{
required: true,
errorMessage: '请输入手机号',
},
{
pattern: /^1\d{10}$/,
errorMessage: '手机号格式不正确',
}
]
},
pwd:{
rules: [{
required: true,
errorMessage: '请输入密码',
},
{
pattern: /^.{6,20}$/,
errorMessage: '密码应为6到20位',
}
]
}
}
}
},
computed: {
canLogin() {
let reg_phone = /^1\d{10}$/;
let reg_pwd = /^.{6,20}$/;
let isPhone = reg_phone.test(this.phoneNumber);
let isPhone = reg_phone.test(this.formData.phone);
let isPwd = reg_pwd.test(this.password);
let isPwd = reg_pwd.test(this.formData.pwd);
return isPhone && isPwd;
}
},
......@@ -69,14 +95,14 @@
*/
toRetrievePwd() {
let reg_phone = /^1\d{10}$/;
let isPhone = reg_phone.test(this.phoneNumber);
let isPhone = reg_phone.test(this.formData.phone);
if (!isPhone) return uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
uni.navigateTo({
url: './pwd-retrieve?phoneNumber=' + this.phoneNumber + '&phoneArea=' + this.currenPhoneArea
url: './pwd-retrieve?phoneNumber=' + this.formData.phone + '&phoneArea=' + this.currenPhoneArea
})
},
/**
......@@ -94,14 +120,18 @@
</script>
<style>
@import url("../../common/loginPage.css");
.phone-input-box{
margin-top: 20rpx;
}
.auth-box{
@import url("../../common/loginPage.css");
.phone-input-box {
margin-top: 20rpx;
}
.auth-box {
justify-content: flex-start;
}
.login-text-sub{
color: #8a8f8b;
margin-top: 20rpx;
}
.login-text-sub {
color: #8a8f8b;
}
</style>
uni_modules/uni-login-page/pages/index/pwd-retrieve.vue
浏览文件 @ 2b828b6a
......@@ -5,23 +5,21 @@
<!-- 顶部文字 -->
<text class="content-top-title">手机号密码登录</text>
<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box">
<input type="number" :maxlength="6" class="phone-input" placeholder="请输入验证码"
v-model="phoneCode" />
<login-short-code @getCode="getCode"></login-short-code>
</view>
<view class="phone-input-box">
<input type="password" :password="true" class="phone-input" placeholder="请输入密码"
v-model="password" />
</view>
<!-- 发送按钮 -->
<view class="send-btn-box" hover-class="hover"
@click="submit" :class="canSubmit?'send-btn-active':''">
<text class="send-btn-text">完成</text>
</view>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<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 @getCode="getCode"></login-short-code>
</template>
</uni-easyinput>
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
@click="submit">完成</button>
</uni-forms>
</view>
</view>
</view>
......@@ -34,7 +32,36 @@
phoneNumber: '',
phoneCode: '',
password: '',
currenPhoneArea: '',
currenPhoneArea: '',
formData:{
code:'',
pwd:''
},
rules: {
code: {
rules: [{
required: true,
errorMessage: '请输入验证码',
},
{
legn: /^.{6}$/,
errorMessage: '请输入6位验证码',
}
]
},
pwd:{
rules: [{
required: true,
errorMessage: '请输入密码',
},
{
pattern: /^.{6,20}$/,
errorMessage: '密码应为6到20位',
}
]
}
}
}
},
computed: {
......@@ -46,15 +73,19 @@
let reg_pwd = /^.{6,20}$/;
let reg_code = /^\d{6}$/;
let isPhone = reg_phone.test(this.phoneNumber);
let isPwd = reg_pwd.test(this.password);
let isCode = reg_code.test(this.phoneCode);
let isPwd = reg_pwd.test(this.formData.pwd);
let isCode = reg_code.test(this.formData.code);
return isPhone && isPwd && isCode;
}
},
onLoad(event) {
if (event) {
if (event && event.phoneNumber) {
this.phoneNumber = event.phoneNumber;
this.currenPhoneArea = '+' + Number(event.phoneArea);
}
else {
this.phoneNumber = '17731252731';
this.currenPhoneArea = '+86';
}
},
methods: {
......@@ -84,11 +115,5 @@
@import url("../../common/loginPage.css");
.phone-input-box{
margin-top: 20rpx;
}
.phone-input{
border-left-width: 0;
}
.send-btn-box{
margin-top: 50rpx;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或