thoth-frontend-test/src/views/monthly/components/createdMonthly.vue

<template>
  <el-dialog :show="show" :title="title" :visible.sync="monthly_show" width="60%" class="public_task" @close="$emit('update:show', false)">
    <div class="blueStripe" />
    <div class="monthly-justify">
      <div class="monthly-thumb"><span style="color: #F56C6C;">*</span> 标题</div>
      <el-input v-model="monthly_form.title" placeholder="请输入" @input="getInput(monthly_form.title)" />
    </div>
    <div v-show="titles" class="monthly-tip"> 标题不能为空</div>
    <div class="monthly-justify">
      <div class="monthly-thumb"><span style="color: #F56C6C;">*</span> 缩略图</div>
      <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreview">
        <i class="el-icon-plus" />
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
      </el-upload>
    </div>
    <div v-show="thumb" class="monthly-tip"> 缩略图不能为空</div>
    <div class="monthly-justify">
      <div class="monthly-thumb"><span style="color: #F56C6C;">*</span> 素材</div>
      <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreviewTow">
        <i class="el-icon-plus" />
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
      </el-upload>
    </div>
    <div v-show="content" class="monthly-tip"> 素材不能为空</div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="monthly_show = false">取 消</el-button>
      <el-button type="primary" @click="monthly_dialog">创 建</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    show: { type: Boolean, default: false },
    title: { type: String, required: true }
  },
  data() {
    return {
      monthly_show: this.show,
      monthly_form: {},
      content: false,
      thumb: false,
      titles: false
    }
  },
  watch: {
    show: {
      handler(newV) {
        this.monthly_show = newV
      },
      immediate: true
    }
  },
  methods: {
    monthly_dialog() {
      !this.monthly_form.title ? this.titles = true : ''
      !this.monthly_form.thumb ? this.thumb = true : ''
      !this.monthly_form.content ? this.content = true : ''
      if (!this.monthly_form.content || !this.monthly_form.thumb || !this.monthly_form.title) {
        return false
      }
      this.$emit('monthly_created', this.monthly_form)
      this.$emit('update:show', false)
    },
    getInput(one) {
      one ? this.titles = false : this.titles = true
    },
    handlePictureCardPreviewTow(file) {
      this.monthly_form.content = 'http:' + file.url
      this.content = false
    },
    handlePictureCardPreview(file) {
      this.monthly_form.thumb = 'http:' + file.url
      this.thumb = false
    }
  }
}
</script>

<style lang="scss" scoped>
.public_task {
  /deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 16px;
    color: #303133;
    padding-left: 10px;
}
.monthly-justify {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.monthly-tip {
  color: #F56C6C;
  font-size: 12px;
  line-height: 1;
  padding-bottom: 20px;
  margin-left: 80px;
}
.monthly-thumb {
  width: 80px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

.blueStripe {
  width:4px;
  height:17px;
  background:#409EFF;
  border-radius:1px;
  position: absolute;
  top: 23px;
  left: 20px;
}
}
</style>