Commit 1f50b2f8 authored by 王's avatar

小程序图片回复

parent a565d029
......@@ -12,8 +12,8 @@ module.exports = {
//本地代理设置
proxyTable: {
'/api': {
target: 'http://local.base-api.sing.com', // 接口的域名
// target: 'https://wechat-test.changchangenglish.com/',
// target: 'http://local.base-api.sing.com', // 接口的域名
target: 'https://wechat-test.changchangenglish.com/',
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
}
},
......
......@@ -131,7 +131,6 @@
this.$refs['form'].validate((valid) => {
if(valid){
if(this.imageList.length >0){
console.log('this.imageList', this.imageList)
this.form.cover = this.imageList[0].name;
}
let json = this.form;
......@@ -150,7 +149,6 @@
case 1:
this.$refs['form'].validate((valid) => {
if(valid){
console.log('this.imageList', this.imageList)
if(this.imageList.length >0){
this.form.cover = this.imageList[0].name;
}
......
......@@ -72,7 +72,7 @@
<el-tabs v-if="showType" v-model="type" type="card">
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文消息" name="news"></el-tab-pane>
<el-tab-pane label="文字" name="text"></el-tab-pane>
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图片" name="image"></el-tab-pane>
<el-tab-pane label="图片" name="image"></el-tab-pane>
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="语音" name="voice"></el-tab-pane>
<el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="视频" name="video"></el-tab-pane>
</el-tabs>
......@@ -103,18 +103,31 @@
</div>
</template>
<template v-if="type==='image'">
<div v-if="imageContent.url" class="img">
<div v-if="imageContent.url && form.key !== 'mini_keywords_reply'" class="img">
<img :src="imageContent.url"/>
<i class="el-icon-delete" @click="imageContent={url:'',media_id:''}"></i>
</div>
<div v-if="imageContent.variable" class="img my-teacher">
<div v-if="imageContent.variable && form.key !== 'mini_keywords_reply'" class="img my-teacher">
<div>老师二维码</div>
<i class="el-icon-delete" @click="imageContent={url:'',media_id:'',variable:''}"></i>
</div>
<div class="display-b">
<div class="display-b" v-if="form.key !== 'mini_keywords_reply'">
<div class="choose_item" style="color: #888;" @click="getMediaList('image')">+从素材库中选择</div>
<div class="choose_item" style="color: #888;" @click="addTeacherQrcode">+添加老师二维码</div>
</div>
<el-upload
v-if="form.key === 'mini_keywords_reply'"
action="/api/public/upload/zone"
:http-request="uploadFile"
:class="{disabled:!uploadShow}"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:file-list="imageList"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove"
:limit="1">
<i class="el-icon-plus"></i>
</el-upload>
<div v-if="showMedia && mediaList.length > 0">
<el-table
:data="mediaList"
......@@ -306,7 +319,7 @@
</template>
<script>
import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi} from "../../service/api";
import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi,uploadFileApi} from "../../service/api";
import page from '../framework/page'
import emotion from '../framework/Emotion/index'
export default {
......@@ -362,7 +375,9 @@
qr:[
{ required: true, message: '请输入二维码', trigger: 'change' }
]
}
},
imageList: [],
uploadShow: true
}
},
components:{
......@@ -438,7 +453,6 @@
if (this.dialogObj.id) {
this.id = this.dialogObj.id;
}
console.log('this.dialogObj', this.dialogObj)
this.form.value = this.dialogObj.value;
this.form.desc = this.dialogObj.desc;
if (this.dialogObj.key) {
......@@ -465,9 +479,11 @@
media_id: '',
variable: ''
};
this.imageList = [];
this.teacher_id = '';
this.start_at = '';
this.showType = true;
this.uploadShow = true;
},
onEditText(item, index) {
this.title = '编辑回复';
......@@ -487,6 +503,10 @@
variable: item.variable
};
}
if(this.type === 'image' && this.form.key === 'mini_keywords_reply') {
this.imageList = [{name:'mini',url:item.content}]
this.uploadShow = false;
}
}
this.showType = true;
},
......@@ -626,6 +646,44 @@
addTeacherAlias(){
this.content += '{my_teacher_alias}'
},
handleAvatarSuccess(res) {
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
},
beforeAvatarUpload(){
this.uploadShow = false
},
uploadFile(a) {
this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'mini'}).then(res=>{
this.uploadFileToQiniu(a, res);
this.loading = false;
}).catch(()=>{
this.loading = false;
})
},
uploadFileToQiniu(a, data) {
this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
this.loading = false;
this.$message({
type: 'success',
message: '上传成功!'
});
this.imageContent = {
url: process.env.IMAGE_URL_HEAD + res.url,
media_id: data.media_id,
name: res.url
}
}).catch(()=>{
this.loading = false;
})
},
handleRemove(){
this.uploadShow = true
}
},
watch:{
dialogObj:{
......@@ -850,3 +908,8 @@
text-decoration: none;
}
</style>
<style>
.disabled .el-upload--picture-card {
display: none !important;
}
</style>
......@@ -10,23 +10,36 @@
<ul class="weui-desktop-msg-sender__tabs">
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news')">图文</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('text')">文字</li>
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li>
<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li>
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('voice')">语音</li>
<li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" :class="type === 'video' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('video')">视频</li>
</ul>
<div class="inner-bottom">
<div class="img-action" v-if="type === 'image'">
<template v-if="imageContent">
<template v-if="imageContent && dialogObj.key !== 'mini_auto_reply' ">
<div class="my-teacher" v-if="imageContent.variable">我的老师二维码</div>
<img style="max-width: 80%;" v-if="imageContent.content" :src="imageContent.content"/>
</template>
<div class="display-b">
<div class="img-create-access" v-if="!showMedia">
<div class="img-create-access" v-if="!showMedia && dialogObj && dialogObj.key !== 'mini_auto_reply'">
<a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
</div>
<div class="img-create-access" v-if="!showMedia">
<div class="img-create-access" v-if="!showMedia && dialogObj && dialogObj.key !== 'mini_auto_reply'">
<a href="javascript:;" class="img-create-access__link" @click="addTeacherQrcode">添加老师二维码</a>
</div>
<el-upload
v-if="dialogObj && dialogObj.key === 'mini_auto_reply'"
action="/api/public/upload/zone"
:http-request="uploadFile"
:class="{disabled:!uploadShow}"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:file-list="imageList"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove"
:limit="1">
<i class="el-icon-plus"></i>
</el-upload>
</div>
<div v-if="showMedia && mediaList.length > 0">
<el-table
......@@ -238,7 +251,7 @@
</template>
<script>
import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi,getTeacherListApi} from "../../service/api";
import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi,getTeacherListApi,uploadFileApi} from "../../service/api";
import page from '../framework/page'
import page2 from '../framework/page'
import page3 from '../framework/page'
......@@ -289,7 +302,9 @@
qr:[
{ required: true, message: '请输入二维码', trigger: 'change' }
]
}
},
imageList: [],
uploadShow: true
}
},
components:{
......@@ -353,7 +368,11 @@
obj.variable = this.list[this.index].variable
}
if (this.type === 'image') {
this.imageContent = obj
this.imageContent = obj;
if(this.dialogObj.key === 'mini_auto_reply') {
this.imageList = [{name:'mini-image',url:obj.content}];
this.uploadShow = false;
}
} else if (this.type ==='news') {
this.newsContent = obj
} else if (this.type === 'voice') {
......@@ -514,7 +533,45 @@
} else{
this.imageContent = obj
}
},
handleAvatarSuccess(res) {
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
},
beforeAvatarUpload(){
this.uploadShow = false
},
uploadFile(a) {
this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
this.fileUid = a.file.uid;
uploadFileApi({file:a.file,type:'mini'}).then(res=>{
this.uploadFileToQiniu(a, res);
this.loading = false;
}).catch(()=>{
this.loading = false;
})
},
uploadFileToQiniu(a, data) {
this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
this.loading = false;
this.$message({
type: 'success',
message: '上传成功!'
});
this.imageContent = {
type: 'image',
content: process.env.IMAGE_URL_HEAD + res.url,
media_id: data.media_id
}
}).catch(()=>{
this.loading = false;
})
},
handleRemove(){
this.uploadShow = true
}
}
}
......@@ -776,4 +833,7 @@
display: block;
clear: both;
}
.disabled .el-upload--picture-card {
display: none !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment