diff --git a/components/vertify/vertify-login.vue b/components/vertify/vertify-login.vue
new file mode 100644
index 0000000..21fccc1
--- /dev/null
+++ b/components/vertify/vertify-login.vue
@@ -0,0 +1,49 @@
+<template>
+	<view>
+		<!-- 模态框 -->
+		<view class="cu-modal" :class="isShow?'show':''">
+			<view class="cu-dialog">
+				<view class="padding-xl text-left">
+					<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
+					<view>1.微信昵称</view>
+					<view>2.微信头像</view>
+				</view>
+				<view class="cu-bar bg-white">
+					<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit" target="miniProgram">拒绝授权
+					</navigator>
+					<view class="modal-bottom-oper margin-0 flex-sub text-main-color solid-left" @tap="confirm">确认授权</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'vertify-login',
+		emits: ['reload'],
+		data() {
+			return {
+				isShow: false
+			}
+		},
+		methods: {
+			showModal(e) {
+				this.isShow = true
+			},
+			hideModal(e) {
+				this.isShow = false;
+			},
+			confirm(e) {
+				this.$request.login().then(res => {
+					if (res) {
+						this.$emit('reload');
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/components/vertify/vertify-phone.vue b/components/vertify/vertify-phone.vue
new file mode 100644
index 0000000..3b24181
--- /dev/null
+++ b/components/vertify/vertify-phone.vue
@@ -0,0 +1,50 @@
+<template>
+	<view>
+		<!-- 模态框 -->
+		<view class="cu-modal" :class="isShow?'show':''">
+			<view class="cu-dialog">
+				<view class="padding-xl">
+					<view>授予小程序绑定微信手机号码的权限</view>
+				</view>
+				<view class="cu-bar bg-white">
+					<navigator class="modal-bottom-oper margin-0 flex-sub text-black solid-right" open-type="exit" target="miniProgram">拒绝授权
+					</navigator>
+					<view class="margin-0 flex-sub">
+						<button class="margin-0 flex-sub cu-btn bg-white text-main-color"
+							open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认授权</button>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'vertify-phone',
+		emits: ['reload'],
+		data() {
+			return {
+				isShow: false
+			}
+		},
+		methods: {
+			showModal(e) {
+				this.isShow = true
+			},
+			hideModal(e) {
+				this.isShow = false;
+			},
+			getPhoneNumber(e) {
+				this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
+					if (res) {
+						this.$emit('reload');
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/main.js b/main.js
index 21c87c2..bc1cfa9 100644
--- a/main.js
+++ b/main.js
@@ -7,10 +7,14 @@ import Data from './common/js/data.js';
 import globalFun from './common/js/glogalFun.js';
 import validate from './common/js/validate.js';
 import request from './common/js/request.js';
-import globalData from './common/js/globalData.js';
+import globalData from './common/js/globalData.js';
+import vertifyLogin from '@/components/vertify/vertify-login.vue';
+import vertifyPhone from '@/components/vertify/vertify-phone.vue';
 
 Vue.component('cu-custom', CuCustom)
 Vue.component('confirm-modal', ConfirmModal);
+Vue.component('vertify-login', vertifyLogin);
+Vue.component('vertify-phone', vertifyPhone);
 
 const data = type => {
 	//模拟异步请求数据
diff --git a/pages/index/home.vue b/pages/index/home.vue
index bcd3eb5..0ceb7a5 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -79,38 +79,10 @@
 			<!-- 热门服务 -->
 			<vertical-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
 			</vertical-goods-card>
-		</view>
-		<!-- 强制要求用户授权登录的弹窗 -->
-		<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
-			<view class="cu-dialog">
-				<view class="padding-xl text-left">
-					<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
-					<view>1.微信昵称</view>
-					<view>2.微信头像</view>
-				</view>
-				<view class="cu-bar bg-white">
-					<navigator class="modal-bottom-oper margin-0 flex-sub text-black" open-type="exit" target="miniProgram">拒绝授权
-					</navigator>
-					<view class="modal-bottom-oper margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权</view>
-				</view>
-			</view>
-		</view>
-		<!-- 手机号授予 -->
-		<view class="cu-modal" :class="isAuthWxPhoneModal?'show':''">
-			<view class="cu-dialog">
-				<view class="padding-xl">
-					<view>授予小程序绑定微信手机号码的权限</view>
-				</view>
-				<view class="cu-bar bg-white">
-					<navigator class="modal-bottom-oper margin-0 flex-sub text-black solid-right" open-type="exit" target="miniProgram">拒绝授权
-					</navigator>
-					<view class="margin-0 flex-sub">
-						<button class="margin-0 flex-sub cu-btn bg-white text-main-color"
-							open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认授权</button>
-					</view>
-				</view>
-			</view>
-		</view>
+		</view>
+		
+		<vertify-login ref="vertifyLogin" @reload="loadData"></vertify-login>
+		<vertify-phone ref="vertifyPhone" @reload="loadData"></vertify-phone>
 	</view>
 </template>
 
@@ -133,8 +105,6 @@
 				hotGoods: [],
 				discountGoods: {},
 				InputBottom: 0,
-				isAuthWxLoginModal: false,
-				isAuthWxPhoneModal: false,
 				searchInfo: {},
 				areaList: [],
 				areaMultiIndex: [0, 0, 0],
@@ -155,17 +125,9 @@
 					mask: true,
 					title: '加载中'
 				})
-				// 更新缓存中的userInfo
-				let res = await this.$request.storageExistUser();
-				// 获取缓存中的userInfo
-				let curUserInfo = this.$request.getCurUserInfo();
-				this.isAuthWxLoginModal = curUserInfo && curUserInfo.openId ? false : true;
-				if (this.isAuthWxLoginModal) {
-					return;
-				}
-				this.isAuthWxPhoneModal = !curUserInfo.phone ? true : false;
-				if (this.isAuthWxPhoneModal) {
-					return;
+				let loginRes = this.authLogin();
+				if (!loginRes) {
+					return;
 				}
 				uni.hideLoading();
 
@@ -187,6 +149,27 @@
 				this.moduleBarInfos = await this.$api.data('moduleBarInfos');
 				// this.hotGoods = await this.$api.data('hotGoods');
 				// this.discountGoods = await this.$api.data('discountGoods');
+			},
+			async authLogin() {
+				// 更新缓存中的userInfo
+				let res = await this.$request.storageExistUser();
+				// 获取缓存中的userInfo
+				let curUserInfo = this.$request.getCurUserInfo();
+				// 校验提示登录
+				if (!curUserInfo || !curUserInfo.openId) {
+					this.$refs.vertifyLogin.showModal();
+					return false;
+				} else {
+					this.$refs.vertifyLogin.hideModal();
+				}
+				// 校验提示获取手机号码
+				if (!curUserInfo.phone) {
+					this.$refs.vertifyPhone.showModal();
+					return false;
+				} else {
+					this.$refs.vertifyPhone.hideModal();
+				}
+				return true;
 			},
 			bindEvent() {
 				uni.$on('index_showProductDetail', this.showDetails);
@@ -306,20 +289,6 @@
 				uni.navigateTo({
 					url: '/pages/product/product-category'
 				})
-			},
-			authWxLogin() {
-				this.$request.login().then(res => {
-					if (res) {
-						this.loadData();
-					}
-				})
-			},
-			getPhoneNumber(e) {
-				this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
-					if (res) {
-						this.loadData();
-					}
-				})
 			}
 		}
 	}