BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 3654afedcc36121bee64e8bbcadaa6bf88d8f09c

Authored by YunaiV
1 parent 0499226c

mp：修复 WxMaterialSelect 组件的音乐 tab，无法选择图片素材报错

Inline Side-by-side
Showing 2 changed files with 422 additions and 456 deletions
yudao-ui-admin/src/views/mp/components/wx-reply/main.vue
  View file @3654afe
@@ -137,7 +137,7 @@ @@ -137,7 +137,7 @@
137 </el-row> 137 </el-row>
138 </div> 138 </div>
139 <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%" append-to-body> 139 <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%" append-to-body>
140 - <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" :newsType="newsType"></WxMaterialSelect> 140 + <wx-material-select :objData="objData" @selectMaterial="selectMaterial" :newsType="newsType" />
141 </el-dialog> 141 </el-dialog>
142 </el-row> 142 </el-row>
143 </el-tab-pane> 143 </el-tab-pane>
@@ -158,7 +158,7 @@ @@ -158,7 +158,7 @@
158 </div> 158 </div>
159 </div> 159 </div>
160 <el-dialog title="选择图片" :visible.sync="dialogThumbVisible" width="80%" append-to-body> 160 <el-dialog title="选择图片" :visible.sync="dialogThumbVisible" width="80%" append-to-body>
161 - <wx-material-select :objData="{type:'image'}" @selectMaterial="selectMaterial" /> 161 + <wx-material-select :objData="{type:'image', accountId: objData.accountId}" @selectMaterial="selectMaterial" />
162 </el-dialog> 162 </el-dialog>
163 </el-col> 163 </el-col>
164 <el-col :span="18"> 164 <el-col :span="18">
@@ -176,398 +176,369 @@ @@ -176,398 +176,369 @@
176 </template> 176 </template>
177 177
178 <script> 178 <script>
179 - // import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'  
180 - import {getAccessToken} from '@/utils/auth'  
181 - import WxNews from '@/views/mp/components/wx-news/main.vue'  
182 - import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'  
183 - import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';  
184 - import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'; 179 +import WxNews from '@/views/mp/components/wx-news/main.vue'
  180 +import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
  181 +import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
  182 +import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
