|
|
@@ -0,0 +1,213 @@
|
|
|
+<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>
|
