jiace-admin/src/views/asdm/footer/index.vue

<template>
  <div class="app-container">
    <el-card>
      <el-form
        style="width:50%"
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="80px"
      >
        
        <el-form-item label="地址" prop="address">
          <el-input
          placeholder="请输入地址"
          maxlength="35"
          show-word-limit
          v-model="ruleForm.address">
        </el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="linkman">
          <el-input
          placeholder="请输入联系人"
          maxlength="10"
          show-word-limit
          v-model="ruleForm.linkman">
        </el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input
          placeholder="请输入电话"
          maxlength="23"
          show-word-limit
          v-model="ruleForm.phone">
        </el-input>
        </el-form-item>
        <el-form-item label="公众号" prop="wx">
          <!-- <multi-upload v-model="selectProductPics" :maxCount="1"></multi-upload> -->
          <el-upload
            :action="upload.minioUploadUrl"
            list-type="picture-card"
            :limit="1"
            :file-list="list"
            :before-upload="beforeUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :on-success="handleUploadSuccess"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <span style="color:#999">● 建议上传100*100分辨率的图片</span>
        </el-form-item>
        <el-form-item label="QQ群" prop="qq">
          <el-upload
            :action="upload.minioUploadUrl"
            list-type="picture-card"
            :limit="1"
            :file-list="list2"
            :before-upload="beforeUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemoveQq"
            :on-exceed="handleExceed"
            :on-success="handleUploadSuccessQq"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <span style="color:#999">● 建议上传100*100分辨率的图片</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getBottom, updateBottom } from '@/api/asdm/partner';
import MultiUpload from '@/components/Upload/multiUpload';
import Editor from '@/components/Editor';
export default {
   components: {
    MultiUpload,
    Editor
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      upload:{
        minioUploadUrl: process.env.VUE_APP_BASE_API + '/minio/upload'
      },
      list:[],
      list2:[],
      ruleForm: {
        pic: '',
        title: '',
        textWord: '',
        evenMore: '',
      },
      rules: {
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        linkman: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        wx: [{ required: true, message: '请上传公众号图片', trigger: 'blur' }],
        qq: [{ required: true, message: '请上传QQ群图片', trigger: 'blur' }],
      }
    };
  },
  computed: {
    //主图和画册图片
    selectProductPics: {
      get: function() {
        let pics = [];
        if (
          this.ruleForm.pic === undefined ||
          this.ruleForm.pic == null ||
          this.ruleForm.pic === ''
        ) {
          return pics;
        }
        pics.push(this.ruleForm.pic);
        if (
          this.ruleForm.albumPics === undefined ||
          this.ruleForm.albumPics == null ||
          this.ruleForm.albumPics === ''
        ) {
          return pics;
        }
        let albumPics = this.ruleForm.albumPics.split(',');
        for (let i = 0; i < albumPics.length; i++) {
          pics.push(albumPics[i]);
        }
        return pics;
      },
      set: function(newValue) {
        if (newValue == null || newValue.length === 0) {
          this.ruleForm.pic = null;
          this.ruleForm.albumPics = null;
        } else {
          this.ruleForm.pic = newValue[0];
          // this.ruleForm.picList = newValue;
          this.ruleForm.albumPics = '';
          if (newValue.length > 1) {
            for (let i = 1; i < newValue.length; i++) {
              this.ruleForm.albumPics += newValue[i];
              if (i !== newValue.length - 1) {
                this.ruleForm.albumPics += ',';
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
        this.ruleForm.wx = ''
      },
      handleRemoveQq(file, fileList) {
        this.ruleForm.qq = ''
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // handlePictureQq(file){},
      // 文件超出个数限制时的钩子
      handleExceed(files, fileList) {
        this.$message({
          message: '最多只能上传1张图片',
          type: 'warning',
          duration: 1000
        });
      },
      // 文件上传成功时的钩子
    handleUploadSuccess(res, file){
       this.ruleForm.wx = res.data.url
    },
    handleUploadSuccessQq(res, file){
      this.ruleForm.qq = res.data.url
    },
    beforeUpload(file){
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        return false
      }
    },
    getData() {
      getBottom().then(res=>{
        this.ruleForm = res.data
          if(this.ruleForm.wx&&this.ruleForm.qq){
            this.$nextTick(()=>{
              let obj = new Object();
              obj.url = this.ruleForm.wx;
              let obj2 = new Object();
              obj2.url = this.ruleForm.qq;
              this.list.push(obj)
              this.list2.push(obj2)
          })
        }
      })
    },
    submitForm(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          updateBottom(this.ruleForm).then(res=>{
            this.msgSuccess(res.message)
          })
        }
      })
    },
  },
  created() {
    this.getData();
  }
};
</script>