185 183
186 - export default {  
187 - name: "wxReplySelect",  
188 - components: {  
189 - WxNews,  
190 - WxMaterialSelect,  
191 - WxVoicePlayer,  
192 - WxVideoPlayer 184 +import { getAccessToken } from '@/utils/auth'
  185 +
  186 +export default {
  187 + name: "wxReplySelect",
  188 + components: {
  189 + WxNews,
  190 + WxMaterialSelect,
  191 + WxVoicePlayer,
  192 + WxVideoPlayer
  193 + },
  194 + props: {
  195 + objData: { // 消息对象。
  196 + type: Object, // 设置为 Object 的原因，方便属性的传递
  197 + required: true,
193 }, 198 },
194 - props: {  
195 - objData: { // 消息对象。  
196 - type: Object, // 设置为 Object 的原因，方便属性的传递  
197 - required: true,  
198 - },  
199 - newsType:{ // 图文类型：1、已发布图文；2、草稿箱图文  
200 - type: String,  
201 - default: "1"  
202 - }, 199 + newsType:{ // 图文类型：1、已发布图文；2、草稿箱图文
  200 + type: String,
  201 + default: "1"
203 }, 202 },
204 - data() {  
205 - return {  
206 - tempPlayerObj: {  
207 - type: '2'  
208 - },  
209 - tableData: [],  
210 - page: {  
211 - total: 0, // 总页数  
212 - currentPage: 1, // 当前页数  
213 - pageSize: 20, // 每页显示多少条  
214 - ascs:[],//升序字段  
215 - descs:[]//降序字段  
216 - },  
217 - tableLoading: false, 203 + },
  204 + data() {
  205 + return {
  206 + tempPlayerObj: {
  207 + type: '2'
  208 + },
218 209
219 - tempObj: new Map().set( // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；  
220 - this.objData.type, // 消息类型  
221 - Object.assign({}, this.objData)), // 消息内容 210 + tempObj: new Map().set( // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
  211 + this.objData.type, // 消息类型
  212 + Object.assign({}, this.objData)), // 消息内容
222 213
223 - // ========== 素材选择的弹窗，是否可见 ==========  
224 - dialogNewsVisible: false, // 图文  
225 - dialogImageVisible: false, // 图片  
226 - dialogVoiceVisible: false, // 语音  
227 - dialogVideoVisible: false, // 视频  
228 - dialogThumbVisible: false, // 缩略图 214 + // ========== 素材选择的弹窗，是否可见 ==========
  215 + dialogNewsVisible: false, // 图文
  216 + dialogImageVisible: false, // 图片
  217 + dialogVoiceVisible: false, // 语音
  218 + dialogVideoVisible: false, // 视频
  219 + dialogThumbVisible: false, // 缩略图
229 220
230 - // ========== 文件上传（图片、语音、视频） ==========  
231 - fileList: [], // 文件列表  
232 - uploadData: {  
233 - "accountId": undefined,  
234 - "type": this.objData.type,  
235 - "title":'',  
236 - "introduction":''  
237 - },  
238 - actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',  
239 - headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部 221 + // ========== 文件上传（图片、语音、视频） ==========
  222 + fileList: [], // 文件列表
  223 + uploadData: {
  224 + "accountId": undefined,
  225 + "type": this.objData.type,
  226 + "title":'',
  227 + "introduction":''
  228 + },
  229 + actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
  230 + headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
  231 + }
  232 + },
  233 + methods:{
  234 + beforeThumbImageUpload(file){
  235 + const isType = file.type === 'image/jpeg'
  236 + || file.type === 'image/png'
  237 + || file.type === 'image/gif'
  238 + || file.type === 'image/bmp'
  239 + || file.type === 'image/jpg';
  240 + if (!isType) {
  241 + this.$message.error('上传图片格式不对!');
  242 + return false;
  243 + }
  244 + const isLt = file.size / 1024 / 1024 < 2;
  245 + if (!isLt) {
  246 + this.$message.error('上传图片大小不能超过 2M!');
  247 + return false;
240 } 248 }
  249 + this.uploadData.accountId = this.objData.accountId;
  250 + return true;
241 }, 251 },
242 - methods:{  
243 - beforeThumbImageUpload(file){  
244 - const isType = file.type === 'image/jpeg'  
245 - || file.type === 'image/png'  
246 - || file.type === 'image/gif'  
247 - || file.type === 'image/bmp'  
248 - || file.type === 'image/jpg';  
249 - if (!isType) {  
250 - this.$message.error('上传图片格式不对!');  
251 - return false;  
252 - }  
253 - const isLt = file.size / 1024 / 1024 < 2;  
254 - if (!isLt) {  
255 - this.$message.error('上传图片大小不能超过 2M!');  
256 - return false;  
257 - }  
258 - this.uploadData.accountId = this.objData.accountId;  
259 - return true;  
260 - },  
261 - beforeVoiceUpload(file){  
262 - this.tableLoading = true  
263 - // 校验格式  
264 - const isType = file.type === 'audio/mp3'  
265 - || file.type === 'audio/mpeg'  
266 - || file.type === 'audio/wma'  
267 - || file.type === 'audio/wav'  
268 - || file.type === 'audio/amr';  
269 - if (!isType) {  
270 - this.$message.error('上传语音格式不对!' + file.type);  
271 - return false;  
272 - }  
273 - // 校验大小  
274 - const isLt = file.size / 1024 / 1024 < 2;  
275 - if (!isLt) {  
276 - this.$message.error('上传语音大小不能超过 2M!');  
277 - return false;  
278 - }  
279 - this.uploadData.accountId = this.objData.accountId;  
280 - return true;  
281 - },  
282 - beforeImageUpload(file) {  
283 - // 校验格式  
284 - const isType = file.type === 'image/jpeg'  
285 - || file.type === 'image/png'  
286 - || file.type === 'image/gif'  
287 - || file.type === 'image/bmp'  
288 - || file.type === 'image/jpg';  
289 - if (!isType) {  
290 - this.$message.error('上传图片格式不对!');  
291 - return false;  
292 - }  
293 - // 校验大小  
294 - const isLt = file.size / 1024 / 1024 < 2;  
295 - if (!isLt) {  
296 - this.$message.error('上传图片大小不能超过 2M!');  
297 - return false;  
298 - }  
299 - this.uploadData.accountId = this.objData.accountId;  
300 - return true;  
301 - },  
302 - beforeVideoUpload(file){  
303 - // 校验格式  
304 - const isType = file.type === 'video/mp4';  
305 - if (!isType) {  
306 - this.$message.error('上传视频格式不对!');  
307 - return false;  
308 - }  
309 - // 校验大小  
310 - const isLt = file.size / 1024 / 1024 < 10;  
311 - if (!isLt) {  
312 - this.$message.error('上传视频大小不能超过 10M!');  
313 - return false;  
314 - }  
315 - this.uploadData.accountId = this.objData.accountId;  
316 - return true;  
317 - },  
318 - handleUploadSuccess(response, file, fileList) {  
319 - if (response.code !== 0) {  
320 - this.$message.error('上传出错：' + response.msg)  
321 - return false;  
322 - } 252 + beforeVoiceUpload(file){
  253 + // 校验格式
  254 + const isType = file.type === 'audio/mp3'
  255 + || file.type === 'audio/mpeg'
  256 + || file.type === 'audio/wma'
  257 + || file.type === 'audio/wav'
  258 + || file.type === 'audio/amr';
  259 + if (!isType) {
  260 + this.$message.error('上传语音格式不对!' + file.type);
  261 + return false;
  262 + }
  263 + // 校验大小
  264 + const isLt = file.size / 1024 / 1024 < 2;
  265 + if (!isLt) {
  266 + this.$message.error('上传语音大小不能超过 2M!');
  267 + return false;
  268 + }
  269 + this.uploadData.accountId = this.objData.accountId;
  270 + return true;
  271 + },
  272 + beforeImageUpload(file) {
  273 + // 校验格式
  274 + const isType = file.type === 'image/jpeg'
  275 + || file.type === 'image/png'
  276 + || file.type === 'image/gif'
  277 + || file.type === 'image/bmp'
  278 + || file.type === 'image/jpg';
  279 + if (!isType) {
  280 + this.$message.error('上传图片格式不对!');
  281 + return false;
  282 + }
  283 + // 校验大小
  284 + const isLt = file.size / 1024 / 1024 < 2;
  285 + if (!isLt) {
  286 + this.$message.error('上传图片大小不能超过 2M!');
  287 + return false;
  288 + }
  289 + this.uploadData.accountId = this.objData.accountId;
  290 + return true;
  291 + },
  292 + beforeVideoUpload(file){
  293 + // 校验格式
  294 + const isType = file.type === 'video/mp4';
  295 + if (!isType) {
  296 + this.$message.error('上传视频格式不对!');
  297 + return false;
  298 + }
  299 + // 校验大小
  300 + const isLt = file.size / 1024 / 1024 < 10;
  301 + if (!isLt) {
  302 + this.$message.error('上传视频大小不能超过 10M!');
  303 + return false;
  304 + }
  305 + this.uploadData.accountId = this.objData.accountId;
  306 + return true;
  307 + },
  308 + handleUploadSuccess(response, file, fileList) {
  309 + if (response.code !== 0) {
  310 + this.$message.error('上传出错：' + response.msg)
  311 + return false;
  312 + }
323 313
324 - // 清空上传时的各种数据  
325 - this.fileList = []  
326 - this.uploadData.title = ''  
327 - this.uploadData.introduction = '' 314 + // 清空上传时的各种数据
  315 + this.fileList = []
  316 + this.uploadData.title = ''
  317 + this.uploadData.introduction = ''
328 318
329 - // 上传好的文件，本质是个素材，所以可以进行选中  
330 - let item = response.data  
331 - this.selectMaterial(item)  
332 - },  
333 - /**  
334 - * 切换消息类型的 tab  
335 - *  
336 - * @param tab tab  
337 - */  
338 - handleClick(tab) {  
339 - // 设置后续文件上传的文件类型  
340 - this.uploadData.type = this.objData.type;  
341 - if (this.uploadData.type === 'music') { // 【音乐】上传的是缩略图  
342 - this.uploadData.type = 'thumb';  
343 - } 319 + // 上传好的文件，本质是个素材，所以可以进行选中
  320 + let item = response.data
  321 + this.selectMaterial(item)
  322 + },
  323 + /**
  324 + * 切换消息类型的 tab
  325 + *
  326 + * @param tab tab
  327 + */
  328 + handleClick(tab) {
  329 + // 设置后续文件上传的文件类型
  330 + this.uploadData.type = this.objData.type;
  331 + if (this.uploadData.type === 'music') { // 【音乐】上传的是缩略图
  332 + this.uploadData.type = 'thumb';
  333 + }
344 334
345 - // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData  
346 - let tempObjItem = this.tempObj.get(this.objData.type)  
347 - if (tempObjItem) {  
348 - this.objData.content = tempObjItem.content ? tempObjItem.content : null  
349 - this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null  
350 - this.objData.url = tempObjItem.url ? tempObjItem.url : null  
351 - this.objData.name = tempObjItem.url ? tempObjItem.name : null  
352 - this.objData.title = tempObjItem.title ? tempObjItem.title : null  
353 - this.objData.description = tempObjItem.description ? tempObjItem.description : null  
354 - return;  
355 - }  
356 - // 如果获取不到，需要把 objData 复原  
357 - // 必须使用 $set 赋值，不然 input 无法输入内容  
358 - this.$set(this.objData, 'content', '');  
359 - this.$set(this.objData, 'title', '');  
360 - this.$set(this.objData, 'description', '');  
361 - },  
362 - /**  
363 - * 选择素材，将设置设置到 objData 变量  
364 - *  
365 - * @param item 素材  
366 - */  
367 - selectMaterial(item) {  
368 - // 选择好素材，所以隐藏弹窗  
369 - this.closeMaterial(); 335 + // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
  336 + let tempObjItem = this.tempObj.get(this.objData.type)
  337 + if (tempObjItem) {
  338 + this.objData.content = tempObjItem.content ? tempObjItem.content : null
  339 + this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
  340 + this.objData.url = tempObjItem.url ? tempObjItem.url : null
  341 + this.objData.name = tempObjItem.url ? tempObjItem.name : null
  342 + this.objData.title = tempObjItem.title ? tempObjItem.title : null
  343 + this.objData.description = tempObjItem.description ? tempObjItem.description : null
  344 + return;
  345 + }
  346 + // 如果获取不到，需要把 objData 复原
  347 + // 必须使用 $set 赋值，不然 input 无法输入内容
  348 + this.$set(this.objData, 'content', '');
  349 + this.$set(this.objData, 'title', '');
  350 + this.$set(this.objData, 'description', '');
  351 + },
  352 + /**
  353 + * 选择素材，将设置设置到 objData 变量
  354 + *
  355 + * @param item 素材
  356 + */
  357 + selectMaterial(item) {
  358 + // 选择好素材，所以隐藏弹窗
  359 + this.closeMaterial();
370 360
371 - // 创建 tempObjItem 对象，并设置对应的值  
372 - let tempObjItem = {}  
373 - tempObjItem.type = this.objData.type;  
374 - if (this.objData.type === 'news') {  
375 - tempObjItem.articles = item.content.newsItem  
376 - this.objData.articles = item.content.newsItem  
377 - } else if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图  
378 - tempObjItem.thumbMediaId = item.mediaId  
379 - this.objData.thumbMediaId = item.mediaId  
380 - tempObjItem.thumbMediaUrl = item.url  
381 - this.objData.thumbMediaUrl = item.url  
382 - // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉  
383 - tempObjItem.title = this.objData.title || ''  
384 - tempObjItem.introduction = this.objData.introduction || ''  
385 - tempObjItem.musicUrl = this.objData.musicUrl || ''  
386 - tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''  
387 - } else if (this.objData.type === 'image'  
388 - || this.objData.type === 'voice') {  
389 - tempObjItem.mediaId = item.mediaId  
390 - this.objData.mediaId = item.mediaId  
391 - tempObjItem.url = item.url;  
392 - this.objData.url = item.url;  
393 - tempObjItem.name = item.name  
394 - this.objData.name = item.name  
395 - } else if (this.objData.type === 'video') {  
396 - tempObjItem.mediaId = item.mediaId  
397 - this.objData.mediaId = item.mediaId  
398 - tempObjItem.url = item.url;  
399 - this.objData.url = item.url;  
400 - tempObjItem.name = item.name  
401 - this.objData.name = item.name  
402 - // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction  
403 - if (item.title) {  
404 - this.objData.title = item.title || ''  
405 - tempObjItem.title = item.title || ''  
406 - }  
407 - if (item.introduction) {  
408 - this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下  
409 - tempObjItem.description = item.introduction || ''  
410 - }  
411 - } else if (this.objData.type === 'text') {  
412 - this.objData.content = item.content || '' 361 + // 创建 tempObjItem 对象，并设置对应的值
  362 + let tempObjItem = {}
  363 + tempObjItem.type = this.objData.type;
  364 + if (this.objData.type === 'news') {
  365 + tempObjItem.articles = item.content.newsItem
  366 + this.objData.articles = item.content.newsItem
  367 + } else if (this.objData.type === 'music') { // 音乐需要特殊处理，因为选择的是图片的缩略图
  368 + tempObjItem.thumbMediaId = item.mediaId
  369 + this.objData.thumbMediaId = item.mediaId
  370 + tempObjItem.thumbMediaUrl = item.url
  371 + this.objData.thumbMediaUrl = item.url
  372 + // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
  373 + tempObjItem.title = this.objData.title || ''
  374 + tempObjItem.introduction = this.objData.introduction || ''
  375 + tempObjItem.musicUrl = this.objData.musicUrl || ''
  376 + tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''
  377 + } else if (this.objData.type === 'image'
  378 + || this.objData.type === 'voice') {
  379 + tempObjItem.mediaId = item.mediaId
  380 + this.objData.mediaId = item.mediaId
  381 + tempObjItem.url = item.url;
  382 + this.objData.url = item.url;
  383 + tempObjItem.name = item.name
  384 + this.objData.name = item.name
  385 + } else if (this.objData.type === 'video') {
  386 + tempObjItem.mediaId = item.mediaId
  387 + this.objData.mediaId = item.mediaId
  388 + tempObjItem.url = item.url;
  389 + this.objData.url = item.url;
  390 + tempObjItem.name = item.name
  391 + this.objData.name = item.name
  392 + // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
  393 + if (item.title) {
  394 + this.objData.title = item.title || ''
  395 + tempObjItem.title = item.title || ''
413 } 396 }
414 - // 最终设置到临时缓存  
415 - this.tempObj.set(this.objData.type, tempObjItem)  
416 - },  
417 - openMaterial() {  
418 - if (this.objData.type === 'news') {  
419 - this.dialogNewsVisible = true  
420 - } else if(this.objData.type === 'image') {  
421 - this.dialogImageVisible = true  
422 - } else if(this.objData.type === 'voice') {  
423 - this.dialogVoiceVisible = true  
424 - } else if(this.objData.type === 'video') {  
425 - this.dialogVideoVisible = true  
426 - } else if(this.objData.type === 'music') {  
427 - this.dialogThumbVisible = true  
428 - }  
429 - },  
430 - closeMaterial() {  
431 - this.dialogNewsVisible = false  
432 - this.dialogImageVisible = false  
433 - this.dialogVoiceVisible = false  
434 - this.dialogVideoVisible = false  
435 - this.dialogThumbVisible = false  
436 - },  
437 - deleteObj() {  
438 - if (this.objData.type === 'news') {  
439 - this.$delete(this.objData, 'articles');  
440 - } else if(this.objData.type === 'image') {  
441 - this.objData.mediaId = null  
442 - this.objData.url = null  
443 - this.objData.name = null  
444 - } else if(this.objData.type === 'voice') {  
445 - this.objData.mediaId = null  
446 - this.objData.url = null  
447 - this.objData.name = null  
448 - } else if(this.objData.type === 'video') {  
449 - this.objData.mediaId = null  
450 - this.objData.url = null  
451 - this.objData.name = null  
452 - this.objData.title = null  
453 - this.objData.description = null  
454 - } else if(this.objData.type === 'music') {  
455 - this.objData.thumbMediaId = null  
456 - this.objData.thumbMediaUrl = null  
457 - this.objData.title = null  
458 - this.objData.description = null  
459 - this.objData.musicUrl = null  
460 - this.objData.hqMusicUrl = null  
461 - } else if(this.objData.type === 'text') {  
462 - this.objData.content = null 397 + if (item.introduction) {
  398 + this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
  399 + tempObjItem.description = item.introduction || ''
463 } 400 }
464 - // 覆盖缓存  
465 - this.tempObj.set(this.objData.type, Object.assign({}, this.objData));  
466 - },  
467 - getPage(page, params) {  
468 - this.tableLoading = true  
469 - // getPage(Object.assign({  
470 - // current: page.currentPage,  
471 - // size: page.pageSize,  
472 - // type:this.objData.type  
473 - // }, params)).then(response => {  
474 - // this.tableData = response.data.items  
475 - // this.page.total = response.data.totalCount  
476 - // this.page.currentPage = page.currentPage  
477 - // this.page.pageSize = page.pageSize  
478 - // this.tableLoading = false  
479 - // })  
480 - },  
481 - sizeChange(val) {  
482 - this.page.currentPage = 1  
483 - this.page.pageSize = val  
484 - this.getPage(this.page)  
485 - },  
486 - /**  
487 - * 输入时，缓存每次 objData 到 tempObj 中  
488 - *  
489 - * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式  
490 - */  
491 - inputContent(str) {  
492 - // 覆盖缓存  
493 - this.tempObj.set(this.objData.type, Object.assign({}, this.objData)); 401 + } else if (this.objData.type === 'text') {
  402 + this.objData.content = item.content || ''
  403 + }
  404 + // 最终设置到临时缓存
  405 + this.tempObj.set(this.objData.type, tempObjItem)
  406 + },
  407 + openMaterial() {
  408 + if (this.objData.type === 'news') {
  409 + this.dialogNewsVisible = true
  410 + } else if(this.objData.type === 'image') {
  411 + this.dialogImageVisible = true
  412 + } else if(this.objData.type === 'voice') {
  413 + this.dialogVoiceVisible = true
  414 + } else if(this.objData.type === 'video') {
  415 + this.dialogVideoVisible = true
  416 + } else if(this.objData.type === 'music') {
  417 + this.dialogThumbVisible = true
  418 + }
  419 + },
  420 + closeMaterial() {
  421 + this.dialogNewsVisible = false
  422 + this.dialogImageVisible = false
  423 + this.dialogVoiceVisible = false
  424 + this.dialogVideoVisible = false
  425 + this.dialogThumbVisible = false
  426 + },
  427 + deleteObj() {
  428 + if (this.objData.type === 'news') {
  429 + this.$delete(this.objData, 'articles');
  430 + } else if(this.objData.type === 'image') {
  431 + this.objData.mediaId = null
  432 + this.objData.url = null
  433 + this.objData.name = null
  434 + } else if(this.objData.type === 'voice') {
  435 + this.objData.mediaId = null
  436 + this.objData.url = null
  437 + this.objData.name = null
  438 + } else if(this.objData.type === 'video') {
  439 + this.objData.mediaId = null
  440 + this.objData.url = null
  441 + this.objData.name = null
  442 + this.objData.title = null
  443 + this.objData.description = null
  444 + } else if(this.objData.type === 'music') {
  445 + this.objData.thumbMediaId = null
  446 + this.objData.thumbMediaUrl = null
  447 + this.objData.title = null
  448 + this.objData.description = null
  449 + this.objData.musicUrl = null
  450 + this.objData.hqMusicUrl = null
  451 + } else if(this.objData.type === 'text') {
  452 + this.objData.content = null
494 } 453 }
  454 + // 覆盖缓存
  455 + this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
  456 + },
  457 + /**
  458 + * 输入时，缓存每次 objData 到 tempObj 中
  459 + *
  460 + * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
  461 + */
  462 + inputContent(str) {
  463 + // 覆盖缓存
  464 + this.tempObj.set(this.objData.type, Object.assign({}, this.objData));
495 } 465 }
496 - }; 466 + }
  467 +};
