yxt-yythmall-ui-admin/src/views/appletBanner/appletBannerAdd.vue

<template>
  <div>

    <div class="tab-header webtop">
      <!-- 标题 -->
      <div>轮播图信息</div>
      <!-- start 添加修改按钮 -->
      <div>
        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
      <!-- end 添加修改按钮 -->
      <!-- end 详情按钮 -->
    </div>

    <div class="listconadd">

      <el-card class="box-card">

        <div class="item">
          <span class="item_text">标题：</span>
          <el-input v-model="formobj.title" placeholder="" class="item_input" clearable />
        </div>

        <div class="item" style="margin-bottom: 100px;margin-top: 100px;">
          <span class="item_text">轮播图图片：</span>
          <upload
            ref="uploadImg2"
            v-model="imgList"
            style="margin-top: 20px;"
            class="item_input"
            :limit="1"
            bucket="map"
            :class="{ hide: hideUploadBtn }"
            :upload-data="{ type: '0001' }"
            @change="backData"
          />
        </div>
        <div class="item">
          <span class="item_text">发布人：</span>
          <el-input v-model="formobj.publisher" placeholder="" class="item_input" clearable />
        </div>
        <div class="item">
          <span class="item_text">发布日期：</span>
          <el-date-picker v-model="formobj.releaseTime" type="date" class="item_input" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </div>
        <div class="item">
          <span class="item_text">时效开始日期：</span>
          <el-date-picker v-model="formobj.startDate" type="date" class="item_input" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </div>
        <div class="item">
          <span class="item_text">时效结束日期：</span>
          <el-date-picker v-model="formobj.endDate" type="date" class="item_input" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </div>

        <!-- 	<div class="item2">
					<span class="item_text">内容：</span>
					<el-input v-model="formobj.content" type="textarea" :rows="6" placeholder="商品简介" class="item_input"
						clearable />

				</div> -->

        <div class="item2">
          <span class="item_text">轮播图内容：</span>
          <editor class="item_input" :height="300" :min-height="100" :value="formobj.content" @input="editinput" />
        </div>

      </el-card>

    </div>

  </div>
</template>

<script>
  import req from '@/api/lpk/banner.js'
  import Editor from '@/components/Editor'
	import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'

  export default {
    components: {
			upload,
      Editor
    },
    data() {
      return {
				imgList: [],
				hideUploadBtn: false,
        submitdisabled: false,
        formobj: {
          sid: '',
          title: '',
          publisher: '',
          releaseTime: '',
          startDate: '',
          endDate: '',
          content: '',
          bannerUrl: '',
          bannerPath: ''
        }
      }
    },
    methods: {
      editinput(text) {
        this.formobj.content = text
      },
      saveOrUpdate() {
        console.log('>>>>>>>>>saveOrUpdate', this.formobj)
        req.saveNotice(this.formobj)
          .then(resp => {
            if (resp.success) {
              this.$message({
                showClose: true,
                type: 'success',
                message: resp.msg
              })
              this.handleReturn('true')
            } else {
              // 根据resp.code进行异常情况处理
            }
          })
          .catch(() => {})
      },
      handleReturn(isreload) {
        if (isreload === 'true') this.$emit('reloadlist')
        this.formobj = {
          sid: '',
          title: '',
          publisher: '',
          releaseTime: '',
          startDate: '',
          endDate: '',
          content: '',
          bannerUrl: '',
          bannerPath: ''
        }
        this.$emit('doback')
      },
      showAdd() {},
      showEdit(row) {
        req.noticeInit(row.sid)
          .then(resp => {
            if (resp.success) {
              this.formobj = resp.data
            }
          })
          .catch(e => {
            this.formobj = row
          })
      },
			backData(value) {
				console.log('backData》》》》', value)
				console.log('imgList', this.imgList)

				if (this.imgList.length > 0) {
					this.formobj.bannerUrl = this.imgList[0].url
				} else {
					this.formobj.bannerUrl = ''
				}

				this.hideUploadBtn = this.imgList.length !== 0
				console.log('this.hideUploadBtn', this.hideUploadBtn)
			}
    }
  }
</script>
<style lang="scss" scoped>
  // 隐藏上传组件

  .box-card {
    margin-left: 60px;
    margin-right: 60px;
    min-width: 70%;
    margin-top: 20px;
    height: auto;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 15px;
      height: 40px;
      line-height: 40px;

      .item_text {
        flex: 0.8;
        font-size: 18px;
        text-align: right;
      }

      .item_input {
        flex: 4;
        font-size: 16px;
        margin-left: 10px;
        margin-right: 80px;
      }

      .item_left_input {
        width: 20%;
      }

      .item_left_text {
        height: 30px;
        margin-left: 20px;
        line-height: 30px;
        color: #018AD2;
        padding: 0px 15px;
        border: 1.5px solid #018AD2;
        border-radius: 5px;

      }

      .item_right {
        flex: 1;
        justify-items: center;

        .item_right_list_text {
          font-size: 16px;
        }

        .item_right_list_delect {
          color: #5E94FF;
          margin-left: 20px;
          font-size: 16px;
          text-decoration: underline;
        }
      }

    }

    .item2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 15px;

      .item_text {
        flex: 0.8;
        font-size: 18px;
        text-align: right;
      }

      .item_input {
        flex: 4;
        font-size: 16px;
        margin-left: 10px;
        margin-right: 80px;
      }

    }

  }
</style>