haowanShow/admin/src/views/activity/homeAdmin.vue

<template>
  <div class="home-admin">
    <div class="min-container">
      <div class="header-title">顶部海报</div>
      <Form :label-width="86" class="form">
        <FormItem label="上传海报">
          <picUpload tips="只能上传jpg/png文件，且不超过500kb" ref="post-upload" :limit="1" :multiple="false" :preUploads="postPreUploads" :hasUploads="postHasUploads" />
        </FormItem>
      </Form>
      <div class="header-title">明星企业</div>
      <Form :label-width="86" class="form">
        <Row>
          <i-col :span="12">
            <FormItem label="上传海报">
            <picUpload tips="只能上传jpg/png文件，且不超过500kb"  ref="banner1-upload" :limit="1" :multiple="false" :preUploads="banner1PreUploads" :hasUploads="banner1HasUploads" />
          </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="选择企业">
              <Select v-model="banner1" filterable size="large" @on-change="changeBanner(1)">
                <Option v-for="item in companyList" :value="item.vrLink" :key="item.companyId">{{ item.companyName }}</Option>
              </Select>
          </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col :span="12">
            <FormItem label="上传海报">
            <picUpload tips="只能上传jpg/png文件，且不超过500kb"  ref="banner2-upload" :limit="1" :multiple="false" :preUploads="banner2PreUploads" :hasUploads="banner2HasUploads" />
          </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="选择企业">
              <Select v-model="banner2" filterable size="large" @on-change="changeBanner(2)">
                <Option v-for="item in companyList" :value="item.vrLink" :key="item.companyId">{{ item.companyName }}</Option>
              </Select>
          </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col :span="12">
            <FormItem label="上传海报">
            <picUpload tips="只能上传jpg/png文件，且不超过500kb"  ref="banner3-upload" :limit="1" :multiple="false" :preUploads="banner3PreUploads" :hasUploads="banner3HasUploads" />
          </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="选择企业">
              <Select v-model="banner3" filterable size="large" @on-change="changeBanner(3)">
                <Option v-for="item in companyList" :value="item.vrLink" :key="item.companyId">{{ item.companyName }}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
      </Form>
      <div class="actions-w">
        <Button size="large" type="primary" class="submit-btn" @click="submit">提交</Button>
        <!-- <Button size="large"  class="cancle-btn">取消</Button> -->
      </div>
    </div>
    
  </div>
</template>

<script>
import picUpload from '@/components/upload'
import { upadteActivity, getActivityDetail } from '@/api'
import { getCompanyList } from '@/api/company'
export default {
  data () {
    return {
      postPreUploads: [],
      postHasUploads: [],
      form: {
        firstPageContent: [{},{},{}]
      },
      companyList: [],
      banner1: '',
      banner2: '',
      banner3: '',
      banner1PreUploads: [],
      banner1HasUploads: [],
      banner2PreUploads: [],
      banner2HasUploads: [],
      banner3PreUploads: [],
      banner3HasUploads: [],
    }
  },
  components: {
    picUpload
  },
  watch: {
    banner1HasUploads (val) {
      if (!val[0]) {
        this.form.firstPageContent[0] = {}
      }
    },
    banner2HasUploads (val) {
      if (!val[0]) {
        this.form.firstPageContent[1] = {}
      }
    },
    banner3HasUploads (val) {
      if (!val[0]) {
        this.form.firstPageContent[2] = {}
      }
    },
  },
  async mounted () {
    await this.getCompanyList()
    this.getActivityDetail()
  },
  methods: {
    upadteActivity () {
      let form = Object.assign({}, this.form)
      form.firstPageContent = form.firstPageContent.filter(item => item.img)
      form.firstPageContent = JSON.stringify(form.firstPageContent)
      upadteActivity(form).then(() => {
        this.$Message.success('更新成功')
      })
    },
    getCompanyList () {
      getCompanyList({pageSize: 9999}).then(res => {
        this.companyList = res.data.list
        
      })
    },
    submit () {
      return Promise.all([this.$refs['post-upload'].uploadfiles(), this.$refs['banner1-upload'].uploadfiles(), this.$refs['banner2-upload'].uploadfiles(), this.$refs['banner3-upload'].uploadfiles()]).then(res => {
        if (res[0][0]) {
          this.form.logoUrl = res[0][0]
        }
        for (let i = 1; i<res.length; i++) {
          if (res[i][0]) {
            if (!this.form.firstPageContent[i-1]) {
              this.form.firstPageContent[i-1] = {}
            } 
            this.form.firstPageContent[i-1].img = res[i][0]
          }
        }
        this.upadteActivity()
      })
    },
    changeBanner (index) {
      const value = this[`banner${index}`]
      if (!this.form.firstPageContent[index-1]) {
              this.form.firstPageContent[index-1] = {}
            }
      this.form.firstPageContent[index-1].link = value
    },
    getActivityDetail () {
      getActivityDetail().then(res => {
        this.form = res.data
        this.form.firstPageContent = JSON.parse(this.form.firstPageContent)
        this.postHasUploads = [{img: res.data.logoUrl}]
        this.form.firstPageContent.forEach((item, index) => {
          this[`banner${index+1}HasUploads`] = [{ img: item.img }]
          this[`banner${index+1}`] = item.link
          console.log(item.link)
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home-admin {
  padding: 0 30px 30px;
}
.form {
  padding-top: 30px;
}
.actions-w {
  padding-left: 86px;
  .submit-btn {
    width: 116px;
  }
  .cancle-btn {
    width: 88px;
    margin-left: 15px;
  }
}
</style>