diff --git a/pages_order/auth/agreementModal.vue b/pages_order/auth/agreementModal.vue
new file mode 100644
index 0000000..01db0c6
--- /dev/null
+++ b/pages_order/auth/agreementModal.vue
@@ -0,0 +1,111 @@
+<template>
+  <view>
+    <uv-modal ref="modal" :showConfirmButton="false">
+      <view class="modal__view">
+        <view class="header">
+          <image class="icon" src="../static/auth/caution.png" mode=""></image>
+          <view>
+            服务协议和隐私权政策
+          </view>
+        </view>
+        <view class="content">
+          <!-- todo: 替换成接口获取 -->
+          请您务必审慎阅读、充分理解用户协议和隐私政策各条款，包括但不限于用户注意事项、用户行为规范以及为了向你提供服务而收集、使用、存储你个人信息的情况等。你可阅读
+          <text class="highlight" @click="$refs.popup.open('getUserAgreement')">《裂变星小程序用户服务协议》</text>
+          和
+          <text class="highlight" @click="$refs.popup.open('getPrivacyPolicy')">《裂变星小程序平台隐私权政策》</text>
+          了解详细信息。如你同意，请点击下方按钮开始接受我们的服务。
+        </view>
+        <view class="footer flex">
+          <button class="btn" @click="onConfirm(false)">不同意</button>
+          <button class="btn btn-confirm" @click="onConfirm(true)">同意</button>
+        </view>
+      </view>
+    </uv-modal>
+
+		<configPopup ref="popup"></configPopup>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'agreementModal',
+  data() {
+    return {
+    }
+  },
+  methods: {
+    open() {
+      this.$refs.modal.open()
+    },
+    onConfirm(confirm) {
+      this.$emit('confirm', confirm)
+      this.$refs.modal.close()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.modal__view {
+  display: flex;
+  flex-direction: column;
+  padding: 12rpx 0 0 0;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  font-size: 32rpx;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  color: #000000;
+  .icon {
+    width: 90rpx;
+    height: 90rpx;
+    margin-bottom: 26rpx;
+  }
+}
+
+.content {
+  margin-top: 30rpx;
+  font-size: 30rpx;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #A2A2A2;
+
+  .highlight {
+    color: #474747;
+    font-weight: 700;
+  }
+}
+
+.footer {
+  margin-top: 60rpx;
+  text-align: center;
+  justify-content: space-between;
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10rpx;
+    width: 258rpx;
+    height: 92rpx;
+    font-size: 36rpx;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: 400;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    background: #F2F2F2;
+    color: #C3C3C3;
+    &-confirm {
+      background: #07C160;
+      color: #ffffff;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages_order/auth/wxLogin.vue b/pages_order/auth/wxLogin.vue
index 292f9d1..6e88e0b 100644
--- a/pages_order/auth/wxLogin.vue
+++ b/pages_order/auth/wxLogin.vue
@@ -1,67 +1,95 @@
 <template>
-	<view class="login">
-		<view class="logo">
-			<!-- <image src="/static/image/login/logo.png" mode=""></image> -->
-		</view>
-		<view class="title">
-			欢迎使用酒店桌布租赁平台
-		</view>
-		<view class="btn mt"
-			@click="wxLogin">
-			<view class="icon">
-				<image src="../static/auth/wx.png" mode=""></image>
-			</view>
-			<view class="">
-				微信授权登录
+	<view class="page">
+		<navbar title="登录" leftClick @leftClick="$utils.navigateBack" />
+
+		<view class="flex flex-column" style="justify-content: flex-start;">
+
+			<!-- todo: 换回接口提供的 -->
+			<image class="logo" src="../static/auth/logo.png" mode=""></image>
+
+			<view class="title">
+				<!-- todo: 换回接口提供的 -->
+				裂变星小程序
 			</view>
-		</view>
-		<!-- <view class="btn b2">
-			使用短信验证登录
-		</view> -->
-		<view class="btn b2"
-		@click="qux">
-			取消登录
-		</view>
-		
-		
-		
-		<view class="config">
-			<uv-checkbox-group
-				v-model="checkboxValue"
-				shape="circle">
-				<view class="content">
-					<view
-					style="display: flex;">
-						
-						<uv-checkbox
-							size="40rpx"
-							icon-size="30rpx"
-							activeColor="#FD5100"
-							:name="1"
-						></uv-checkbox>
-						阅读并同意我们的<text @click="$refs.popup.open('getPrivacyPolicy')">“服务协议与隐私条款”</text>
-					</view>
-					<view class="">
-						以及<text @click="$refs.popup.open('getUserAgreement')">个人信息保护指引</text>
-					</view>
+
+			<view class="operation">
+
+				<button
+					:plain="true" :hairline="false"
+					class="btn"
+					open-type="getPhoneNumber" 
+					@getphonenumber="getPhoneNumber"
+				>
+					授权手机号登录
+				</button>
+				
+				<view class="agreement">
+					<uv-checkbox-group
+						v-model="checkboxValue"
+						shape="circle">
+						<view>
+							<uv-checkbox
+								size="32rpx"
+								icon-size="32rpx"
+								activeColor="#07C160"
+								:name="1"
+								:customStyle="{
+									display: 'inline-block',
+									marginRight: '20rpx',
+								}"
+							></uv-checkbox>
+							<text style="vertical-align: super;">
+								我已阅读<text class="highlight" @click="openModal">《XXX小程序用户注册协议》《XXX小程序隐私保护协议》</text>
+							</text>
+						</view>
+					</uv-checkbox-group>
 				</view>
-			</uv-checkbox-group>
+
+			</view>
+			
 		</view>
-		
-		<configPopup ref="popup"></configPopup>
+
+		<agreementModal ref="modal" @confirm="onConfirmAggrement"></agreementModal>
 		
 	</view>
 </template>
 
 <script>
+	import agreementModal from './agreementModal.vue'
+
 	export default {
 		name : 'Login',
+		components: {
+			agreementModal
+		},
 		data() {
 			return {
 				checkboxValue : []
 			}
 		},
 		methods: {
+			getPhoneNumber(e){
+				console.log(e, e.detail.code);
+
+				// check
+				// this.$api('bindPhone', {
+				// 	phoneCode : e.detail.code
+				// }, res => {
+				// 	if(res.code == 200){
+				// 		let phoneObj = JSON.parse(res.result)
+				// 		if(phoneObj.errmsg == 'ok'){
+				// 			this.userInfoForm.phone = phoneObj.phone_info.phoneNumber
+				// 		}else{
+				// 			uni.showModal({
+				// 				title: phoneObj.errmsg
+				// 			})
+				// 		}
+				// 		console.log(phoneObj);
+				// 	}
+				// })
+
+				this.wxLogin(phoneCode)
+			},
 			wxLogin(){
 				if(!this.checkboxValue.length){
 					return uni.showToast({
@@ -71,85 +99,73 @@
 				}
 				this.$store.commit('login')
 			},
-			qux(){
-				uni.reLaunch({
-					url: '/pages/index/index'
-				})
+			openModal() {
+				this.$refs.modal.open()
+			},
+			onConfirmAggrement(confirm) {
+				if (confirm) {
+					this.checkboxValue = [1]
+				} else {
+					this.checkboxValue = []
+				}
 			},
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-.login{
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 80vh;
-	flex-direction: column;
+.page {
+	background-color: $uni-fg-color;
 	position: relative;
-	.logo{
-		height: 140rpx;
-		width: 140rpx;
-		background-color: #ddd;
-		border-radius: 30rpx;
-		image{
-			height: 140rpx;
-			width: 140rpx;
-			border-radius: 30rpx;
-		}
-		margin-bottom: 20rpx;
-	}
-	.title{
-		position: relative;
-		font-weight: 900;
-		font-size: 45rpx;
-		&::after{
-			content: '';
-			position: absolute;
-			left: 0;
-			top: 100%;
-			display: block;
-			height: 8rpx;
-			width: 210rpx;
-			background: linear-gradient(to right,$uni-color, #fff);
-		}
-	}
-	.btn{
-		width: 80%;
-		height: 100rpx;
-		background-color: $uni-color;
-		color: #fff;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin: 20rpx 0;
-		border-radius: 20rpx;
-		.icon{
-			margin-right: 10rpx;
-			image{
-				width: 40rpx;
-				height: 35rpx;
-			}
-		}
-	}
-	.b2{
-		background-color: rgba($uni-color, 0.2);
-		color: $uni-color;
-	}
-	.mt{
-		margin-top: 200rpx;
-	}
-	
-	.config{
-		position: absolute;
-		bottom: 0;
-		font-size: 24rpx;
-		text-align: center;
-		line-height: 40rpx;
-		text{
-			color: $uni-color;
-		}
+	width: 100vw;
+	height: 100vh;
+}
+
+.logo {
+	width: 148rpx;
+	height: 148rpx;
+	margin-top: 96rpx;
+}
+
+.title {
+	color: #333333;
+	font-size: 32rpx;
+	font-weight: 900;
+	margin-top: 20rpx;
+}
+
+.operation {
+	position: absolute;
+	bottom: 452rpx;
+	left: 0;
+	width: 100vw;
+	padding: 0 60rpx;
+	box-sizing: border-box;
+}
+
+.btn {
+	width: 100%;
+	height: auto;
+	border-radius: 45rpx;
+	background-color: #07C160;
+	color: #FFFFFF;
+	border: none;
+	padding: 25rpx 0;
+	box-sizing: border-box;
+	font-size: 28rpx;
+	line-height: 1;
+	margin: 0;
+}
+
+.agreement {
+	margin-top: 41rpx;
+
+	color: #474747;
+	font-size: 24rpx;
+	line-height: 32rpx;
+
+	.highlight {
+		color: #05D9A2;
 	}
 }
 </style>
diff --git a/pages_order/auth/wxUserInfo.vue b/pages_order/auth/wxUserInfo.vue
index 50c988f..2ba249b 100644
--- a/pages_order/auth/wxUserInfo.vue
+++ b/pages_order/auth/wxUserInfo.vue
@@ -1,37 +1,108 @@
 <template>
-	<view class="login">
+	<view class="page flex flex-column">
+		<!-- todo: 换回接口提供的 -->
+			
+		<image class="logo" src="../static/auth/logo.png" mode=""></image>
+
 		<view class="title">
-			酒店桌布租赁平台
+			<!-- todo: 换回接口提供的 -->
+			裂变星小程序
 		</view>
-		<view class="title">
+
+		<view class="desc">
 			申请获取你的头像、昵称
 		</view>
 
-		<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
-			<view class="line">
-				<view class="">
+		<view class="form">
+			<view class="form-item">
+				<view class="label">
 					头像
 				</view>
-				<view class="">
-					<image :src="userInfo.headImage" v-if="userInfo.headImage" style="width: 60rpx;height: 60rpx;"
-						mode=""></image>
+				<view class="content">
+					<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+						
+						<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" class="avatar"
+							mode=""></image>
+						
+						<image src="../static/auth/avatar.png" v-else class="avatar"
+							mode=""></image>
 
-					<image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image>
+						</button>
 				</view>
 			</view>
-		</button>
-		<view class="line">
-			<view class="">
-				昵称
+			<view class="form-item">
+				<view class="label">
+					昵称
+				</view>
+				<view class="content">
+					<input 
+					 	id="nickName"
+						type="nickname" 
+						placeholder="请输入昵称" 
+						style="text-align: right;"
+						placeholder-class="auth-placeholder"
+						v-model="userInfoForm.nickName" 
+					/>
+				</view>
 			</view>
-			<view class="">
-				<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
-					v-model="userInfo.nickName" />
+			<view class="form-item">
+				<view class="label">
+					微信号
+				</view>
+				<view class="content">
+					<input 
+					 	id="nickName"
+						type="nickname" 
+						placeholder="请输入微信号" 
+						style="text-align: right;"
+						placeholder-class="auth-placeholder"
+						v-model="userInfoForm.nickName" 
+					/>
+				</view>
 			</view>
+			<!-- <view class="form-item">
+				<view class="label">
+					手机号
+				</view>
+				<view class="content">
+					<input v-if="userInfoForm.phone" 
+						placeholder-class="auth-placeholder"
+						placeholder="请输入手机号" 
+						style="text-align: right;"
+						disabled
+						v-model="userInfoForm.phone" 
+					/>
+					<view v-else>
+						<button
+							:plain="true" :hairline="false"
+							class="btn-phone"
+							open-type="getPhoneNumber" 
+							@getphonenumber="getPhone"
+						>
+							获取电话号码
+						</button>
+					</view>
+				</view>
+			</view> -->
 		</view>
-		<view class="btn" @click="submit">
+		
+		
+		<button
+			:plain="true" :hairline="false"
+			class="btn"
+			open-type="getPhoneNumber" 
+			@getphonenumber="getPhone"
+		>
+			获取电话号码
+		</button>
+		<button
+			:plain="true" :hairline="false"
+			class="btn btn-confirm"
+			@click="submit"
+		>
 			确认
-		</view>
+		</button>
+		
 	</view>
 </template>
 
@@ -39,21 +110,43 @@
 	export default {
 		data() {
 			return {
-				userInfo: {
+				userInfoForm: {
 					headImage: '',
 					nickName: '',
+					phone : '',
 				}
 			};
 		},
 		onShow() {},
+		onLoad() {
+			this.userInfoForm.phone = this.userInfo.phone || ''
+			this.userInfoForm.nickName = this.userInfo.nickName || ''
+			this.userInfoForm.headImage = this.userInfo.headImage || ''
+		},
 		computed: {},
 		methods: {
 			onChooseAvatar(res) {
-				let self = this
-				self.$Oss.ossUpload(res.target.avatarUrl)
-					.then(url => {
-						self.userInfo.headImage = url
-					})
+				this.$Oss.ossUpload(res.target.avatarUrl)
+				.then(url => {
+					this.userInfoForm.headImage = url
+				})
+			},
+			getPhone(e){
+				this.$api('bindPhone', {
+					phoneCode : e.detail.code
+				}, res => {
+					if(res.code == 200){
+						let phoneObj = JSON.parse(res.result)
+						if(phoneObj.errmsg == 'ok'){
+							this.userInfoForm.phone = phoneObj.phone_info.phoneNumber
+						}else{
+							uni.showModal({
+								title: phoneObj.errmsg
+							})
+						}
+						console.log(phoneObj);
+					}
+				})
 			},
 			submit() {
 				let self = this
@@ -65,18 +158,23 @@
 					})
 					.exec((res) => {
 						const nickName = res?.[0]?.value
-						self.userInfo.nickName = nickName
+						self.userInfoForm.nickName = nickName
 						
-						if (self.$utils.verificationAll(self.userInfo, {
+						if (self.$utils.verificationAll(self.userInfoForm, {
 								headImage: '请选择头像',
 								nickName: '请填写昵称',
+								phone: '请填写手机号',
 							})) {
 							return
 						}
 						
-						self.$api('updateInfo', self.userInfo, res => {
+						self.$api('updateInfo', {
+							avatarUrl : self.userInfoForm.headImage,
+							nickName : self.userInfoForm.nickName,
+							phone : self.userInfoForm.phone,
+						}, res => {
 							if (res.code == 200) {
-								uni.switchTab({
+								uni.reLaunch({
 									url:'/pages/index/index'
 								})
 							}
@@ -89,45 +187,129 @@
 </script>
 
 <style lang="scss" scoped>
-	.login {
+	.page {
+		background-color: $uni-fg-color;
+		position: relative;
+		width: 100vw;
+		height: 100vh;
+		padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx);
+		padding-left: 60rpx;
+		padding-right: 60rpx;
+		box-sizing: border-box;
+		justify-content: flex-start;
+	}
+
+	.logo {
+		width: 148rpx;
+		height: 148rpx;
+		margin-top: 96rpx;
+	}
+
+	.title {
+		color: #333333;
+		font-size: 32rpx;
+		font-weight: 900;
+		margin-top: 20rpx;
+	}
+	
+	.desc {
+		color: #474747;
+		font-size: 28rpx;
+		margin-top: 40rpx;
+	}
+
+	.form {
+		margin-top: 120rpx;
+		margin-bottom: 193rpx;
+		width: 100%;
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
 		align-items: center;
-		height: 80vh;
 
-		.title {
-			line-height: 45rpx;
-			font-weight: 900;
-		}
+		box-sizing: border-box;
+
+		.form-item {
+			width: 100%;
+			min-height: 136rpx;
+			border-bottom: 1rpx solid #E8E8E8;
 
-		.line {
 			display: flex;
-			justify-content: space-between;
 			align-items: center;
-			width: 80%;
-			border-bottom: 1px solid #00000023;
-			padding: 30rpx 0;
-			margin: 0 auto;
+			justify-content: center;
+
+			&:first-child {
+				border-top: 1rpx solid #E8E8E8;
+			}
+
+			.label {
+				width: 110rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				text-align: left;
+				color: #474747;
+			}
+
+			.content {
+				flex: 1;
+				text-align: right;
+			}
 		}
 
-		.chooseAvatar {
-			width: 100%;
+		.btn-avatar {
+			background: transparent;
+			border: none;
+			border-radius: none;
+			box-shadow: none;
 			padding: 0;
 			margin: 0;
-			margin-top: 10vh;
+			font-size: 0;
+			text-align: right;
+		}
+
+		.avatar {
+			display: inline-block;
+			width: 96rpx;
+			height: 96rpx;
+		}
+
+		.btn-phone {
 			border: none;
+			border-radius: 0;
+			padding: 7rpx;
+			margin: 0;
+			text-align: right;
+			color: #7C7C7C;
+			font-size: 26rpx;
+			line-height: 1;
+		}
+
+	}
+	
+	.auth-placeholder {
+		color: #7C7C7C;
+		font-size: 26rpx;
+	}
+
+	
+	.btn {
+		width: 100%;
+		height: auto;
+		border-radius: 45rpx;
+		color: #07C160;
+		border-color: #07C160;
+		padding: 25rpx 0;
+		box-sizing: border-box;
+		font-size: 28rpx;
+		line-height: 1;
+		margin: 0;
+
+		&-confirm {
+			background-color: #07C160;
+			color: #FFFFFF;
 		}
 
-		.btn {
-			// background: $uni-linear-gradient-btn-color;
-			background: $uni-color;
-			color: #fff;
-			width: 80%;
-			padding: 20rpx 0;
-			text-align: center;
-			border-radius: 15rpx;
-			margin-top: 10vh;
+		& + & {
+			margin-top: 34rpx;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages_order/static/auth/avatar.png b/pages_order/static/auth/avatar.png
new file mode 100644
index 0000000..ddc0214
Binary files /dev/null and b/pages_order/static/auth/avatar.png differ
diff --git a/pages_order/static/auth/caution.png b/pages_order/static/auth/caution.png
new file mode 100644
index 0000000..4ead2b6
Binary files /dev/null and b/pages_order/static/auth/caution.png differ
diff --git a/pages_order/static/auth/logo.png b/pages_order/static/auth/logo.png
new file mode 100644
index 0000000..dfe9b0e
Binary files /dev/null and b/pages_order/static/auth/logo.png differ
diff --git a/pages_order/static/auth/selected.png b/pages_order/static/auth/selected.png
new file mode 100644
index 0000000..51d7a51
Binary files /dev/null and b/pages_order/static/auth/selected.png differ