179crm_user_app/pages_health/addUser.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="form-box">
				<text class="form-title">基本信息</text>
				<view class="form-item justify-between">
					<text class="label">头像</text>
					<view class="right">
						<image :src="form.avatar==null?maleurl:form.avatar" class="w90 h90"></image>
						<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
						<button class="wx-head" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						</button>
					</view>
				</view>
				<view class="form-item">
					<text class="label">姓名<text class="color-price">*</text></text>
					<input class="input-width" type="text" v-model="form.username" placeholder="请输入姓名"
						placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">性别<text class="color-price">*</text></text>
					<view class="sex-box">
						<view :class="form.sex==0?'sex-item active':'sex-item'"  @click="sexChange(0)" >
							<u-icon name="man" :color="form.sex==0?'#008FD3':'#EBF8FF'" size="20"></u-icon>
							<text>男</text>
						</view>
						<view :class="form.sex==1?'sex-item active2':'sex-item'"  @click="sexChange(1)" >
							<u-icon name="woman" :color="form.sex==1?'#FF5030':'#898E91'" size="20"></u-icon>
							<text>女</text>
						</view>
					</view>
				</view>
				<view class="form-item">
					<text class="label">出生年月<text class="color-price">*</text></text>
					<picker class="birth-picker" mode="date"   @change="bindDateChange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.birthdate" placeholder="请选择出生年月" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">手机号<text class="color-price">*</text></text>
					<input maxlength="11" class="input-width" type="number" v-model="form.phone" placeholder="请输入手机号" placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">身份证号<text class="color-price">*</text></text>
					<input maxlength="18" class="input-width" type="idcard" v-model="form.idCard" placeholder="请如实填写身份证号" placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">退休前工作单位<text class="color-price">*</text></text>
					<input class="input-width" type="text" v-model="form.previousEmployer" placeholder="请输入工作单位"
						placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">可支配收入<text class="color-price">*</text></text>
					<input  class="input-width" type="digit" v-model="form.disposableIncome" placeholder="请输入支配收入"
						placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">实际消费<text class="color-price">*</text></text>
					<input class="input-width" type="digit" v-model="form.actualConsumption" placeholder="请输入实际消费"
						placeholder-class="form-input" />
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">家庭地址及居住情况</text>
				
				<view class="form-item">
					<text class="label">市区<text class="color-price">*</text></text>
					<picker class="birth-picker" mode="region" level="city"  @change="bindCityChange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.city" placeholder="请选择市区" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
						</view>
					</picker>
					
				</view>
				<view class="form-item">
					<text class="label">小区名称</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.residentialCommunity" placeholder="请输入小区名称"
						placeholder-class="form-input" />
				
				</view>
				<view class="form-item">
					<text class="label">门牌</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.houseNumber" placeholder="请输入门牌号"
						placeholder-class="form-input" />
				
				</view>
				
				
				<view class="form-item">
					<text class="label">面积</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.area" placeholder="请输入面积"
						placeholder-class="form-input" />
				</view>
				
                 <view class="form-item">
					<text class="label">楼层</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.floor" placeholder="请输入楼层"
						placeholder-class="form-input" />
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">家庭情况</text>
				<view class="form-item">
					<text class="label">伴侣</text>
					<input class="input-width" type="text" v-model="form.partnerName" placeholder="请输入伴侣姓名"
						placeholder-class="form-input" />
				
				</view>
				<view class="form-item">
					<text class="label">伴侣年龄</text>
					<input class="input-width" type="number" v-model="form.partnerAge" placeholder="请输入伴侣年龄"
						placeholder-class="form-input" />
				
				</view>
				
				
				<view class="form-item">
					<text class="label">子辈单位</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.partnerEmployer" placeholder="请输入子辈工作单位"
						placeholder-class="form-input" />
				</view>
				
				 <view class="form-item">
					<text class="label">孙辈学校</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.grandchildrenSchool" placeholder="请输入所在学校"
						placeholder-class="form-input" />
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">会员情况</text>
				<view class="form-item justify-between">
					<text class="label">是否是会员</text>
				<radio-group style="display: flex;align-items: center;">
					<label style="margin-right: 50upx;">
						<radio @click="radioClick(1)" value="1" :checked="form.isMember==1"
							style="margin-right: 16upx;" />
						<text class="sex-text">是</text>
					</label>
					<label>
						<radio @click="radioClick(0)" value="0" :checked="form.isMember==0"
							style="margin-right: 16upx;" />
						<text class="sex-text">否</text>
					</label>
				</radio-group>
				</view>
				<view class="form-item">
					<text class="label">会员分类</text>
					<picker class="birth-picker" mode="selector"  @change="bindMemberChange($event,tags)" :range="tags" range-key="dictLabel">
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.memberLevel" placeholder="请选择会员分类" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
						</view>
					</picker>
				
				</view>
				
				
				<view class="form-item">
					<text class="label">加入时间</text>
					<picker class="birth-picker" mode="date"   @change="bindJoinChange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.joinTime" placeholder="请选择加入时间" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
						</view>
					</picker>
				</view>
				
				 <view class="form-item">
					<text class="label">到期时间</text>
					<picker class="birth-picker" mode="date"   @change="bindEndChange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.expiryTime" placeholder="请选择到期时间" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">管理月份</text>
					<picker class="birth-picker" mode="date" fields="month" @change="bindMonthChange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.managementMonth" placeholder="请选择管理月份" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="w48 h48" src="/static/images/health/right_arrow_right_icon24.png"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">特殊情况</text>
				<view class="form-item">
					<text class="label">职位</text>
					<input class="input-width" type="text" v-model="form.position" placeholder="请输入职位"
						placeholder-class="form-input" />
				
				</view>
				<view class="form-item">
					<text class="label">癖好</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.hobbies" placeholder="请输入癖好"
						placeholder-class="form-input" />
				
				</view>
				
				
				<view class="form-item">
					<text class="label">平日喜好</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.specialties" placeholder="请输入平日喜好"
						placeholder-class="form-input" />
				</view>
				
				 <view class="form-item">
					<text class="label">信仰</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.faith" placeholder="请输入信仰"
						placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">担忧</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.concerns" placeholder="请输入担忧"
						placeholder-class="form-input" />
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">其他<text class="color-price">*</text></text>
				<view class="form-item">
				<!-- 	<text class="label">备注</text> -->
					<textarea maxlength="200" class="form-textarea" v-model="form.problemsToSolve" placeholder="请输入用户想解决的问题"  placeholder-class="textarea-input" />
				</view>
				<view class="form-item">
					<!-- <text class="label">备注</text> -->
					<textarea maxlength="200" class="form-textarea" v-model="form.healthSuggestions" placeholder="请输入健康管理师对用户的建议"   placeholder-class="textarea-input"/>
				</view>
			</view>
		
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存</view>
		</view>
	</view>
