jigesi/pages/my/index2.vue

<template>
	<view class="container">
		<!-- 标题 -->
		<view class="title">
			<text>获取昵称头像</text>
			<text>未选择头像则为默认头像</text>
		</view>
		<!-- 选择头像 -->
		<view class="choose-avatar-row">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
			<text>点击选择头像</text>
		</view>

		<!-- 选择昵称 -->
		<view class="choose-nickname-row">
			<text>昵称</text>
			<input v-model="nickName" @input="inputName" type="nickname" placeholder="请输入昵称" />
		</view>

		<!-- 选择电话 -->
		<view class="choose-nickname-row" style="border: 0;">
			<button class="avatar-wrapper" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				style="width: 100%;">
				<text style="width: 100%;">点击授权获取手机号</text>
			</button>
		</view>
		<view v-if="isPhone" style="text-align: center;">
			<text>已获取手机号</text>
		</view>

		<!-- 按钮 -->
		<view class="login-row">
			<button @click="submit">登录</button>
		</view>
	</view>
</template>

<script>
	// import {
	// 	get,
	// 	post
	// } from '@/utils/request.js'
	// import localStorage from '@/utils/localStorage.js'
	export default {
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				PhoneCode: '',
				imgUrl: '',
				isPhone: false
			}
		},
		mounted() {
			uni.showToast({
				title: '未登录请先注册',
				icon: 'none'
			})
		},
		methods: {
			getPhoneNumber(e) {
				this.PhoneCode = e.detail.code
				console.log(e.detail.code)
				this.isPhone = true
			},
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				this.upImg(this.avatarUrl)
			},
			inputName(e) {
				this.nickName = e.detail.value
			},
			upImg(file) {
				let _this = this
				uni.uploadFile({
					url: 'http://xxxxxx:xxxx/lgb/upload/upload', // 上传的 URL 地址
					filePath: file, // 要上传的图片本地路径
					name: 'file', // 上传图片时使用的字段名
					header: { // 自定义请求头
						'Content-Type': 'multipart/form-data'
					},
					formData: {
						'fileType': 'images',
						'dirName': 'cert'
					},
					success: function(uploadRes) {
						let result = JSON.parse(uploadRes.data)
						localStorage.set('imgUrl', result.data.fileUrl)
						console.log(this.imgUrl)
					},
					fail: function(err) {
						console.log('upload failed:', err)
					}
				})
			},
			async submit() {
				if (!this.nickName || !this.PhoneCode || !localStorage.get('imgUrl')) {
					uni.showToast({
						title: '请将数据填写完整',
						icon: 'none'
					})
					return
				}
				let result = await post('/lgb/user/register', {
					openId: localStorage.get('openid'),
					job: 0,
					name: this.nickName,
					code: this.PhoneCode,
					avatar: localStorage.get('imgUrl')
				}, {});
				setTimeout(() => {
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					})
				}, 800)
			}
		}
	}
</script>
<style lang="scss">
	view {
		box-sizing: border-box;
	}

	.container {

		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.title {
			width: 100%;
			height: 12%;
			font-size: 20px;
			font-weight: bold;
			padding-top: 20px;

			text:nth-child(2) {
				display: block;
				font-size: 14px;
				font-weight: normal;
				margin-top: 5px;
			}
		}

		.choose-avatar-row,
		.choose-nickname-row {
			width: 100%;
			height: 9%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10px 2px;
			font-size: 14px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;

			.avatar-wrapper {
				width: 40px;
				height: 40px;
				margin: 0;
				padding: 0;
				margin-right: 10px;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}
		}

		.choose-nickname-row {
			border-top: none;

			text {
				width: 45px;
				margin-right: 10px;
			}
		}

		.login-row {
			width: 100%;
			height: 30%;
			padding-top: 20px;
			display: flex;

			button {
				font-size: 14px;
				width: 30%;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-color: transparent;
				color: #07c160;
			}

			.inactive {
				color: #ccc;
			}
		}
	}
</style>