fangliaoxiaochengxv/subPages/register/index.vue

<template>
	<view class="app-page">
		<!-- <view class="card-box" style="margin-top: 20rpx;" @click="show = true">
			<text class="left-title">用户身份</text>
			<view class="h-view">
				<text>{{selectItem.label || '请选择'}}</text>
				<u-icon name="arrow-right" color="#AEAEAE" size="15rpx" customStyle="padding: 12rpx;margin-right:8rpx">
				</u-icon>
			</view>
		</view> -->
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
			style="border: none;background: transparent;margin: 0;padding: 0;">
			<view class="card-box">
				<text class="left-title">头像</text>
				<view class="h-view">
					<u--image v-if="headimg" width='50rpx' height='50rpx' radius="100%" shape='circle'
						customStyle="margin: 0" :src="headimg" :fade="true" duration="450" mode='heightFix'></u--image>
					<view class="v1" v-else>
						<u--image width='50rpx' height='50rpx' radius="100%" shape='circle'
							:src="`${$getImgBaseUrl()}nologin.png`" :fade="true" duration="450" mode='heightFix'>
						</u--image>
					</view>
					<u-icon name="arrow-right" color="#AEAEAE" size="15rpx"
						customStyle="padding: 12rpx;margin-right:8rpx">
					</u-icon>
				</view>
			</view>

		</button>
		<view class="card-box">
			<text class="left-title">姓名</text>
			<view class="h-view">
				<u-input v-model="username" placeholder="请输入" type="nickname" border="none" :auto-height="true"
					clearable customStyle="margin:0 20rpx;text-align: right;" />
			</view>
		</view>

		<view class="card-box">
			<text class="left-title">手机号</text>
			<view class="h-view">
				<u-input v-model="phone" placeholder="请输入" type="number" border="none" :auto-height="true" clearable
					:maxlength="11" customStyle="margin:0 20rpx;text-align: right;" />
			</view>
		</view>
		<!-- <view class="card-box">
			<text class="left-title">微信号</text>
			<view class="h-view">
				<u-input v-model="wechat" placeholder="请输入" type="text" border="none" :auto-height="true" clearable
					customStyle="margin:0 20rpx;text-align: right;" />
			</view>
		</view> -->
	<!-- 	<view class="card-box" v-if="selectItem.value && (selectItem.value == '2' || selectItem.value == '3')">
			<text class="left-title">单位名称</text>
			<view class="h-view">
				<u-input v-model="corp_name" placeholder="请输入" type="text" border="none" :auto-height="true" clearable
					customStyle="margin:0 20rpx;text-align: right;" />
			</view>
		</view> -->
		<view class="bottom-view">

		</view>
		<view class="bottom-menu-box">
			<view class="common-btn" @click="commit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadBase64File,
	} from "@/common/api/common.js";

	import {
		updateUserInfo,
		userRegister,
		getUserInfo,
		userBindPhone,
		userBindNickname
	} from "@/common/api/user.js";
	export default {
		data() {
			return {
				show: false,
				isNeedUpLoad: false,
				userInfo: {},
				selectItem: {},
				username: undefined,
				headimg: undefined,
				avatarUrl: undefined,
				phone: undefined,
				wechat: undefined,
				corp_name: undefined,
				list: [{
						value: '1',
						label: '网红达人'
					},
					{
						value: '2',
						label: '品牌商家'
					},
					{
						value: '3',
						label: '经纪机构'
					}
				],
			}
		},
		computed: {
			formData() {
				return {
					username: this.username,
					headimg: this.avatarUrl,
					phone: this.phone,
					// wechat: this.wechat,
					// corp_name: this.corp_name,
				}
			}
		},
		onLoad(options) {},

		onShow() {
			this.reUserInfo();
			this.getUserInfo();
		},
		methods: {
			commit() {
				if (this.isNeedUpLoad) {
					this.getImageInfo()
					return
				}
				userBindPhone({phone: this.phone}).then(res => {
					uni.setStorageSync('token', res.data.token.token)
					uni.setStorageSync('userInfo', JSON.stringify(res.data))
					uni.$u.toast('提交成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 800);
				})
			},
			reUserInfo() {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo && JSON.parse(userInfo).nickname != '' && JSON.parse(userInfo).headimg != '') {
					this.userInfo = JSON.parse(userInfo);
					this.avatarUrl = this.userInfo.headimg
					this.headimg = this.userInfo.headimg
					this.username = this.userInfo.username
					this.phone = this.userInfo.phone
					this.wechat = this.userInfo.wechat
					this.corp_name = this.userInfo.corp_name
					if (this.userInfo.vip_code && this.userInfo.vip_code != '0') {
						this.selectItem = this.list[this.userInfo.vip_code - 1]
					}
				}
				console.log("reUserInfo==>", this.userInfo);
			},
			async getUserInfo() {
				const data = {}
				await getUserInfo(data)
					.then(res => {
						if (res.data) {
							uni.setStorageSync('token', res.data.token.token)
							uni.setStorageSync('userInfo', JSON.stringify(res.data))
							this.userInfo = res.data;
							console.log("getUserInfo==>", this.userInfo)
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
				await this.reUserInfo();
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log('成功授权', avatarUrl)
				this.headimg = avatarUrl
				this.isNeedUpLoad = true;
			},
			getImageInfo() {
				// 获取当前图片信息
				uni.getImageInfo({
					src: this.headimg,
					success: (image) => {
						// 做png/jpeg的类型判断————对不同类型的图像添加不同的转换头信息
						if (image.type == 'png' || image.type == 'jpeg') {
							// 对符合类型的图片转换为base64类型
							uni.getFileSystemManager().readFile({ // 【重点来啦】人家自提供的转码API
								filePath: image.path, // 所需转码图像路径
								encoding: "base64", // 转码类型
								success: (res) => {
									// 生成base64
									let imageBase64 = 'data:image/' + image.type + ';base64,' + res
										.data;
									console.log('转base64后：', imageBase64);
									this.uploadBase64File(imageBase64)
								}
							})
						} else { // 友好一点，不是以上类型做出提醒
							uni.showToast({
								title: '当前只支持png/jpeg格式',
								duration: 2500,
								icon: 'none'
							})
						}
					}
				});
			},
			uploadBase64File(imageBase64) {
				uploadBase64File({
						base64: imageBase64
					}, {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					})
					.then((res) => {
						console.log("uploadFile==>", res.data.url)
						this.avatarUrl = res.data.url
						this.headimg = res.data.url
						this.bindNickname();
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			bindNickname(url) {
				this.isNeedUpLoad = false;
				const data = {
					nickname: this.userName,
					username: this.userName,
					headimg: url,
				};
				userBindNickname(data).then((res) => {
					console.log("绑定昵称等==>", res.data);
					if (res.data) {
						if(res.data.token) {
								uni.setStorageSync('token', res.data.token.token)
						}
						uni.setStorageSync('userInfo', JSON.stringify(res.data))
						// uni.$u.toast('注册成功')
						// setTimeout(() => {
						// 	uni.navigateBack()
						// }, 800);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 40rpx 0 0;
	}


	.card-box {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin: 0 auto 20rpx auto;
		display: flex;
		padding: 20rpx 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.h-view {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.left-title {
		font-size: 28rpx;
	}


	button::after {
		border: none;
	}

	.avatar-wrapper button::before {
		padding: 0;
		margin: 0;
		border-radius: 20rpx;
		background: transparent;
		border: none;
		line-height: 1;
	}

	.avatar-wrapper button::after {
		padding: 0;
		margin: 0;
		border-radius: 20rpx;
		background: transparent;
		border: none;
		line-height: 1;
	}

	.bottom-view {
		margin-bottom: var(--window-bottom);
		padding-bottom: calc(150rpx);
	}




	.bottom-menu-box {
		height: calc(150rpx);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		position: fixed;
		z-index: 9;
		background: white;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		width: 100vw;
		padding: 0 20rpx;
		box-sizing: border-box;
		.common-btn {
			width: 100%;
		}

		button::after {
			height: 78rpx;
			line-height: 78rpx;
		}

		.primary-btn:active {
			opacity: 0.7;
		}
	}
</style>