123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880 |
- <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>
|