CommunityApp/comps/login.vue

<template>
	<view class="">
		<u-modal v-model="loginshow" width="566" :show-cancel-button="true"
			:title-style="{color: 'black',fontWeight:800,fontSize:'32rpx'}">
			<view class="slot-content">
				<view class="content">
					<view class="userinfo-avatar">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<open-data type="userNickName"></open-data>
					<text class="subtitle">申请获取您的公开信息（昵称,头像）</text>
				</view>
			</view>
			<button @click="getUserInfo" slot="confirm-button" class="cu-btn u-reset-button"
				style="width: 100%;height: 100%;border-radius: 0;background-color: #FFFFFF;">确认</button>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				loginshow: false
			};
		},
		methods: {
			getUserInfo() {
				this.$u.vuex('vuex_isAuth', true)
				this.$emit('signIn')
			},
			show(){
				this.loginshow=true
			},
			hide(){
				this.loginshow=false
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	.slot-content {
		padding: 30rpx 0rpx;
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding-top: 30rpx;
		padding-bottom: 100rpx;

		.userinfo-avatar {
			overflow: hidden;
			display: block;
			width: 140rpx;
			height: 140rpx;
			margin: 20rpx 0rpx 40rpx;
			border-radius: 50%;
			border: 2px solid #fff;
		}

		.subtitle {
			color: #7e7e7e;
			font-size: 26upx;
			margin-top: 30rpx;
		}
	}
</style>