JM-MiniApp/pages/login/login.vue

<script setup>
	// 引入依赖
	import { onLoad, onBackPress } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick,watch} from "vue"
	import {useStore} from '@/store/index.js'
	const store = useStore()
	import api from "@/api/index"
	import custom from "@/utils/index.js"
	onLoad((e) => {
		token_info.value = JSON.parse(decodeURIComponent(e.token_info))
	})
	onBackPress(() => {
		return false
	})
	// 变量
	const token_info = ref(null)
	const avatarUrl = ref(null)
	const nickname = ref('')
	var isOperation = ref([ // 是否已手术
		{
			index:0,
			name:"否"
		},
		{
			index: 1,
			name: "是"
		}
	])
	// 函数
	function onChooseAvatar(e) {
		avatarUrl.value = e.detail.avatarUrl
	}
	
	async function updateFunc(){ // 更新用户信息,通过此接口获取用户是否填写手术信息
		let user_info = JSON.parse(uni.getStorageSync('userInfo'))
		user_info.avatar = avatarUrl.value
		user_info.id =user_info.userId
		return await api.userinfoUpdae(user_info)
	}
	function nameInput(e) {
		nickname.value = e.detail.value
	}
	async function updateInfoFunc() {
		if(!avatarUrl.value) {
			uni.showToast({
				title:"请选择头像！",
				icon:"error",
				duration:1500
			})
			return
		}
		if(!nickname.value) {
			uni.showToast({
				title:"请填写昵称！",
				icon:"error",
				duration:1500
			})
			return
		}
		await custom.uploadImage(avatarUrl.value,async (file)=>{
			avatarUrl.value = file.data.file.url
			uni.setStorageSync('avatarUrl', file.data.file.url);//头像链接
			token_info.value.nickname = nickname.value
			token_info.value.avatar = avatarUrl.value
			uni.setStorageSync('userInfo',JSON.stringify(token_info.value))
			uni.setStorageSync('access_token','Bearer '+token_info.value.access_token);// 为了保险,token单独缓存一次
			const up_res = await updateFunc() // 更新用户信息
			store.checkLogin() // 检查一遍登录情况
			uni.switchTab({
				url:"/pages/user/index"
			})
		})
		
	}
	function bindOperationPickerChange(e) {
		token_info.value.IsSurgery = e.detail.value
	}
</script>
<template>
	<view class="loginBox page-box img-part card-part"  style="text-align:center">
		<view class="base-info">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="border-radius: 50%;">
			  <image class="avatar" v-if="avatarUrl" mode="aspectFill" :src="avatarUrl"></image>
			  <uni-icons type="person-filled" color="white" v-else size="60"></uni-icons>
			</button> 
			<input type="nickname" @blur="nameInput" class="weui-input" placeholder="请输入昵称" v-model="nickname" />
		</view>
		<!-- <view class="row-box">
			<view class="rb-card" @tap="toDetail(5)">
				  <view class="rbc-content">
					  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
						   <uni-icons type="paperplane" color="gray" size="26"></uni-icons>
						  已经手术</view>
					  <view class="rbc-content-row rbc-content-right">
						  <picker @change="bindOperationPickerChange" :value="token_info?.IsSurgery" :range="isOperation" range-key="name" >
							<view class="rbc-content-row rbc-content-right rbc-content-right-box">
								<view class="uni-input">{{ isOperation[token_info?.IsSurgery]?.name }}</view>
								<uni-icons type="forward" color="gray" size="20"></uni-icons>
							</view>
						  </picker>
					  </view>
				  </view>
			</view>
		</view> -->
		<view class="btn-part">
			<button class="buy-btn" @tap="updateInfoFunc">立即登录</button>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.rbc-content-right-box,.rbc-content-left-box{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.row-box{
		padding: 20rpx 0;
		.rb-card{
			padding: 20rpx;
			background: white;
			margin-bottom: 2rpx;
			.rbc-title{
				
			}
			.rbc-content-box{
				margin-top: 10rpx;
				.rbc-content-row{
					width: 50%;
					text-align: center;
					// padding: 40rpx 20rpx;
					// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
					border-radius: 10rpx;
				}
			}
			.rbc-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.base-info{
		padding: 50rpx 0;
	}
	.loginBox{
		
	}
	/* pages/login/login.wxss */
	page{
	  height: 100%;
	}
	.container{
	  align-items: center;
	}
	.title{
	  font-weight: bolder;
	  font-size: 40rpx;
	}
	.more-info{
	  color: gray;
	  font-size: 24rpx;
	  margin-top: 1rem;
	}
	.buy-btn{
	  display: inline-block;
	  margin-top:1rem;
	  background-color: #26758d;
	  color: white;
	  border-radius: 50rpx;
	  font-weight: 200;
	  font-size: 24rpx;
	  width: 80%;
	  padding: 10rpx 0;
	}
	.title-part{
	  text-align: center;
	}
	.avatar-wrapper{
	  width: 160rpx !important;
	  height: 160rpx;
	  padding: 0px;
	  margin: 0 auto;
	  overflow: hidden;
	  margin-bottom: 40rpx;
	  // border: 1px solid #26758d;
	      background: #ececec;
		      display: flex;
		      align-items: center;
		      justify-content: center;
	}
	.avatar{
	  width: 160rpx;
	  height: 160rpx;
	}
	.weui-input{
	
	}
</style>