front/pages/user/setting/info.vue

<template>
	<view class="container padding-lr-sm" v-if="fetch && fetch.user">
		<use-tabbar :tabbar="false"></use-tabbar>

		<view class="border-radius dflex-b bg-main padding-lr-sm padding-tb-sm margin-top" @click="openAvatar">
			<text>头像</text>
			<view class="dflex-c">
				<image class="border-radius-c headimg image-60 margin-right-xs" :src="fetch.user.avatar" />
				<view class="iconfont iconjiantou-01 fs-sm" style="color: rgb(192, 192, 192);"></view>
			</view>
		</view>
		<l-clipper v-if="avatar" :image-url="fetch.user.avatar" @success="uploadAvatar" @cancel="avatar = false" />

		<view class="border-radius margin-top-sm">
			<view class="use-list-title dflex-b padding-lr-sm w-full bg-main" @click="open('nick')">
				<view class="dflex">
					<text class="flex1 ws-np" style="font-size: 13px; font-weight: normal;">昵称</text>
				</view>
				<view class="dflex margin-left-xl">
					<text class="tip line-height-1 margin-right-xs">{{fetch.user.name}}</text>
					<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
				</view>
			</view>

			<u-popup mode="center" @close="close('nick')" :show="show.nick" round="14" :closeable="true">
				<view class="alert-area border-radius bg-main pos-r">
					<view class="dflex-b ft-dark margin-bottom-sm margin-lr-xs">
						<view>修改昵称</view>
					</view>

					<view class="dflex border-radius-sm field" style="padding: 8px 7px;">
						<u--input placeholder="请输入昵称" v-model="fetch.user.name" class="fwb fs-sm" type="nickname"
							border="none" :focus="true" :clearable="true"></u--input>
					</view>

					<!-- 提交按钮 -->
					<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm"
						@click="update('nick')">
						提交
					</view>
				</view>
			</u-popup>

			<!-- 性别项 -->
			<view class="use-list-title dflex-b padding-lr-sm w-full bg-main" @click="open('sex')">
				<view class="dflex">
					<text class="flex1 ws-np" style="font-size: 13px; font-weight: normal;">性别</text>
				</view>
				<view class="dflex margin-left-xl">
					<text class="tip line-height-1 margin-right-xs">{{sexName}}</text>
					<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
				</view>
			</view>

			<u-action-sheet :actions="sex" :closeOnClickAction="true" :closeOnClickOverlay="true" :show="show.sex"
				@select="setSex" @close="close('sex')" :round="14" title="修改性别"></u-action-sheet>

			<view class="use-list-title dflex-b padding-lr-sm w-full bg-main" @click="open('sign')">
				<view class="dflex">
					<text class="flex1 ws-np" style="font-size: 13px; font-weight: normal;">个人签名</text>
				</view>
				<view class="dflex margin-left-xl">
					<text class="tip line-height-1 margin-right-xs">{{fetch.user.sign}}</text>
					<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
				</view>
			</view>

			<u-popup mode="center" @close="close('sign')" :show="show.sign" round="14" :closeable="true">
				<view class="alert-area border-radius bg-main pos-r">
					<view class="dflex-b ft-dark margin-bottom-sm margin-lr-xs">
						<view>修改个人签名</view>
					</view>

					<view class="dflex border-radius-sm field" style="padding: 8px 7px;">
						<u--input placeholder="请输入个人签名" v-model="fetch.user.sign" class="fwb fs-sm" type="textarea"
							border="none" :focus="true" :clearable="true"></u--input>
					</view>

					<!-- 提交按钮 -->
					<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm"
						@click="update('sign')">
						提交
					</view>
				</view>
			</u-popup>
		</view>

		<view class="padding"></view>
	</view>

</template>

<script>
	import lClipper from "@/lib/l-clipper/l-clipper.vue";
	export default {
		components: {
			lClipper
		},
		data() {
			return {
				fetch: {},
				avatar: false,
				show: {
					nick: false,
					sign: false,
					sex: false,
				},
				sex: [{
						id : 1,
						name: '男'
					},
					{
						id: 2,
						name: '女'
					},
					{
						id: 3,
						name: '未知'
					}
				],
			}
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			sexName() {
				const match = this.sex.find(item => item.id === this.fetch.user.sex);
				return match ? match.name : '';
			}
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'user.info');
			},
			update: function(key) {
				if (key == 'nick' && !this.fetch.user.name) {
					return this.Dever.alert('昵称不能为空');
				}
				if (key == 'sign' && !this.fetch.user.sign) {
					return this.Dever.alert('个人签名不能为空');
				}
				this.close(key);
				this.DeverApi.post('user.update', this.fetch.user);
			},
			setSex: function(e) {
				this.fetch.user.sex = e.id;
				this.update('sex')
			},
			uploadAvatar: function(e) {
				var url = e.url;

				this.avatar = false;
				this.DeverApi.upload(e.url, 'avatar', 1, (type, file) => {
					this.fetch.user.avatar = file;
					this.DeverApi.post('user.update', {
						avatar: file
					});
				});
			},
			openAvatar: function() {
				this.avatar = true;
			},
			open(key) {
				this.show[key] = true;
			},
			close(key) {
				this.show[key] = false;
			},
		}
	}
</script>

<style>
	.image-60 {
		width: 56rpx;
		height: 56rpx;
	}
</style>