.st_form {
  margin-top: 28px;
}
.st_form .st_form_item_label {
  color: #0d0d0d;
  font-weight: 600;
}
.st_form_item.is_small .st_form_item_content,
.st_form_item.is_small .st_form_item_label {
  line-height: 20px;
}
.st_form .st_input .st_input_inner {
  width: 240px;
}
.page_footer {
  margin-top: 50px;
  text-align: center;
}
.page_footer button {
  padding: 9px 30px;
  margin: 0 10px;
}

<div class="st_form" id="detailForm" width="80">
  <div class="st_form_item is_required" prop="groupName">
    <label class="st_form_item_label">分组名称</label>
    <div class="st_form_item_content">
      <div class="st_input" st-model="groupName">
        <input
          type="text"
          autocomplete="off"
          maxlength="10"
          placeholder="请输入内容"
          size="small"
          class="st_input_inner"
        />
      </div>
    </div>
  </div>
  <div class="st_form_item is_required" prop="payType">
    <label class="st_form_item_label">分成方式</label>
    <div class="st_form_item_content">
      <div class="st_select" st-model="payType">
        <div class="st_input st_input_suffix">
          <input
            type="text"
            autocomplete="off"
            readonly="readonly"
            placeholder="请选择"
            size="small"
            class="st_input_inner"
          />
          <span class="st_input_down"
            ><i class="stIconFont icon-xiala-down"></i
          ></span>
        </div>
        <div class="st_select_dropdown">
          <div class="st_select_dropdown_wrap">
            <ul class="st_select_dropdown_list">
              <li
                class="st_select_dropdown_item"
                value="1"
                label="固定分成方式"
              >
                固定分成方式
              </li>
              <li
                class="st_select_dropdown_item"
                value="2"
                label="累计金额充值方式"
              >
                累计金额充值方式
              </li>
            </ul>
          </div>
          <div class="popper_arrow"></div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="st_form_item is_small is_required"
    prop="promotionType"
    st-show="false"
  >
    <label class="st_form_item_label">推广方式</label>
    <div class="st_form_item_content">
      <label class="st_radio" st-model="promotionType">
        <span class="st_radio_input">
          <span class="st_radio_inner"></span>
          <input
            type="radio"
            aria-hidden="true"
            autocomplete="off"
            class="st_radio_original"
            value="1"
          />
        </span>
        <span class="st_radio_label">子包推广</span>
      </label>
      <label class="st_radio" st-model="promotionType">
        <span class="st_radio_input">
          <span class="st_radio_inner"></span>
          <input
            type="radio"
            aria-hidden="true"
            autocomplete="off"
            class="st_radio_original"
            value="2"
          />
        </span>
        <span class="st_radio_label">链接推广</span>
      </label>
    </div>
  </div>
  <div class="st_form_item is_small is_required" prop="checkboxSigle">
    <label class="st_form_item_label">复选</label>
    <div class="st_form_item_content">
      <label class="st_checkbox" st-model="checkboxSigle">
        <span class="st_checkbox_input">
          <span class="st_checkbox_inner"></span>
          <input type="checkbox" class="st_checkbox_original" />
        </span>
        <span class="st_checkbox_label">选项一</span>
      </label>
    </div>
  </div>
  <div class="st_form_item is_small is_required" prop="checkList">
    <label class="st_form_item_label">种类</label>
    <div class="st_form_item_content">
      <div class="st_checkbox_group" st-model="checkList">
        <label class="st_checkbox">
          <span class="st_checkbox_input">
            <span class="st_checkbox_inner"></span>
            <input type="checkbox" class="st_checkbox_original" index="1" />
          </span>
          <span class="st_checkbox_label">选项一</span>
        </label>
        <label class="st_checkbox">
          <span class="st_checkbox_input">
            <span class="st_checkbox_inner"></span>
            <input type="checkbox" class="st_checkbox_original" index="2" />
          </span>
          <span class="st_checkbox_label">选项二</span>
        </label>
        <label class="st_checkbox">
          <span class="st_checkbox_input">
            <span class="st_checkbox_inner"></span>
            <input type="checkbox" class="st_checkbox_original" index="3" />
          </span>
          <span class="st_checkbox_label">选项三</span>
        </label>
      </div>
    </div>
  </div>
  <div class="st_form_item is_small is_required" prop="issingle">
    <label class="st_form_item_label">独立子包</label>
    <div class="st_form_item_content">
      <label class="st_radio" st-model="issingle">
        <span class="st_radio_input">
          <span class="st_radio_inner"></span>
          <input
            type="radio"
            aria-hidden="true"
            autocomplete="off"
            class="st_radio_original"
            value="1"
          />
        </span>
        <span class="st_radio_label">是</span>
      </label>
      <label class="st_radio" st-model="issingle">
        <span class="st_radio_input">
          <span class="st_radio_inner"></span>
          <input
            type="radio"
            aria-hidden="true"
            autocomplete="off"
            class="st_radio_original"
            value="2"
          />
        </span>
        <span class="st_radio_label">否</span>
      </label>
    </div>
  </div>
  <div class="st_form_item is_required" prop="imgUrl">
    <label class="st_form_item_label">图片上传</label>
    <div class="st_form_item_content">
      <div class="st_upload" st-model="imgUrl" file-size="1" prop="imgUrl">
        <div class="st_upload_picture_card">
          <i class="stIconFont icon-tianjia"></i>
          <input
            type="file"
            name="file"
            class="st_upload_input"
            accept="image/jpeg, image/png, image/jpg"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="st_form_item is_required" prop="imgList">
    <label class="st_form_item_label">多图上传</label>
    <div class="st_form_item_content">
      <div
        class="st_upload"
        type="multiple"
        st-model="imgList"
        change="handelImgChange"
        file-size="1"
        picture-limit="5"
      >
        <div class="st_upload_picture_card">
          <i class="stIconFont icon-tianjia"></i>
          <input
            type="file"
            name="file"
            class="st_upload_input"
            accept="image/jpeg, image/png, image/jpg"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="st_form_item" prop="remark">
    <label class="st_form_item_label">备注</label>
    <div class="st_form_item_content">
      <div class="st_textarea" st-model="remark">
        <textarea
          autocomplete="off"
          maxlength="100"
          class="st_textarea_inner"
          placeholder="请输入内容"
        ></textarea>
      </div>
    </div>
  </div>
