Case_Collection_System/code/h5/pages/phone/improve.vue

<template>
	<view class="con">
		<view class="improve">
			<view class="improve_title">完善信息</view>
			<view class="improve_con">
				<view class="improve_con_item">
					<view class="improve_con_item_title">姓名*</view>
					<view class="improve_con_item_con">
						<input class="uni-mt-5" trim="all" maxlength="30" v-model="form.name" placeholder="输入姓名" @input="formatterInput($event , 'name')"></input>
					</view>
				</view>
				<view class="improve_con_item">
					<view class="improve_con_item_title">医院/公司</view>
					<view class="improve_con_item_con">
						<input class="uni-mt-5" trim="all" maxlength="30" v-model="form.company" placeholder="输入您所在的单位" @input="formatterInput($event , 'company')"></input>
					</view>
				</view>
			</view>
			<u-button type="primay" class="improve_btn" color="var(--phone-theme-color)" @click="submit">完成</u-button>
		</view>
	</view>
</template>

<script>
	import { setUser } from "@/api/system/user"
	export default {
		data() {
			return {
				form: {
					name: '',
					company: '',
					loginIdentity:''
				},
				isReady: true,
			}
		},
		onLoad(options) {
			this.form.loginIdentity = options.loginIdentity || ''
		},
		methods:{
			formatterInput(e,name){
				let temp = e.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\-]/g, '')
				this.$nextTick(()=>{
					this.form[name] = temp
				})
			},
			async submit(){
				if(!this.form.name){
					uni.$u.toast("请输入姓名！")
					return
				}else if(!this.form.company){
					uni.$u.toast("请输入单位姓名！")
					return
				}
				let userId = this.$store.state.user.userInfo.userId
				let params = {
					"userId": userId, //用户ID
					"nickName": this.form.name, //用户昵称
					"organizationName": this.form.company, //单位名称
					"loginIdentity": this.form.loginIdentity, //身份
				}
				let res1 = await setUser(params)
				if(res1.code != 200){
					return
				}
				let res2 = await this.$store.dispatch('GetInfo')
				if(res2.code != 200){
					return
				}
				this.$tab.reLaunch('/pages/phone/index')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.con{
		.improve{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			&_title{
				margin-top: 86rpx;
				margin-bottom: 40rpx;
				text-align: center;
			}
			&_con{
				padding: 0 32rpx;
				&_item{
					margin: 16rpx 0;
					&_title{
						margin-bottom: 8rpx;
						color: #86909C;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 44rpx; /* 169.231% */
					}
					&_con{
						padding: 0 24rpx;
						border-radius: 8rpx;
						background: #F7F8FA;
					}
				}
			}
			&_btn{
				position: absolute;
				bottom: 0px;
				left: 40rpx;
				right: 40rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 8rpx;
				color: #FFF;
				font-size: 28rpx;
				font-weight: 400;
				width: calc(100% - 80rpx);
			}
		}
	}
	.disabled_btn{
		opacity: .4;
	}
	/deep/ .is-input-border{
		border: none;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #F7F8FA!important;
	}
	input{
		padding: 0!important;
		height: 88rpx;
		line-height: 88rpx;
		color: black;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 88rpx; /* 157.143% */
	}
</style>