playlet/project/src/components/assembly/editCon.vue

<template>
  <div class="container">
    <div class="editCon" :style="disabled ? 'padding:0' : ''">
      <div class="insert" v-if="source == 'welcom'">
        <span @click="insertAtCursor">「插入客户昵称」</span>
      </div>
      <textarea class="textarea self-scrollbar-3" ref="textarea" v-if="!disabled" autocomplete="off"
        :placeholder="source == 'welcom' ? '请输入欢迎语' : '请输入群发内容'" v-model="content" @input="contentChange"></textarea>
      <!-- <div contentEditable='true' id="textarea" class="textarea self-scrollbar-3" v-if="!disabled" autocomplete="off" maxlength="1000" v-html="content" :placeholder="source=='welcom'?'请输入欢迎语':'请输入群发内容'" @input="contentChange">
        {{content}}
      </div> -->
      <div class="textarea self-scrollbar-3 pointer-drop" style="white-space: pre-wrap;color:#666" v-else>{{ content }}
      </div>
      <div class="flex">
        <div class="warning_hint" v-if="$getStrBytes(content) > 4000"> <i class="el-icon-warning-outline"></i>
          消息文本内容，最多4000个字节，已超出！</div>
        <div class="maxFont" style="flex:1">{{ $getStrBytes(content) }}/4000字节</div>
      </div>
      <div class="fujian" v-if="attachments && attachments.length > 0">
        <draggable class="syllable_ul" element="ul" :disabled="disabled" :list="attachments"
          :options="{ group: 'name', animation: 100 }">
          <div class="fujianItem" :class="disabled ? 'pointer-drop' : ''" v-for="(item, index) in attachments"
            :key="index + attachments_idx">
            <div class="left"><i class="el-icon-remove-outline" v-if="!disabled" @click="deleteAttachment(index)"></i>
              <span v-if="item.msgtype == 'image'" class="flex-align-center">【图片】：<img style="width:16px;height:16px"
                  :src="item.image.pic_url" alt=""></span>
              <span v-if="item.msgtype == 'promote'">【H5推广】：{{ item.promote.title }}</span>
              <span v-if="item.msgtype == 'miniprogram'">【小程序】：{{ item.miniprogram.title }}</span>
              <span v-if="item.msgtype == 'radar'">【智能雷达】：{{ item.radar.name }}</span>
              <span v-if="item.msgtype == 'link'">【链接】：{{ item.link.title }}</span>
            </div>
            <div class="right" v-if="!disabled">
              <i class="el-icon-edit-outline" @click="editAttachment(item, index)"></i>
            </div>
          </div>
        </draggable>
      </div>
      <div class="addFileBox" v-if="!disabled">
        <el-popover placement="top" trigger="click">
          <div slot="reference" style="display:inline-block" class="pointer">
            <i class="el-icon-circle-plus-outline"></i>
            <span>添加附件</span>
          </div>
          <div class="propoverItem" @click="fileEvent('img')">
            <img src="@/assets/img/tupian.png" alt="">
            <span>图片</span>
          </div>
          <div class="propoverItem" @click="fileEvent('linkExtend')">
            <img src="@/assets/img/tg_link.png" alt="">
            <span>H5推广</span>
          </div>
          <div class="propoverItem" @click="fileEvent('miniprogram')">
            <img src="@/assets/img/xiaochengxu.png" alt="">
            <span>小程序</span>
          </div>
          <div class="propoverItem" @click="fileEvent('radar')">
            <img src="@/assets/img/radar.png" alt="">
            <span>智能雷达</span>
          </div>
          <div class="propoverItem" @click="fileEvent('link')">
            <img src="@/assets/img/lianjie.png" alt="">
            <span>链接</span>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="self-hint" style="margin-top:10px" v-if="source == 'qun'">
      <span>注意:
        每位客户每天可以接收1条群发消息，不限企业发布的群发还是个人发布的群发。</span>
    </div>
    <div class="phonePreviewBox">
      <phonePreview :phone_width='phone_width' :content='content' :attachments='attachments'></phonePreview>
    </div>
    <!-- 添加图片 -->
    <el-dialog title="添加图片" append-to-body :visible.sync="imgVisible" width="500px" center
      :close-on-click-modal="false">
      <!-- <div class="lineItem">
        <label>图片标题：</label>
        <el-input class="input" size="small" placeholder="请输入图片标题(选填)" v-model="image.media_id" clearable>
        </el-input>
      </div> -->
      <div class="lineItem">
        <label><em>*</em>图片：</label>
        <el-upload class="avatar-uploader" :action="URL.BASEURL + URL.material_upload" name="material_file"
          :show-file-list="false" :data="fileData2" :on-success="uploadSuccess" :on-progress='beforeUploadUpload'
          :on-error='uploadFail' accept=".jpg,.jpeg,.png">
          <img v-if="image.pic_url" :src="image.pic_url" class="fm_img">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <p class="uploadImgHint">*图片仅支持png或jpg格式，且文件大小不得超过10M。</p>
      <div class="buttons">
        <el-button type="primary" plain size="mini" @click="imgVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="imageDefine">确定</el-button>
      </div>
    </el-dialog>
    <!-- 添加链接 -->
    <el-dialog title="添加链接" append-to-body :visible.sync="linkVisible" width="500px" center
      :close-on-click-modal="false">
      <div class="lineItem">
        <label><em>*</em>链接标题：</label>
        <div class="input">
          <div class="flex">
            <el-input class="input" type="textarea" size="small" placeholder="请输入链接标题" v-model="link.title" clearable>
            </el-input>
            <span class="font_zj">{{ $getStrBytes(link.title) }}/128字节</span>
          </div>
          <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(link.title) > 128"> <i
              class="el-icon-warning-outline"></i> 链接标题，最多128个字节，已超出！</div>
        </div>
      </div>
      <div class="lineItem">
        <label><em>*</em>链接地址：</label>
        <div class="input">
          <div class="flex">
            <el-input class="input" type="textarea" size="small" placeholder="请输入链接地址" v-model="link.url" clearable>
            </el-input>
            <span class="font_zj">{{ $getStrBytes(link.url) }}/2048字节</span>
          </div>
          <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(link.url) > 2048"> <i
              class="el-icon-warning-outline"></i> 链接地址，最多2048个字节，已超出！</div>
        </div>
        <!-- <el-input class="input" size="small" placeholder="请输入链接地址" v-model="link.url" clearable></el-input> -->
      </div>
      <div class="lineItem">
        <label>图文封面：</label>
        <el-upload class="avatar-uploader" :action="URL.BASEURL + URL.material_upload" name="material_file"
          :show-file-list="false" :data="fileData" :on-success="uploadSuccess" :on-progress='beforeUploadUpload'
          :on-error='uploadFail' accept=".jpg,.jpeg,.png">
          <img v-if="link.picurl" :src="link.picurl" class="fm_img">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <p class="uploadImgHint" style="margin-left:40px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。</p>
      <div class="lineItem">
        <label>封面描述：</label>
        <div class="input">
          <div class="flex">
            <el-input class="input" type="textarea" size="small" placeholder="请输入封面描述" v-model="link.desc" clearable>
            </el-input>
            <span class="font_zj">{{ $getStrBytes(link.desc) }}/512字节</span>
          </div>
          <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(link.desc) > 512"> <i
              class="el-icon-warning-outline"></i> 封面描述，最多512个字节，已超出！</div>
        </div>
        <!-- <el-input class="input" size="small" placeholder="请输入封面描述" v-model="link.desc" clearable></el-input> -->
      </div>
      <div class="buttons">
        <el-button type="primary" plain size="mini" @click="linkVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="linkDefine">确定</el-button>
      </div>
    </el-dialog>
    <!-- 小程序 -->
    <el-dialog title="添加小程序" append-to-body :visible.sync="miniprogramVisible" width="650px" center
      :close-on-click-modal="false">
      <div style="padding:0 15px;">
        <div class="self-hint" style="margin-bottom:20px;border:none">
          <i class="el-icon-message-solid"></i>
          <span>请填写企业微信后台绑定的小程序id和路径，否则会造成发送失败</span>
        </div>
        <div class="lineItem">
          <label><em>*</em>小程序标题：</label>
          <div class="input">
            <div class="flex">
              <el-input class="input" type="textarea" size="small" placeholder="请输入小程序标题" v-model="miniprogram.title"
                clearable></el-input>
              <span class="font_zj">{{ $getStrBytes(miniprogram.title) }}/64字节</span>
            </div>
            <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(miniprogram.title) > 64"> <i
                class="el-icon-warning-outline"></i> 小程序标题，最多64个字节，已超出！</div>
          </div>
          <!-- <el-input class="input" size="small" placeholder="请输入小程序标题" v-model="miniprogram.title" clearable></el-input> -->
        </div>
        <div class="lineItem">
          <label><em>*</em>小程序appID：</label>
          <div style="flex:1">
            <el-input class="input" size="small" placeholder="请输入小程序appID" v-model="miniprogram.appid" clearable>
            </el-input>
            <p class="otherHint" style="color:#f9a527">*小程序appID<a
                href="https://docs.qq.com/doc/p/cb25fa9e1aba98ce5f8b942f2900f0247b9e5dc6?dver=2.1.27292865"
                target="_blank">（如何获取小程序appID）</a>，必须是关联到企业的小程序应用。</p>
          </div>
        </div>
        <div class="lineItem">
          <label><em>*</em>小程序路径：</label>
          <div style="flex:1">
            <el-input class="input" size="small" placeholder="请输入小程序路径" v-model="miniprogram.page" clearable></el-input>
            <p class="otherHint"><a
                href="https://docs.qq.com/doc/p/16fa15eeb1fc21849904a0a82ebda04732e3bc16?dver=2.1.27292865"
                target="_blank">如何获取小程序路径?</a></p>
          </div>
        </div>
        <div class="lineItem">
          <label><em>*</em>小程序封面：</label>
          <el-upload class="avatar-uploader" :action="URL.BASEURL + URL.material_upload" name="material_file"
            :show-file-list="false" :data="fileData2" :on-success="uploadSuccess" :on-progress='beforeUploadUpload'
            :on-error='uploadFail' accept=".jpg,.jpeg,.png">
            <img v-if="miniprogram.pic_url" :src="miniprogram.pic_url" class="fm_img">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <p class="uploadImgHint" style="margin-left:20px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。封面图建议尺寸为520*416。</p>
        <div class="buttons">
          <el-button type="primary" plain size="mini" @click="miniprogramVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="miniprogramDefine">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 智能雷达 -->
    <radarEntrance ref="radarEntranceRef" @getRadarAttach="(val) => { radarDefine(val) }" :ids_comeBack="radarIds"
      :has_attachLen="has_attachLen"></radarEntrance>
    <!-- 推广链接 -->
    <el-dialog title="添加H5推广" append-to-body :visible.sync="linkExtendVisible" width="500px" center
      :close-on-click-modal="false">
      <div class="lineItem">
        <label><em>*</em>链接标题：</label>
        <div class="input">
          <div class="flex">
            <el-input class="input" type="textarea" size="small" placeholder="请输入链接标题" v-model="linkExtend.title"
              clearable></el-input>
            <span class="font_zj">{{ $getStrBytes(linkExtend.title) }}/128字节</span>
          </div>
          <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(linkExtend.title) > 128"> <i
              class="el-icon-warning-outline"></i> 链接标题，最多128个字节，已超出！</div>
        </div>
      </div>
      <div class="lineItem">
        <label><em>*</em>链接地址：</label>
        <div class="input">
          <div class="flex">
            <el-input class="input" type="textarea" size="small" placeholder="请输入链接地址" v-model="linkExtend.jump_url"
              clearable></el-input>
            <span class="font_zj">{{ $getStrBytes(linkExtend.jump_url) }}/2048字节</span>
          </div>
          <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(linkExtend.jump_url) > 2048"> <i
              class="el-icon-warning-outline"></i> 链接地址，最多2048个字节，已超出！</div>
        </div>
      </div>
      <div class="lineItem">
        <label>图文封面：</label>
        <el-upload class="avatar-uploader" :action="URL.BASEURL + URL.material_upload" name="material_file"
          :show-file-list="false" :data="fileData" :on-success="uploadSuccess" :on-progress='beforeUploadUpload'
          :on-error='uploadFail' accept=".jpg,.jpeg,.png">
          <img v-if="linkExtend.picurl" :src="linkExtend.picurl" class="fm_img">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <p class="uploadImgHint" style="margin-left:40px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。</p>
      <div class="lineItem">
        <label>封面描述：</label>
        <div class="input">
          <div class="flex">
            <el-input class="input" type="textarea" size="small" placeholder="请输入封面描述" v-model="linkExtend.desc"
              clearable></el-input>
            <span class="font_zj">{{ $getStrBytes(linkExtend.desc) }}/512字节</span>
          </div>
          <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(linkExtend.desc) > 512"> <i
              class="el-icon-warning-outline"></i> 封面描述，最多512个字节，已超出！</div>
        </div>
      </div>
      <div class="buttons">
        <el-button type="primary" plain size="mini" @click="linkExtendVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="linkExtendDefine">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import draggable from "vuedraggable"
