dvcp_v2_wxcp_app/library/apps/AppHandSnapshot/AddSet.vue

<template>
  <div class="AddSet">
    <div class="contents">
      <u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
        <u-form-item label="事项分组" prop="title" required :border-bottom="false" right-icon="arrow-right">
          <u-input v-model="forms.title" placeholder="请输入事项分组" />
        </u-form-item>
        <u-form-item label="类别" prop="status" required :border-bottom="false"> </u-form-item>
        <div class="remove-item">
          <img src="./components/img/remove-icon.png" alt="" />
          <div class="input">
            <u-input v-model="forms.status" placeholder="请输入" />
          </div>
        </div>
        <div class="remove-item">
          <img src="./components/img/add-icon.png" alt="" />
          <div class="input color-2270F1">添加分类</div>
        </div>
      </u-form>
    </div>

    <!-- <div class="btn" @click="submit">保存</div> -->
    <div class="footer">
      <div class="remove">删除</div>
      <div class="confirm" @click="submit">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddSet',
  components: {},
  props: {},
  data() {
    return {
      forms: {
        status: '',
        content: '',
        fileIds: [],
      },
      flag: false,
      show: false,
    }
  },
  methods: {
    submit() {
      if (this.flag) return

      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.forms.title) {
            return this.$u.toast('请输入事项分组')
          }

          const imgs = []
          if (this.forms.fileIds) {
            this.forms.fileIds.map((e) => {
              imgs.push({ url: e.url, id: e.id })
            })
          }

          this.flag = true
          this.$http
            .post(`/app/appclapeventgroup/addOrUpdate`, {
              title: this.forms.title,
              content: this.forms.content,
              // images: JSON.stringify(imgs) || [],
              images: imgs || [],

              people: this.forms.people,
              phone: this.forms.phone,
              id: this.id,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$u.toast('发布成功')
                this.flag = false
                uni.navigateTo({ url: `./AppHandSnapshot` })
              }
            })
        } else {
          this.$u.toast('失败')
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.AddSet {
  height: 100%;
  .contents {
    ::v-deep .u-form {
      .u-form-item {
        padding: 0 45px !important;
        .u-form-item__body {
          .u-form-item--right__content__slot {
            padding-bottom: 0;
            .u-input {
              text-align: right !important;
            }
          }
        }
      }

      .u-form-item:first-child {
        .u-form-item__body {
          border-bottom: 1px solid #ddd;
        }
      }

      .line {
        height: 24px;
        background: #f3f6f9;
      }

      .contents {
        padding-bottom: 20px !important;
        .u-form-item__body {
          .u-form-item--right__content__slot {
            .u-input {
              text-align: left !important;
            }
          }
        }
      }

      .avatars {
        padding-bottom: 20px !important;
        .u-form-item__body {
          .default {
            width: 160px;
            height: 160px;
          }
        }
      }
    }
  }
  .remove-item {
    padding: 42px 0 42px 32px;
    box-sizing: border-box;
    background-color: #fff;
    img {
      width: 36px;
      height: 36px;
      margin-right: 12px;
      vertical-align: middle;
    }
    .input {
      display: inline-block;
      width: calc(100% - 48px);
      height: 36px;
      line-height: 36px;
    }
    .color-2270F1 {
      color: #2270f1;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 42px;
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: #3975c6;
    padding: 34px 0;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
  }

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    div {
      height: 92px;
      line-height: 92px;
      box-sizing: border-box;
      text-align: center;
      border-radius: 8px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }
    .remove {
      flex: 1;
      border: 1px solid #f46;
      color: #f46;
      margin-right: 32px;
    }
    .confirm {
      flex: 2;
      background: #3975c6;
      color: #fff;
    }
  }
}
</style>