元气智驾官网后台前端页面
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

79 行
2.5 KiB

  1. <!--
  2. * @Date: 2021-07-08 11:02:40
  3. * @LastEditTime: 2022-07-27 10:48:43
  4. * @Description: 广告位
  5. -->
  6. <template>
  7. <div class="app-container">
  8. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
  9. <el-form-item label="图片" prop="image">
  10. <uploadFile :url.sync="ruleForm.image" type="image" width="1280" height="640"/>
  11. <p style="color: #909399;">*请上传1280*868的图片</p>
  12. </el-form-item>
  13. <el-form-item label="标题" prop="title">
  14. <el-input v-model="ruleForm.title"></el-input>
  15. </el-form-item>
  16. <el-form-item label="描述" prop="remark">
  17. <el-input v-model="ruleForm.remark" type="textarea"></el-input>
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
  21. </el-form-item>
  22. </el-form>
  23. </div>
  24. </template>
  25. <script>
  26. import { about } from '@/api/about'
  27. import { saveGuangGao } from '@/api/homePage'
  28. import uploadFile from '@/components/uploadFile'
  29. export default {
  30. components: {
  31. uploadFile
  32. },
  33. data() {
  34. return {
  35. ruleForm: {
  36. id: '',
  37. image: '',
  38. title: '',
  39. remark: ''
  40. },
  41. rules: {
  42. image: [
  43. { required: true, message: '请上传图片', trigger: 'blur' }
  44. ]
  45. }
  46. }
  47. },
  48. created() {
  49. this.getData()
  50. },
  51. methods: {
  52. getData() {
  53. about().then(res => {
  54. this.ruleForm.id = res.id
  55. this.ruleForm.image = res.image
  56. this.ruleForm.remark = res.remark
  57. this.ruleForm.title = res.title
  58. })
  59. },
  60. submitForm(formName) {
  61. this.$refs[formName].validate((valid) => {
  62. if (valid) {
  63. saveGuangGao(this.ruleForm).then(res => {
  64. this.$message({
  65. message: '操作成功!',
  66. type: 'success'
  67. })
  68. })
  69. } else {
  70. console.log('error submit!!')
  71. return false
  72. }
  73. })
  74. }
  75. }
  76. }
  77. </script>