Skip to content

U
uni-starter

DCloud / uni-starter

通知 4644
Star 229
Fork 210
U
uni-starter

体验新版 GitCode，发现更多精彩内容 >>

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