ybxf-security-uniapp/pages/mine/info/edit.vue

<template>
	<view class="">
		<!--  #ifdef H5 -->
		<navInfo :title="'编辑资料'"></navInfo>
		<view class="bgTopImg">
			<image slot="right" :src="`${urls}/navBg@2x.png`" class="bgTopImg"></image>
		</view>
		<!-- #endif -->
		<view class="uni-container">
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
					<u--form label-position="top" :model="user" ref="customForm" label-width='100'>
						<view class="flex flex-direction-row">
							<view class="flex justify-center align-center" style="width: 12%;">
								<image :src="`${urls}/info/id.svg`" class="editimg"></image>
							</view>
							<view style="width: 88%;">
								<u-form-item label-position="top" label="用户名" prop="userInfo.nickname" borderBottom>
									<u--input v-model="user.userInfo.nickname" border="none" placeholder="用户名">
									</u--input>
									<image slot="right" :src="`${urls}/info/edit.svg`" class="edit"></image>
								</u-form-item>
							</view>
						</view>
						<!-- <view class="flex flex-direction-row">
							<view class="flex justify-center align-center" style="width: 12%;">
								<image :src="`${urls}/info/username.svg`" class="editimg"></image>
							</view>
							<view style="width: 88%;">
								<u-form-item label-position="top" label="姓名" prop="userInfo.username" borderBottom>
									<u--input v-model="user.userInfo.username" border="none" placeholder="姓名">
									</u--input>
									<image slot="right" :src="`${urls}/info/edit.svg`" class="edit"></image>
								</u-form-item>
							</view>
						</view> -->
						<view class="flex flex-direction-row">
							<view class="flex justify-center align-center" style="width: 12%;">
								<image :src="`${urls}/info/gender.svg`" class="editimg"></image>
							</view>
							<view style="width: 88%;">
								<u-form-item label-position="top" label="性别" prop="userInfo.sexname" borderBottom
									@click="showSex = true; hideKeyboard()">
									<u--input v-model="user.userInfo.sexname" disabled disabledColor="#ffffff"
										placeholder="请选择性别" border="none"></u--input>
									<image slot="right" :src="`${urls}/info/edit.svg`" class="edit"></image>
								</u-form-item>
							</view>
						</view>
						<!-- <view class="flex flex-direction-row">
							<view class="flex justify-center align-center" style="width: 12%;">
								<image :src="`${urls}s/info/birthday.svg`" class="editimg"></image>
							</view>
							<view style="width: 88%;">
								<u-form-item label-position="top" label="出生年月" prop="userInfo.birthday" borderBottom
									@click="showBirthday = true; hideKeyboard()">
									<u--input v-model="user.userInfo.birthday" disabled disabledColor="#ffffff"
										placeholder="请选择出生年月" border="none"></u--input>
									<image slot="right" :src="`${urls}/info/edit.svg`" class="edit"></image>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
							</view>
						</view> -->
						<view class="flex flex-direction-row">
							<view class="flex justify-center align-center" style="width: 12%;">
								<image :src="`${urls}/info/phone.svg`" class="editimg"></image>
							</view>
							<view style="width: 88%;">
								<u-form-item label-position="top" label="手机号" prop="userInfo.mobile" borderBottom>
									<u--input v-model="user.userInfo.mobile" border="none" placeholder="手机号"></u--input>
									<image slot="right" :src="`${urls}/info/edit.svg`" class="edit"></image>
								</u-form-item>
							</view>
						</view>
						<!-- <view class="flex flex-direction-row">
							<view class="flex justify-center align-center" style="width: 12%;">
								<image :src="`${urls}/info/address.svg`" class="editimg"></image>
							</view>
							<view style="width: 88%;">
								<u-form-item label-position="top" label="详细地址" prop="userInfo.remark" borderBottom>
									<u--input v-model="user.userInfo.remark" border="none" placeholder="详细地址">
									</u--input>
									<image slot="right" :src="`${urls}/info/edit.svg`" class="edit"></image>
								</u-form-item>
							</view>
						</view>
						<view class="flex flex-direction-row">
							<view class="flex justify-center align-center" style="width: 12%;">
								<image :src="`${urls}/info/address.svg`" class="editimg"></image>
							</view>
							<view style="width: 88%;">
								<u-form-item label-position="top" label="角色" prop="userInfo.dept.name" borderBottom>
									<u--input v-model="user.userInfo.dept.name" border="none" placeholder="角色">
									</u--input>
									<image slot="right" :src="`${urls}/info/edit.svg`" class="edit"></image>
								</u-form-item>
							</view>
						</view> -->
					</u--form>
					<u-button type="primary" text="确认修改"
						customStyle="height: 72rpx;width: 340rpx;margin-top: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 60rpx;background: #4CB2B6;"
						@click="submit"></u-button>
					<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
						@close="showSex = false" @select="sexSelect">
					</u-action-sheet>
					<!-- 	<u-picker :show="showSex" :columns="actions" keyName="value" @close="showSex = false"
					@cancel="showSex = false" @confirm="sexSelect"></u-picker> -->
					<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
						@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserProfile,
		updateUserProfile
	} from "@/api/system/user"
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	// #ifdef H5
	import navInfo from '@/pagesA/components/my-nav/nav'
	// #endif
	export default {
		components: {
	// #ifdef H5
			navInfo
	// #endif
		},
		data() {
			return {
				urls: baseUrlImg,
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				user: {
					userInfo: {
						nickname: '',
						username: '',
						sex: '',
						birthday: '',
						mobile: '',
						remark: '',
						dept:{name:''}
					},
				},
				showSex: false,
				birthday: Number(new Date()),
				actions: [{
					name: '男',
					id: 1
				}, {
					name: '女',
					id: 2
				}, {
					name: '保密',
					id: 3
				}, ],
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '用户名称不能为空',
						trigger: ['blur']
					},
					'userInfo.nickname': {
						type: 'string',
						required: true,
						message: '用户昵称不能为空',
						trigger: ['blur']
					},
					'userInfo.sex': {
						type: 'number',
						required: true,
						message: '请选择男或女',
						trigger: ['change']
					},
					'userInfo.birthday': {
						type: 'string',
						required: true,
						message: '请选择生日',
						trigger: ['change']
					},
					'userInfo.mobile': {
						// pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
						type: 'string',
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.customForm.setRules(this.rules)
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			sexTrans(val) {
				let eduStr = ''
				this.actions.map(i => {
					if (i.id == val) {
						eduStr = i.name
					}
				})
				return eduStr
			},
			getUser() {
				getUserProfile().then(response => {
					this.user.userInfo = response.data
					this.user.userInfo.sexname = this.sexTrans(this.user.userInfo.sex)
					localStorage.setItem('userMes',JSON.stringify(response.data))
				})
			},
			sexSelect(e) {
				this.user.userInfo.sexname = e.name
				this.user.userInfo.sex = e.id
				this.$refs.customForm.validateField('userInfo.sex')
			},
			birthdayClose() {
				this.showBirthday = false
				this.$refs.customForm.validateField('userInfo.birthday')
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.user.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$refs.customForm.validateField('userInfo.birthday')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.customForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					updateUserProfile(this.user.userInfo).then(response => {
						// this.user = response.data
						uni.navigateBack()
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')/
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.editimg {
		width: 28px;
		height: 28px;
	}

	.edit {
		width: 13px;
		height: 13px;
	}

	.uni-container {
		padding: 10px;
		border-radius: 30px 30px 0px 0px;
		background: #fff;
		/*#ifdef H5*/
		margin-top: 10px;
		/* #endif */
		/* #ifdef  MP-WEIXIN*/
		// margin-top: 200rpx;
		/* #endif */

		z-index: 9999999;
		position: relative;
	}
</style>