From 2b828b6a2f59c2eac25278ed76f3551bac77542d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=8A=E9=87=8C?= <1227971437@qq.com>
Date: Thu, 8 Apr 2021 15:58:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E4=BD=BF=E7=94=A8ea?=
 =?UTF-8?q?syInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uni-easyinput/uni-easyinput.vue           |   1 +
 .../uni-login-page/common/loginPage.css       |  23 +-
 uni_modules/uni-login-page/common/myStyle.css | 267 ------------------
 .../components/auth-btn/auth-btn.vue          |   2 +-
 .../uni-login-page/pages/index/index.vue      | 117 +++++---
 .../uni-login-page/pages/index/pwd-login.vue  |  96 ++++---
 .../pages/index/pwd-retrieve.vue              |  79 ++++--
 7 files changed, 210 insertions(+), 375 deletions(-)
 delete mode 100644 uni_modules/uni-login-page/common/myStyle.css

diff --git a/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue b/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
index ac338bb..c1e0724 100644
--- a/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
+++ b/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
@@ -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"
diff --git a/uni_modules/uni-login-page/common/loginPage.css b/uni_modules/uni-login-page/common/loginPage.css
index a01b6b4..536c6e9 100644
--- a/uni_modules/uni-login-page/common/loginPage.css
+++ b/uni_modules/uni-login-page/common/loginPage.css
@@ -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 */
diff --git a/uni_modules/uni-login-page/common/myStyle.css b/uni_modules/uni-login-page/common/myStyle.css
deleted file mode 100644
index cd7d5ac..0000000
--- a/uni_modules/uni-login-page/common/myStyle.css
+++ /dev/null
@@ -1,267 +0,0 @@
-.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
diff --git a/uni_modules/uni-login-page/components/auth-btn/auth-btn.vue b/uni_modules/uni-login-page/components/auth-btn/auth-btn.vue
index f011183..2047000 100644
--- a/uni_modules/uni-login-page/components/auth-btn/auth-btn.vue
+++ b/uni_modules/uni-login-page/components/auth-btn/auth-btn.vue
@@ -105,7 +105,7 @@
 </script>
 
 <style>
-	@import url("../../common/myStyle.css");
+	/* @import url("../../common/myStyle.css"); */
 	.auth-logo {
 		width: 84rpx;
 		height: 84rpx;
diff --git a/uni_modules/uni-login-page/pages/index/index.vue b/uni_modules/uni-login-page/pages/index/index.vue
index 05b27b6..21b573a 100644
--- a/uni_modules/uni-login-page/pages/index/index.vue
+++ b/uni_modules/uni-login-page/pages/index/index.vue
@@ -1,29 +1,29 @@
 <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>
diff --git a/uni_modules/uni-login-page/pages/index/pwd-login.vue b/uni_modules/uni-login-page/pages/index/pwd-login.vue
index 6595726..5e23239 100644
--- a/uni_modules/uni-login-page/pages/index/pwd-login.vue
+++ b/uni_modules/uni-login-page/pages/index/pwd-login.vue
@@ -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>
diff --git a/uni_modules/uni-login-page/pages/index/pwd-retrieve.vue b/uni_modules/uni-login-page/pages/index/pwd-retrieve.vue
index 58170f3..044f986 100644
--- a/uni_modules/uni-login-page/pages/index/pwd-retrieve.vue
+++ b/uni_modules/uni-login-page/pages/index/pwd-retrieve.vue
@@ -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>
-- 
GitLab