tourism/uni_applet/pageA/login/index.vue

<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 v-if='!value' :customStyle="customStyleOk"> 微信用户一键登录</u-button>
			<u-button v-else :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;'>
					<zb-tooltip :content="content" placement="top" ref="tooltip2"  :visible.sync="isShow" >
						<view >
							<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>
					</zb-tooltip>
				</view>
				登录代表您已同意<navigator
							url="/pageA/webview?can_share=false&url=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
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
	 data() {
	 	return {
	 		userInfo: {
	 			head: '',
	 			nickname: '',
	 			phone: '',
	 		},
			isShow:false,
			showAuthorizeUser:false,
			value:false,
	 		customStyleUnOk: {
	 			marginTop: '20rpx',
	 			color: '#eaad1a',
	 			"font-weight": 'bold',
				"background":'#F2F2F2',
	 			"border-radius": "10px",
	 			fontSize: "32rpx"
	 		},
	 		customStyleOk: {
	 			marginTop: '20rpx',
	 			color: '#000',
	 			// border: '2px solid #eaad1a',
	 			"border-radius": "10px",
	 			fontSize: "32rpx",
				"font-weight": 'bold',
				padding:'40rpx',
	 			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()
		  	}
		  },
		  //获取昵称输入内容
		  userNameInput(e) {
		  	this.userInfo.nickname = e.detail.value
		  },
		  async onChooseAvatar(e) {
		  	this.$set(this.userInfo, "head", await this.toBase64(e.detail.avatarUrl))
		  },
		  toBase64(url) {
		  	return new Promise(resolve => {
		  		pathToBase64(url).then(path => {
		  			resolve(path);
		  		}).catch(error => {
		  			console.log(error)
		  		})
		  	})
		  },
	  }
	}
</script>

<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: 200rpx;
		}
	
		.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>