an_xiao/police_uniapp/pagesD/edituserinfo/edituserinfo.vue

<template>
	<view class="my-sign">
		<view class="mySignItem">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<view class="mySignIndex">
				<u--form labelWidth="150rpx" :model="dataUser" ref="uForm" labelAlign="left">
					<!-- <u-form-item label="姓名:" prop="name" borderBottom>
						<u--input clearable placeholder="请输入姓名" v-model="dataUser.name"></u--input>
					</u-form-item> -->
					<u-form-item @click="titleClick" label="部门:" prop="title" borderBottom>
						<view class="dataUserunit" :style="{color: dataUser.title ||'#c2cad2'}" name="unit"
							v-model="dataUser.title">{{dataUser.title || "请输入部门"}}</view>
						<u-picker itemHeight="75" @confirm="titleConfrm" :show="showtitle" :columns="titleSelect"
							keyName="label" @cancel="showtitle = false" @close="showtitle = false"></u-picker>
					</u-form-item>
				</u--form>
			</view>
			<view class="SignItem">
				<view class="Cancel">
					<u-button color="#4e87ff" @click="userSubmit">提交</u-button>
				</view>
			</view>
			<view>
				<u-modal @cancel="usermessage = false" zoom @confirm="userconfirm" :show="usermessage" :asyncClose="true"
					:showCancelButton="true" width="500rpx" content='是否确认修改信息?'></u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		postAddupdate
	} from '@/api/login';
	import {
		customTotast
	} from '@/utils/index';
	export default {
		data() {
			return {
				dataUser: {
					name: '',
					title: '',
				},
				usermessage:false,
				showtitle: false,
				titleSection: [
					['公安分局', '内保大队', '派出所']
				],
				title2Section: [
					['区教育局', '区教育局安保科', '学校老师', '学校保安']
				]
			};
		},

		computed: {
			// 拿取vuex里的数据
			...mapGetters({
				getopenid: 'openid/getopenid',
				userInfo: 'users/getLoginInfo'
			}),
			titleSelect() {
				return this.userInfo.borough === '公安机关' ? this.titleSection : this.title2Section
			}

		},
		created() {},
		onShow() {},
		onLoad() {},
		methods: {
			...mapMutations({
				updateList: 'users/updateList',
			}),
			// 部门
			titleClick() {
				console.log(this.userInfo);
			  this.showtitle = true
			},
			titleConfrm(e) {
				this.dataUser.title = e.value[0]
				this.showtitle = false
			},
			
			userSubmit(){
				this.usermessage = true
			},
			// 提交
			userconfirm(){
				 postAddupdate({
				 	id: this.userInfo.id,
				 	name:this.userInfo.name,
				 	title: this.dataUser.title,
				 }).then((res)=>{
				 	this.updateList(res.data)
					this.usermessage = false
					uni.showLoading({
						title: '正在修改中....'
					});
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: '修改成功'
						});
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/index/index`
							});
						}, 900);
					}, 1000);
				 }).catch((error)=>{
				 	 console.log(error);
				 })
			}
		}
	};
</script>

<style lang="scss">
	.mySignItem {
		.mySignIndex {
			margin: 0rpx 0 0 0;
			position: relative;
			background-color: #fff;
		}
		.dataUserunit {
			padding-left: 16rpx;
		}
		.button {
			position: absolute;
			top: 7px;
			right: -80px;
			width: 64px;
			height: 20px;
			line-height: 20px;
			font-size: 11px;
			border: none;
			color: #ccc;
			outline: none;
			background-color: transparent;
			border: 1px solid none;
			margin-left: 0;
			margin-right: 10px;
			padding-left: 0;
			padding-right: 0;
		}
		.SignItem {
			transform: translateY(15%);
			display: flex;
			flex-direction: column;
			margin: 20rpx 48rpx;
			// background-color: #fff;
			border-radius: 20rpx;
		}
		.Cancel {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			margin: 20rpx 40rpx;
		}

		/deep/.u-form-item {
			line-height: 70rpx;
			position: relative;
		}

		/deep/.u-form-item__body__right {
			padding: 0rpx 150rpx 0 0;
		}

		/deep/ .u-form-item__body__left {
			width: 45px !important;
			margin-left: 40rpx;
		}
		/deep/.u-form-item__body__right__message {
			margin-left: 206rpx !important;
		}
	}
</style>