</template>

<script>
	import {getInfo,updateInfo,deleteInfo,addInfo,getMember} from '@/api/healthUser.js'
	import {
		getDocDetails,
		addDoc,
		editDoc
	} from '@/api/doc.js'
	export default {
		data() {
			return {
				type: null,
				patientId: null,
				famaleurl:"/static/images/health/female_profile.png",
				maleurl:"/static/images/health/my_heads.png",
				checked:1,
				// 定义直辖市列表，用于判断特殊处理
				      municipalities: ['北京市', '上海市', '天津市', '重庆市'],
				array:[
					{id:1,name:'是'},
					{id:0,name:'否'},
					],
				tags: [],
				isAdd:null,
				form: {
					"username": null,
					avatar:null,
					"sex":0, 
					"birthdate": null, 
					"age": 0,
					"phone":  null,
					"idCard":  null,
					"previousEmployer":  null,
					"disposableIncome": null,
					"actualConsumption":  null,
					"city":  null,
					"residentialCommunity": null,
					"houseNumber": null, 
					"area":  null, 
					"floor":  null,
					"partnerName":  null,
					"partnerAge":  null,
					"partnerEmployer":  null,
					"grandchildrenSchool": null,
					"isMember":  1, 
					"memberLevel":  null, 
					"joinTime": null,
					"expiryTime": null,
					"managementMonth":null,
					"position":null,
					"hobbies": null,
					"specialties": null,
					"faith": null, 
					"concerns": null,
					"problemsToSolve": null,
					"healthSuggestions": null,
				}
			};
		},
		onLoad(options) {
			this.type = options.type;
			this.userId=options.userId;
			this.companyUserId=options.companyUserId;
			this.form.userId=options.userId;
			this.form.companyUserId=options.companyUserId;
			if (this.type == 'edit') {
				this.getInfo();
			}
			this.getMember()
		},
		methods: {
			sexChange(type) {
				this.form.sex = type
			},
			radioClick(id) {
			        this.form.isMember=id
			      },
			getMember(){
				getMember().then(
					res => {
						if (res.code == 200) {
							this.tags= res.data;
						    
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
		getInfo() {
			var data = {
				userId: this.userId
			};
			getInfo(data).then(
				res => {
					if (res.code == 200) {
		                this.form = res.data;
					} else {
						uni.showToast({
							title: res.msg,
						});
					}
				},
				rej => {}
			);
		},
			onChooseAvatar(e){
				// 处理用户取消的情况
				    if (e.detail.errMsg && e.detail.errMsg.includes('cancel')) {
				      console.log('选择头像已取消')
				      return
				    }
				let {
					avatarUrl
				} = e.detail;
				uni.uploadFile({
					url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					formData: {
						'user': 'test'  // 上传附带参数
					},
					success: (uploadFileRes) => {
						this.form.avatar =JSON.parse(uploadFileRes.data).url
					}
				});
			},
			submit() {
				if (this.form.username == null) {
					uni.showToast({
						icon: 'none',
						title: "姓名不能为空",
					});
					return;
				}
				if (this.form.phone == null) {
					uni.showToast({
						icon: 'none',
						title: "手机号不能为空",
					});
					return;
				}
				if (this.form.idCard == null) {
					uni.showToast({
						icon: 'none',
						title: "身份证号不能为空",
					});
					return;
				}
				if (this.form.sex == null) {
					uni.showToast({
						icon: 'none',
						title: "性别不能为空",
					});
					return;
				}
				if (this.form.birthdate == null) {
					uni.showToast({
						icon: 'none',
						title: "出生年月不能为空",
					});
					return;
				}
				if (this.form.city == null) {
					uni.showToast({
						icon: 'none',
						title: "市区不能为空",
					});
					return;
				}
				if (this.form.problemsToSolve == null) {
					uni.showToast({
						icon: 'none',
						title: "用户问题不能为空",
					});
					return;
				}
				if(this.type=="add"){
					this.addDoc()
				}
				else if(this.type=="edit"){
					this.editDoc()
				}
                // uni.navigateTo({
                // 	url: '/pages_health/doc?type=edit&docId='
                // })
			},
	editDoc() {
		updateInfo(this.form).then(
			res => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: "操作成功",
					});
					setTimeout(function() {
						uni.$emit('refreshDoc');
						uni.navigateBack({
							delta: 1
						})
					}, 500);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
					});
				}
			},
			rej => {}
		);
	},
	addDoc() {
		addInfo(this.form).then(
			res => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: "操作成功",
					});
					setTimeout(function() {
						uni.$emit('refreshDoc');
						uni.navigateBack({
							delta: 1
						})
					}, 500);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
					});
				}
			},
			rej => {}
		);
	},
			// 出生日期选择
			bindDateChange: function(e) {
				this.form.birthdate = e.target.value
			},
			//市区
			bindCityChange:function(e) {
				const region = e.detail.value; // 格式: [省, 市, 区]
				      let displayText = '';
				      // 处理直辖市重复问题
				      if (this.municipalities.includes(region[0])) {
				        // 直辖市：省和市名称相同，只显示一次
				        // 格式变为 "北京市 海淀区" 而非 "北京市 北京市 海淀区"
				        displayText = `${region[0]}`;
				      } else {
				        // 非直辖市：正常显示省市区
				        displayText = region;
				      }
				      this.form.city = displayText;
				
				},
				//会员情况
				// bindIsMemberChange:function(e) {
				// 	this.form.isMember = e
				// 	},
				//会员分类
				bindMemberChange:function(e,list) {
					var index=e.target.value
					this.form.memberLevel = list[e.target.value].dictLabel
					},
					//加入时间
					bindJoinChange:function(e) {
						this.form.joinTime = e.target.value
						},
						//到期时间
						bindEndChange:function(e) {
							this.form.expiryTime = e.target.value
							},
							//月份
							bindMonthChange:function(e) {
								this.form.managementMonth = e.target.value
								},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.inner {
			// height: calc(100% - 120upx);
			padding: 20upx;

			.form-box {
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-bottom: 20upx;

				.form-title {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #222426;
					text-align: left;
					padding: 30rpx 0;
					display: block;
				}

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}
        
					.label {
						width: 300upx;
						text-align: left;
						font-size: 32upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}

					input {
						text-align: right;
					}
               
					.form-input {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: right;
					}

					.form-item-tag{
						margin-right: 16rpx;
						.tag{
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 2rpx solid #ECECEC;
							display: flex;
							align-items: center;
							padding: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							&.active{
								background: #F0FAFF;
								border: 2rpx solid #008FD3;
								color: #008FD3;
							}
						}
						
						
						
					}
					.right{
						display: flex;
						align-items: center;
						position: relative;
						image{
							border-radius: 50%;
						}
						.wx-head{
							position: absolute;
							width: 140upx;
							height: 80upx;
							opacity: 0;
						}
					}
					.sex-box{
						flex:1;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.sex-item{
							width: 146rpx;
							height: 64rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #F5F7FA;
							border-radius: 32rpx 32rpx 32rpx 32rpx;
							margin-left: 16rpx;
							.u-icon__icon{
								margin: 0;
							}
							text{
								// font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #898E91;
								margin-left: 12rpx;
							}
							&.active{
								background: #EBF8FF;
								text{
									color:#008FD3
								}
							}
							&.active2{
								background: #FCF0E7;
								text{
									color:#FF5030
								}
							}
						}
					}
					.form-textarea{
						font-size: 30upx;
						// color: #999999;
						height: 100upx;
						padding: 4upx 0;
					}
					 .textarea-input{
						 color: #999999;
					 }
					.birth-picker {
						flex: 1;
						display: flex;
						align-items: center;
						
						.right-box{
							width: 100%;
							display: flex;
							align-items: center;
							.input-box{
								// width: 470upx;
							}
							.arrow{
								width: 13upx;
								height: 23upx;
								margin-left: 20upx;
							}
						}
					}
				}
			}
		}

		.btn-box {
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			// position: fixed;
			// width: 90%;
			// bottom: 0;
			// left: 50%;
			// transform: translate(-50%,-50%);
			// background: #FFFFFF;
			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #008FD3 ;
				border-radius: 44upx;
				margin-bottom: 40upx;
			}
		}
	}
</style>