front-end/hdApp/src/pagesStatistics/trainingClassEdit.vue

<template>
  <div class="app-content">
    <!-- 门店信息 -->
    <form
      @submit="formSubmit"
      @reset="formReset"
    >
      <!-- <div class="prompt-text">注: 请先关注公众号，绑定后可以在移动端自动登录</div> -->
      <!-- 登录信息 -->
      <div class="module-com input-line-wrap">
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title required">名称</div>
          <input
            v-model="form.name"
            placeholder-class="phcolor"
            class="tui-input"
            name="name"
            placeholder="请输入名称"
            maxlength="50"
            type="text"
          />
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title required">价格</div>
          <input
            v-model="form.tuition"
            placeholder-class="phcolor"
            class="tui-input"
            name="tuition"
            placeholder="请输入价格"
            maxlength="50"
            type="text"
          />
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title required">招生对象</div>
          <input
            v-model="form.target"
            placeholder-class="phcolor"
            class="tui-input"
            name="target"
            placeholder="请输入招生对象"
            maxlength="50"
            type="text"
          />
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title">封面图</div>
          <app-uploader
            @resultData="_resultData"
            :num="1"
          />
          <image
            src="form.cover"
            class="_thmist"
            v-if="imgShow"
          ></image>
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title">简介</div>
          <textarea
            name="summary"
            id=""
            cols="30"
            rows="10"
            placeholder="简介 . . ."
            v-model="form.summary"
          ></textarea>
        </tui-list-cell>
        <!-- <tui-list-cell
          class="line-cell remark-wrap"
          :hover="false"
        >
          <div class="tui-title">状态</div>
          <div class="tui-input">
            <radio-group
              class="radio-group"
              @change="radioChange"
            >
              <label
                v-for="(item, index) in statusList"
                :key="item.value"
              >
                <radio
                  :value="item.value"
                  :checked="item.value === form.status"
                  :color="'#3385FF'"
                />
                <text>{{ item.name }}</text>
              </label>
            </radio-group>
          </div>
        </tui-list-cell> -->
      </div>
      <!-- 提交 -->
      <div class="confirm-btn">
        <button
          class="admin-button-com big blue"
          formType="submit"
        >确认</button>
      </div>
    </form>
    <!-- 选择地区 -->
    <app-area-sel
      :show.sync="showRegion"
      :city="form.receiveCity"
      @change="changeAreaFn"
    />
    <kd-entrance></kd-entrance>
  </div>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppUploader from "@/components/app-uploader";
const form = require("@/utils/formValidation.js");
// api
import { pxClassDetail, pxClassUpdate, pxClassAdd } from "@/api/product";
export default {
  name: "staff-add",
  components: {
    TuiListCell,
    AppUploader
  },
  data () {
    return {
      form: {
        name: "",
        tuition: "",
        introduction: "",
        target: "",
        status: "",
        cover: '',
        summary: ''
      },
      statusList: [
        {
          value: "01",
          name: "上架"
        },
        {
          value: "02",
          name: "下架"
        }
      ],
      imgShow: false
    };
  },
  onLoad () {
    // this.init()
    console.log(this.option.id)
  },
  onShow () {
    if (this.option.id) {
      uni.setNavigationBarTitle({
        title: `修改培训班`
      });
      this.imgShow = true
    } else {
      uni.setNavigationBarTitle({
        title: `添加培训班`
      });
    }
  },
  methods: {
    init () {
      if (this.option.id) {
        this._getDet();
      }
    },
    _resultData (val) {
      this.form.cover = val.shortUrl
      this.imgShow = false
    },
    // api
    _getDet () {
      pxClassDetail({ id: this.option.id }).then(res => {
        console.log(res)
        this.form = res.data
      }).catch(err => { console.log(err) })
    },
    radioChange: function (evt) {
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].value === evt.target.value) {
          this.form.status = evt.target.value;
          break;
        }
      }
    },
    confirmFn () {
      if (!this.form.cover) {
        this.$msg('请上传头像')
        return
      }
      let hostFn = this.option.id ? pxClassUpdate : pxClassAdd;
      if (this.option.id) {
        this.form.id = this.option.id;
      }
      hostFn(this.form).then(res => {
								uni.removeStorageSync('pxClassInfoList');
        let promptText = this.option.id ? "修改成功！" : "添加成功！";
        this.$msg(promptText);
        setTimeout(() => {
          this.$util.pageTo("/pagesStatistics/trainingClass");
        }, 1000);
      });
    },
    // 表单验证
    formSubmit (e) {
      // 表单规则
      let rules = [
        {
          name: "name",
          rule: ["required"],
          msg: ["请输入名称"]
        },
        {
          name: "tuition",
          rule: ["required"],
          msg: ["请输入价格"]
        },
        {
          name: "target",
          rule: ["required"],
          msg: ["请输入招生对象"]
        },
        // {
        //   name: "status",
        //   rule: ["required"],
        //   msg: ["请选择状态"]
        // }
        {
          name: "summary",
          rule: ["required"],
          msg: ["请输入简介"]
        }
      ];
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 20px);
  padding-top: 20px;
}
.prompt-text {
  color: $fontColor3;
  padding-left: 30px;
  margin-bottom: 30px;
}
// ---
.module-com {
  margin-bottom: 20px;
  .member-wrap {
    .member-det {
      font-size: 24px;
      margin-left: 20px;
    }
  }
  .remark-wrap {
    align-items: flex-start;
    .remark {
      height: 240px;
    }
  }
}
.radio-group {
  display: flex;
  label {
    margin-right: 80upx;
  }
}
// 按钮
.confirm-btn {
  width: calc(100% - 60px);
  margin: 60px 30px 20px;
  .admin-button-com {
    width: 100%;
  }
}
textarea {
  border: 1px solid #eee;
  padding: 20upx;
  font-size: 28px;
}
._thmist {
  width: 200upx;
  height: 200upx;
  vertical-align: top;
  background-color: #eee;
  margin-top: -18upx;
}
</style>