hire-wx-houxuanren/pagesD/userinfo.vue

<template>
	<view class="userinfo">
		<view class="user-head u-flex u-row-between">
			<text>头像</text>
			<image :src="userinfo.avatar" mode="aspectFill" @click="uploadimg"></image>
		</view>
		<view class="user-item">
			<view class="item-name">
				昵称
			</view>
			<view class="item-input u-flex">
				<input type="text" placeholder="请输入昵称" :disabled="true" v-model="userinfo.name">
			</view>
		</view>
		<view class="user-item">
			<view class="item-name">
				简介
			</view>
			<view class="item-input u-flex">
				<input type="text" placeholder="添加简介" :disabled="true" v-model="jianjie">
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="safe-area-inset-bottom"></view>
		<view class="user-down">
			<view class="down-btn u-flex">
				<text @click="save">保存</text>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>

	</view>
</template>

<script>
	// import fuxing from "../common/fuxing.js"
	import {
		index
	} from "../units/inquire.js"
	export default {
		data() {
			return {
				userinfo: {},
				jianjie: '',
			}
		},
		onLoad() {
			this.getuser()
		},
		methods: {
			save() {
				if (!this.userinfo.avatar) {
					this.$u.toast("请上传头像")
					return
				}
				if (!this.userinfo.name) {
					this.$u.toast("请输入昵称")
					return
				}
				if (!this.jianjie) {
					this.$u.toast("请输入简介")
					return
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
			},
			uploadimg() {
				uni.chooseImage({
					count: 1,
					success: (img) => {
						uni.showLoading({
							mask: true,
							title: "请稍后"
						})
						uni.uploadFile({
							url: 'https://hire.hdlkeji.com' + '/api/common/upload',
							filePath: img.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								uni.hideLoading()
								if (JSON.parse(res.data).code == 1) {
									this.userinfo.avatar = JSON.parse(res.data).data.fullurl
								} else {
									this.$u.toast(JSON.parse(res.data).msg)
								}
							},
							fail: (e) => {
								console.log(e);
							}
						})
					}
				})
			},
			getuser() {
				index().then(res => {
					this.userinfo = res.data.group_info
					this.jianjie = res.data.group_info.name
				})
			},
		}
	}
</script>

<style lang="scss">
	.userinfo {
		padding: 0 32rpx;

		.user-down {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			width: 750rpx;
			background-color: #fff;

			.down-btn {
				padding: 8rpx 32rpx;

				text {
					line-height: 88rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					width: 100%;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;

				}
			}
		}

		.user-item {
			padding-top: 30rpx;
			border-bottom: 2rpx solid #F0F0F0;

			.item-input {
				height: 100rpx;

				input {
					height: 100rpx;
					flex: 1;
				}
			}

			.item-name {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
			}
		}

		.user-head {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F0F0F0;

			text {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			image {
				border-radius: 100%;
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
</style>