hwnc/components/nologin/nologin.vue

<template>
	<view>
		<u-modal :show="showAuthorizeUser" title="提示" confirmColor="#181a82" @confirm="confirm" @cancel='cancel'
			confirmText="立即登录" cancelText="暂不登录" showConfirmButton="true" showCancelButton="true">
			<view style="text-align: center;padding: 20rpx;">您还没有登录哦</view>
		</u-modal>
		<wxinfo ref="wxinfo" v-on:loginback="loginback"></wxinfo>
	</view>
</template>

<script>
	import loginApi from '@/api/login/login.js';
	import mineApi from '@/api/mine/index.js';
	import wxinfo from '@/components/wxinfo/wxinfo.vue';
	export default {
		name: "nologin",
		props: [],
		components: {
			wxinfo
		},
		data() {
			return {
				user: {
					headimgurl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					nickname: '',
				},
				hasUserInfo: false,
				logo: '',
				// 用户基本信息
				userInfo: null,
				// 微信,支付宝用户code
				code: '',
				// 是否弹出登录注册授权弹窗
				showAuthorizeUser: false,
				showAuthorizePhone: false,
			};
		},
		methods: {
			loginback() {
				//登录回调
				this.$emit('loginback');
			},
			open() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						that.code = loginRes.code;
					}
				});
				that.showAuthorizeUser = true
			},
			cancel() {
				this.showAuthorizeUser = false
			},
			close() {
				this.showAuthorizeUser = false
			},
			getInitInfo() {
				let that = this;
				that.$emit('getInitInfo');
			},
			confirm() {
				let that = this;
				uni.showLoading({
					title: '登录中...'
				});
				// 获取用户基本信息
				uni.getUserProfile({
					desc: '登陆',
					success: function(infoRes) {
						let userInfo = JSON.parse(infoRes.rawData);
						let logdata = {
							type: 1,
							code: that.code,
							pid: uni.getStorageSync('sys_pid'),
							...userInfo
						};
						loginApi
							.wxlogin_v2(logdata)
							.then(res => {
								if (res.status == 200) {
									that.close();
									that.$store.commit('login', res.data.userinfo);
									that.$emit('loginback');
									if (!res.data.userinfo.nickname || !res.data.userinfo.headimgurl) {
										that.$refs.wxinfo.open();
									} else{
										that.$api.msg('登录成功');
									}
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
					},
					fail: err => {
						uni.showToast({
							title: '授权失败',
							icon: 'none'
						});
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.auth-btncard {
		.btn-unok {
			width: 50%;
			float: left;
		}

		.btn-ok {
			width: 50%;
			float: left;
			margin: 0;
			padding: 0;
			border: 0px solid transparent; //自定义边框
			outline: none; //消除默认点击蓝色边框效果

			u-button {
				margin: 0;
				padding: 0;
				border: 0px solid transparent; //自定义边框
				outline: none; //消除默认点击蓝色边框效果
			}
		}
	}

	.auth-card {
		text-align: center;

		.avatar-img {
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 100%;
			margin-top: 30rpx;
		}

		.title {
			font-size: 20rpx;
		}

		.content {
			margin-top: 10rpx;
		}
	}

	.mine_box {
		height: 360upx;
		color: #fff;
		// background-color: $primarycolor;

		.avatar-img {
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 100%;
			/*margin-right: 40rpx;*/
		}

		.avatar_box {
			position: relative;
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 100%;
			margin-right: 40rpx;

			.avatar-img {
				width: 100%;
				height: 100%;
				/* #ifdef MP-WEIXIN*/
				width: 150rpx;
				height: 150rpx;
				/* #endif */
			}

			.get_user_data {
				z-index: 11;
				opacity: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.nick-name-box {
			height: 100%;
		}

		.user-nickName {
			font-size: 40rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}

		.shiming_box {
			border-radius: 10upx;
			font-size: 28upx;
			padding: 10upx 20upx;
			background-color: rgba(15, 77, 139, 0.5);

			.icon-shezhi {
				margin-right: 10rpx;
				margin-top: 5rpx;
			}
		}
	}

	.authorize-box {
		background-color: transparent;
		text-align: center;

		.authorize-avatar {
			width: 200rpx;
			height: 200rpx;
		}

		.authorize-btn {
			position: relative;
			top: 40rpx;
		}
	}

	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}
</style>
<style>
	.avatar-wrapper {
		width: 150rpx;
		height: 100rpx;
		color: #333 !important;
		text-align: center !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
	}

	.avatar-wrapper::after {
		border: none !important;
	}

	.avatar {
		margin-right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		border-radius: 100%;
	}
</style>