Commit e754a0bf authored by chenfenglei's avatar chenfenglei

公众号页面样式优化

parent 1e863357
...@@ -140,18 +140,18 @@ ...@@ -140,18 +140,18 @@
v-model="content"> v-model="content">
</el-input> </el-input>
</div> </div>
<div style="float: right"> <div style="float: right;margin-right:15px;">
<el-popover <el-popover
placement="bottom-end" placement="bottom-end"
width="400" width="400"
:offset="10" :offset="10"
trigger="manual" trigger="hover"
v-model="showEmotion"> v-model="showEmotion">
<div> <div>
<emotion @emotion="handleEmotion" :height="200" ></emotion> <emotion @emotion="handleEmotion" :height="200"></emotion>
</div> </div>
<el-button @click="showEmotion = !showEmotion" slot="reference" type="text"> <el-button @click="showEmotion = !showEmotion" slot="reference" type="text">
<span class="icon_emotion emotion_switch"></span> <span class="icon_emotion emotion_switch" ></span>
</el-button> </el-button>
</el-popover> </el-popover>
</div> </div>
...@@ -384,14 +384,20 @@ ...@@ -384,14 +384,20 @@
</template> </template>
<script> <script>
import {uploadFileApi,getMsgListApi,sendMsgApi,getUserListApi,getMediaListApi} from "../../service/api"; import {
import page from '../framework/page' uploadFileApi,
import page2 from '../framework/page' getMsgListApi,
import pageImage from '../framework/page' sendMsgApi,
import pageVideo from '../framework/page' getUserListApi,
import emotion from '../framework/Emotion/index' getMediaListApi
import CommonJs from '../../util/common'; } from "../../service/api";
export default { import page from "../framework/page";
import page2 from "../framework/page";
import pageImage from "../framework/page";
import pageVideo from "../framework/page";
import emotion from "../framework/Emotion/index";
import CommonJs from "../../util/common";
export default {
name: "index", name: "index",
components: { components: {
page, page,
...@@ -408,18 +414,18 @@ ...@@ -408,18 +414,18 @@
mediaPage: { mediaPage: {
nowPage: 1, nowPage: 1,
total: 0, total: 0,
limit: 5, limit: 5
}, },
show: false, show: false,
loading: false, loading: false,
activeName: 'text', activeName: "text",
list: [], list: [],
content: '', content: "",
uploadShow: true, uploadShow: true,
imageList: [], imageList: [],
fileList: [], fileList: [],
imageContent: '', imageContent: "",
videoContent: '', videoContent: "",
searchFrom: { searchFrom: {
type: 1, type: 1,
is_test: false is_test: false
...@@ -445,482 +451,627 @@ ...@@ -445,482 +451,627 @@
mediaImagePage: { mediaImagePage: {
nowPage: 1, nowPage: 1,
total: 0, total: 0,
limit: 5, limit: 5
}, },
mediaVideoPage: { mediaVideoPage: {
nowPage: 1, nowPage: 1,
total: 0, total: 0,
limit: 5, limit: 5
}, },
imageContent: null, imageContent: null,
videoContent: null, videoContent: null,
newsContent: null newsContent: null
} };
}, },
filters: { filters: {
typeFilter(val){ typeFilter(val) {
if(!val) return; if (!val) return;
if(val === 'text') return '文本'; if (val === "text") return "文本";
if(val === 'image') return '图片'; if (val === "image") return "图片";
if(val === 'video') return '视频'; if (val === "video") return "视频";
if(val === 'news') return '图文'; if (val === "news") return "图文";
}, },
typeListFilter(val){ typeListFilter(val) {
if (!val) return ''; if (!val) return "";
if(val === 1) return '48时内关注但未购课用户'; if (val === 1) return "48时内关注但未购课用户";
if(val === 2) return '有体验课但没有正式课用户'; if (val === 2) return "有体验课但没有正式课用户";
if(val === 3) return '未试听用户'; if (val === 3) return "未试听用户";
} }
}, },
methods: { methods: {
handleClick(tab) { handleClick(tab) {
this.activeName = tab.name; this.activeName = tab.name;
}, },
handleRemove(){ handleRemove() {
this.uploadShow = true this.uploadShow = true;
this.imageList = [] this.imageList = [];
this.imageContent = ''; this.imageContent = "";
}, },
handleRemoveVideo(){ handleRemoveVideo() {
this.videoContent = ''; this.videoContent = "";
this.fileList = [] this.fileList = [];
}, },
beforeAvatarUpload(){ beforeAvatarUpload() {
this.uploadShow = false this.uploadShow = false;
}, },
handleAvatarSuccess(res) { handleAvatarSuccess(res) {
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] this.imageList = [
{ name: res.data.url, url: process.env.IMAGE_URL_HEAD + res.data.url }
];
}, },
uploadFile(a) { uploadFile(a) {
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); this.$store.dispatch("setProgress", { type: "new", id: a.file.uid });
uploadFileApi({file:a.file,type:'wechat'}).then(res=>{ uploadFileApi({ file: a.file, type: "wechat" })
.then(res => {
this.imageContent = { this.imageContent = {
content: res.media_id, content: res.media_id,
url: res.url url: res.url
} };
this.imageList = [{name:res.media_id,url:res.url}] this.imageList = [{ name: res.media_id, url: res.url }];
this.$message({ this.$message({
type: 'success', type: "success",
message: '上传成功!' message: "上传成功!"
}); });
}).catch(()=>{ })
.catch(() => {
this.$message({ this.$message({
type: 'error', type: "error",
message: '上传失败!' message: "上传失败!"
});
}); });
})
}, },
uploadVideo(a){ uploadVideo(a) {
uploadFileApi({file:a.file,type:'wechat'}).then(res=>{ uploadFileApi({ file: a.file, type: "wechat" })
this.uploadVideoFile(a, res) .then(res => {
}).catch(()=>{ this.uploadVideoFile(a, res);
})
.catch(() => {
this.$message({ this.$message({
type: 'error', type: "error",
message: '上传失败!' message: "上传失败!"
});
}); });
})
}, },
uploadVideoFile(a,data) { uploadVideoFile(a, data) {
this.fileUid = a.file.uid; this.fileUid = a.file.uid;
this.loading = true; this.loading = true;
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); this.$store.dispatch("setProgress", { type: "new", id: a.file.uid });
uploadFileApi({file:a.file,type:'local'}).then(res=>{ uploadFileApi({ file: a.file, type: "local" })
.then(res => {
this.videoContent = { this.videoContent = {
content: data.media_id, content: data.media_id,
url: process.env.IMAGE_URL_HEAD + res.url url: process.env.IMAGE_URL_HEAD + res.url
} };
this.fileList = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}] this.fileList = [
{ name: res.name, url: process.env.IMAGE_URL_HEAD + res.url }
];
this.loading = false; this.loading = false;
this.$message({ this.$message({
type: 'success', type: "success",
message: '上传成功!' message: "上传成功!"
}); });
this.$store.dispatch('setProgress',{type:'delete',id:a.file.uid}); this.$store.dispatch("setProgress", {
this.fileUid=null type: "delete",
}).catch(()=>{ id: a.file.uid
});
this.fileUid = null;
})
.catch(() => {
this.loading = false; this.loading = false;
this.$message({ this.$message({
type: 'error', type: "error",
message: '上传失败!' message: "上传失败!"
});
}); });
})
}, },
send(){ send() {
let json = {} let json = {};
json.type = this.searchFrom.type json.type = this.searchFrom.type;
let msgTips = this.searchFrom.is_test ? '发送筛选用户,' : '不发送筛选用户,'; let msgTips = this.searchFrom.is_test
if(this.searchFrom.type === 1){ ? "发送筛选用户,"
if(this.searchFrom.time && this.searchFrom.time.length > 0){ : "不发送筛选用户,";
console.log('this.searchFrom.time', this.searchFrom.time) if (this.searchFrom.type === 1) {
json.start_at = CommonJs.dateFmt(this.searchFrom.time[0],"yyyy-MM-dd hh:mm:ss"); if (this.searchFrom.time && this.searchFrom.time.length > 0) {
json.end_at = CommonJs.dateFmt(this.searchFrom.time[1],"yyyy-MM-dd hh:mm:ss"); console.log("this.searchFrom.time", this.searchFrom.time);
msgTips += '48时内关注但未购课用户(' + json.start_at + '~' + json.end_at + ','; json.start_at = CommonJs.dateFmt(
this.searchFrom.time[0],
"yyyy-MM-dd hh:mm:ss"
);
json.end_at = CommonJs.dateFmt(
this.searchFrom.time[1],
"yyyy-MM-dd hh:mm:ss"
);
msgTips +=
"48时内关注但未购课用户(" +
json.start_at +
"~" +
json.end_at +
",";
} else { } else {
this.$message({ this.$message({
type: 'error', type: "error",
message: '请选择时间!' message: "请选择时间!"
}); });
return return;
} }
} else if (this.searchFrom.type === 2) { } else if (this.searchFrom.type === 2) {
msgTips += '有体验课但没有正式课用户,' msgTips += "有体验课但没有正式课用户,";
} else if (this.searchFrom.type === 3) { } else if (this.searchFrom.type === 3) {
msgTips += '未试听用户,' msgTips += "未试听用户,";
} }
if(this.searchFrom.user_ids){ if (this.searchFrom.user_ids) {
json.user_ids = this.searchFrom.user_ids json.user_ids = this.searchFrom.user_ids;
msgTips += '用户ID:'+ json.user_ids; msgTips += "用户ID:" + json.user_ids;
}else { } else {
this.$message({ this.$message({
type: 'error', type: "error",
message: '请加入内部人员!' message: "请加入内部人员!"
}); });
return; return;
} }
let _content = {} let _content = {};
_content.type = this.activeName; _content.type = this.activeName;
if (this.activeName === 'text') { if (this.activeName === "text") {
if(!this.content) { if (!this.content) {
this.$message({ this.$message({
type: 'error', type: "error",
message: '请输入文本!' message: "请输入文本!"
}); });
return return;
} else { } else {
_content.content = this.content; _content.content = this.content;
} }
} else if (this.activeName === 'image') { } else if (this.activeName === "image") {
if(!this.imageContent) { if (!this.imageContent) {
this.$message({ this.$message({
type: 'error', type: "error",
message: '请上传图片!' message: "请上传图片!"
}); });
return return;
} else { } else {
_content.content = this.imageContent.content; _content.content = this.imageContent.content;
_content.url = this.imageContent.url; _content.url = this.imageContent.url;
} }
} else if (this.activeName === "video") {
} else if (this.activeName === 'video') { if (!this.videoContent) {
if(!this.videoContent) {
this.$message({ this.$message({
type: 'error', type: "error",
message: '请上传视频!' message: "请上传视频!"
}); });
return return;
} else { } else {
_content.content = this.videoContent.content; _content.content = this.videoContent.content;
_content.url = this.videoContent.url _content.url = this.videoContent.url;
} }
} else if (this.activeName === 'news'){ } else if (this.activeName === "news") {
if (this.newsContent && this.newsContent.media_id) { if (this.newsContent && this.newsContent.media_id) {
_content.content = this.newsContent.media_id _content.content = this.newsContent.media_id;
} else { } else {
this.$message({ this.$message({
type: 'error', type: "error",
message: '请选择图文!' message: "请选择图文!"
}); });
} }
} }
json.content = JSON.stringify(_content) json.content = JSON.stringify(_content);
json.is_test = this.searchFrom.is_test ? 2 : 1 json.is_test = this.searchFrom.is_test ? 2 : 1;
console.log("json", json); console.log("json", json);
this.$confirm(msgTips, '提示', { this.$confirm(msgTips, "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning"
}).then(() => { })
sendMsgApi(json).then((res)=>{ .then(() => {
sendMsgApi(json).then(res => {
this.$message({ this.$message({
message: res, message: res,
type: 'success' type: "success"
}); });
this.show = false; this.show = false;
this.clearData(); this.clearData();
this.getMsgList(); this.getMsgList();
});
}) })
}).catch(() => { .catch(() => {
this.$message({ this.$message({
type: 'info', type: "info",
message: '已取消发送' message: "已取消发送"
}); });
}); });
}, },
clearData(){ clearData() {
this.content = ''; this.content = "";
this.videoContent = null; this.videoContent = null;
this.imageContent = null; this.imageContent = null;
this.newsContent = null; this.newsContent = null;
this.activeName === 'text'; this.activeName === "text";
this.searchFrom = {}; this.searchFrom = {};
this.fileList = []; this.fileList = [];
this.imageList = []; this.imageList = [];
}, },
getMsgList(){ getMsgList() {
let json = { let json = {
limit: this.limit, limit: this.limit,
page: this.nowPage page: this.nowPage
}; };
getMsgListApi(json).then((res)=>{ getMsgListApi(json).then(res => {
this.tableData = res.list; this.tableData = res.list;
this.total = res.total this.total = res.total;
}) });
}, },
onMediaPageChange(val){ onMediaPageChange(val) {
this.mediaPage.nowPage = val this.mediaPage.nowPage = val;
this.getMediaList() this.getMediaList();
}, },
onMediaSizeChange(){ onMediaSizeChange() {
this.mediaPage.nowPage = 1 this.mediaPage.nowPage = 1;
this.mediaPage.limit = val this.mediaPage.limit = val;
this.getMediaList() this.getMediaList();
}, },
onImagePageChange(val){ onImagePageChange(val) {
this.mediaImagePage.nowPage = val this.mediaImagePage.nowPage = val;
this.getMediaList() this.getMediaList();
}, },
onImageSizeChange(val){ onImageSizeChange(val) {
this.mediaImagePage.nowPage = 1 this.mediaImagePage.nowPage = 1;
this.mediaImagePage.limit = val this.mediaImagePage.limit = val;
this.getMediaList() this.getMediaList();
}, },
onVideoPageChange(val){ onVideoPageChange(val) {
this.mediaVideoPage.nowPage = val this.mediaVideoPage.nowPage = val;
this.getMediaList() this.getMediaList();
}, },
onVideoSizeChange(val){ onVideoSizeChange(val) {
this.mediaVideoPage.nowPage = 1 this.mediaVideoPage.nowPage = 1;
this.mediaVideoPage.limit = val this.mediaVideoPage.limit = val;
this.getMediaList() this.getMediaList();
}, },
onPageChange(val){ onPageChange(val) {
this.nowPage = val this.nowPage = val;
this.getMsgList() this.getMsgList();
}, },
onSizeChange(val){ onSizeChange(val) {
this.nowPage = 1 this.nowPage = 1;
this.limit = val this.limit = val;
this.getMsgList() this.getMsgList();
}, },
getMsgResult(id){ getMsgResult(id) {
if(!id) return; if (!id) return;
let json = { let json = {
only_text: 1, only_text: 1,
send_id: id send_id: id
}; };
getMsgListApi(json).then((res)=>{ getMsgListApi(json).then(res => {
this.$message({ this.$message({
message: res, message: res,
type: 'success' type: "success"
}); });
this.getMsgList(); this.getMsgList();
}) });
}, },
getUser(){ getUser() {
let json = { let json = {
page: this.userDialog.nowPage, page: this.userDialog.nowPage,
limit: this.userDialog.limit limit: this.userDialog.limit
}; };
if (this.searchUserFrom.userId) { if (this.searchUserFrom.userId) {
json.user_id = this.searchUserFrom.userId json.user_id = this.searchUserFrom.userId;
} }
if (this.searchUserFrom.nickName) { if (this.searchUserFrom.nickName) {
json.nickname = this.searchUserFrom.nickName json.nickname = this.searchUserFrom.nickName;
} }
if (this.searchUserFrom.mobile) { if (this.searchUserFrom.mobile) {
json.mobile = this.searchUserFrom.mobile json.mobile = this.searchUserFrom.mobile;
} }
getUserListApi(json).then(res=>{ getUserListApi(json).then(res => {
this.userList = res.list; this.userList = res.list;
this.userDialog.total = res.total; this.userDialog.total = res.total;
}) });
}, },
onUserPageChange(val){ onUserPageChange(val) {
this.userDialog.nowPage = val this.userDialog.nowPage = val;
this.getUser() this.getUser();
}, },
onUserSizeChange(val){ onUserSizeChange(val) {
this.userDialog.nowPage = 1 this.userDialog.nowPage = 1;
this.userDialog.limit = val this.userDialog.limit = val;
this.getUser() this.getUser();
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
onSelectUser(){ onSelectUser() {
this.userDialog.show = true; this.userDialog.show = true;
if(this.searchFrom.user_ids) { if (this.searchFrom.user_ids) {
this.multipleSelection = this.searchFrom.user_ids.split(','); this.multipleSelection = this.searchFrom.user_ids.split(",");
} else { } else {
this.multipleSelection = [] this.multipleSelection = [];
} }
this.getUser(); this.getUser();
}, },
onConfirm(){ onConfirm() {
let _list = this.multipleSelection; let _list = this.multipleSelection;
if(_list.length === 0) { if (_list.length === 0) {
this.$message({ this.$message({
type: 'error', type: "error",
message: '请选择用户!' message: "请选择用户!"
}); });
} else { } else {
let _userIds = []; let _userIds = [];
_list.forEach((item)=>{ _list.forEach(item => {
_userIds.push(item.user_id) _userIds.push(item.user_id);
}) });
let _tmp = _userIds let _tmp = _userIds;
if (this.searchFrom.user_ids) { if (this.searchFrom.user_ids) {
_tmp = _userIds.concat(this.stringToInt(this.searchFrom.user_ids.split(','))); _tmp = _userIds.concat(
this.stringToInt(this.searchFrom.user_ids.split(","))
);
} }
let _result = this.dedupe(_tmp); let _result = this.dedupe(_tmp);
this.searchFrom.user_ids = _result.join(','); this.searchFrom.user_ids = _result.join(",");
this.userDialog.show = false; this.userDialog.show = false;
} }
}, },
dedupe(array){ dedupe(array) {
return Array.from(new Set(array)); return Array.from(new Set(array));
}, },
stringToInt(list){ stringToInt(list) {
let _list = list || []; let _list = list || [];
_list = _list.map((val)=>{ _list = _list.map(val => {
return parseInt(val, 10) return parseInt(val, 10);
}) });
return _list; return _list;
}, },
emotion (res) { emotion(res) {
let word = res.replace(/\//gi,'') let word = res.replace(/\//gi, "");
const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'] const list = [
let index = list.indexOf(word) "微笑",
return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">` "撇嘴",
"色",
"发呆",
"得意",
"流泪",
"害羞",
"闭嘴",
"睡",
"大哭",
"尴尬",
"发怒",
"调皮",
"呲牙",
"惊讶",
"难过",
"酷",
"冷汗",
"抓狂",
"吐",
"偷笑",
"可爱",
"白眼",
"傲慢",
"饥饿",
"困",
"惊恐",
"流汗",
"憨笑",
"大兵",
"奋斗",
"咒骂",
"疑问",
"嘘",
"晕",
"折磨",
"衰",
"骷髅",
"敲打",
"再见",
"擦汗",
"抠鼻",
"鼓掌",
"糗大了",
"坏笑",
"左哼哼",
"右哼哼",
"哈欠",
"鄙视",
"委屈",
"快哭了",
"阴险",
"亲亲",
"吓",
"可怜",
"菜刀",
"西瓜",
"啤酒",
"篮球",
"乒乓",
"咖啡",
"饭",
"猪头",
"玫瑰",
"凋谢",
"示爱",
"爱心",
"心碎",
"蛋糕",
"闪电",
"炸弹",
"刀",
"足球",
"瓢虫",
"便便",
"月亮",
"太阳",
"礼物",
"拥抱",
"强",
"弱",
"握手",
"胜利",
"抱拳",
"勾引",
"拳头",
"差劲",
"爱你",
"NO",
"OK",
"爱情",
"飞吻",
"跳跳",
"发抖",
"怄火",
"转圈",
"磕头",
"回头",
"跳绳",
"挥手",
"激动",
"街舞",
"献吻",
"左太极",
"右太极"
];
let index = list.indexOf(word);
return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`;
}, },
handleEmotion (i) { handleEmotion(i) {
this.content += i this.content += i;
}, },
onChooseMedia(val){ onChooseMedia(val) {
console.log('onChooseMedia', val) console.log("onChooseMedia", val);
if (this.type === 'image') { if (this.type === "image") {
this.imageContent = { this.imageContent = {
content: val.media_id, content: val.media_id,
url: val.url url: val.url
} };
this.imageList = [{name:val.media_id,url:val.url}] this.imageList = [{ name: val.media_id, url: val.url }];
this.showImage = false; this.showImage = false;
} else if (this.type === 'video'){ } else if (this.type === "video") {
this.videoContent = { this.videoContent = {
content: val.media_id, content: val.media_id,
url: val.info.down_url url: val.info.down_url
} };
this.fileList = [{name:val.info.title,url:val.info.url}] this.fileList = [{ name: val.info.title, url: val.info.url }];
this.showVideo = false; this.showVideo = false;
} else if (this.type === 'news'){ } else if (this.type === "news") {
this.newsContent = val this.newsContent = val;
this.showMedia = false; this.showMedia = false;
} }
}, },
getMediaList(){ getMediaList() {
let type = this.activeName; let type = this.activeName;
let json = { let json = {
type: type, type: type,
page: this.mediaPage.nowPage, page: this.mediaPage.nowPage,
limit: this.mediaPage.limit limit: this.mediaPage.limit
}; };
if(type === 'image'){ if (type === "image") {
json.page = this.mediaImagePage.nowPage json.page = this.mediaImagePage.nowPage;
json.limit = this.mediaImagePage.limit json.limit = this.mediaImagePage.limit;
this.showImage = true; this.showImage = true;
}else if (type === 'video'){ } else if (type === "video") {
json.page = this.mediaVideoPage.nowPage json.page = this.mediaVideoPage.nowPage;
json.limit = this.mediaVideoPage.limit json.limit = this.mediaVideoPage.limit;
this.showVideo = true; this.showVideo = true;
}else if (type === 'news'){ } else if (type === "news") {
json.page = this.mediaPage.nowPage json.page = this.mediaPage.nowPage;
json.limit = this.mediaPage.limit json.limit = this.mediaPage.limit;
this.showMedia = true; this.showMedia = true;
} }
this.loading = true; this.loading = true;
getMediaListApi(json).then(res=>{ getMediaListApi(json)
.then(res => {
this.loading = false; this.loading = false;
this.type = type; this.type = type;
this.mediaList = res.item; this.mediaList = res.item;
this.mediaPage.total = res.total_count; this.mediaPage.total = res.total_count;
if(type === 'image'){ if (type === "image") {
this.mediaImageList = res.item; this.mediaImageList = res.item;
this.mediaImagePage.total = res.total_count; this.mediaImagePage.total = res.total_count;
}else if (type === 'video'){ } else if (type === "video") {
this.mediaVideoList = res.item; this.mediaVideoList = res.item;
this.mediaVideoPage.total = res.total_count; this.mediaVideoPage.total = res.total_count;
}else if (type === 'news'){ } else if (type === "news") {
this.mediaList = res.item; this.mediaList = res.item;
this.mediaPage.total = res.total_count; this.mediaPage.total = res.total_count;
} }
if (this.total === 0 ) { if (this.total === 0) {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '暂无数据' message: "暂无数据"
}); });
} }
}).catch(() => {
this.loading = false;
}) })
.catch(() => {
this.loading = false;
});
}, },
defaultTime(){ defaultTime() {
let date = new Date(); let date = new Date();
let now_seconds = date.getTime(); let now_seconds = date.getTime();
let start_seconds = now_seconds - 48 * 60 * 60 * 1000; let start_seconds = now_seconds - 48 * 60 * 60 * 1000;
this.searchFrom.time = [new Date (start_seconds),new Date (now_seconds)] this.searchFrom.time = [new Date(start_seconds), new Date(now_seconds)];
} }
}, },
mounted(){ mounted() {
this.getMsgList(); this.getMsgList();
this.defaultTime(); this.defaultTime();
}, },
computed:{ computed: {
progress(){ progress() {
return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100 return this.$store.state.progressList.find(i => {
} return i.id === this.fileUid;
}).num < 100
? this.$store.state.progressList.find(i => {
return i.id === this.fileUid;
}).num
: 100;
} }
} }
};
</script> </script>
<style scoped> <style scoped>
.index { .index {
padding: 20px 0; padding: 20px 0;
} }
.top { .top {
margin-bottom: 30px; margin-bottom: 30px;
margin-left: 20px; margin-left: 20px;
} }
.title { .title {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
color: #353535; color: #353535;
} }
.inner-edit_area { .inner-edit_area {
width: 96%; width: 96%;
margin: 0 auto; margin: 0 auto;
} }
.upload-video { .upload-video {
width: 50%; width: 50%;
margin-left:2%; margin-left: 2%;
} }
.b-title { .b-title {
padding: 20px; padding: 20px;
color: #666; color: #666;
} }
.emotion_switch { .emotion_switch {
float: left; float: left;
height: 28px; height: 28px;
line-height: 999em; line-height: 999em;
overflow: hidden; overflow: hidden;
background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/reply/images/icon_emotion_switch.png) no-repeat 0 0; background: transparent
url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/reply/images/icon_emotion_switch.png)
no-repeat 0 0;
width: 20px; width: 20px;
height: 20px; height: 20px;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
.img { .img {
position: relative; position: relative;
width: 25%; width: 25%;
img { img {
...@@ -932,18 +1083,18 @@ ...@@ -932,18 +1083,18 @@
left: 50%; left: 50%;
display: none; display: none;
} }
} }
.img:hover img{ .img:hover img {
opacity: 0.3; opacity: 0.3;
} }
.img:hover .el-icon-delete{ .img:hover .el-icon-delete {
display: block; display: block;
} }
.tool_bar { .tool_bar {
float: right; float: right;
margin-top: 20px; margin-top: 20px;
} }
.choose_item { .choose_item {
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 25px; margin-bottom: 25px;
color: rgb(136, 136, 136); color: rgb(136, 136, 136);
...@@ -953,71 +1104,71 @@ ...@@ -953,71 +1104,71 @@
text-align: center; text-align: center;
border: 1px dashed #c0ccda; border: 1px dashed #c0ccda;
border-radius: 6px; border-radius: 6px;
} }
.display-b { .display-b {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.my-teacher { .my-teacher {
width: 25%; width: 25%;
height: 80px; height: 80px;
background-color: #eee; background-color: #eee;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.news-media { .news-media {
padding: 10px; padding: 10px;
width: 25%; width: 25%;
} }
.news-media img{ .news-media img {
width: 100%; width: 100%;
} }
.s-news img { .s-news img {
width: 50px; width: 50px;
float: right; float: right;
} }
.title { .title {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
color: #353535; color: #353535;
} }
.digest { .digest {
padding-top: 12px; padding-top: 12px;
color: #9A9A9A; color: #9a9a9a;
font-size: 14px; font-size: 14px;
} }
.single-cover { .single-cover {
/*padding: 20px 15px 15px;*/ /*padding: 20px 15px 15px;*/
} }
.muti-cover { .muti-cover {
position: relative; position: relative;
padding: 20px 15px 0 15px; padding: 20px 15px 0 15px;
} }
.bottom-title { .bottom-title {
color: #FFFFFF; color: #ffffff;
background-color: rgba(0, 0, 0, 0.55); background-color: rgba(0, 0, 0, 0.55);
position: absolute; position: absolute;
left: 15px; left: 15px;
right: 15px; right: 15px;
bottom: 0; bottom: 0;
padding: 8px 12px; padding: 8px 12px;
} }
.next-cover { .next-cover {
padding: 12px 15px; padding: 12px 15px;
position: relative; position: relative;
} }
.next-img { .next-img {
float: right; float: right;
margin-left: 12px; margin-left: 12px;
width: 60px !important; width: 60px !important;
height: 60px !important; height: 60px !important;
} }
.next-title { .next-title {
overflow: hidden; overflow: hidden;
font-weight: 400; font-weight: 400;
word-wrap: break-word; word-wrap: break-word;
...@@ -1025,52 +1176,53 @@ ...@@ -1025,52 +1176,53 @@
-ms-hyphens: auto; -ms-hyphens: auto;
hyphens: auto; hyphens: auto;
color: #353535; color: #353535;
} }
.single-cover:hover .preview,.bottomCover:hover .preview{ .single-cover:hover .preview,
.bottomCover:hover .preview {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff; color: #fff;
} }
.preview { .preview {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.5); background-color: rgba(0, 0, 0, 0.5);
text-decoration: none; text-decoration: none;
} }
.f-bt { .f-bt {
display: flex; display: flex;
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
} }
.ellip { .ellip {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.flex-start { .flex-start {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
</style> </style>
<style> <style>
.el-radio-group { .el-radio-group {
display: flex !important; display: flex !important;
flex-flow: column; flex-flow: column;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.el-radio+.el-radio { .el-radio + .el-radio {
margin-left: 0 !important; margin-left: 0 !important;
} }
.el-radio { .el-radio {
margin-bottom: 6px; margin-bottom: 6px;
} }
</style> </style>
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
placement="bottom-end" placement="bottom-end"
width="400" width="400"
:offset="10" :offset="10"
trigger="manual" trigger="hover"
v-model="showEmotion"> v-model="showEmotion">
<div> <div>
<emotion @emotion="handleEmotion" :height="200" ></emotion> <emotion @emotion="handleEmotion" :height="200" ></emotion>
......
...@@ -293,8 +293,6 @@ ...@@ -293,8 +293,6 @@
return item.role_name == "管理员" return item.role_name == "管理员"
}) })
break; break;
default:
break;
} }
} }
this.adminList = res.list; this.adminList = res.list;
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<template slot-scope="props"> <template slot-scope="props">
<el-form label-position="top" class="demo-table-expand"> <el-form label-position="top" class="demo-table-expand">
<el-form-item label="回复内容"> <el-form-item label="回复内容">
<div v-for="(item, index) in JSON.parse(props.row.desc)"> <div v-for="(item, index) in props.row.desc">
回复{{index+1}}({{item.type | type}}): 回复{{index+1}}({{item.type | type}}):
<span v-if="item.content && item.type==='text'"> <span v-if="item.content && item.type==='text'">
<span v-html="item.content.replace(/\/[\u4E00-\u9FA5]{1,3}/gi, emotion)"></span> <span v-html="item.content.replace(/\/[\u4E00-\u9FA5]{1,3}/gi, emotion)"></span>
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
<el-table-column <el-table-column
label="回复内容"> label="回复内容">
<template slot-scope="scope"> <template slot-scope="scope">
{{ JSON.parse(scope.row.desc).length }} 条回复 {{scope.row.desc.length }} 条回复
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -152,7 +152,7 @@ ...@@ -152,7 +152,7 @@
} else if (value === 'news-item') { } else if (value === 'news-item') {
return '图文链接' return '图文链接'
} else { } else {
return val return value
} }
} }
}, },
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
center center
append-to-body append-to-body
:visible.sync="show" :visible.sync="show"
width="800px"> width="50%">
<div v-loading="loading"> <div v-loading="loading">
<el-form ref="form" :model="form" :rules="rules" > <el-form ref="form" :model="form" :rules="rules" >
<el-row> <el-row>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div v-for="(item, index) in JSON.parse(form.desc)" class="msg-item"> <div v-for="(item, index) in JSON.parse(form.desc)" class="msg-item">
<span class="msg-text" v-if="item.type==='text'">{{item.content}}</span> <span class="msg-text" v-if="item.type==='text'">{{item.content}}</span>
<img v-else-if="item.type==='image' && item.content" :src="item.content"/> <img v-else-if="item.type==='image' && item.content" :src="item.content"/>
<span v-else-if="item.type==='image' && item.variable" class="msg-text">我的老师二维码</span> <span v-else-if="item.type==='image' && item.variable" class="msg-text" >我的老师二维码</span>
<a v-else-if="item.type==='video'" :href="item.content.down_url" target="_blank">{{item.content.title}}</a> <a v-else-if="item.type==='video'" :href="item.content.down_url" target="_blank">{{item.content.title}}</a>
<div v-else-if="item.type==='news' && item.content && item.content.news_item" class="news-media" style="display: inline-block"> <div v-else-if="item.type==='news' && item.content && item.content.news_item" class="news-media" style="display: inline-block">
<el-card :body-style="{ padding: '0px' }"> <el-card :body-style="{ padding: '0px' }">
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<i class="el-icon-delete" @click="onDelText(item, index)"></i> <i class="el-icon-delete" @click="onDelText(item, index)"></i>
</div> </div>
</template> </template>
<div class="msg_sender_wrp"> <div class="msg_sender_wrp" style="width:100%;">
<div> <div>
<i class="el-icon-circle-plus-outline" @click="onAddContent"></i> <i class="el-icon-circle-plus-outline" @click="onAddContent"></i>
</div> </div>
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
placeholder="请输入内容" placeholder="请输入内容"
v-model="content"> v-model="content">
</el-input> </el-input>
<div style="float: right"> <div style="float:left;">
<el-popover <el-popover
placement="bottom-end" placement="bottom-end"
width="400" width="400"
...@@ -114,14 +114,14 @@ ...@@ -114,14 +114,14 @@
trigger="hover" trigger="hover"
v-model="showEmotion"> v-model="showEmotion">
<div> <div>
<emotion @emotion="handleEmotion" :height="200" ></emotion> <emotion @emotion="handleEmotion" :height="200"></emotion>
</div> </div>
<el-button @click="showEmotion = !showEmotion" slot="reference" type="text"> <el-button @click="showEmotion = !showEmotion" slot="reference" type="text">
<span class="icon_emotion emotion_switch"></span> <span class="icon_emotion emotion_switch" ></span>
</el-button> </el-button>
</el-popover> </el-popover>
<el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherName" type="warning" plain>添加老师名字</el-button> <el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherName" type="warning" plain style="margin-top: 10px;">添加老师名字</el-button>
<el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherAlias" type="success" plain>添加老师别名</el-button> <el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherAlias" type="success" plain style="margin-top: 10px;">添加老师别名</el-button>
</div> </div>
</template> </template>
<template v-if="type==='image'"> <template v-if="type==='image'">
...@@ -345,7 +345,7 @@ ...@@ -345,7 +345,7 @@
</template> </template>
<div class="tool_bar"> <div class="tool_bar">
<el-button @click="close">取 消</el-button> <el-button @click="close">取 消</el-button>
<el-button class="weui-desktop-btn weui-desktop-btn_primary" @click="confirm">确定</el-button> <el-button class="weui-desktop-btn weui-desktop-btn_primary el-button--primary" @click="confirm">确定</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -874,9 +874,10 @@ ...@@ -874,9 +874,10 @@
display: inline-block; display: inline-block;
} }
.msg-item { .msg-item {
margin-bottom: 10px; margin: 30px 0;
width: 600px;
img { img {
width: 20%; width: 30%;
} }
} }
.msg-text { .msg-text {
......
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
placement="bottom-end" placement="bottom-end"
width="400" width="400"
:offset="10" :offset="10"
trigger="manual" trigger="hover"
v-model="showEmotion"> v-model="showEmotion">
<div> <div>
<emotion @emotion="handleEmotion" :height="200" ></emotion> <emotion @emotion="handleEmotion" :height="200" ></emotion>
......
...@@ -3324,10 +3324,10 @@ ...@@ -3324,10 +3324,10 @@
float: right; float: right;
} }
.title { .title {
font-size: 16px; /* font-size: 16px; */
font-weight: 400; font-weight: 400;
display: block; display: block;
line-height: 1.2; /* line-height: 1.2; */
color: #353535; color: #353535;
} }
.digest { .digest {
......
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