fhzhenxuanuser_uniapp/pages_course/components/userlogo.vue

<template>
	<view>
		<u-popup :show="userlogo" mode="bottom" round='12' :close-on-click-overlay="false">
			<view class="userlogo column">
				<view class="mtb30 justify-start align-center ml20">
					<u-avatar src="/static/logo.png" size="50"></u-avatar>
					<view class="bold mlr20">御君方</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">
								<u-icon name="checkbox-mark" color="#00aa00" size="22"></u-icon>
							</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>
	import {editUser}from '@/api/course.js'
	export default {
		data() {
			return {
				userlogo:false,
				imgname:'',
				userinfos:{
					nickname:"",
					avatar:""
				},
			}
		},
		computed: {
			nameuser() {
				return this.userinfos.nickname
			},
			avataruser() {
				return this.userinfos.avatar
			},
		},
		methods:{
			//修改用户昵称以及头像
			editUserA(){
				this.userinfos=uni.getStorageSync('web_userInfo')?uni.getStorageSync('web_userInfo'):this.userinfos
				const data={
					nickName:this.userinfos.nickname,
					// avatar:this.userinfos.avatar,
				}
				editUser(data).then(res=>{
					if(res.code==200){
						setTimeout(()=>{
							this.$emit('editUserSuccess')
						},100)
					}else{
						uni.removeStorageSync('web_userInfo')
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				})
			},
			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('web_userInfo',this.userinfos)
				this.editUserA()
				this.userlogo=false
			},
			onNickNameInput(e){
				console.log(e)
				this.userinfos.nickname=e.detail.value
			},
			onChooseAvatar(e){
				this.userinfos.avatar=e.detail.avatarUrl
				uni.uploadFile({
					url: 'https://h5api.his.cdwjyyh.com'+'/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.userinfos.avatar=data.url
					}
				});
			},
		}
	}
</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;
	}
	.exsct {
		height: 92rpx;
		width: 437rpx;
		background-color: transparent;
		border-radius: 69rpx;
		position: absolute;
		top: 27rpx;
		left: 28rpx;
		box-shadow: inset -57rpx 0px 40rpx -26rpx rgba(255, 255, 255, 0.7);
		will-change: left, opacity;
		animation: leftFade 2s linear infinite;
		opacity: 0;
	}
</style>