import phonePreview from './phonePreview.vue'
import radarEntrance from './radarEntrance.vue'
export default {
  components: { draggable, phonePreview, radarEntrance },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    afferent_attachments: {
      default: []
    },
    afferent_content: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: 'qun'
    },
    phone_width: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      fileData: {
        admin_id: this.$cookie.getCookie('admin_id'),
        ttl: this.$cookie.getCookie('ttl'),
        sign: this.$cookie.getCookie('sign'),
        corpid: this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '',
        type: 1,//素材类型。1图片 2语音 3视频
        need_media_id: 0,
      },
      fileData2: {
        admin_id: this.$cookie.getCookie('admin_id'),
        ttl: this.$cookie.getCookie('ttl'),
        sign: this.$cookie.getCookie('sign'),
        corpid: this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '',
        type: 1,//素材类型。1图片 2语音 3视频
        need_media_id: 1,//是否需要返回media_id.0否 1是
      },
      content: this.afferent_content,
      imgVisible: false,
      linkVisible: false,
      linkExtendVisible: false,
      miniprogramVisible: false,
      miniprogram: {
        title: '',
        appid: '',
        page: '',
        pic_media_id: '',
        pic_url: ''
      },
      image: {
        media_id: '',
        pic_url: '',
      },
      link: {
        title: '',
        picurl: '',
        desc: '',
        url: '',
      },
      linkExtend: {
        title: '',
        jump_url: '',
        picurl: '',
        desc: '',
      },
      attachments: [],
      edit_index: '',
      radarAttach: [],
      radarIds: [],
      attachments_idx: 0,
      has_attachLen: 0,//除雷达外,附件的长度
    }
  },
  created () {
    if (this.afferent_attachments && this.afferent_attachments != '') {
      this.attachments = this.afferent_attachments
      this.radarids_reset()
    }
  },
  methods: {
    radarids_reset () { //雷达id回显
      this.has_attachLen = 0
      this.radarIds = []
      this.attachments.forEach(item => {
        if (item.msgtype == 'radar') {
          this.radarIds.push(item.radar.radar_id)
        } else {
          this.has_attachLen += 1
        }
      })
      this.$nextTick(() => {
        this.$refs.radarEntranceRef.radar_checked = []
      })
    },
    async insertAtCursor () {//插入昵称
      let myValue = '「客户昵称」'
      const myField = this.$refs.textarea;
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart
        var endPos = myField.selectionEnd
        this.content = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus()
        myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
      } else {
        this.content += myValue
      }
      // 子组件更新后 => 触发父组件更新content内容
      this.$emit('editContent', this.content)
    },
    radarDefine (val) { //雷达确定
      let now_rew = this.attachments
      for (let i = 0; i < now_rew.length; i++) {
        if (now_rew[i].msgtype == "radar") {
          now_rew.splice(i, 1)
          i -= 1   //每删除一个项就让a减少一个 保持a和长度同步
        }
      }
      this.attachments = [...this.attachments, ...val]
      this.$emit('changeAttachment', this.attachments)
    },
    editAttachment (item, index) {
      this.edit_index = index
      if (item.msgtype == 'image') {
        this.image = item.image;
        this.imgVisible = true
      }
      if (item.msgtype == 'link') {
        this.link = item.link
        this.linkVisible = true
      }
      if (item.msgtype == 'miniprogram') {
        this.miniprogram = item.miniprogram
        this.miniprogramVisible = true
      }
      if (item.msgtype == 'radar') {
        this.$nextTick(() => {
          this.radarids_reset()
          this.$refs.radarEntranceRef.dialogVisible = true
        })
      }
      if (item.msgtype == 'promote') {
        this.linkExtend = item.promote;
        this.linkExtendVisible = true;
      }
    },
    deleteAttachment (index) {
      this.attachments.splice(index, 1)
      this.attachments_idx++
      this.$emit('changeAttachment', this.attachments)
    },
    imageDefine () {//图片确定
      if (this.image.pic_url == '') {
        this.$message({
          message: '请选择图片',
          type: "warning"
        })
        return
      }
      let obj = {
        "msgtype": "image",
        "image": this.image
      }
      if (this.edit_index != -1) {
        this.$set(this.attachments, this.edit_index, obj)
        this.edit_index = -1
      } else {
        this.attachments.push(obj)
      }
      this.$emit('changeAttachment', this.attachments)
      this.imgVisible = false;
    },
    linkExtendDefine () {//推广链接
      if (this.linkExtend.title == '' || this.$getStrBytes(this.linkExtend.title) > 128) {
        this.$message({
          message: '请正确输入链接标题',
          type: "warning"
        })
        return
      }
      if (!(/^http[s]?:\/\/([\w-]+\.)+([\w-]+)/i.test(this.linkExtend.jump_url))) {
        this.$message({
          message: '请正确输入链接地址',
          type: "warning"
        })
        return
      }
      if (this.linkExtend && this.linkExtend.jump_url != '' && this.$getStrBytes(this.linkExtend.jump_url) > 2048) {
        this.$message({
          message: '请正确输入链接地址',
          type: "warning"
        })
        return
      }
      if (this.linkExtend && this.linkExtend.desc != '' && this.$getStrBytes(this.linkExtend.desc) > 512) {
        this.$message({
          message: '请正确输入封面描述',
          type: "warning"
        })
        return
      }
      let obj = {
        "msgtype": "promote",
        "promote": this.linkExtend
      }
      if (this.edit_index != -1) {
        this.$set(this.attachments, this.edit_index, obj)
        this.edit_index = -1
      } else {
        this.attachments.push(obj)
      }
      this.$emit('changeAttachment', this.attachments)
      this.linkExtendVisible = false;
    },
    linkDefine () {//链接确定
      if (this.link.title == '' || this.$getStrBytes(this.link.title) > 128) {
        this.$message({
          message: '请正确输入链接标题',
          type: "warning"
        })
        return
      }
      if (!(/^http[s]?:\/\/([\w-]+\.)+([\w-]+)/i.test(this.link.url))) {
        this.$message({
          message: '请正确输入链接地址',
          type: "warning"
        })
        return
      }
      if (this.link && this.link.url != '' && this.$getStrBytes(this.link.url) > 2048) {
        this.$message({
          message: '请正确输入链接地址',
          type: "warning"
        })
        return
      }
      if (this.link && this.link.desc != '' && this.$getStrBytes(this.link.desc) > 512) {
        this.$message({
          message: '请正确输入封面描述',
          type: "warning"
        })
        return
      }
      let obj = {
        "msgtype": "link",
        "link": this.link
      }
      if (this.edit_index != -1) {
        this.$set(this.attachments, this.edit_index, obj)
        this.edit_index = -1
      } else {
        this.attachments.push(obj)
      }
      this.$emit('changeAttachment', this.attachments)
      this.linkVisible = false;
    },
    miniprogramDefine () {//小程序确定
      if (this.miniprogram.title == '' || this.$getStrBytes(this.miniprogram.title) > 64) {
        this.$message({
          message: '请正确输入小程序标题',
          type: "warning"
        })
        return
      }
      if (!(/^wx(?=.*\d)(?=.*[a-z])[\da-z]{16}$/.test(this.miniprogram.appid))) {
        this.$message({
          message: '请正确输入小程序appID',
          type: "warning"
        })
        return
      }
      if (this.miniprogram.page == '') {
        this.$message({
          message: '请输入小程序路径',
          type: "warning"
        })
        return
      }
      if (this.miniprogram.pic_url == '') {
        this.$message({
          message: '请选择小程序封面',
          type: "warning"
        })
        return
      }
      let obj = {
        "msgtype": "miniprogram",
        "miniprogram": this.miniprogram
      }
      if (this.edit_index != -1) {
        this.$set(this.attachments, this.edit_index, obj)
        this.edit_index = -1
      } else {
        this.attachments.push(obj)
      }
      this.$emit('changeAttachment', this.attachments)
      this.miniprogramVisible = false
    },
    contentChange (val) {
      // if (val.inputType == 'insertText') {
      //   this.content += val.data;
      // }
      // if (val.inputType == 'deleteContentBackward') {
      //   this.content = this.content.slice(0, this.content.length - 1)
      // }
      this.$emit('editContent', this.content)
    },
    fileEvent (type) {
      this.edit_index = -1;
      if (this.attachments && this.attachments.length >= 9) {
        this.$message({
          message: '最多支持添加9个附件',
          type: "warning"
        })
        return
      }
      if (type == 'img') {
        this.image = {
          media_id: '',
          pic_url: '',
        }
        this.imgVisible = true
      }
      if (type == 'link') {
        this.link = {
          title: '',
          picurl: '',
          desc: '',
          url: '',
        }
        this.linkVisible = true
      }
      if (type == 'miniprogram') {
        this.miniprogram = {
          title: '',
          appid: '',
          page: '',
          pic_media_id: '',
          pic_url: ''
        }
        this.miniprogramVisible = true
      }
      if (type == 'radar') {
        this.$nextTick(() => {
          this.radarids_reset()
          this.$refs.radarEntranceRef.dialogVisible = true
        })

      }
      if (type == 'linkExtend') {
        this.linkExtend = {
          title: '',
          jump_url: '',
          picurl: '',
          desc: '',
        }
        this.linkExtendVisible = true
      }
    },
    uploadSuccess (res, file) {
      this.$loading(this.$loadingConfig).close();
      if (res.errno == 0) {
        if (this.imgVisible) {//图片
          this.image.pic_url = res.rst.url;
          this.image.media_id = res.rst.material_id;
        }
        if (this.linkVisible) {//链接
          this.link.picurl = res.rst.url;
        }
        if (this.miniprogramVisible) {//小程序
          this.miniprogram.pic_media_id = res.rst.material_id;
          this.miniprogram.pic_url = res.rst.url;
        }
        if (this.linkExtendVisible) {//推广链接
          this.linkExtend.picurl = res.rst.url;
        }
      } else {
        this.$message({
          message: res.err,
          type: 'warning'
        })
      }
    },
    beforeUploadUpload (file) {
      this.$loading(this.$loadingConfig);
    },
    uploadFail () {
      this.$loading(this.$loadingConfig).close();
      this.$message({
        message: '上传失败',
        type: 'fail'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#textarea:empty:before {
  content: attr(placeholder);
  color: #c0c4cc;
}

#textarea:focus:before {
  content: none;
}

.insert {
  padding: 10px;
  border-bottom: 1px solid #e9e9e9;

  span {
    color: #fbae16;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
  }
}

.container {
  position: relative;

  .phonePreviewBox {
    position: absolute;
    right: -360px;
    top: -200px;
  }
}

.editCon {
  width: 710px;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  position: relative;
  padding-bottom: 40px;

  .textarea {
    height: 200px;
    background: transparent;
    border: none;
    width: 100%;
    padding: 10px;
    resize: none;
    color: #333333;
    font-size: 14px;
    line-height: 20px;
  }

  .maxFont {
    text-align: right;
    color: #787878;
    font-size: 13px;
    line-height: 18px;
    padding: 6px 10px;
  }

  .addFileBox {
    width: 100%;
    padding: 10px;
    color: #00b38a;
    font-size: 13px;
    line-height: 18px;
    border-top: 1px solid #e9e9e9;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.propoverItem {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
  line-height: 20px;
  margin: 8px 0;
  cursor: pointer;

  &:last-of-type {
    margin-bottom: 0;
  }

  &:hover {
    color: #00b38a;
  }

  img {
    width: 15px;
    margin: 0 8px;
  }
}

.lineItem {
  display: flex;
  font-size: 14px;
  margin-bottom: 15px;

  label {
    width: 110px;
    line-height: 30px;
    color: #666666;
    text-align: right;

    em {
      color: #ff0000;
    }
  }

  .input {
    flex: 1;
  }

  .avatar-uploader .el-upload .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;

    &:hover {
      border-color: #00b38a;
    }
  }
}

.buttons {
  text-align: right;
  padding: 20px 0 10px;
}

.otherHint {
  font-size: 13px;
  line-height: 20px;
  margin-top: 6px;

  a {
    color: #00b38a;
    cursor: pointer;
  }

  text-align: right;
}

.fujian {
  border-top: 1px solid #e9e9e9;

  .fujianItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    color: #757171;
    font-size: 13px;
    cursor: grabbing;

    i {
      font-size: 16px;
      cursor: pointer;
    }

    .left {
      display: flex;
      align-items: center;
    }

    .right {
      i {
        margin-left: 10px;
      }
    }
  }
}

.fm_img {
  width: 100px;
  height: 100px;
  background: #f4f4f4;
}

.uploadImgHint {
  font-size: 13px;
  line-height: 30px;
  color: #f9a527;
  margin-left: 60px;
  margin-top: -10px;
  margin-bottom: 10px;
}

.warning_hint {
  color: red;
  font-size: 13px;
  margin-left: 10px;
  line-height: 20px;
}

.font_zj {
  font-size: 12px;
  width: 96px;
  line-height: 20px;
  padding-left: 6px;
}
</style>