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="initData.scheduleVO.params[0].defaultVal" 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'
import bulletinService from '../../services/recruit/Bulletin'
import http from '../../services/CommonHttp';
export default {
  
  components: {
    selectStoreStep,
  },
  data() {
    return {
      showStoreCheck: false,
      welcome: {
        content: '',
        params: [],
        company: [],
        stores: [],
      },
      inidData:{},
      showUpload:false,
      btnStr:'编辑'
    };
  },
  mounted: function() {
    
  },  
  created() {
    this.initData();
  },
  methods: {
    initData(){
      let that = this;
      bulletinService.getDetail({}, function (data) {
        console.log(data);
        data.results.scheduleVO.params.forEach(item => {
          item.defaultVal = http.getBaseUrl() + item.defaultVal;
        });
        that.initData = data.results;

      }, function (err) {
          that.$Message.error("网络异常，请重试");
          that.setNoLoading();
      });
    },
    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>