lookcommon_course/pages_course/components/loginPop.vue

<template>
	<view>
		<u-popup :show="userlogo" mode="bottom" round='12'>
			<view class="userlogo column">
				<view class="mtb30 justify-start align-center ml20">
					<u-avatar :src="imgPath+'/app/image/logo.png'" size="50"></u-avatar>
					<view class="bold mlr20">{{imgname}}</view>
					<view>申请</view>
				</view>
				<view class="bold fs36 ml20">授权你的昵称头像信息</view>
				<view class="mtb20 justify-between align-center  plr20">
					<view class="justify-start align-center">
						<view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
							<view v-if="userinfos.nickname">√</view>
						</view>
						<view class="ml20">
							<view class="base-color-3 bold">第一步</view>
							<view class="fs32 base-color-9">请点击授权微信昵称</view>
						</view>
					</view>
					<view class="button-container">
					   <input 
					     type="nickname"
					     class="hidden-input"
						 @blur="onNickNameInput"
						 @input="onNickNameInput"
					   />
					   <button class="custom-button" :class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button>
					 </view>
				</view>
				<view class="mtb20 justify-between align-center  plr20 mt40">
					<view class="justify-start align-center">
						<view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
							<view v-if="userinfos.avatar">√</view>
						</view>
						<view class="ml20">
							<view class="base-color-3 bold">第二步</view>
							<view class="fs32 base-color-9">请点击授权微信头像</view>
						</view>
					</view>
					<view class="button-container">
					  <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="hidden-input" 
					  v-if="nameuser">
					    允许授权
					  </button>
					  <button class="custom-button sub" @click="shouquan" v-if="nameuser==''">允许授权</button>
					   <button class="custom-button "  :class="avataruser==''?'subname':'subavt'"
					   v-else>{{avataruser?"已授权":'允许授权'}}</button>
					 </view>
				</view>
				<view class="submitname" @click="confimrname" :class="nameuser&&avataruser?'subact':'sub'">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userlogo:false,
				projectId:'',
				userinfos:{
					nickname:"",
					avatar:""
				},
				headImg:'',
				authType:0,//0微信登录 1手机号登录
				userdisabled:false,
			}
		},
		computed: {
			isAnswer() {
				return (item, name) => {
					if (item.type == 1) {
						return item.answer == name
					} else if (item.type == 2) {
						const array = item.answer.split(',')
						return array.some(i => i == name)
					} else {
						return false
					}
				}
			},
			imgPath() {
			  return this.$store.state.imgpath
			},
			imgname() {
			  return this.$store.state.logoname
			},
			appid() {
				return this.$store.state.appid
			},
			nameuser() {
				return this.userinfos.nickname
			},
			avataruser() {
				return this.userinfos.avatar
			},
		},
		methods: {
			shouquan(){
				if(this.userinfos.nickname==''){
					uni.showToast({
						icon:'none',
						title: "请先授权微信昵称",
					});
				}
			},
			confimrname(){
				if(this.userinfos.nickname==''){
					uni.showToast({
						icon:'none',
						title: "请授权微信昵称",
					});
					return
				}
				if(this.userinfos.avatar==''){
					uni.showToast({
						icon:'none',
						title: "请授权微信头像",
					});
					return
				}
				uni.setStorageSync('userInfos',this.userinfos)
				this.editUserA()
				this.userlogo=false
			},
			onChooseAvatar(e){
				this.userinfos.avatar=e.detail.avatarUrl
				uni.uploadFile({
					url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						'user': 'test'  // 上传附带参数
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						// 根据接口具体返回格式   赋值具体对应url
						var data=JSON.parse(uploadFileRes.data)
						this.headImg=uni.getStorageSync('requestPath')+data.fileName
						this.userinfos.avatar=data.url
					}
				});
			},
			onNickNameInput(e){
				console.log(e)
				this.userinfos.nickname=e.detail.value
			},
			async loginFsUserWx(data){
				if(data){
					console.log('huoqu1222',data)
					uni.showLoading({
						title: '加载中'
					})
					uni.login({
						provider: "weixin",
						success: async loginRes => {
							console.log(loginRes)
							let code = loginRes.code // 获取开发code
							handleFsUserWx({
							   code: code,
							   appId:this.appid,
							   userId:data.userId
							})
							.then( res => {
								if(res.code==200){
									console.log(res)
									uni.hideLoading();
									uni.showToast({
										icon:'none',
										title: "登录成功",
									});
									this.userinfos=uni.getStorageSync('userinfos')
									uni.getStorageSync('TOKEN_WEXIN');
									this.userInfo=uni.getStorageSync('userInfo');
									this.isLogin = true
									setTimeout(()=>{
										this.getIsAddKf()
									},200)
								}else if(res.code==406){
									uni.hideLoading();
									uni.showToast({
										icon:'none',
										title: '该用户已成为其他销售会员',
									});
								}else{
									uni.hideLoading();
									uni.showToast({
										icon:'none',
										title: res.msg,
									});
								}
							   
							 })
						},
					})
				}else{
					await this.$store.dispatch('getWebviewUrl');
					uni.navigateTo({
						url:'/pages_course/webview?H5course='+uni.getStorageSync('H5course')
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.subname{
		background-color: #00aa00;
		color: #fff;
	}
	.subavt{
		background-color: #fff;
		border: 2rpx #0a0 solid;
		color: #00aa00;
	}
	.boxweixin{
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 34rpx;
		color: #0a0;
	}
	.boxnosel{
		border: #757575 4rpx solid;
	}
	.boxsel{
		border: #0a0 4rpx solid;
	}
	.button-container {
	  position: relative;
	  width: 240rpx;
	}
	.hidden-input {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  opacity: 0;
	  z-index: 2;
	}
	.custom-button {
	  position: relative;
	  z-index: 1;
	  /* 其他样式 */
	  width:100%;
	  margin: 0 auto;
	  height: 80rpx;
	  line-height: 60rpx;
	  font-size: 28rpx;
	  padding: 10rpx 20rpx;
	}
	.submitname{
		width: 90%;
		
		margin: 0 auto;
		text-align: center;
		padding: 30rpx;
		margin-top: 40rpx;
	}
	.sub{
		background-color: #f0f0f0;
		color: #0a0;
	}
	.subact{
		background-color: #0a0;
		color: #fff;
	}
	.userlogo{
		height: 760rpx;
	}
</style>