caimei-authentic-manager/src/views/normal/personalized/banner.vue

<template>
  <div class="app-container">
    <!--
      使用element-ui表单
      可以保存banner，移动端banner和pc端banner单独上传
      跳转方式支持无、上传图片、链接，图片支持单独上传
    -->
    <div class="form-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="移动端banner:" prop="pcImage">
          <div class="banner" :style="pcImageStyle">
            <img v-if="pcImage" :src="pcImage">
            <span class="tip">请上传图片（1920*530px）</span>
          </div>
        </el-form-item>
        <el-form-item label="PC端banner:" prop="appImage">
          <div class="banner" :style="mobileImageStyle">
            <img v-if="appImage" :src="appImage">
            <span class="tip">请上传图片（800*800px）</span>
          </div>
        </el-form-item>
        <el-form-item label="跳转方式:" prop="region">
          <el-radio-group v-model="form.region">
            <el-radio :label="0">无</el-radio>
            <el-radio :label="1">图片</el-radio>
            <el-radio :label="2">链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.region === 1" label="跳转图片:" prop="linkImage">
          <UploadImage
            :image-list="linkImageList"
            :limit="1"
            @success="uploadLinkImageSuccess"
            @remove="handleLinkImageRemove"
          />
        </el-form-item>
        <el-form-item v-if="form.region === 2" label="跳转链接:" prop="link">
          <el-input v-model="form.link" />
        </el-form-item>
      </el-form>

      <!-- 表单提交 返回 -->
      <div class="control-box">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="warning" @click="navigateBack">返回</el-button>
      </div>
    </div>

    <UploadImage v-show="false" @success="uploadImageSuccess" @remove="handleImageRemove" />
  </div>
</template>

<script>
import UploadImage from '@/components/UploadImage'
export default {
  name: 'PersonalBanner',
  components: {
    UploadImage
  },
  data() {
    return {
      form: {
        region: 0,
        link: '',
        pcImage: '',
        appImage: '',
        linkImage: ''
      },
      rules: {
        pcImage: [{ required: true, message: '请上传图片', trigger: 'change' }],
        appImage: [{ required: true, message: '请上传图片', trigger: 'change' }],
        linkImage: [{ required: true, message: '请上传图片', trigger: 'change' }],
        link: [{ required: true, message: '请输入链接', trigger: 'blur' }]
      },
      linkImageList: []
    }
  },
  computed: {
    pcImageStyle() {
      const scale = 0.32
      return {
        width: 1920 * scale + 'px',
        height: 530 * scale + 'px'
      }
    },
    mobileImageStyle() {
      const scale = 0.32
      return {
        width: 1000 * scale + 'px',
        height: 1000 * scale + 'px'
      }
    }
  },
  methods: {
    submit() {},
    uploadImageSuccess({ response, file, fileList }) {
      this.imageList = fileList
      this.formData.linkImage = fileList.length > 0 ? fileList.length : ''
    },
    handleImageRemove({ file, fileList }) {
      this.linkImageList = fileList
      this.formData.linkImage = fileList.length > 0 ? fileList.length : ''
    },
    uploadLinkImageSuccess({ response, file, fileList }) {
      this.linkImageList = fileList
      this.formData.linkImage = fileList.length > 0 ? fileList.length : ''
    },
    handleLinkImageRemove({ file, fileList }) {
      this.linkImageList = fileList
      this.formData.linkImage = fileList.length > 0 ? fileList.length : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  justify-content: center;
}
.form-container {
  display: inline-block;
  padding: 80px 0;
}
.banner {
  position: relative;
  box-sizing: border-box;
  border: 1px dashed #ddd;
  cursor: pointer;
  user-select: none;

  .tip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #ddd;
    white-space: nowrap;
  }

  img {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}
</style>