tinnitus2-mini/src/pages/selfCenter/info.vue

<template>
  <view class="content">
    <view class="self-inf">
      <view class="img-title-box">
		<view class="title">我的资料</view>
      </view>
    </view>
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="baseFormData">
					<uni-forms-item label="姓名"  name="name" box-width="175rpx">
						<uni-easyinput :value="baseFormData.name" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled />
					</uni-forms-item>
					<uni-forms-item label="电话"  name="phone" box-width="175rpx">
						<uni-easyinput type="number" :value="baseFormData.phone" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled/>
					</uni-forms-item>
					<uni-forms-item label="性别"  box-width="175rpx">
						<uni-data-checkbox v-model="baseFormData.sex" :localdata="selectData.sex" :wrap="true" disabled/>
					</uni-forms-item>
					<uni-forms-item label="年龄"  name="age" box-width="175rpx">
						<uni-easyinput type="number" :value="baseFormData.age" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled  />
					</uni-forms-item>
					<uni-forms-item label="身高(cm)"  name="height" box-width="175rpx">
						<uni-easyinput type="number" :value="baseFormData.height" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled />
					</uni-forms-item>
					<uni-forms-item label="体重(kg)"  name="weight" box-width="175rpx">
						<uni-easyinput type="number" :value="baseFormData.weight" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled />
					</uni-forms-item>
					<uni-forms-item label="婚姻"  name="marriage" box-width="175rpx">
						<uni-data-select v-model="baseFormData.marriage" disabled :localdata="selectData.marriage"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="有无孩子"  name="has_children" box-width="175rpx">
						<uni-data-checkbox v-model="baseFormData.has_children" :localdata="yesNoOptions" :wrap="true" disabled/>
					</uni-forms-item>
					<uni-forms-item label="孩子年龄"  name="children_age" box-width="175rpx" v-if="baseFormData.has_children === 1">
						<uni-easyinput type="number" :value="baseFormData.children_age" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled />
					</uni-forms-item>
					<uni-forms-item label="职业"  name="profession" box-width="175rpx">
						<uni-data-select v-model="baseFormData.profession" disabled :localdata="selectData.profession"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="工作地点"  name="work_address" box-width="175rpx" v-if="isTeacher">
						<uni-data-checkbox v-model="baseFormData.work_address" :localdata="workplaceOptions" :wrap="true" disabled/>
					</uni-forms-item>
					<uni-forms-item label="目前最主要的症状"  name="main_symptom" box-width="175rpx">
						<uni-easyinput :value="baseFormData.main_symptom" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled />
					</uni-forms-item>
					<uni-forms-item label="持续时间(月)"  name="symptom_duration" box-width="175rpx">
						<uni-easyinput type="number" :value="baseFormData.symptom_duration" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled />
					</uni-forms-item>
					<uni-forms-item label="就诊类型"  name="type" box-width="175rpx">
						<uni-data-select v-model="baseFormData.type" disabled :localdata="selectData.type"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="就诊医院"   name="hospital_id" box-width="175rpx">
						<uni-data-select v-model="baseFormData.hospital_id" disabled :localdata="selectData.hospital"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="就诊医生"   name="doctor_id" box-width="175rpx">
						<uni-data-select v-model="baseFormData.doctor_id" disabled :localdata="doctorRange"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="ID号"  name="code" box-width="175rpx">
						<uni-easyinput :value="baseFormData.code" :styles="{fontSize:'14px',disableColor: '#f5f7fa', borderColor:'#e5e5e5'}" disabled />
					</uni-forms-item>
				</uni-forms>
			</view>
  </view>
</template>

<script>
import { request, currentOpenId } from '@/utils/request.js'

// 和 history.vue 保持一致：这几组选项后台 get_case_select 目前没有提供，先在前端写死
const YES_NO_OPTIONS = [{ value: 1, text: '有' }, { value: 0, text: '无' }]
const WORKPLACE_OPTIONS = [
	{ value: 1, text: '幼儿园' }, { value: 2, text: '小学' }, { value: 3, text: '初中' },
	{ value: 4, text: '高中' }, { value: 5, text: '大学' },
]

export default {
  data() {
    return {
      isAuth: true,
	  isWith:0,
		// 基础表单数据
		baseFormData: {
			name: "",
			phone: "",
			sex: 1,
			age: "",
			height: "",
			weight: "",
			marriage: 1,
			has_children: 0,
			children_age: "",
			profession: 1,
			work_address: "",
			main_symptom: "",
			symptom_duration: "",
			type: 1,
			hospital_id: 1,
			hospital_name: "",
			doctor_id: 1,
			doctor_name: "",
			code: "",
		},
		selectData:{
			sex: [],
			profession: [],
			marriage: [],
			type: [],
			hospital: [],
		},
		doctorRange: [],
		yesNoOptions: YES_NO_OPTIONS,
		workplaceOptions: WORKPLACE_OPTIONS,
    };
  },
  computed: {
	  isTeacher() {
		  const item = this.selectData.profession.find(item => item.value === this.baseFormData.profession)
		  return !!(item && item.text.includes('教师'))
	  }
  },
  onLoad() {
	this.getUserHis();
  },
  methods: {
	  async getUserHis() {
	     const res = await request('user', 'get_case_info', { openId: currentOpenId() })
	     if (res.code === 200) {
			// 用合并而不是整体替换，后台还没实现的新字段会保留 data() 里的默认值，不会变成 undefined（跟 history.vue 一致）
			this.baseFormData = Object.assign({}, this.baseFormData, res.data);
			// 后台没填过的选择类字段存的是字符串 "0"（或者字段压根不存在），选项列表都是从 value:1 开始编号，
			// 统一兜底成 1，否则这几个只读下拉会显示空白
			['sex','profession','marriage','type','hospital_id','doctor_id'].forEach((key)=>{
				if (!this.baseFormData[key] || this.baseFormData[key] == '0') this.baseFormData[key] = 1
				this.baseFormData[key] = Number(this.baseFormData[key])
			})
			if (this.baseFormData.work_address == null || this.baseFormData.work_address == undefined) this.baseFormData.work_address = ''
			this.getUserSelect();
	     }
	   },
	  async getUserSelect() {
	     const res = await request('user', 'get_case_select', { openId: currentOpenId() })
	     if (res.code === 200) {
			 this.selectData = Object.assign({}, this.selectData, res.data);
			 this.getDoctor(this.baseFormData.hospital_id)
	     }
	   },
	  async getDoctor(hosId) {
	     const res = await request('user', 'get_doctor_select', { hospital_id: hosId })
	     if (res.code === 200) {
			this.doctorRange = this.objToArr(res.data);
	     }
	   },
	   objToArr(data){
		let obj = data;
		let arr = [];
		for(let key in obj) {
			let child = {
				text : obj[key],
				value: Number(key)
			}
			arr.push(child)
		}
		return arr;
	   },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;

  .self-inf {
    height: 400rpx;
    width: 100%;
    background-image: url('/static/common-header-bg.jpg');
    background-size: contain;
	background-repeat: no-repeat;
    .img-title-box {
		display: flex;
        flex-direction: column;
		padding: 50rpx;
      .title {
		font-size: 32rpx;
		font-weight: bold;
        color: #000;
      }
    }
  }
}
.fontGrey {
  color: $uni-text-color-grey;
}
.example {
	padding: 15px;
	background-color: #fff;
}
</style>