497 </script> 468 </script>
498 469
499 <style lang="scss" scoped> 470 <style lang="scss" scoped>
500 - .public-account-management{  
501 - .el-input{  
502 - width: 70%;  
503 - margin-right: 2%;  
504 - }  
505 - }  
506 - .pagination{  
507 - text-align: right;  
508 - margin-right: 25px;  
509 - }  
510 - .select-item{  
511 - width: 280px;  
512 - padding: 10px;  
513 - margin: 0 auto 10px auto;  
514 - border: 1px solid #eaeaea;  
515 - }  
516 - .select-item2{  
517 - padding: 10px;  
518 - margin: 0 auto 10px auto;  
519 - border: 1px solid #eaeaea;  
520 - }  
521 - .ope-row{  
522 - padding-top: 10px;  
523 - text-align: center;  
524 - }  
525 - .item-name{  
526 - font-size: 12px;  
527 - overflow: hidden;  
528 - text-overflow:ellipsis;  
529 - white-space: nowrap;  
530 - text-align: center;  
531 - }  
532 - .el-form-item__content{  
533 - line-height:unset!important;  
534 - }  
535 - .col-select{  
536 - border: 1px solid rgb(234, 234, 234);  
537 - padding: 50px 0px;  
538 - height: 160px;  
539 - width: 49.5%;  
540 - }  
541 - .col-select2{  
542 - border: 1px solid rgb(234, 234, 234);  
543 - padding: 50px 0px;  
544 - height: 160px;  
545 - }  
546 - .col-add{  
547 - border: 1px solid rgb(234, 234, 234);  
548 - padding: 50px 0px;  
549 - height: 160px;  
550 - width: 49.5%;  
551 - float: right  
552 - }  
553 - .avatar-uploader-icon {  
554 - border: 1px solid #d9d9d9;  
555 - font-size: 28px;  
556 - color: #8c939d;  
557 - width: 100px!important;  
558 - height: 100px!important;  
559 - line-height: 100px!important;  
560 - text-align: center;  
561 - }  
562 - .material-img {  
563 - width: 100%;  
564 - }  
565 - .thumb-div{  
566 - display: inline-block;  
567 - text-align: center;  
568 - }  
569 - .item-infos{  
570 - width: 30%;  
571 - margin: auto 471 +.public-account-management{
  472 + .el-input{
  473 + width: 70%;
  474 + margin-right: 2%;
572 } 475 }
  476 +}
  477 +.pagination{
  478 + text-align: right;
  479 + margin-right: 25px;
  480 +}
  481 +.select-item{
  482 + width: 280px;
  483 + padding: 10px;
  484 + margin: 0 auto 10px auto;
  485 + border: 1px solid #eaeaea;
  486 +}
  487 +.select-item2{
  488 + padding: 10px;
  489 + margin: 0 auto 10px auto;
  490 + border: 1px solid #eaeaea;
  491 +}
  492 +.ope-row{
  493 + padding-top: 10px;
  494 + text-align: center;
  495 +}
  496 +.item-name{
  497 + font-size: 12px;
  498 + overflow: hidden;
  499 + text-overflow:ellipsis;
  500 + white-space: nowrap;
  501 + text-align: center;
  502 +}
  503 +.el-form-item__content{
  504 + line-height:unset!important;
  505 +}
  506 +.col-select{
  507 + border: 1px solid rgb(234, 234, 234);
  508 + padding: 50px 0px;
  509 + height: 160px;
  510 + width: 49.5%;
  511 +}
  512 +.col-select2{
  513 + border: 1px solid rgb(234, 234, 234);
  514 + padding: 50px 0px;
  515 + height: 160px;
  516 +}
  517 +.col-add{
  518 + border: 1px solid rgb(234, 234, 234);
  519 + padding: 50px 0px;
  520 + height: 160px;
  521 + width: 49.5%;
  522 + float: right
  523 +}
  524 +.avatar-uploader-icon {
  525 + border: 1px solid #d9d9d9;
  526 + font-size: 28px;
  527 + color: #8c939d;
  528 + width: 100px!important;
  529 + height: 100px!important;
  530 + line-height: 100px!important;
  531 + text-align: center;
  532 +}
  533 +.material-img {
  534 + width: 100%;
  535 +}
  536 +.thumb-div{
  537 + display: inline-block;
  538 + text-align: center;
  539 +}
  540 +.item-infos{
  541 + width: 30%;
  542 + margin: auto
  543 +}
