cyzh-SoundOfMusic-H5/pages/mine/edit.vue

<template>
	<view>
		<view class="flex padding justify-between align-center">
			<view class="title">头像</view>
			<u-avatar src="/static/avatar.png" size="120"></u-avatar>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="flex padding justify-between align-center">
			<view class="title">昵称</view>
			<u-input v-model="name" :clearable="false" inputAlign="right" placeholder="请输入昵称"></u-input>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="flex padding justify-between align-center">
			<view class="title">性别</view>
			<view style="width: 200upx;">
				<u-input v-model="sex" type="select" :border="border" @click="sexShow = true"></u-input>
				<u-action-sheet :list="actionSheetList" v-model="sexShow" @click="actionSheetCallback"></u-action-sheet>
			</view>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="flex padding justify-between align-center" @click="calendarShow = true">
			<view class="title">生日</view>
			<view>{{birthday}}</view>
			<u-calendar v-model="calendarShow" mode="date" @change="change"></u-calendar>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="padding">
			<view class="title">个人介绍</view>
		</view>
		<view style="padding: 0 40upx">
			<u-input v-model="introduction" type="textarea" :clearable="false" height="140" :autoHeight="false" maxlength="60" placeholder="请输入个人简介" />
		</view>
		<view class="flex justify-end padding-right-sm padding-bottom-sm text-gray">{{introduction.length}} / 60</view>
		<view class="footer-fixed margin-bottom">
			<u-button class="custom-style" shape="circle">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: 'Daniel Hua',
				sex: '男',
				sexShow: false,
				border: true,
				show: false,
				actionSheetList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				calendarShow: false,
				birthday: '2020-7-14',
				introduction: '',
			}
		},
		methods: {
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.sex = this.actionSheetList[index].text;
			},
			change(e) {
				console.log(e);
				this.birthday = e.result;
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.title {
		font-size: 30upx;
		font-weight: bold;
		color: #060606;
		padding-left: 10upx;
	}
	.custom-style {
		background-color: #5a3ee7;
		color: #ffffff;
		width: 600rpx;
	}
</style>