FE_huoran_server/src/pages/seo/index.vue

<template>
  <div class="page">
    <p class="page-name mb">SEO管理</p>
    <el-form ref="form" :model="form" :rules="rules" class="input-form" label-width="140px">
      <el-form-item prop="title" label="SEO标题">
        <el-input placeholder="SEO标题" v-model="form.title" clearable maxlength="100"></el-input>
      </el-form-item>
      <el-form-item prop="keyword" label="SEO关键词">
        <el-input placeholder="SEO关键词" v-model="form.keyword" clearable></el-input>
      </el-form-item>
      <el-form-item prop="description" label="SEO描述">
        <el-input type="textarea" placeholder="SEO标题" v-model="form.description" clearable :rows="7"></el-input>
      </el-form-item>
    </el-form>
    <div class="text-center">
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import Util from '@/libs/util'
export default {
  data () {
    return {
      siteId: this.$store.state.content.site.id,
      form: {
        siteId: this.$store.state.content.site.id,
        title: '',
        keyword: '',
        description: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入SEO标题', trigger: 'blur' }
        ],
        keyword: [
          { required: true, message: '请输入SEO关键词', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入SEO描述', trigger: 'blur' }
        ],
      }
    };
  },
  mounted () {
    this.$store.commit('user/setCrumbs', [
      {
        name: '站点管理',
        route: '/site'
      },
      {
        name: '内容管理'
      },
      {
        name: 'SEO管理',
      },
    ])
    this.getData()
  },
  methods: {
    // seo信息
    getData () {
      this.$get(this.api.seoList, {
        siteId: this.siteId,
      }).then(({ data }) => {
        this.form = data[0]
      }).catch(err => { })
    },
    // 保存
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.submiting) return false
          this.submiting = true
          this.$post(this.api.updateSeo, this.form).then(res => {
            Util.successMsg('保存成功！')
            this.submiting = false
          }).catch(res => {
            this.submiting = false
          })
        }
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.input-form {

  .el-input,
  .el-textarea {
    width: 940px;
  }
}
</style>