返乡登记

src/apps/AppHomeRegistration/Content.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="Content">
+    <div class="form-item__group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="form-item__title">
+            <i>*</i>
+            <h2>防控措施</h2>
+          </div>
+          <div class="form-item__right">
+            <AiSelect
+                v-model="form.type"
+                dict="epidemicRecentPersonType"
+                class="select"
+            ></AiSelect>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-item__group">
+      <div class="form-item form-item__textarea">
+        <div class="form-item__wrapper">
+          <div class="form-item__title">
+            <i></i>
+            <h2>备注说明</h2>
+          </div>
+          <div class="form-item__right">
+            <textarea
+                auto-height
+                style="height: 180px"
+                v-model="form.description"
+                :maxlength="500"
+                placeholder="请输入备注说明"
+                placeholder-style="font-size: 16px"
+            ></textarea>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">确认</div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  data() {
+    return {
+      form: {
+        type: "",
+        description: "",
+        id: ''
+      },
+      flag: false
+    };
+  },
+
+
+  computed: {
+    ...mapState(["user"]),
+  },
+
+  onLoad(option) {
+    this.form.id = option.id
+    document.title = '添加防控措施'
+  },
+
+  methods: {
+    submit() {
+      if (!this.form.type) {
+        return this.$u.toast("请选择防控措施");
+      }
+
+      if (this.flag) return;
+      this.flag = true;
+
+      this.$loading();
+      this.$http.post(`/app/appepidemicbackhomerecord/addOrUpdate`, {...this.form}).then((res) => {
+        this.$hideLoading();
+        if (res.code == 0) {
+          uni.$emit("updateBackList");
+        }
+      })
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.Content {
+  padding-bottom: 140px;
+
+  .form-item__group {
+    margin-bottom: 24px;
+    background: #fff;
+  }
+
+  .form-item {
+    padding-left: 32px;
+
+    .form-item__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 128px;
+      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__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;
+      }
+    }
+  }
+  .footer{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #1365DD;
+    color: #FFF;
+  }
+}
+</style>