uni_applet/components/loginPopUp/index.vue

@@ -14,8 +14,10 @@
 		 					拒绝</u-button>
 		 			</view>
 		 			<view class="btn-ok">
-		 				<u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
-		 					@getphonenumber="getPhoneNumber"> 立即登录</u-button>
+						<u-button :customStyle="customStyleOk"
+							@click="toDetail"> 立即登录</u-button>
+		 				<!-- <u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
+		 					@getphonenumber="getPhoneNumber"> 立即登录</u-button> -->
 		 			</view>
 		 		</view>
 		 	</view>
@@ -110,6 +112,12 @@
 		  open(){
 			this.showAuthorizePhone=true
 		  },
+		  toDetail(){
+			this.showAuthorizePhone = false
+			uni.navigateTo({
+				url:'/pageA/login/index'
+			})
+		  },
 		  async getPhoneNumber(e) {
 		  	console.log(0)
 		  	that.userInfo = await this.$request.wxlogin()

uni_applet/pageA/login/index.vue

@@ -1,8 +1,218 @@
 <template>
+	<view class='loginWrap'>
+		<view style='text-align:center;padding:60rpx;'>
+			<u--image width='80' height='80' src="/static/logo.png" radius='10' shape="square"></u--image>
+		</view>
+		<view style='width:80%;margin:0 auto;'>
+			<u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
+				@getphonenumber="getPhoneNumber"> 微信用户一键登录</u-button>
+		</view>
+		<!-- <view><u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
+		 					拒绝</u-button></view> -->
+		<view style='margin:40rpx 0;'>
+			<view style='width: 77%;margin: 0 auto;' class='flex'>
+				<view style='margin-right:5rpx;'>
+					<u--image @click='value= !value' width='16' height='16' :src="value?'/static/image/login/checked.png':'/static/image/login/no-checked.png'" radius='10' shape="square"></u--image>
+				</view>
+				登录代表您已同意<navigator
+							url="/pageA/webview?can_share=false&url=https://liangxin.zthymaoyi.com/youyuquan.html"
+							class="path" hover-class="navigator-hover">用户服务协议和隐私政策</navigator>
+			</view>
+		</view>
+		<u-modal :show="showAuthorizeUser" :showConfirmButton="false">
+			<view class="slot-content">
+				<view class="auth-card">
+					<view class="img">
+						<img class="avatar-img" src="@/static/logo.png" mode="widthFix">
+					</view>
+					<view class="content">邀请您补全个人信息<br></br>（昵称、头像）</view>
+					<view style="margin-left: 100rpx;margin-right: 100rpx">
+						<u-form :model="userInfo" ref="uForm">
+							<u-form-item label="头像">
+								<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
+									slot="right">
+									<image class="avatar"
+										:src="userInfo.head?userInfo.head:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
+									</image>
+								</button>
+							</u-form-item>
+							<u-form-item label="昵称">
+								<u-input inputAlign='right' v-model="userInfo.nickname" class="weui-input"
+									@blur="userNameInput" placeholder="请输入昵称" border="false" />
+								<!-- <input type="nickname" :value="userInfo.nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> -->
+							</u-form-item>
+						</u-form>
+					</view>
+				</view>
+				<view class="auth-btncard">
+					<view class="btn-unok"><u-button :customStyle="customStyleUnOk" @click="authUser(0)">
+							拒绝</u-button>
+					</view>
+					<view class="btn-ok">
+						<u-button :customStyle="customStyleOk" @click="authUser(1)"> 允许</u-button>
+					</view>
+				</view>
+			</view>
+		</u-modal>
+	</view>
 </template>
 
 <script>
+	var that
+	export default {
+	 data() {
+	 	return {
+	 		userInfo: {
+	 			head: '',
+	 			nickname: '',
+	 			phone: '',
+	 		},
+			showAuthorizeUser:false,
+			value:false,
+	 		customStyleUnOk: {
+	 			marginTop: '20rpx',
+	 			color: '#eaad1a',
+	 			border: '2px solid #eaad1a',
+	 			"border-radius": "10px",
+	 			fontSize: "32rpx"
+	 		},
+	 		customStyleOk: {
+	 			marginTop: '20rpx',
+	 			color: '#000',
+	 			// border: '2px solid #eaad1a',
+	 			"border-radius": "10px",
+	 			fontSize: "32rpx",
+				padding:'0 5px',
+	 			background: " linear-gradient(to right,#FED41E,#FDC21D);"
+	 		},
+	 	};
+	 },
+	  props: {
+	
+	    content: {
+	      type: String,
+	      default: ""
+	    },
+	  },
+	
+	  watch:{
+	
+	  },
+		
+	  mounted() {
+		that = this
+	  },
+	  computed: {
+	
+	  },
+	  methods: {
+		  radiochange(e){
+			  
+		  },
+		  open(){
+			this.showAuthorizePhone=true
+		  },
+		  async getPhoneNumber(e) {
+			  if(this.value){
+				  console.log(0)
+				that.userInfo = await this.$request.wxlogin()
+				console.log(that.userInfo,1111)
+				that.userInfo.phone = await this.$request.getPhone(e, that.userInfo)
+				console.log(that.userInfo,2222)
+				this.showAuthorizeUser = true
+			  }else{
+				uni.showToast({
+					icon: "none",
+					title: '请阅读并勾选用户协议和隐私政策',
+					duration: 3000
+				});
+			  }
+		  	
+		  
+		  },
+		  async authUser(type) {
+		  	//同步信息，没有头像和昵称自动生成
+		  	this.userInfo = await this.$request.syncInfo(this.userInfo)
+		  	if (this.userInfo.openId) {
+		  		uni.setStorageSync("userInfo", that.userInfo)
+		  		that.showAuthorizeUser = false
+				uni.navigateBack()
+		  		// that.mescroll.resetUpScroll()
+		  	}
+		  },
+	  }
+	}
 </script>
 
-<style>
+<style lang='scss' scoped>
+	.loginWrap{
+		background:#fff;
+		height:100vh;
+	}
+	/deep/.u-transition{
+		align-items: center;
+	}
+	.path{
+		color:#FDC21D;
+	}
+	/deep/.u-radio-group{
+		flex: 0.7 !important;
+	}
+	.auth-btncard {
+		display: flex !important;
+		justify-content: space-between !important;
+	
+		.btn-unok {
+			width: 40%;
+		}
+	
+		.btn-ok {
+			width: 40%;
+		}
+	}
+	
+	.auth-card {
+		text-align: center;
+	
+		.avatar-img {
+			width: 250rpx;
+		}
+	
+		.title {
+			font-size: 20rpx;
+		}
+	
+		.content {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #1A1A1A;
+			margin-bottom: 30rpx;
+		}
+	}
+	
+	.avatar-wrapper {
+		color: #333 !important;
+		border: none !important;
+		border-radius: 0 !important;
+		background-color: transparent !important;
+		padding: 0;
+	}
+	
+	.avatar-wrapper::after {
+		border: none !important;
+	}
+	
+	.avatar {
+		width: 100rpx;
+		height: 100rpx;
+		overflow: hidden;
+		border-radius: 100%;
+	}
+	
+	/deep/.u-popup__content {
+		border-radius: 20rpx !important;
+	}
+	/deep/.u-button--normal{
+		padding: 0 5px;
+	}
 </style>

uni_applet/pages/my/my.vue

@@ -8,15 +8,15 @@
 					</view>
 					<view>
 						<view class='flex'>
-							<view v-if='!edit'>{{userInfo.nickname}}</view>
+							<view @click='login' v-if='!edit'>{{userInfo.nickname?userInfo.nickname:'请点击登录'}}</view>
 							<view v-else> <u--input
 								placeholder="请输入内容"
 								border="bottom"
 								v-model='userInfo.nickname'
 								clearable
 							  ></u--input></view>
-							<u-icon  v-if='!edit' @click='edit = true' name="edit-pen-fill" color="#2979ff" size="24"></u-icon>
-							<u-icon  v-else @click='editNickName' name="checkbox-mark" color="#2979ff" size="24"></u-icon>
+							<u-icon  v-if='!edit&&userInfo.phone' @click='edit = true' name="edit-pen-fill" color="#2979ff" size="24"></u-icon>
+							<u-icon  v-if='edit&&userInfo.phone' @click='editNickName' name="checkbox-mark" color="#2979ff" size="24"></u-icon>
 						</view>
 						<view>{{userInfo.phone1}}</view>
 					</view>
@@ -152,6 +152,13 @@
 					uni.setStorageSync("userInfo",this.userInfo)
 					this.edit=false
 				})
+			},
+			login(){
+				if(!uni.getStorageSync("userInfo").phone){
+					this.$refs.loginpopup.open()
+				}else{
+					
+				}
 			}
 		}
 	}