t

src/views/news/components/popup/SelectImg.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-dialog
+      :show-close="false"
+      :close-on-click-modal="false"
+      :visible.sync="isShow"
+      title="选择封面图"
+      :fullscreen="false"
+      width="730px"
+      custom-class="xl-dialog"
+      center
+    >
+     <div class="scoped-img">
+       <div :class="curIndex === index ? 'op cur' : 'op'" @click="curIndex = index" v-for="(imgSrc,index) in imgTempArr" :key="index">
+         <img :src="imgSrc" class="img" />
+       </div>
+     </div>
+     <div class="xl-form" style="padding: 0 0 20px;">
+      <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
+      <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
+    </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: { },
+  mixins,
+  props: {
+    isShow: Boolean,
+    imgTempArr: Array
+  },
+  data() {
+    return {
+      curIndex: 0,
+    }
+  },
+  watch: {
+    isShow: function() {},
+  },
+  methods: {
+    close(str) {
+      if (str === 'confirm') {
+        // console.log(this.imgTempArr[this.curIndex])
+        // return
+        this.$emit('close', this.imgTempArr[this.curIndex])
+      } else {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.scoped-img {
+  max-height: 500px;
+  overflow-y: auto;
+  .op {
+    display: inline-block;
+    vertical-align: middle;
+    border: 5px solid #dcdcdc;
+    border-radius: 10px;
+    width: 200px;
+    height: 160px;
+    box-sizing: border-box;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    overflow: hidden;
+    cursor: pointer;
+    &.cur {
+      border-color: #2d8cf0;
+    }
+    .img {
+      width: 200px;
+      height: auto;
+      min-height: 160px;
+    }
+  }
+}
+</style>

src/views/news/otherEdit.vue

@@ -1,21 +1,34 @@
 <template>
   <div class="app-container">
     <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="60px" :insertSlotArr="[1]">
-      <div class="scoped-textarea"  slot="OI1">
-        <div class="st-text">洪楼科技</div>
-        <tinymce ref="refContent" v-model="content" :height="500" />
+      <div class="scoped-textarea" slot="OI1">
+        <div class="st-top">
+          <div class="t">资讯内容：</div>
+          <div :class="isConShow ? 'r t2' : 'r'" @click="isConShow = !isConShow">{{isConShow ? '收起' : '展开'}}</div>
+        </div>
+        <div :class="isConShow ? 'st-content show' : 'st-content'">
+          <div class="st-text">洪楼科技</div>
+          <tinymce ref="refContent" v-model="content" :height="800" />
+        </div>
       </div>
     </base-form>
     <div class="xl-form scoped-bottom">
+      <el-button class="xl-form-btn t4" @click="openSI">从文中选封面图</el-button>
       <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
       <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
     </div>
+    <select-img 
+      :isShow="isSIShow"
+      :imgTempArr="imgTempArr"
+      @close="closeSI"
+    />
   </div>
 </template>
 <script>
+import SelectImg from './components/popup/SelectImg'
 import Tinymce from '@/components/Tinymce'
 export default {
-  components: { Tinymce },
+  components: { Tinymce, SelectImg },
   mixins,
   data() {
     return {
@@ -23,6 +36,9 @@ export default {
       loading: true,
       cObj: {},
       content: '',
+      isConShow: false,
+      imgTempArr: [],
+      isSIShow: false,
     }
   },
   created () {
@@ -42,17 +58,19 @@ export default {
   methods: {
     getDef() {
       const params = { ...this.cObj }
+      if (!params.author) params.author = '洪楼Plus'
+      if (!params.hide_status) params.hide_status = '1'
       this.formData = [
         { label: '标题', key: 'title', rules: 1 },
         { label: '分类', key: 'plan_type', rules: 1, type: 'select', class: 'c-2', options: this.$dictData.plan_type, changeHandle: this.cateChange },
         { label: '作者', key: 'author', rules: 1, class: 'c-2' },
-        { label: '主图', key: 'pri_image', rules: 1, type: 'cuImg',
+        { label: '时间', rules: 1, key: 'create_at', type: 'datePicker', class: 'c-2', type2: 'date'},
+        { label: '状态', rules: 1, key: 'hide_status', type: 'select', class: 'c-2', options: this.$dictData.hide_status },
+        { label: '封面', key: 'pri_image', rules: 1, type: 'cuImg',
           options: {
             w: 500,
             h: 350,
           }, class: 'c-2' },
-        { label: '状态', rules: 1, key: 'hide_status', type: 'select', class: 'c-2', options: this.$dictData.hide_status },
-        { label: '时间', rules: 1, key: 'create_at', type: 'datePicker', type2: 'date'},
       ]
       this.setDefaultValue(params)
     },
@@ -87,6 +105,27 @@ export default {
         console.log(Object.prototype.toString.call(blob));
       }
     },
+    openSI () {
+      // let regex = new RegExp(/<img src="([^"]*?)" \/>/g)
+      let regex = new RegExp(/src="https:\/\/img2.honglounews.com([^"]*?)(png|jpg)/g)
+      let s = this.content.match(regex)
+      // console.log(s)
+      let imgTempArr = []
+      for (var i = 0; i < s.length; i++) {
+        // imgTempArr.push(s[i].replace(regex, '$1'))
+        imgTempArr.push(s[i].replace('src="', ''))
+      }
+      // console.log(imgTempArr)
+      this.imgTempArr = imgTempArr
+      this.isSIShow = true
+    },
+    closeSI (str) {
+      this.isSIShow = false
+      if (str) {
+        const oldform = this.$refs.ruleForm.baseForm
+        this.setDefaultValue({...oldform, pri_image: str})
+      }
+    },
     close(str) {
       if (str === 'confirm') {
         this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
@@ -131,7 +170,7 @@ export default {
 }
 .lib-edit {
   width: 900px;
-  padding: 20px 20px 60px;
+  padding: 20px;
   margin: 0 auto;
   background: #fff;
   ::v-deep .el-form-item {
@@ -140,12 +179,61 @@ export default {
   ::v-deep .el-date-editor.el-input {
     width: 100%;
   }
+
+  ::v-deep .img-upload {
+    height: 180px;
+    overflow: hidden;
+    .icon {
+      width: 280px;
+    }
+    .img {
+      width: 280px;
+    }
+  }
 }
 
 .scoped-textarea {
   width: 100%;
   position: relative;
-  margin-bottom: 20px;
+  .st-top {
+    padding-bottom: 10px;
+    user-select: none;
+    .t {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 14px;
+      color: #2d8cf0;
+      font-weight: bold;
+    }
+    .r {
+      display: inline-block;
+      vertical-align: middle;
+      color: #fff;
+      padding: 4px 10px;
+      border-radius: 6px;
+      background: #2d8cf0;
+      font-weight: bold;
+      font-size: 12px;
+      cursor: pointer;
+      &.t2 {
+        background: #19be6b;
+      }
+    }
+  }
+  .st-content {
+    height: 0;
+    transition: 1s;
+    overflow: hidden;
+    .st-text {
+      display: none;
+    }
+    &.show {
+      height: 800px;
+      .st-text {
+        display: block;
+      }
+    }
+  }
   .st-text {
     position: absolute;
     bottom: 1px;