Skip to content

Commit ae32aa0

Browse files
YunaiVYunaiV
committed
mp：支持发送【视频】消息时，支持新建视频
1 parent 1505dcd commit ae32aa0

File tree

1 file changed

+57
-20
lines changed
  • src/views/mp/components/wx-reply

1 file changed

+57
-20
lines changed

‎src/views/mp/components/wx-reply/main.vue

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
芋道源码：
55
① 移除多余的 rep 为前缀的变量，让 message 消息更简单
66
② 代码优化，补充注释，提升阅读性
7+
③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
8+
④ 支持发送【视频】消息时，支持新建视频
79
-->
810
<template>
911
<el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">
@@ -32,6 +34,9 @@
3234
<el-button type="success" @click="openMaterial">
3335
素材库选择<i class="el-icon-circle-check el-icon--right"></i>
3436
</el-button>
37+
<el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="90%" append-to-body>
38+
<wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />
39+
</el-dialog>
3540
</el-col>
3641
<!-- 文件上传 -->
3742
<el-col :span="12" class="col-add">
@@ -43,10 +48,6 @@
4348
</el-col>
4449
</el-row>
4550
</div>
46-
<!-- 点击选择素材，会打开下面的弹窗 -->
47-
<el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="90%" append-to-body>
48-
<wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />
49-
</el-dialog>
5051
</el-row>
5152
</el-tab-pane>
5253
<!-- 类型 3：语音 -->
@@ -64,9 +65,16 @@
6465
</div>
6566
<div v-else>
6667
<el-row style="text-align: center">
68+
<!-- 选择素材 -->
6769
<el-col :span="12" class="col-select">
68-
<el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
70+
<el-button type="success" @click="openMaterial">
71+
素材库选择<i class="el-icon-circle-check el-icon--right"></i>
72+
</el-button>
73+
<el-dialog title="选择语音" :visible.sync="dialogVoiceVisible" width="90%" append-to-body>
74+
<WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
75+
</el-dialog>
6976
</el-col>
77+
<!-- 文件上传 -->
7078
<el-col :span="12" class="col-add">
7179
<el-upload :action="actionUrl" :headers="headers" multiple :limit="1" :file-list="fileList" :data="uploadData"
7280
:before-upload="beforeVoiceUpload" :on-success="handleUploadSuccess">
@@ -76,9 +84,6 @@
7684
</el-col>
7785
</el-row>
7886
</div>
79-
<el-dialog title="选择语音" :visible.sync="dialogVoiceVisible" width="90%" append-to-body>
80-
<WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
81-
</el-dialog>
8287
</el-row>
8388
</el-tab-pane>
8489
<!-- 类型 4：视频 -->
@@ -93,13 +98,24 @@
9398
<wx-video-player v-if="objData.url" :url="objData.url" />
9499
</div>
95100
<div style="margin: 20px 0;"></div>
96-
<div style="text-align: center">
97-
<el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
98-
<!-- <el-button type="primary" v-if="permissions.wxmp_wxmaterial_add">新建视频<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
99-
</div>
100-
<el-dialog title="选择视频" :visible.sync="dialogVideoVisible" width="90%" append-to-body>
101-
<WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
102-
</el-dialog>
101+
<el-row style="text-align: center">
102+
<!-- 选择素材 -->
103+
<el-col :span="12">
104+
<el-button type="success" @click="openMaterial">
105+
素材库选择<i class="el-icon-circle-check el-icon--right"></i>
106+
</el-button>
107+
<el-dialog title="选择视频" :visible.sync="dialogVideoVisible" width="90%" append-to-body>
108+
<wx-material-select :objData="objData" @selectMaterial="selectMaterial" />
109+
</el-dialog>
110+
</el-col>
111+
<!-- 文件上传 -->
112+
<el-col :span="12">
113+
<el-upload :action="actionUrl" :headers="headers" multiple :limit="1" :file-list="fileList" :data="uploadData"
114+
:before-upload="beforeVideoUpload" :on-success="handleUploadSuccess">
115+
<el-button type="primary">新建视频<i class="el-icon-upload el-icon--right"></i></el-button>
116+
</el-upload>
117+
</el-col>
118+
</el-row>
103119
</el-row>
104120
</el-tab-pane>
105121
<el-tab-pane name="news">
@@ -123,6 +139,7 @@
123139
</el-dialog>
124140
</el-row>
125141
</el-tab-pane>
142+
<!-- 类型 6：音乐 -->
126143
<el-tab-pane name="music">
127144
<span slot="label"><i class="el-icon-service"></i> 音乐</span>
128145
<el-row>
@@ -139,7 +156,7 @@
139156
</div>
140157
</div>
141158
<el-dialog title="选择图片" :visible.sync="dialogThumbVisible" width="80%" append-to-body>
142-
<WxMaterialSelect :objData="{type:'image'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
159+
<wx-material-select :objData="{type:'image'}" @selectMaterial="selectMaterial" />
143160
</el-dialog>
144161
</el-col>
145162
<el-col :span="18">
@@ -280,6 +297,22 @@
280297
this.uploadData.accountId = this.objData.accountId;
281298
return true;
282299
},
300+
beforeVideoUpload(file){
301+
// 校验格式
302+
const isType = file.type === 'video/mp4';
303+
if (!isType) {
304+
this.$message.error('上传视频格式不对!');
305+
return false;
306+
}
307+
// 校验大小
308+
const isLt = file.size / 1024 / 1024 < 10;
309+
if (!isLt) {
310+
this.$message.error('上传视频大小不能超过 10M!');
311+
return false;
312+
}
313+
this.uploadData.accountId = this.objData.accountId;
314+
return true;
315+
},
283316
handleUploadSuccess(response, file, fileList) {
284317
if (response.code !== 0) {
285318
this.$message.error('上传出错：' + response.msg)
@@ -362,10 +395,14 @@
362395
tempObjItem.name = item.name
363396
this.objData.name = item.name
364397
// title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
365-
this.objData.title = item.title || ''
366-
tempObjItem.title = item.title || ''
367-
this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
368-
tempObjItem.description = item.introduction || ''
398+
if (item.title) {
399+
this.objData.title = item.title || ''
400+
tempObjItem.title = item.title || ''
401+
}
402+
if (item.introduction) {
403+
this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
404+
tempObjItem.description = item.introduction || ''
405+
}
369406
} else if (this.objData.type === 'text') {
370407
this.objData.content = item.content || ''
371408
}

0 commit comments

Comments
 (0)