yixiang/pageC/userinfo.vue

<template>
	<view class="content">
		<view class="box">
			<u-cell-group :border="false">
				<u-cell title="头像" size="large">
					<view class="value" slot="value">
						<image :src="user.avatar" mode="aspectFill" @click="toavatar"></image>
					</view>
				</u-cell>
				<u-cell title="昵称" size="large" :value="user.username">
					<view class="value" slot="value">
						<u-input v-model="user.username" border="none" inputAlign="right"
							placeholder="请您输入内容"></u-input>
					</view>
				</u-cell>
				<u-cell title="个人简介" size="large" :border="false" :isLink="true" @click="show_intro = true">
					<view class="value text_hide" slot="value"  style="max-width: 350rpx;">
						<text class="text_hide" style="max-width: 200rpx;">{{user.introduction || '介绍一下自己！'}}</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="box">
			<view class="title hflex aend">
				<text>更多信息</text>
				<text>完善信息可以获得更多积分</text>
			</view>
			<u-cell-group :border="false">
				<u-cell :title="item.name" size="large" v-for="(item,index) in list" :key="index">
					<view class="value" slot="value">
						<u-input v-model="item.value" border="none" inputAlign="right" placeholder="请您输入内容"></u-input>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="bottom">
			<view class="btn" @click="save">保存</view>
		</view>
		<u-popup :show="show_intro" @close="toclose" mode="bottom" :round="14">
			<view class="popu">
				<view class="top hflex acenter jbetween">
					<view></view>
					<view class="title">编辑个人简介</view>
					<u-icon name="close" color="#999" size="18" @click="toclose"></u-icon>
				</view>
				<view class="text">
					<u-textarea v-model="user.introduction" height="150" :autoHeight="true" placeholder="介绍一下自己！" count
						maxlength="70" border="none"></u-textarea>
				</view>
				<view class="btn" :class="user.introduction != '' ? '' : 'btn2'" @click="save">保存</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				user: {},
				list: [],
				show_intro: false
			}
		},
		onLoad() {
			this.getuser()
			this.getlist()
		},
		methods: {
			save() {
				var that = this
				let data = {
					username: that.user.username,
					avatar: that.user.avatar,
					introduction: that.user.introduction
				}
				let list = []
				for (var i = 0; i < that.list.length; i++) {
					data[that.list[i].column_id] = that.list[i].value;
				}
				$api.req({
					url: 'user',
					method: 'PUT',
					data: data
				}, function(res) {
					$api.info(res.msg)
					that.toclose()
					setTimeout(() => {
						that.getuser()
					}, 1000)
				})
			},
			toavatar() {
				var _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '上传中'
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: $api.config.baseUrl + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'image',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								var data = JSON.parse(uploadFileRes.data)
								_this.user.avatar = data.data.url
								uni.hideLoading()
							}
						});
					}
				});
			},
			toclose() {
				this.show_intro = false
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'user/extra',

				}, function(res) {
					_this.list = res.data
				})
			},
			getuser() {
				var _this = this
				$api.req({
					url: 'user/info',
					method: 'GET'
				}, function(res) {
					if (res.code == 10000) {
						_this.user = res.data
						if (!_this.user.introduction) {
							_this.user.introduction = ''
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #F4F4F4;

		.popu {
			padding: 40rpx 28rpx;

			.top {
				width: 100%;

				.title {
					font-size: 36rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}

			.btn {
				margin: 48rpx 0 0;
				width: 694rpx;
				height: 88rpx;
				background: #00B0B0;
				border-radius: 44rpx;
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
			}

			.btn2 {
				opacity: 0.4;
			}

			.text {
				margin: 38rpx 0 0;
				width: 694rpx;
				height: 346rpx;
				background: #F4F4F4;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 32rpx 24rpx;

				.u-textarea {
					width: 100%;
					height: 100%;
					padding: 0;
					background: #F4F4F4;

					text {
						background: #f4f4f4 !important;
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 16rpx 24rpx 66rpx;

			.btn {
				width: 100%;
				height: 84rpx;
				background: #00B0B0;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
			}
		}

		.box {
			width: 100%;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 28rpx 28rpx;
			margin: 0 0 20rpx;

			.value {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				input {}

				text {
					width: 450rpx;
				}
			}

			.title {
				text:first-child {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding: 0 0 0 32rpx;
				}
			}
		}

		.u-cell__title {
			white-space: nowrap;
		}
	}
</style>