哪位大神能帮我看看问题在哪

uni-app项目编译一直报这个错

说是语法错误检查了好多遍都没发现问题出在哪里(;´༎ຶД༎ຶ`) 

源码：

<template>
	<view class="login">
		<scroll-view class="scrollarea" scroll-y="true" type="list">
			<view class="container">
				<view class="userinfo">
					
					<!-- 1、未点击时 -->
					<view wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
						<!-- 头像 -->
						<!-- chooseAvatar 获取用户头像，可以从bindchooseavatar回调中获取到头像信息 -->
						<!-- change tap input 均为小程序常用事件绑定，使用语法为 bindchange 或者 bind:change -->
						<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
							<image class="avatar" :src="{{userInfo.avatarUrl}}"></image>
						</button>
						<!-- 昵称 -->
						<view class="nickname-wrapper">
							<text class="nickname-label">昵称</text>
							<input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
						</view>
					</view>
					
					<!-- 2、未点击时--判断小程序版本是否可用  -->
					<view wx:elif="{{!hasUserInfo}}" >
						<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
						<view wx:else> 请使用2.10.4及以上版本基础库 </view>
					</view>
					
					<!-- 3、点击后--显示用户头像和昵称 -->
					<view wx:else>
						<image class="userinfo-avatar" :src="{{userInfo.avatarUrl}}" ></image>
						<text class="userinfo-nickname">{{userInfo.nickName}}</text>
					</view>
				</view>
				<view class="usermotto">
					<text class="user-motto">{{motto}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
	export default {
		data() {
			return {
				motto: 'Hello World',
				userInfo: {
					avatarUrl: defaultAvatarUrl,
					nickName: '',
				},
				hasUserInfo: false,
				// wx.canIUse 判断小程序的API，回调，参数，组件等是否在当前版本可用
				//boolean返回值 当前版本是否可用
				canIUseGetUserProfile: wx.canIUse('getUserProfile'),
				canIUseNicknameComp: wx.canIUse('input.type.nickname')
			};
		},
		methods:{
			onChooseAvatar(e) {
				const { avatarUrl } = e.detail;
				const { nickName } = this.data.userInfo;
				this.setData({
					"userInfo.avatarUrl": avatarUrl,
					hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
				});
			},
			onInputChange(e) {
				const nickName = e.detail.value;
				const { avatarUrl } = this.data.userInfo;
				this.setData({
					"userInfo.nickName": nickName,
					hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
				});
			},
			getUserProfile(e) {
				// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res);
						this.setData({
							userInfo: res.userInfo,
							hasUserInfo: true
						});
					}
				});
			}
			
		}
	};
</script>

<style lang="stylus">
	.login
		height 100vh
		display flex
		flex-direction column
		.scrollarea
			flex 1
			overflow-y hidden
			.userinfo
				display flex
				flex-direction column
				align-items center
				color #aaa
				width 80%
				.avatar-wrapper
					padding 0
					width 56px !important
					border-radius 8px
					margin-top 40px
					margin-bottom 40px
					.avatar
						display block
						width 56px
						height 56px
				.nickname-wrapper
					display flex
					width 100%
					padding 16px
					box-sizing border-box
					border-top .5px solid #00000019
					border-bottom .5px solid #00000019
					color black
					.nickname-label
						width 105px
					.nickname-input
						flex 1
				.userinfo-avatar
					overflow hidden
					width 128rpx
					height 128rpx
					margin 20rpx
					border-radius 50%
			.usermotto
				margin-top 200px
	
	

</style>