573 </style> 544 </style>
yudao-ui-admin/src/views/mp/menu/index.vue
  View file @3654afe
@@ -73,68 +73,68 @@ SOFTWARE. @@ -73,68 +73,68 @@ SOFTWARE.
73 <!--右边配置--> 73 <!--右边配置-->
74 <div v-if="showRightFlag" class="right"> 74 <div v-if="showRightFlag" class="right">
75 <div class="configure_page"> 75 <div class="configure_page">
76 - <div class="delete_btn">  
77 - <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button> 76 + <div class="delete_btn">
  77 + <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
  78 + </div>
  79 + <div>
  80 + <span>菜单名称：</span>
  81 + <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength" clearable />
  82 + </div>
  83 + <div v-if="showConfigureContent">
  84 + <div class="menu_content">
  85 + <span>菜单标识：</span>
  86 + <el-input class="input_width" v-model="tempObj.menuKey" placeholder="请输入菜单 KEY" clearable />
78 </div> 87 </div>
79 - <div>  
80 - <span>菜单名称：</span>  
81 - <el-input class="input_width" v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxLength" clearable /> 88 + <div class="menu_content">
  89 + <span>菜单内容：</span>
  90 + <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
  91 + <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />
  92 + </el-select>
82 </div> 93 </div>
83 - <div v-if="showConfigureContent">  
84 - <div class="menu_content">  
85 - <span>菜单标识：</span>  
86 - <el-input class="input_width" v-model="tempObj.menuKey" placeholder="请输入菜单 KEY" clearable /> 94 + <div class="configur_content" v-if="tempObj.type === 'view'">
  95 + <span>跳转链接：</span>
  96 + <el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable />
  97 + </div>
  98 + <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
  99 + <div class="applet">
  100 + <span>小程序的 appid ：</span>
  101 + <el-input class="input_width" v-model="tempObj.miniProgramAppId" placeholder="请输入小程序的appid" clearable />
