JM-MiniApp/pages/login/login.vue

<script setup>
	// 引入依赖
	import { onLoad } 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))
		// is_login.value = custom.checkLogin()
		// console.log(is_login.value)
	})
	
	// 变量
	const token_info = ref(null)
	const avatarUrl = ref(null)
	const nickname = ref('')
	const res_form = ref(null)
	watch(nickname,(v1,v2)=> {
		console.log("watch",v1)
	})
	// 函数
	function onChooseAvatar(e) {
		// const { avatarUrl } = e.detail 
		// console.log(avatarUrl)
		avatarUrl.value = e.detail.avatarUrl
		
	}
	function getPhoneNumber (e) {
		// tel_code.value = e.detail.code
		// console.log(e)
		getAccess_token({code:e.detail.code})
		// console.log(e.detail.code)  // 动态令牌
		// console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
		// console.log(e.detail.errno)  // 错误码（失败时返回）
	}
	async function getAccess_token(code){//
	    //清除token缓存
	    // wx.clearStorageSync();
		if(!avatarUrl.value) {
			uni.showToast({
				title:"请选择头像！",
				icon:"error",
				duration:1500
			})
			return
		}
		if(!nickname.value) {
			uni.showToast({
				title:"请填写昵称！",
				icon:"error",
				duration:1500
			})
			return
		}
	    //访问接口
		// console.log(code.value);return
	   //  const data={
	   //    username:code,//手机号按钮获取的code
	   //    type:'wechat_mini_app',
	   //    identity:'user',
	   //    password:'111',
		  // avatarUrl:avatarUrl.value,
		  // nickName:nickname.value
	   //  }
		// console.log('登录参数:',data);return;
		// const res = await api.getToken(data)
		// if(res.code === 200) {
		// 	uni.setStorageSync('avatarUrl', avatarUrl.value);//avatarUrl
		// 	res_form.value = res.data
		// 	res_form.value.access_token = 'Bearer '+res.data.access_token
		// 	let userId = res.data.userId
		// 	uni.setStorageSync('access_token',res_form.value.access_token);// token单独缓存一次
		// 	wx_login(userId)
		// }
		uni.setStorageSync('avatarUrl', avatarUrl.value);//avatarUrl
		wx_login(userId)
	}
	async function wx_login(userId){
		let res=await new Promise(resolve=>{
			uni.login({
				  provider: 'weixin', //使用微信登录
				  success: function (loginRes) {
					  resolve(loginRes);
					  console.log(loginRes,'微信登录返回信息');
				  }
			});
		});
		let res2=await api.wx_login({code:res.code},userId);
		if(res2.code === 0) {
			// for(let prop in res_form.value) {
			// 	uni.setStorageSync(prop,res_form.value[prop])
			// }
			uni.setStorageSync('userInfo',JSON.stringify(res_form.value))
			custom.uploadImage(avatarUrl.value,async (file)=>{
				avatarUrl.value = file.data.file.url
				uni.setStorageSync('avatarUrl', file.data.file.url);//头像链接
				const up_res = await updateFunc() // 更新用户信息
				// isInfo // 判断是否填过手术信息的字段（是否使用待定）
				uni.switchTab({
					url:"/pages/user/index"
				})
			})
		}
		else{
			uni.clearStorage();
		}
	}
	async function updateFunc(){ // 更新用户信息,通过此接口获取用户是否填写手术信息
		let user_info = JSON.parse(uni.getStorageSync('userInfo'))
		user_info.avatar = avatarUrl.value
		user_info.id =user_info.userId
		// console.log(user_info)
		return await api.userinfoUpdae(user_info)
	}
	function nameInput(e) {
		nickname.value = e.detail.value
		// console.log('拿到的值：',e)
		// console.log('nickname:',nickname.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
		}
		// let user_info = JSON.parse(uni.getStorageSync('userInfo'))
		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))
			const up_res = await updateFunc() // 更新用户信息
			
			uni.setStorageSync('access_token','Bearer '+token_info.value.access_token);// token单独缓存一次
			uni.switchTab({
				url:"/pages/user/index"
			})
		})
		
	}
</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="btn-part">
		    <!-- <button class="buy-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button> -->
			<button class="buy-btn" @tap="updateInfoFunc">立即登录</button>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.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: 50%;
	  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>