bsdgy-front/src/pages/recruit/BulletinIndex.vue

<template>
  <div class="div-page">
    <template>
      <Row class="search-row">
        <i-col span="8">
            <p class="" style="font-size: 16px;line-height: 22px;margin-top: 10px;margin-left: 20px;margin-right: 20px;">招募令</p>
            <p class="" style="font-size: 13px;line-height: 32px;margin-left: 20px;margin-right: 20px;">便于门店进行推广员招募</p>
        </i-col>
        <i-col span="8">
            <span class="">使用范围：26家零售公司，785家店铺</span>
            <span class="" style="border: 0px; color: rgb(52, 150, 235); margin-left: 15px; cursor: pointer;"  @click="showStores">修改</span>
        </i-col>
        <i-col span="8">
            <i-switch size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
        </i-col>
      </Row>
      <div>
        <p style="margin:10px 0 10px -480px;text-align:center">招募海报</p>
        <div style="text-align: center;">
          <img style="width:500px;height:500px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590841039901&di=75940d3446fa7110a7482257d2934a5f&imgtype=0&src=http%3A%2F%2Fi1.ygimg.cn%2Fpics%2Fbosideng%2F2015%2F100266320%2F100266320_01_l.jpg%3F6" alt="">
          
        </div>
        <!-- <div style="margin-top:20px;text-align: center;"><Button ghost type="primary">上传</Button></div> -->
        <Upload v-show="showUpload" ref="upload"
                    :show-upload-list="false"
                    :on-success="uploadImgSuccess"
                    :format="['jpg', 'jpeg', 'png']"
                    :max-size="2048"
                    :before-upload="handleBeforeUpload"
                    multiple
                    action=""
                    style="padding-top:10px;text-align: center;">
                <Button ghost type="primary">上传</Button>
            </Upload>
        <div style="margin-top:20px;text-align: center;">
          <Button type="primary" size="large" @click="onEdit" style="margin-right:10px">{{btnStr}}</Button>
          <Button v-show="showUpload" type="text" size="large" @click="onCancel">取消</Button>
        </div>
      </div>
    </template>
    <selectStoreStep @doShow="doShow"
      :schedule="welcome"
      :show="showStoreCheck"></selectStoreStep>
  </div>
</template>

<script>
import selectStoreStep from '../activity/selectStoreStep'
import store from '../../store'
export default {
  
  components: {
    selectStoreStep,
  },
  data() {
    return {
      showStoreCheck: false,
      welcome: {
        content: '',
        params: [],
        company: [],
        stores: [],
      },
      showUpload:false,
      btnStr:'编辑'
    };
  },
  mounted: function() {
    
  },
  methods: {
    doShow () {
      this.showStoreCheck = false
      this.welcome = store.getters.useData
      console.log(this.welcome)
    },
    change (status) {
        this.$Message.info('开关状态：' + status);
    },
    showStores () {
      console.log({ ...store.getters.useData, ...this.welcome })
      store.commit('SET_useData', { ...store.getters.useData, ...this.welcome })
      this.showStoreCheck = true
    },
    onEdit(){
      this.showUpload = true;
      this.btnStr = '保存'
    },
    onCancel(){
      this.showUpload = false; 
      this.btnStr = '编辑'
    },
    uploadImgSuccess (res, file) {
      this.imageName = file.name;
    },
    handleBeforeUpload (res) {
      const me = this;
      let data = new FormData();
      data.append("file", res);
      axios({
        method: "post",
        url: "/upload",
        data: data,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        if (res.data.success) {
        }
      });
      return false;
    },
  },
};
</script>

<style scoped>
</style>