BJ_ZTEITS-Developers / parking-cloud-yudao

Commit f8eed5dd3ffdda1a42e615a6f08dddeaeb784069

Authored by YunaiV
1 parent b0386429

mp：初始化回复组件

Inline Side-by-side
Showing 2 changed files with 462 additions and 7 deletions
yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
  View file @f8eed5d
@@ -89,17 +89,16 @@ @@ -89,17 +89,16 @@
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 -<!-- <div class="msg-send" v-loading="sendLoading">-->  
93 -<!-- <WxReplySelect :objData="objData"></WxReplySelect>-->  
94 -<!-- <el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>-->  
95 -<!-- </div>--> 92 + <div class="msg-send" v-loading="sendLoading">
  93 + <WxReplySelect :objData="objData"></WxReplySelect>
  94 + <el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>
  95 + </div>
96 </div> 96 </div>
97 </template> 97 </template>
98 98
99 <script> 99 <script>
100 import { getMessagePage } from '@/api/mp/message' 100 import { getMessagePage } from '@/api/mp/message'
101 - // import WxReplySelect from '@/components/wx-reply/main.vue'  
102 - // import WxNews from '@/components/wx-news/main.vue' 101 + import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
103 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'; 102 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
104 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'; 103 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
105 import WxNews from '@/views/mp/components/wx-news/main.vue'; 104 import WxNews from '@/views/mp/components/wx-news/main.vue';
@@ -108,7 +107,7 @@ @@ -108,7 +107,7 @@
108 export default { 107 export default {
109 name: "wxMsg", 108 name: "wxMsg",
110 components: { 109 components: {
111 - // WxReplySelect, 110 + WxReplySelect,
112 WxVideoPlayer, 111 WxVideoPlayer,
113 WxVoicePlayer, 112 WxVoicePlayer,
114 WxNews, 113 WxNews,
yudao-ui-admin/src/views/mp/components/wx-reply/main.vue 0 → 100644
  View file @f8eed5d
  1 +<!--
  2 + - Copyright (C) 2018-2019
  3 + - All rights reserved, Designed By www.joolun.com
  4 +-->
  5 +<template>
  6 + <el-tabs type="border-card" v-model="objData.repType" @tab-click="handleClick">
  7 + <el-tab-pane name="text">
  8 + <span slot="label"><i class="el-icon-document"></i> 文本</span>
  9 + <el-input
  10 + type="textarea"
  11 + :rows="5"
  12 + placeholder="请输入内容"
  13 + v-model="objData.repContent">
  14 + </el-input>
  15 + </el-tab-pane>
  16 + <el-tab-pane name="image">
  17 + <span slot="label"><i class="el-icon-picture"></i> 图片</span>
  18 + <el-row>
  19 + <div class="select-item" v-if="objData.repUrl">
  20 + <img class="material-img" :src="objData.repUrl">
  21 + <p class="item-name" v-if="objData.repName">{{objData.repName}}</p>
  22 + <el-row class="ope-row">
  23 + <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj"></el-button>
  24 + </el-row>
  25 + </div>
  26 + <div v-if="!objData.repUrl">
  27 + <el-row style="text-align: center">
  28 + <el-col :span="12" class="col-select">
  29 + <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
  30 + </el-col>
  31 + <el-col :span="12" class="col-add">
  32 + <el-upload
  33 + :action="actionUrl"
  34 + :headers="headers"
  35 + multiple
  36 + :limit="1"
  37 + :on-success="handleUploadSuccess"
  38 + :file-list="fileList"
  39 + :before-upload="beforeImageUpload"
  40 + :data="uploadData">
  41 + <el-button type="primary">上传图片</el-button>
  42 + <div slot="tip" class="el-upload__tip">
  43 + 支持bmp/png/jpeg/jpg/gif格式，大小不超过2M
  44 + </div>
  45 + </el-upload>
  46 + </el-col>
  47 + </el-row>
  48 + </div>
  49 + <el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="90%" append-to-body>
  50 + <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
  51 + </el-dialog>
  52 + </el-row>
  53 + </el-tab-pane>
  54 + <el-tab-pane name="voice">
  55 + <span slot="label"><i class="el-icon-phone"></i> 语音</span>
  56 + <el-row>
  57 + <div class="select-item2" v-if="objData.repName">
  58 + <p class="item-name">{{objData.repName}}</p>
  59 + <div class="item-infos">
  60 + <WxVoicePlayer :objData="Object.assign(tempPlayerObj,{repMediaId: objData.media_id, repName: objData.repName})"></WxVoicePlayer>
  61 + </div>
  62 + <el-row class="ope-row">
  63 + <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj"></el-button>
  64 + </el-row>
  65 + </div>
  66 + <div v-if="!objData.repName">
  67 + <el-row style="text-align: center">
  68 + <el-col :span="12" class="col-select">
  69 + <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
  70 + </el-col>
  71 + <el-col :span="12" class="col-add">
  72 + <el-upload
  73 + :action="actionUrl"
  74 + :headers="headers"
  75 + multiple
  76 + :limit="1"
  77 + :on-success="handleUploadSuccess"
  78 + :file-list="fileList"
  79 + :before-upload="beforeVoiceUpload"
  80 + :data="uploadData">
  81 + <el-button type="primary">点击上传</el-button>
  82 + <div slot="tip" class="el-upload__tip">
  83 + 格式支持mp3/wma/wav/amr，文件大小不超过2M，播放长度不超过60s
  84 + </div>
  85 + </el-upload>
  86 + </el-col>
  87 + </el-row>
  88 + </div>
  89 + <el-dialog title="选择语音" :visible.sync="dialogVoiceVisible" width="90%" append-to-body>
  90 + <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
  91 + </el-dialog>
  92 + </el-row>
  93 + </el-tab-pane>
  94 + <el-tab-pane name="video">
  95 + <span slot="label"><i class="el-icon-share"></i> 视频</span>
  96 + <el-row>
  97 + <el-input v-model="objData.repName" placeholder="请输入标题"></el-input>
  98 + <div style="margin: 20px 0;"></div>
  99 + <el-input v-model="objData.repDesc" placeholder="请输入描述"></el-input>
  100 + <div style="margin: 20px 0;"></div>
  101 + <div style="text-align: center;">
  102 + <a target="_blank" v-if="objData.repUrl" :href="objData.repUrl"><i class="icon-shipinbofang">&nbsp;播放视频</i></a>
  103 + </div>
  104 + <div style="margin: 20px 0;"></div>
  105 + <div style="text-align: center">
  106 + <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
  107 +<!-- <el-button type="primary" v-if="permissions.wxmp_wxmaterial_add">新建视频<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
  108 + </div>
  109 + <el-dialog title="选择视频" :visible.sync="dialogVideoVisible" width="90%" append-to-body>
  110 + <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
  111 + </el-dialog>
  112 + </el-row>
  113 + </el-tab-pane>
  114 + <el-tab-pane name="news">
  115 + <span slot="label"><i class="el-icon-news"></i> 图文</span>
  116 + <el-row>
  117 + <div class="select-item" v-if="objData.content">
  118 + <WxNews :objData="objData.content.articles"></WxNews>
  119 + <el-row class="ope-row">
  120 + <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj"></el-button>
  121 + </el-row>
  122 + </div>
  123 + <div v-if="!objData.content">
  124 + <el-row style="text-align: center">
  125 + <el-col :span="24" class="col-select2">
  126 + <el-button type="success" @click="openMaterial">{{newsType == '1' ? '选择已发布图文' : '选择草稿箱图文'}}<i class="el-icon-circle-check el-icon--right"></i></el-button>
  127 + </el-col>
  128 + </el-row>
  129 + </div>
  130 + <el-dialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%" append-to-body>
  131 + <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" :newsType="newsType"></WxMaterialSelect>
  132 + </el-dialog>
  133 + </el-row>
  134 + </el-tab-pane>
  135 + <el-tab-pane name="music">
  136 + <span slot="label"><i class="el-icon-service"></i> 音乐</span>
  137 + <el-row>
  138 + <el-col :span="6">
  139 + <div class="thumb-div">
  140 + <img style="width: 100px" v-if="objData.repThumbUrl" :src="objData.repThumbUrl">
  141 + <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  142 + <div class="thumb-but">
  143 + <el-upload
  144 + :action="actionUrl"
  145 + :headers="headers"
  146 + multiple
  147 + :limit="1"
  148 + :on-success="handleUploadSuccess"
  149 + :file-list="fileList"
  150 + :before-upload="beforeThumbImageUpload"
  151 + :data="uploadData">
  152 + <el-button slot="trigger" size="mini" type="text">本地上传</el-button>
  153 + <el-button size="mini" type="text" @click="openMaterial" style="margin-left: 5px">素材库选择</el-button>
  154 + </el-upload>
  155 + </div>
  156 + </div>
  157 + <el-dialog title="选择图片" :visible.sync="dialogThumbVisible" width="80%" append-to-body>
  158 + <WxMaterialSelect :objData="{repType:'image'}" @selectMaterial="selectMaterial"></WxMaterialSelect>
  159 + </el-dialog>
  160 + </el-col>
  161 + <el-col :span="18">
  162 + <el-input v-model="objData.repName" placeholder="请输入标题"></el-input>
  163 + <div style="margin: 20px 0;"></div>
  164 + <el-input v-model="objData.repDesc" placeholder="请输入描述"></el-input>
  165 + </el-col>
  166 + </el-row>
  167 + <div style="margin: 20px 0;"></div>
  168 + <el-input v-model="objData.repUrl" placeholder="请输入音乐链接"></el-input>
  169 + <div style="margin: 20px 0;"></div>
  170 + <el-input v-model="objData.repHqUrl" placeholder="请输入高质量音乐链接"></el-input>
  171 + </el-tab-pane>
  172 + </el-tabs>
  173 +</template>
  174 +
  175 +<script>
  176 + // import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'
  177 + import WxNews from '@/views/mp/components/wx-news/main.vue'
  178 + // import WxMaterialSelect from '@/components/wx-material-select/main.vue'
  179 + import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
  180 + import { getToken } from '@/utils/auth'
  181 +
  182 + export default {
  183 + name: "wxReplySelect",
  184 + components: {
  185 + WxNews,
  186 + // WxMaterialSelect,
  187 + WxVoicePlayer
  188 + },
  189 + props: {
  190 + objData:{
  191 + type:Object
  192 + },
  193 + //图文类型：1、已发布图文；2、草稿箱图文
  194 + newsType:{
  195 + type: String,
  196 + default: "1"
  197 + },
  198 + },
  199 + data() {
  200 + return {
  201 + tempPlayerObj: {
  202 + type: '2'
  203 + },
  204 + tableData: [],
  205 + page: {
  206 + total: 0, // 总页数
  207 + currentPage: 1, // 当前页数
  208 + pageSize: 20, // 每页显示多少条
  209 + ascs:[],//升序字段
  210 + descs:[]//降序字段
  211 + },
  212 + tableLoading: false,
  213 + dialogNewsVisible:false,
  214 + dialogImageVisible:false,
  215 + dialogVoiceVisible:false,
  216 + dialogVideoVisible:false,
  217 + dialogThumbVisible:false,
  218 + tempObj: new Map().set(this.objData.repType,Object.assign({},this.objData)),
  219 + fileList:[],
  220 + uploadData:{
  221 + "mediaType":this.objData.repType,
  222 + "title":'',
  223 + "introduction":''
  224 + },
  225 + actionUrl: process.env.VUE_APP_BASE_API +'/wxmaterial/materialFileUpload',
  226 + headers: {
  227 + Authorization: 'Bearer ' + getToken()
  228 + }
  229 + }
  230 + },
  231 + computed: {
  232 +
  233 + },
  234 + methods:{
  235 + beforeThumbImageUpload(file){
  236 + const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp' || file.type === 'image/jpg';
  237 + const isLt = file.size / 1024 / 1024 < 2;
  238 + if (!isType) {
  239 + this.$message.error('上传图片格式不对!');
  240 + }
  241 + if (!isLt) {
  242 + this.$message.error('上传图片大小不能超过2M!');
  243 + }
  244 + return isType && isLt;
  245 + },
  246 + deleteObj(){
  247 + this.$delete(this.objData,'repName')
  248 + this.$delete(this.objData,'repUrl')
  249 + this.$delete(this.objData,'content')
  250 + },
  251 + beforeVoiceUpload(file){
  252 + this.tableLoading = true
  253 + const isType = file.type === 'audio/mp3' || file.type === 'audio/wma' || file.type === 'audio/wav' || file.type === 'audio/amr';
  254 + const isLt = file.size / 1024 / 1024 < 2;
  255 + if (!isType) {
  256 + this.$message.error('上传语音格式不对!');
  257 + }
  258 + if (!isLt) {
  259 + this.$message.error('上传语音大小不能超过2M!');
  260 + }
  261 + return isType && isLt;
  262 + },
  263 + beforeImageUpload(file){
  264 + const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp' || file.type === 'image/jpg';
  265 + const isLt = file.size / 1024 / 1024 < 2;
  266 + if (!isType) {
  267 + this.$message.error('上传图片格式不对!');
  268 + }
  269 + if (!isLt) {
  270 + this.$message.error('上传图片大小不能超过2M!');
  271 + }
  272 + return isType && isLt;
  273 + },
  274 + handleUploadSuccess(response, file, fileList){
  275 + if(response.code == 200){
  276 + this.fileList = []
  277 + this.uploadData.title = ''
  278 + this.uploadData.introduction = ''
  279 + let item = response.data
  280 + this.selectMaterial(item)
  281 + }else{
  282 + this.$message.error('上传出错：' + response.msg)
  283 + }
  284 + },
  285 + handleClick(tab, event){
  286 + this.uploadData.mediaType = this.objData.repType
  287 + let tempObjItem = this.tempObj.get(this.objData.repType)
  288 + if(tempObjItem){
  289 + this.objData.repName = tempObjItem.repName ? tempObjItem.repName : null
  290 + this.objData.repMediaId = tempObjItem.repMediaId ? tempObjItem.repMediaId : null
  291 + this.objData.media_id = tempObjItem.media_id ? tempObjItem.media_id : null
  292 + this.objData.repUrl = tempObjItem.repUrl ? tempObjItem.repUrl : null
  293 + this.objData.content = tempObjItem.content ? tempObjItem.content : null
  294 + this.objData.repDesc = tempObjItem.repDesc ? tempObjItem.repDesc : null
  295 + }else{
  296 + this.$delete(this.objData,'repName')
  297 + this.$delete(this.objData,'repMediaId')
  298 + this.$delete(this.objData,'media_id')
  299 + this.$delete(this.objData,'repUrl')
  300 + this.$delete(this.objData,'content')
  301 + this.$delete(this.objData,'repDesc')
  302 + }
  303 + },
  304 + selectMaterial(item){
  305 + let tempObjItem = {}
  306 + tempObjItem.repType = this.objData.repType
  307 + tempObjItem.repMediaId = item.mediaId
  308 + tempObjItem.media_id = item.mediaId
  309 + tempObjItem.content = item.content
  310 +
  311 + this.dialogNewsVisible = false
  312 + this.dialogImageVisible = false
  313 + this.dialogVoiceVisible = false
  314 + this.dialogVideoVisible = false
  315 + this.objData.repMediaId = item.mediaId
  316 + this.objData.media_id = item.mediaId
  317 + this.objData.content = item.content
  318 + if(this.objData.repType == 'music'){
  319 + tempObjItem.repThumbMediaId = item.mediaId
  320 + tempObjItem.repThumbUrl = item.url
  321 + this.objData.repThumbMediaId = item.mediaId
  322 + this.objData.repThumbUrl = item.url
  323 + this.dialogThumbVisible = false
  324 + }else{
  325 + tempObjItem.repName = item.name
  326 + tempObjItem.repUrl = item.url
  327 + this.objData.repName = item.name
  328 + this.objData.repUrl = item.url
  329 + }
  330 + if(this.objData.repType == 'video'){
  331 + // getMaterialVideo({
  332 + // mediaId:item.mediaId
  333 + // }).then(response => {
  334 + // if(response.code == 200){
  335 + // let data = response.data
  336 + // this.$set(this.objData,'repName',data.title)
  337 + // this.$set(this.objData,'repDesc',data.description)
  338 + // this.$set(this.objData,'repUrl',data.downUrl)
  339 + // tempObjItem.repDesc = data.description
  340 + // tempObjItem.repUrl = data.downUrl
  341 + // }
  342 + // })
  343 + }
  344 + this.tempObj.set(this.objData.repType,tempObjItem)
  345 + },
  346 + openMaterial(){
  347 + if(this.objData.repType == 'news'){
  348 + this.dialogNewsVisible = true
  349 + }else if(this.objData.repType == 'image'){
  350 + this.dialogImageVisible = true
  351 + }else if(this.objData.repType == 'voice'){
  352 + this.dialogVoiceVisible = true
  353 + }else if(this.objData.repType == 'video'){
  354 + this.dialogVideoVisible = true
  355 + }else if(this.objData.repType == 'music'){
  356 + this.dialogThumbVisible = true
  357 + }
  358 + },
  359 + getPage(page, params) {
  360 + this.tableLoading = true
  361 + // getPage(Object.assign({
  362 + // current: page.currentPage,
  363 + // size: page.pageSize,
  364 + // type:this.objData.repType
  365 + // }, params)).then(response => {
  366 + // this.tableData = response.data.items
  367 + // this.page.total = response.data.totalCount
  368 + // this.page.currentPage = page.currentPage
  369 + // this.page.pageSize = page.pageSize
  370 + // this.tableLoading = false
  371 + // })
  372 + },
  373 + sizeChange(val) {
  374 + this.page.currentPage = 1
  375 + this.page.pageSize = val
  376 + this.getPage(this.page)
  377 + }
  378 + }
  379 + };
  380 +</script>
  381 +
  382 +<style lang="scss" scoped>
  383 + .public-account-management{
  384 + .el-input{
  385 + width: 70%;
  386 + margin-right: 2%;
  387 + }
  388 + }
  389 + .pagination{
  390 + text-align: right;
  391 + margin-right: 25px;
  392 + }
  393 + .select-item{
  394 + width: 280px;
  395 + padding: 10px;
  396 + margin: 0 auto 10px auto;
  397 + border: 1px solid #eaeaea;
  398 + }
  399 + .select-item2{
  400 + padding: 10px;
  401 + margin: 0 auto 10px auto;
  402 + border: 1px solid #eaeaea;
  403 + }
  404 + .ope-row{
  405 + padding-top: 10px;
  406 + text-align: center;
  407 + }
  408 + .item-name{
  409 + font-size: 12px;
  410 + overflow: hidden;
  411 + text-overflow:ellipsis;
  412 + white-space: nowrap;
  413 + text-align: center;
  414 + }
  415 + .el-form-item__content{
  416 + line-height:unset!important;
  417 + }
  418 + .col-select{
  419 + border: 1px solid rgb(234, 234, 234);
  420 + padding: 50px 0px;
  421 + height: 160px;
  422 + width: 49.5%;
  423 + }
  424 + .col-select2{
  425 + border: 1px solid rgb(234, 234, 234);
  426 + padding: 50px 0px;
  427 + height: 160px;
  428 + }
  429 + .col-add{
  430 + border: 1px solid rgb(234, 234, 234);
  431 + padding: 50px 0px;
  432 + height: 160px;
  433 + width: 49.5%;
  434 + float: right
  435 + }
  436 + .avatar-uploader-icon {
  437 + border: 1px solid #d9d9d9;
  438 + font-size: 28px;
  439 + color: #8c939d;
  440 + width: 100px!important;
  441 + height: 100px!important;
  442 + line-height: 100px!important;
  443 + text-align: center;
  444 + }
  445 + .material-img {
  446 + width: 100%;
  447 + }
  448 + .thumb-div{
  449 + display: inline-block;
  450 + text-align: center;
  451 + }
  452 + .item-infos{
  453 + width: 30%;
  454 + margin: auto
  455 + }
  456 +</style>