dvcp_v2_wxcp_app/src/sass/AppSpecialPeople/addPsychosisUser.vue

<template>
  <div class="addPsychosisUser">
    <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>人员类别</h2>
          </div>
          <div class="form-item__right">
            <ai-select v-model="form.type" dict="epidemicRecentPersonType" class="select"></ai-select>
          </div>
        </div>
      </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i>*</i>
          <h2>姓名</h2>
        </div>
        <div class="form-item__right">
          <input placeholder="请输入姓名" v-model="form.name" :maxlength="15" />
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i>*</i>
          <h2>身份证号</h2>
        </div>
        <div class="form-item__right">
          <input placeholder="请输入身份证号" v-model="form.idNum" :maxlength="18" />
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i>*</i>
          <h2>性别</h2>
        </div>
        <div class="form-item__right">
          <ai-select v-model="form.sex" dict="epidemicRecentPersonType" class="select"></ai-select>
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i>*</i>
          <h2>出生日期</h2>
        </div>
        <div class="form-item__right">
          <div class="ai-area" @click="isShowEndTime = true">
            <div class="ai-area__wrapper">
              <span class="label" v-if="form.birthday">{{ form.birthday }}</span>
              <i v-else>请选择</i>
              <u-icon name="arrow-right" color="#ddd"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i>*</i>
          <h2>联系电话</h2>
        </div>
        <div class="form-item__right">
          <input placeholder="请输入" v-model="form.phone" :maxlength="20" />
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i>*</i>
          <h2>所属区域</h2>
        </div>
        <div class="form-item__right">
          <ai-area-picker ref="area" class="ai-area" :value="form.startAreaId" :fullName.sync="form.startAreaName" all mode="custom" @select="v => form.startAreaId = v">
            <div class="ai-area__wrapper">
              <span class="label" v-if="form.area">{{ form.area }}</span>
              <i v-else>请选择</i>
              <u-icon name="arrow-right" color="#ddd"/>
            </div>
          </ai-area-picker>
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i> </i>
          <h2>详细地址</h2>
        </div>
        <div class="form-item__right">
          <input placeholder="请输入" v-model="form.address"  />
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i> </i>
          <h2>所属网格</h2>
        </div>
        <div class="form-item__right">
          <ai-select v-model="form.grid" dict="epidemicRecentPersonType" class="select"></ai-select>
        </div>
      </div>
    </div>

    <!-- 精神病患者 -->
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i> </i>
          <h2>家庭年收入（万）</h2>
        </div>
        <div class="form-item__right">
          <input placeholder="请输入" v-model="form.income" />
        </div>
      </div>
    </div>
    <div class="form-item">
    <div class="form-item__wrapper">
      <div class="form-item__title">
        <i></i>
        <h2>发病日期</h2>
      </div>
      <div class="form-item__right">
        <div class="ai-area" @click="isShowEndTime = true">
          <div class="ai-area__wrapper">
            <span class="label" v-if="form.birthday">{{ form.birthday }}</span>
            <i v-else>请选择</i>
            <u-icon name="arrow-right" color="#ddd"/>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i></i>
          <h2>监护人姓名</h2>
        </div>
        <div class="form-item__right">
          <input placeholder="请输入姓名" v-model="form.name" :maxlength="15" />
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i></i>
          <h2>监护人联系方式</h2>
        </div>
        <div class="form-item__right">
          <input placeholder="请输入" v-model="form.phone" type="number" />
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i> </i>
          <h2>目前危险等级</h2>
        </div>
        <div class="form-item__right">
          <ai-select v-model="form.disableType" dict="epidemicRecentPersonType" class="select"></ai-select>
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-item__wrapper">
        <div class="form-item__title">
          <i> </i>
          <h2>治疗情况</h2>
        </div>
        <div class="form-item__right">
          <ai-select v-model="form.disableRank" dict="epidemicRecentPersonType" class="select"></ai-select>
        </div>
      </div>
    </div>

    <div style="height: 56px;"></div>
    <div class="btn" @click="submit">保存</div>
  </div>
</template>

<script>
import AiSelect from '../../components/AiSelect'
import AiAreaPicker from '../../components/AiAreaPicker.vue'

export default {
  name: 'addPsychosisUser',

  data() {
    return {
      value: '',
      form: {
        type: [],
        name: '',
        idNum: '',
        sex: [],
        birthday: '',
        phone: '',
        address: '',
        grid: '',
        income: '',
        marStatus: [],
        healthStatus: [],
        disableType: [],
        disableRank: []
      }
    }
  },

  components: {
    AiSelect,
    AiAreaPicker
  },

  onLoad() {


  },

  onShow() {
    document.title = '新增人员'
  },
  methods: {}

}
</script>

<style lang="scss" scoped>
.addPsychosisUser {
  height: 100%;

  .form-item {
      padding-left: 32px;

      .form-item__checkbox {
        width: 100%;
        div {
          width: 90%;
          height: 90px;
          line-height: 100px;
          margin-bottom: 24px;
          text-align: center;
          background: #FFFFFF;
          border-radius: 16px;
          color: #333333;
          font-size: 28px;
          border: 1px solid #CCCCCC;

          &.active {
            background: #4181FF;
            color: #fff;
            border-color: #4181FF;
          }
        }
      }

      .form-item__radio {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        div {
          width: 212px;
          height: 90px;
          line-height: 90px;
          margin-right: 16px;
          margin-bottom: 8px;
          text-align: center;
          background: #FFFFFF;
          border-radius: 16px;
          color: #333333;
          font-size: 28px;
          border: 1px solid #CCCCCC;

          &:nth-of-type(3n) {
            margin-right: 0;
          }

          &.active {
            background: #4181FF;
            color: #fff;
            border-color: #4181FF;
          }
        }
      }

      .ai-area__wrapper {
        display: flex;
        align-items: center;
        padding-left: 100px;

        span {
          color: #333;
          font-size: 30px;
        }

        i {
          color: #999;
          font-size: 30px;
          font-style: initial;
        }

        image {
          width: 16px;
          height: 8px;
        }
      }

      .form-item__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 90px;
        padding-right: 28px;
        border-bottom: 1px solid #DDDDDD;

        input {
          flex: 1;
          height: 100%;
          text-align: right;
          color: #333;
          padding-right: 10px;
        }

        .form-item__right {
          display: flex;
          align-items: center;
          font-size: 32px;

          .select {
            ._i {
              padding-left: 100px;
            }
          }

          span {
            max-width: 400px;
            margin-right: 8px;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          i {
            margin-right: 8px;
            color: #999999;
          }
        }
      }

      &:last-child {
        .form-item__wrapper {
          border-bottom: none;
        }
      }

      .form-item__title {
        display: flex;
        align-items: center;

        i {
          font-size: 32px;
          color: #FF4466;
        }

        span {
          font-size: 28px;
          color: #999999;
        }

        h2 {
          padding: 0 4px;
          font-weight: 400;
          font-size: 32px;
          color: #333333;
        }
      }

  
      &.form-item__imgs, &.form-item__textarea {
        .form-item__wrapper {
          display: block;
          height: auto;
          padding-bottom: 32px;
        }

        textarea {
          width: 100%;
          height: 90px;
        }

        .form-item__title {
          padding: 32px 0;
        }

        .form-item__right {
          padding-left: 18px;
        }
      }
    }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    background: #1365dd;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    z-index: 9999;
  }
}
</style>