boss/pages/main/index/check_edit.vue

<template>
  <div id="vip-setting">
    <el-form
      label-position="right"
      label-width="80px"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
    >
      <h3>会员定价</h3>
      <h4>月付</h4>
      <el-form-item label="中文名称" prop="cn">
        <el-input v-model="ruleForm.cn"></el-input>
      </el-form-item>
      <el-form-item label="英文名称" prop="en">
        <el-input v-model="ruleForm.en"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input v-model="ruleForm.status"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>
      <el-form-item label="配图" prop="img">
        <el-input v-model="ruleForm.img"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="summary">
        <el-input type="textarea" v-model="ruleForm.summary"></el-input>
      </el-form-item>
      <el-form-item label="证书" prop="id">
        <el-input type="textarea" v-model="ruleForm.id"></el-input>
      </el-form-item>
      <el-form-item label="说明" prop="remind">
        <quill-editor
          v-model="ruleForm.remind"
          ref="quillEditor"
          class="editer"
          :options="editorOption"
          @ready="onEditorReady($event)"
        ></quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button type="primary" @click="clickCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            // [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            // [{ 'align': [] }],

            ['clean']                                         // remove formatting button
          ]
        }
      },
      ruleForm: {},
      rules: {
        cn: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        en: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        id: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        sort: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        img: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        summary: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
        remind: [
          { required: true, message: '请输入数字', trigger: 'blur' },
        ],
      },
      // vip 列表
      list: [],
    }
  },
  computed: {
    editor() {
      return this.$refs.quillEditor.quill
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    onEditorReady(editor) {

    },
    clickCancel() {

    },
    /**
     * 重置
     */
    resetForm(formName = 'ruleForm') {
      this.$refs[formName].resetFields()
    },
    /**
     * 保存或更新
     */
    async update() {
      // const ruleForm = this.ruleForm
      // const can_buy_monthly = ruleForm.can_buy_monthly ? '1' : '0'
      // const can_buy_quarterly = ruleForm.can_buy_quarterly ? '1' : '0'
      // const can_buy_yearly = ruleForm.can_buy_yearly ? '1' : '0'
      // const res = await this.$post("/api/admin/vip/update", {
      //   ...ruleForm,
      //   can_buy_monthly,
      //   can_buy_quarterly,
      //   can_buy_yearly,
      // })
      // if(res) this.$message({
      //   message: '更新成功',
      //   type: 'success'
      // })
    },
    /**
     * 提交
     */
    submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if(valid) {
      //     console.log(this.ruleForm)
      //     this.update()
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    /**
     * 获取详情数据
     */
    async getDetail({ id }) {
      // const res = await this.$post("/api/admin/vip/getDetail", { id })
      // const data = res.data
      // const can_buy_monthly = data.can_buy_monthly === '1'
      // const can_buy_quarterly = data.can_buy_quarterly === '1'
      // const can_buy_yearly = data.can_buy_yearly === '1'
      // // ruleForm 相当于 detail, 这里同步下关键词
      // this.ruleForm = {
      //   ...data,
      //   can_buy_monthly,
      //   can_buy_quarterly,
      //   can_buy_yearly,
      // }
    },
    /**
     * 获取列表数据
     */
    async getList() {
      // const res = await this.$post("/api/admin/vip/getList")
      // // console.log(res)
      // this.list = res.data
      // this.titles = this.list.map(i => i.name)
    }
  }
}
</script>

<style>
#vip-setting {
  padding: 20px;
}
.table {
  height: 100%;
  height: calc(100% - 80px);
}
.el-input {
  width: auto;
}
.editer {
  height: 300px;
  padding: 0 0 100px;
}
</style>