|
|
@@ -4,12 +4,15 @@
|
|
4
|
4
|
<!-- <div class="insert" v-if="source=='welcom'">
|
|
5
|
5
|
<span @click="insertAtCursor">「插入客户昵称」</span>
|
|
6
|
6
|
</div> -->
|
|
7
|
|
- <textarea class="textarea self-scrollbar-3" ref="textarea" v-if="!disabled" autocomplete="off" maxlength="1000" :placeholder="source=='welcom'?'请输入欢迎语':'请输入群发内容'" v-model="content" @input="contentChange"></textarea>
|
|
|
7
|
+ <textarea class="textarea self-scrollbar-3" ref="textarea" v-if="!disabled" autocomplete="off" :placeholder="source=='welcom'?'请输入欢迎语':'请输入群发内容'" v-model="content" @input="contentChange"></textarea>
|
|
8
|
8
|
<!-- <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">
|
|
9
|
9
|
{{content}}
|
|
10
|
10
|
</div> -->
|
|
11
|
11
|
<div class="textarea self-scrollbar-3 pointer-drop" style="white-space: pre-wrap;color:#666" v-else>{{content}}</div>
|
|
12
|
|
- <div class="maxFont">{{content.length}}/1000</div>
|
|
|
12
|
+ <div class="flex">
|
|
|
13
|
+ <div class="warning_hint" v-if="$getStrBytes(content)>4000"> <i class="el-icon-warning-outline"></i> 消息文本内容，最多4000个字节，已超出！</div>
|
|
|
14
|
+ <div class="maxFont" style="flex:1">{{$getStrBytes(content)}}/4000字节</div>
|
|
|
15
|
+ </div>
|
|
13
|
16
|
<div class="fujian" v-if="attachments&&attachments.length>0">
|
|
14
|
17
|
<draggable class="syllable_ul" element="ul" :disabled="disabled" :list="attachments" :options="{group:'name', animation:100}">
|
|
15
|
18
|
<div class="fujianItem" :class="disabled?'pointer-drop':''" v-for="(item,index) in attachments" :key="index">
|
|
|
@@ -121,13 +124,24 @@
|
|
121
|
124
|
<el-dialog title="添加链接" :visible.sync="linkVisible" width="500px" center :close-on-click-modal="false">
|
|
122
|
125
|
<div class="lineItem">
|
|
123
|
126
|
<label><em>*</em>链接标题：</label>
|
|
124
|
|
- <el-input class="input" size="small" placeholder="请输入链接标题" v-model="link.title" clearable>
|
|
125
|
|
- </el-input>
|
|
|
127
|
+ <div class="input">
|
|
|
128
|
+ <div class="flex">
|
|
|
129
|
+ <el-input class="input" type="textarea" size="small" placeholder="请输入链接标题" v-model="link.title" clearable></el-input>
|
|
|
130
|
+ <span class="font_zj">{{$getStrBytes(link.title)}}/128字节</span>
|
|
|
131
|
+ </div>
|
|
|
132
|
+ <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(link.title)>128"> <i class="el-icon-warning-outline"></i> 链接标题，最多128个字节，已超出！</div>
|
|
|
133
|
+ </div>
|
|
126
|
134
|
</div>
|
|
127
|
135
|
<div class="lineItem">
|
|
128
|
136
|
<label><em>*</em>链接地址：</label>
|
|
129
|
|
- <el-input class="input" size="small" placeholder="请输入链接地址" v-model="link.url" clearable>
|
|
130
|
|
- </el-input>
|
|
|
137
|
+ <div class="input">
|
|
|
138
|
+ <div class="flex">
|
|
|
139
|
+ <el-input class="input" type="textarea" size="small" placeholder="请输入链接地址" v-model="link.url" clearable></el-input>
|
|
|
140
|
+ <span class="font_zj">{{$getStrBytes(link.url)}}/2048字节</span>
|
|
|
141
|
+ </div>
|
|
|
142
|
+ <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(link.url)>2048"> <i class="el-icon-warning-outline"></i> 链接地址，最多2048个字节，已超出！</div>
|
|
|
143
|
+ </div>
|
|
|
144
|
+ <!-- <el-input class="input" size="small" placeholder="请输入链接地址" v-model="link.url" clearable></el-input> -->
|
|
131
|
145
|
</div>
|
|
132
|
146
|
<div class="lineItem">
|
|
133
|
147
|
<label>图文封面：</label>
|
|
|
@@ -139,8 +153,14 @@
|
|
139
|
153
|
<p class="uploadImgHint" style="margin-left:40px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。</p>
|
|
140
|
154
|
<div class="lineItem">
|
|
141
|
155
|
<label>封面描述：</label>
|
|
142
|
|
- <el-input class="input" size="small" placeholder="请输入封面描述" v-model="link.desc" clearable>
|
|
143
|
|
- </el-input>
|
|
|
156
|
+ <div class="input">
|
|
|
157
|
+ <div class="flex">
|
|
|
158
|
+ <el-input class="input" type="textarea" size="small" placeholder="请输入封面描述" v-model="link.desc" clearable></el-input>
|
|
|
159
|
+ <span class="font_zj">{{$getStrBytes(link.desc)}}/512字节</span>
|
|
|
160
|
+ </div>
|
|
|
161
|
+ <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(link.desc)>512"> <i class="el-icon-warning-outline"></i> 封面描述，最多512个字节，已超出！</div>
|
|
|
162
|
+ </div>
|
|
|
163
|
+ <!-- <el-input class="input" size="small" placeholder="请输入封面描述" v-model="link.desc" clearable></el-input> -->
|
|
144
|
164
|
</div>
|
|
145
|
165
|
<div class="buttons">
|
|
146
|
166
|
<el-button type="primary" plain size="mini" @click="linkVisible = false">取消</el-button>
|
|
|
@@ -148,7 +168,7 @@
|
|
148
|
168
|
</div>
|
|
149
|
169
|
</el-dialog>
|
|
150
|
170
|
<!-- 小程序 -->
|
|
151
|
|
- <el-dialog title="添加小程序" :visible.sync="miniprogramVisible" width="600px" center :close-on-click-modal="false">
|
|
|
171
|
+ <el-dialog title="添加小程序" :visible.sync="miniprogramVisible" width="650px" center :close-on-click-modal="false">
|
|
152
|
172
|
<div style="padding:0 15px;">
|
|
153
|
173
|
<div class="self-hint" style="margin-bottom:20px;border:none">
|
|
154
|
174
|
<i class="el-icon-message-solid"></i>
|
|
|
@@ -156,13 +176,20 @@
|
|
156
|
176
|
</div>
|
|
157
|
177
|
<div class="lineItem">
|
|
158
|
178
|
<label><em>*</em>小程序标题：</label>
|
|
159
|
|
- <el-input class="input" size="small" placeholder="请输入小程序标题" v-model="miniprogram.title" clearable></el-input>
|
|
|
179
|
+ <div class="input">
|
|
|
180
|
+ <div class="flex">
|
|
|
181
|
+ <el-input class="input" type="textarea" size="small" placeholder="请输入小程序标题" v-model="miniprogram.title" clearable></el-input>
|
|
|
182
|
+ <span class="font_zj">{{$getStrBytes(miniprogram.title)}}/64字节</span>
|
|
|
183
|
+ </div>
|
|
|
184
|
+ <div class="warning_hint f12" style="margin-left:0" v-if="$getStrBytes(miniprogram.title)>64"> <i class="el-icon-warning-outline"></i> 小程序标题，最多64个字节，已超出！</div>
|
|
|
185
|
+ </div>
|
|
|
186
|
+ <!-- <el-input class="input" size="small" placeholder="请输入小程序标题" v-model="miniprogram.title" clearable></el-input> -->
|
|
160
|
187
|
</div>
|
|
161
|
188
|
<div class="lineItem">
|
|
162
|
189
|
<label><em>*</em>小程序appID：</label>
|
|
163
|
190
|
<div style="flex:1">
|
|
164
|
191
|
<el-input class="input" size="small" placeholder="请输入小程序appID" v-model="miniprogram.appid" clearable></el-input>
|
|
165
|
|
- <p class="otherHint"><a href="https://docs.qq.com/doc/p/cb25fa9e1aba98ce5f8b942f2900f0247b9e5dc6?dver=2.1.27292865" target="_blank">如何获取小程序appID?</a></p>
|
|
|
192
|
+ <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>
|
|
166
|
193
|
</div>
|
|
167
|
194
|
</div>
|
|
168
|
195
|
<div class="lineItem">
|
|
|
@@ -179,7 +206,7 @@
|
|
179
|
206
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
180
|
207
|
</el-upload>
|
|
181
|
208
|
</div>
|
|
182
|
|
- <p class="uploadImgHint" style="margin-left:20px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。</p>
|
|
|
209
|
+ <p class="uploadImgHint" style="margin-left:20px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。封面图建议尺寸为520*416。</p>
|
|
183
|
210
|
<div class="buttons">
|
|
184
|
211
|
<el-button type="primary" plain size="mini" @click="miniprogramVisible = false">取消</el-button>
|
|
185
|
212
|
<el-button type="primary" size="mini" @click="miniprogramDefine">确定</el-button>
|
|
|
@@ -317,9 +344,9 @@ export default {
|
|
317
|
344
|
this.imgVisible = false;
|
|
318
|
345
|
},
|
|
319
|
346
|
linkDefine () {//链接确定
|
|
320
|
|
- if (this.link.title == '') {
|
|
|
347
|
+ if (this.link.title == '' || this.$getStrBytes(this.link.title) > 128) {
|
|
321
|
348
|
this.$message({
|
|
322
|
|
- message: '请输入链接标题',
|
|
|
349
|
+ message: '请正确输入链接标题',
|
|
323
|
350
|
type: "warning"
|
|
324
|
351
|
})
|
|
325
|
352
|
return
|
|
|
@@ -331,6 +358,20 @@ export default {
|
|
331
|
358
|
})
|
|
332
|
359
|
return
|
|
333
|
360
|
}
|
|
|
361
|
+ if (this.link && this.link.url != '' && this.$getStrBytes(this.link.url) > 2048) {
|
|
|
362
|
+ this.$message({
|
|
|
363
|
+ message: '请正确输入链接地址',
|
|
|
364
|
+ type: "warning"
|
|
|
365
|
+ })
|
|
|
366
|
+ return
|
|
|
367
|
+ }
|
|
|
368
|
+ if (this.link && this.link.desc != '' && this.$getStrBytes(this.link.desc) > 512) {
|
|
|
369
|
+ this.$message({
|
|
|
370
|
+ message: '请正确输入封面描述',
|
|
|
371
|
+ type: "warning"
|
|
|
372
|
+ })
|
|
|
373
|
+ return
|
|
|
374
|
+ }
|
|
334
|
375
|
let obj = {
|
|
335
|
376
|
"msgtype": "link",
|
|
336
|
377
|
"link": this.link
|
|
|
@@ -345,9 +386,9 @@ export default {
|
|
345
|
386
|
this.linkVisible = false;
|
|
346
|
387
|
},
|
|
347
|
388
|
miniprogramDefine () {//小程序确定
|
|
348
|
|
- if (this.miniprogram.title == '') {
|
|
|
389
|
+ if (this.miniprogram.title == '' || this.$getStrBytes(this.miniprogram.title) > 64) {
|
|
349
|
390
|
this.$message({
|
|
350
|
|
- message: '请输入小程序标题',
|
|
|
391
|
+ message: '请正确输入小程序标题',
|
|
351
|
392
|
type: "warning"
|
|
352
|
393
|
})
|
|
353
|
394
|
return
|
|
|
@@ -750,4 +791,16 @@ export default {
|
|
750
|
791
|
margin-top: -10px;
|
|
751
|
792
|
margin-bottom: 10px;
|
|
752
|
793
|
}
|
|
|
794
|
+.warning_hint {
|
|
|
795
|
+ color: red;
|
|
|
796
|
+ font-size: 13px;
|
|
|
797
|
+ margin-left: 10px;
|
|
|
798
|
+ line-height: 20px;
|
|
|
799
|
+}
|
|
|
800
|
+.font_zj {
|
|
|
801
|
+ font-size: 12px;
|
|
|
802
|
+ width: 96px;
|
|
|
803
|
+ line-height: 20px;
|
|
|
804
|
+ padding-left: 6px;
|
|
|
805
|
+}
|
|
753
|
806
|
</style>
|
xiuli.gao