Skip to content

A
admin-base
Commit 01c6f046 authored by 王's avatar 王
Browse files
Options

关键词回复

parent c78226ec
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 61 deletions
src/components/framework/Emotion/Emotion.vue 0 → 100644
View file @ 01c6f046
<template>
<div class="ly-emotion" >
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ly-emotion',
mounted () {
const name = this.$el.innerHTML
const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
let index = list.indexOf(name)
let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
this.$nextTick(() => {
this.$el.innerHTML = imgHTML
})
},
}
</script>
<style scoped>
.ly-emotion {
display: inline-block
}
.ly-static-emotion {
width: 24px;
height: 24px;
display: inline-block;
}
</style>
src/components/framework/Emotion/index.vue 0 → 100644
View file @ 01c6f046
<template>
<div>
<div class="emotion-box" :style="{height: height + 'px' }" >
<div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
<emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion>
</div>
</div>
</div>
</template>
<script>
import Emotion from './Emotion'
export default {
props: {
height: {
type: Number,
default: 200,
}
},
data () {
return {
list: [
['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过']
['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰',],
['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
['磕头', '回头', '跳绳', '挥手', '激动', '街舞', '左太极', '右太极'],
]
}
},
methods: {
clickHandler (i) {
let emotion = `#${i};`
this.$emit('emotion', emotion)
}
},
components: {
Emotion
}
}
</script>
<style scoped>
.emotion-box {
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: 5px;
/*border: 1px solid #b4b4b4;*/
overflow: hidden;
overflow-y: auto;
}
.emotion-box-line {
display: flex;
}
.emotion-item {
flex: 1;
text-align: center;
cursor: pointer;
}
</style>
src/components/weChat/focusReply.vue
View file @ 01c6f046
......@@ -27,9 +27,12 @@
<div v-if="scope.row.type === 'text'">
{{scope.row.content}}
</div>
<a v-else-if="scope.row.type === 'image'" :href="scope.row.content" target="_blank">
<a v-else-if="scope.row.type === 'image' && scope.row.content" :href="scope.row.content" target="_blank">
<img class="shotcut" :src="scope.row.content">
</a>
<div v-else-if="scope.row.variable">
老师二维码
</div>
</template>
</el-table-column>
<el-table-column
......
src/components/weChat/focusReplyDialog.vue
View file @ 01c6f046
......@@ -5,30 +5,6 @@
:visible.sync="dialogObj.show"
width="800px">
<div class="focus-reply">
<div class="header">
<el-form label-width="120px" inline>
<el-form-item label="老师">
<el-select v-model="teacher_id" placeholder="请选择" clearable>
<el-option
v-for="(data,index) in teacherList"
:key="index"
:label="data.name"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上课时间" prop="start_at">
<el-date-picker
v-model="start_at"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions1"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-form>
</div>
<div class="content">
<div class="inner" v-loading="loading">
<ul class="weui-desktop-msg-sender__tabs">
......@@ -37,9 +13,17 @@
</ul>
<div class="inner-bottom">
<div class="img-action" v-if="type === 'image'">
<img style="max-width: 80%" v-if="imageContent" :src="imageContent.content"/>
<div class="img-create-access" v-if="!showMedia">
<a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
<template v-if="imageContent">
<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">
<a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
</div>
<div class="img-create-access" v-if="!showMedia">
<a href="javascript:;" class="img-create-access__link" @click="addTeacherQrcode">添加老师二维码</a>
</div>
</div>
<div v-if="showMedia && mediaList.length > 0">
<el-table
......@@ -57,7 +41,7 @@
<el-table-column
label="URL">
<template slot-scope="scope">
<a :href="scope.row.url">
<a :href="scope.row.url" target="_blank">
<img style="width: 60px;" :src="scope.row.url"/>
</a>
</template>
......@@ -75,6 +59,23 @@
v-model="content">
</el-input>
</div>
<div style="float: right">
<el-popover
placement="bottom-end"
width="400"
:offset="10"
trigger="manual"
v-model="showEmotion">
<div>
<emotion @emotion="handleEmotion" :height="200" ></emotion>
</div>
<el-button @click="showEmotion = !showEmotion" slot="reference" type="text">
<span class="icon_emotion emotion_switch"></span>
</el-button>
</el-popover>
<el-button @click="addTeacherName" type="warning" plain>添加老师名字</el-button>
<el-button @click="addTeacherAlias" type="success" plain>添加老师别名</el-button>
</div>
</div>
</div>
<div class="tool_bar">
......@@ -93,6 +94,7 @@
<script>
import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi,getTeacherListApi} from "../../service/api";
import page from '../framework/page'
import emotion from '../framework/Emotion/index'
export default {
name: "focusReplyDialog",
props:[
......@@ -102,6 +104,7 @@
return{
show: false,
loading:false,
showEmotion: false,
total:0,
nowPage:1,
limit: 5,
......@@ -119,9 +122,6 @@
mediaList: [],
mediaListMock: [],
showMedia: false,
teacher_id: '',
teacherList: [],
start_at: '',
pickerOptions1: {
disabledDate(time) {
return !(time.getTime() > Date.now());
......@@ -141,19 +141,23 @@
}
},
components:{
page
page,
emotion
},
mounted(){
this.initDialog();
this.getTeacher();
},
filters: {
},
methods:{
getTeacher(){
getTeacherListApi({page: 1, limit: 1000}).then(res=>{
this.teacherList = res.list
})
addTeacherName(){
this.content += '{my_teacher_name}'
},
addTeacherAlias(){
this.content += '{my_teacher_alias}'
},
handleEmotion (i) {
this.content += i
},
initDialog(){
if (this.dialogObj.id) {
......@@ -168,16 +172,22 @@
this.content = ''
} else {
this.type = this.list[this.index].type;
this.teacher_id = this.list[this.index].teacher_id ? this.list[this.index].teacher_id : '';
this.start_at = this.list[this.index].start_at ? this.list[this.index].start_at : '';
if (this.type === 'text') {
this.content = this.list[this.index].content
} else if (this.type === 'image') {
this.imageContent = {
type: 'image',
content: this.list[this.index].content,
media_id: this.list[this.index].media_id
let obj = {
type: 'image'
}
if(this.list[this.index].content) {
obj.content = this.list[this.index].content
}
if(this.list[this.index].media_id) {
obj.media_id = this.list[this.index].media_id
}
if(this.list[this.index].variable) {
obj.variable = this.list[this.index].variable
}
this.imageContent = obj
}
}
......@@ -200,12 +210,6 @@
type : this.type,
content: this.content
};
if (this.teacher_id) {
obj.teacher_id = this.teacher_id
}
if (this.start_at) {
obj.start_at = this.start_at
}
if (this.index > -1) {
_desc[this.index] = obj
} else {
......@@ -219,12 +223,6 @@
});
return
}
if (this.teacher_id) {
this.imageContent.teacher_id = this.teacher_id
}
if (this.start_at) {
this.imageContent.start_at = this.start_at
}
if (this.index > -1) {
_desc[this.index] = this.imageContent
} else {
......@@ -287,6 +285,12 @@
this.addContent(this.type, val.url, val.media_id);
this.showMedia = false;
},
addTeacherQrcode(){
this.imageContent = {
type: 'image',
variable:'my_teacher'
}
},
addContent(type, content, mediaId) {
let obj = {};
if (content) {
......@@ -321,6 +325,7 @@
.content {
}
.inner {
position: relative;
border: 1px solid #E4E8EB;
background-color: #FFFFFF;
}
......@@ -339,9 +344,9 @@
height: 211px;
text-align: center;
}
.img-create-access:first-child {
float: left;
}
/*.img-create-access:first-child {*/
/*float: left;*/
/*}*/
.img-create-access__link {
display: inline-block;
vertical-align: middle;
......@@ -393,7 +398,7 @@
.tool_bar {
padding-top: 0;
padding-bottom: 50px;
margin-top: 40px;
/*margin-top: 40px;*/
margin-left: 20px;
}
.tool_bar > .weui-desktop-btn {
......@@ -435,4 +440,29 @@
.shotcut {
width: 50px;
}
.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;
width: 20px;
height: 20px;
vertical-align: middle;
display: inline-block;
}
.display-b {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.my-teacher{
height: 150px;
line-height: 150px;
width: 50%;
margin-left: 25%;
border: 1px dashed #666;
margin-bottom: 10px;
}
</style>
src/util/common.js
View file @ 01c6f046
......@@ -16,5 +16,12 @@ export default{
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
},
// 将匹配结果替换表情图片
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">`
}
}
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