Commit e754a0bf authored by chenfenglei's avatar chenfenglei

公众号页面样式优化

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