|
- <!--
- * @Date: 2021-07-08 11:02:40
- * @LastEditTime: 2022-07-27 10:48:43
- * @Description: 广告位
- -->
- <template>
- <div class="app-container">
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
- <el-form-item label="图片" prop="image">
- <uploadFile :url.sync="ruleForm.image" type="image" width="1280" height="640"/>
- <p style="color: #909399;">*请上传1280*868的图片</p>
- </el-form-item>
- <el-form-item label="标题" prop="title">
- <el-input v-model="ruleForm.title"></el-input>
- </el-form-item>
- <el-form-item label="描述" prop="remark">
- <el-input v-model="ruleForm.remark" type="textarea"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
- </el-form-item>
- </el-form>
- </div>
- </template>
- <script>
- import { about } from '@/api/about'
- import { saveGuangGao } from '@/api/homePage'
- import uploadFile from '@/components/uploadFile'
-
- export default {
- components: {
- uploadFile
- },
- data() {
- return {
- ruleForm: {
- id: '',
- image: '',
- title: '',
- remark: ''
- },
- rules: {
- image: [
- { required: true, message: '请上传图片', trigger: 'blur' }
- ]
- }
- }
- },
- created() {
- this.getData()
- },
- methods: {
- getData() {
- about().then(res => {
- this.ruleForm.id = res.id
- this.ruleForm.image = res.image
- this.ruleForm.remark = res.remark
- this.ruleForm.title = res.title
- })
- },
- submitForm(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- saveGuangGao(this.ruleForm).then(res => {
- this.$message({
- message: '操作成功!',
- type: 'success'
- })
- })
- } else {
- console.log('error submit!!')
- return false
- }
- })
- }
- }
- }
- </script>
|