87 </div> 102 </div>
88 - <div class="menu_content">  
89 - <span>菜单内容：</span>  
90 - <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">  
91 - <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value" />  
92 - </el-select> 103 + <div class="applet">
  104 + <span>小程序的页面路径：</span>
  105 + <el-input class="input_width" v-model="tempObj.miniProgramPagePath"
  106 + placeholder="请输入小程序的页面路径，如：pages/index" clearable />
93 </div> 107 </div>
94 - <div class="configur_content" v-if="tempObj.type === 'view'">  
95 - <span>跳转链接：</span>  
96 - <el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable /> 108 + <div class="applet">
  109 + <span>小程序的备用网页：</span>
  110 + <el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable />
97 </div> 111 </div>
98 - <div class="configur_content" v-if="tempObj.type === 'miniprogram'">  
99 - <div class="applet">  
100 - <span>小程序的 appid ：</span>  
101 - <el-input class="input_width" v-model="tempObj.miniProgramAppId" placeholder="请输入小程序的appid" clearable />  
102 - </div>  
103 - <div class="applet">  
104 - <span>小程序的页面路径：</span>  
105 - <el-input class="input_width" v-model="tempObj.miniProgramPagePath"  
106 - placeholder="请输入小程序的页面路径，如：pages/index" clearable />  
107 - </div>  
108 - <div class="applet">  
109 - <span>小程序的备用网页：</span>  
110 - <el-input class="input_width" v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable /> 112 + <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
  113 + </div>
  114 + <div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
  115 + <el-row>
  116 + <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">
  117 + <WxNews :objData="tempObj.content.articles"></WxNews>
  118 + <el-row class="ope-row">
  119 + <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj" />
  120 + </el-row>