</div>
<div class="page_footer">
  <button class="st_button is_plain" size="small" onclick="goback()">
    返回
  </button>
  <button
    class="st_button st_button_primary"
    id="addBtn"
    size="small"
    onclick="uploadImg()"
  >
    添加
  </button>
</div>

var pageData = {
  groupName: "",
  payType: "",
  promotionType: "",
  imgUrl: "",
  imgList: [],
  remark: "",
  issingle: "",
  checkList: [1, 2],
  checkboxSigle: false,
};
function uploadImg() {
  forms.validateForm("detailForm", pageData, function (result) {
    if (result) {
      setBtnStatus("addBtn", false);
      $.upload("", pageData.imgUrl)
        .then((res) => {
          setBtnStatus("addBtn", true);
          if (res.code === 0) {
            add(res.imgUrl);
          } else {
            console.log(res);
          }
        })
        .catch((error) => {
          setBtnStatus("addBtn", true);
          console.log(error);
        });
    }
  });
}
function handelImgChange(formdata, callback) {
  $.upload("", formdata)
    .then((res) => {
      setBtnStatus("addBtn", true);
      if (res.code === 0) {
        callback("1111");
      } else {
        console.log(res);
      }
    })
    .catch((error) => {
      setBtnStatus("addBtn", true);
      console.log(error);
    });
}
function add(imgUrl) {
  const data = {
    groupName: pageData.groupName,
    payType: pageData.payType,
    promotionType: pageData.promotionType,
    imgUrl: imgUrl,
    remark: pageData.remark,
    issingle: pageData.issingle,
  };
  $.post("", data)
    .then((res) => {
      setBtnStatus("addBtn", true);
      if (res.code === 0) {
      } else {
        console.log(res);
      }
    })
    .catch((error) => {
      setBtnStatus("addBtn", true);
      console.log(error);
    });
}