hwnc/components/wxinfo/wxinfo.vue

<template>
	<view>
		<u-modal :show="showAuthorizeUser" :show-title="false" :show-confirm-button="false">
			<view class="slot-content">
				<div class="auth-card">
					<div class="img">
						<img class="avatar-img" :src="logo" mode="widthFix">
					</div>
					<div class="title">{{bname}}</div>
					<div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div>
					<div style="margin-left: 100rpx;margin-right: 100rpx">
						<u-form :model="user" ref="uForm">
							<u-form-item label="头像">
								<view style="width:300rpx; height: 100rpx;">
									<button class="avatar-wrapper" open-type="chooseAvatar"
										@chooseavatar="onChooseAvatar" slot="right">
										<image class="avatar" :src="user.headimgurl"></image>
									</button>
								</view>
							</u-form-item>
							<u-form-item label="昵称">
								<input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称" />
							</u-form-item>
						</u-form>
					</div>
				</div>
				<div class="auth-btncard">
					<div class="btn-unok">
						<u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false">
							拒绝</u-button>
					</div>
					<div class="btn-ok">
						<u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button>
					</div>
				</div>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import loginApi from '@/api/login/login.js';
	import mineApi from '@/api/mine/index.js';
	export default {
		name: "nologin",
		props: [],
		data() {
			return {
				user: {
					headimgurl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					nickname: '',
				},
				hasUserInfo: false,
				logo: '',
				// 用户基本信息
				userInfo: null,
				// 微信,支付宝用户code
				code: '',
				// 是否弹出登录注册授权弹窗
				showAuthorizeUser: false,
				showAuthorizePhone: false,
			};
		},
		methods: {
			open() {
				if (this.$config.shop && this.$config.shop.logo) {
					this.logo = this.$config.shop.logo
				} else {
					this.logo = this.user.headimgurl
				}
				this.showAuthorizeUser = true
			},
			//获取昵称输入内容
			userNameInput(e) {
				this.user.nickname = e.detail.value
			},
			onChooseAvatar(e) {
				let that = this;
				that.user.headimgurl = e.detail.avatarUrl;
				console.log('this.user.headimgurl1', this.user.headimgurl)
				uni.getFileSystemManager().readFile({
					filePath: that.user.headimgurl, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: v => {
						//成功的回调
						let base64 = 'data:image/jpeg;base64,' + v
							.data; // 返回的是没有 'data:image/jpeg;base64,'头的数据, 有需要可自行追加上
						mineApi.addheadimg({
								pic: base64
							})
							.then(res => {
								if (res.status == 200) {
									that.user.headimgurl = res.data;
									console.log('that.user.headimgurl2', that.user.headimgurl)
								}

							});
					}
				});
			},
			chooseAvatar() {
				let that = this;

				function guid2() {
					function S4() {
						return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
					}
					return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
				}
				let token = uni.getStorageSync('token') || '';
				let timestamp = parseInt(new Date().getTime() / 1000);
				let sign = 'getSign'(data);
				let uniqueid = guid2();
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						console.log(res, 'resresres')
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: v => {
								//成功的回调
								let base64 = 'data:image/jpeg;base64,' + v
									.data; // 返回的是没有 'data:image/jpeg;base64,'头的数据, 有需要可自行追加上
								mineApi.addheadimg({
										pic: base64
									})
									.then(res => {
										if (res.status == 200) {
											this.user.headimgurl = res.data;
										}

									});
							}
						});
					}
				});
			},
			authUser() {
				let that = this;
				let userInfo = uni.getStorageSync('userInfo')
				if (that.user.nickname == '') {
					that.$api.msg('请输入您的昵称！');
					return;
				}
				userInfo.headimgurl = that.user.headimgurl;
				userInfo.nickname = that.user.nickname;
				that.userInfo = userInfo;
				uni.setStorageSync('userInfo', userInfo)
				that.user.id = userInfo.id;
				loginApi.upuserinfo(that.user).then(res => {
					if (res.status == 200) {
						that.hasUserInfo = true;
						that.showAuthorizeUser = false;
						that.$emit('loginback');
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</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>