111 </div> 121 </div>
112 - <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>  
113 - </div>  
114 - <div class="configur_content" v-if="tempObj.type === 'article_view_limited'"> 122 + <div v-if="!tempObj.content || !tempObj.content.articles">
115 <el-row> 123 <el-row>
116 - <div class="select-item" v-if="tempObj && tempObj.content && tempObj.content.articles">  
117 - <WxNews :objData="tempObj.content.articles"></WxNews>  
118 - <el-row class="ope-row">  
119 - <el-button type="danger" icon="el-icon-delete" circle @click="deleteTempObj"></el-button>  
120 - </el-row>  
121 - </div>  
122 - <div v-if="!tempObj.content || !tempObj.content.articles">  
123 - <el-row>  
124 - <el-col :span="24" style="text-align: center">  
125 - <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>  
126 - </el-col>  
127 - </el-row>  
128 - </div>  
129 - <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">  
130 - <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>  
131 - </el-dialog> 124 + <el-col :span="24" style="text-align: center">
  125 + <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
  126 + </el-col>
132 </el-row> 127 </el-row>
133 - </div>  
134 - <div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">  
135 - <wx-reply-select :objData="tempObj.reply" v-if="hackResetWxReplySelect" />  
136 - </div>  
137 - </div> 128 + </div>
  129 + <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%">
  130 + <WxMaterialSelect :objData="{repType:'news'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
  131 + </el-dialog>
  132 + </el-row>
  133 + </div>
  134 + <div class="configur_content" v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'">
  135 + <wx-reply-select :objData="tempObj.reply" v-if="hackResetWxReplySelect" />
  136 + </div>
  137 + </div>
138 </div> 138 </div>
139 </div> 139 </div>
140 <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了--> 140 <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
@@ -183,12 +183,10 @@ export default { @@ -183,12 +183,10 @@ export default {
183 nameMaxLength: 0, // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符； 183 nameMaxLength: 0, // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
184 showConfigureContent: true, // 是否展示配置内容；如果有子菜单，就不显示配置内容 184 showConfigureContent: true, // 是否展示配置内容；如果有子菜单，就不显示配置内容
185 hackResetWxReplySelect: false, // 重置 WxReplySelect 组件 185 hackResetWxReplySelect: false, // 重置 WxReplySelect 组件
186 -  
187 tempObj: {}, // 右边临时变量，作为中间值牵引关系 186 tempObj: {}, // 右边临时变量，作为中间值牵引关系
188 tempSelfObj: { // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数 187 tempSelfObj: { // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
189 }, 188 },
190 - visible2: false, //素材内容 "选择素材"按钮弹框显示隐藏  
191 - tableData:[], //素材内容弹框数据, 189 + dialogNewsVisible: false, // 跳转图文时的素材选择弹窗
192 menuOptions: [{ 190 menuOptions: [{
193 value: 'view', 191 value: 'view',
194 label: '跳转网页' 192 label: '跳转网页'
@@ -220,7 +218,6 @@ export default { @@ -220,7 +218,6 @@ export default {
220 value: 'location_select', 218 value: 'location_select',
221 label: '选择地理位置' 219 label: '选择地理位置'
222 }], 220 }],
223 - dialogNewsVisible: false,  
224 221
225 // 公众号账号列表 222 // 公众号账号列表
226 accounts: [], 223 accounts: [],
@@ -357,13 +354,13 @@ export default { @@ -357,13 +354,13 @@ export default {
357 if (!item.children || item.children.length <= 0) { 354 if (!item.children || item.children.length <= 0) {
358 this.$set( item, 'children',[]) 355 this.$set( item, 'children',[])
359 this.$delete( item, 'type') 356 this.$delete( item, 'type')
  357 + this.$delete( item, 'menuKey')
360 this.$delete( item, 'miniProgramAppId') 358 this.$delete( item, 'miniProgramAppId')
361 this.$delete( item, 'miniProgramPagePath') 359 this.$delete( item, 'miniProgramPagePath')
362 this.$delete( item, 'url') 360 this.$delete( item, 'url')
363 this.$delete( item, 'reply') 361 this.$delete( item, 'reply')
364 // TODO 芋艿：需要搞的属性弄下 362 // TODO 芋艿：需要搞的属性弄下
365 363
366 - this.$delete( item, 'key')  
367 this.$delete( item, 'article_id') 364 this.$delete( item, 'article_id')
368 this.$delete( item, 'textContent') 365 this.$delete( item, 'textContent')
369 this.showConfigureContent = false 366 this.showConfigureContent = false
@@ -470,31 +467,29 @@ export default { @@ -470,31 +467,29 @@ export default {
470 } 467 }
471 return result; 468 return result;
472 }, 469 },
473 -  
474 - // TODO 芋艿：未归类  
475 -  
476 - deleteTempObj(){ 470 + // ======================== 菜单编辑（素材选择） ========================
  471 + openMaterial() {
  472 + this.dialogNewsVisible = true
  473 + },
  474 + selectMaterial(item){
  475 + if(item.content.articles.length>1){
  476 + this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
  477 + confirmButtonText: '确定'
  478 + })
  479 + }
  480 + this.dialogNewsVisible = false
  481 + this.tempObj.article_id = item.articleId
  482 + this.tempObj.mediaName = item.name
  483 + this.tempObj.url = item.url
  484 + item.mediaType = this.tempObj.mediaType
  485 + item.content.articles = item.content.articles.slice(0,1)
  486 + this.tempObj.content = item.content
  487 + },
  488 + deleteTempObj() {
477 this.$delete(this.tempObj,'repName') 489 this.$delete(this.tempObj,'repName')
478 this.$delete(this.tempObj,'repUrl') 490 this.$delete(this.tempObj,'repUrl')
479 this.$delete(this.tempObj,'content') 491 this.$delete(this.tempObj,'content')
480 }, 492 },
481 - openMaterial(){  
482 - this.dialogNewsVisible = true  
483 - },  
484 - selectMaterial(item){  
485 - if(item.content.articles.length>1){  
486 - this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {  
487 - confirmButtonText: '确定'  
488 - })  
489 - }  
490 - this.dialogNewsVisible = false  
491 - this.tempObj.article_id = item.articleId  
492 - this.tempObj.mediaName = item.name  
493 - this.tempObj.url = item.url  
494 - item.mediaType = this.tempObj.mediaType  
495 - item.content.articles = item.content.articles.slice(0,1)  
496 - this.tempObj.content = item.content  
497 - },  
498 }, 493 },
499 } 494 }
500 </script> 495 </script>