Skip to content

H
h5-base
Commit baf7a9bc authored by 赵茹林's avatar 赵茹林
Browse files
Options

新增展示微信表情功能

parent 3accd267
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 14 deletions
build/webpack.base.conf.js
View file @ baf7a9bc
......@@ -27,6 +27,7 @@ module.exports = {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@img': resolve('src/assets/img'),
'~': resolve(__dirname, 'src')
}
},
......
src/components/buy/success.vue
View file @ baf7a9bc
......@@ -16,7 +16,7 @@
<p>已为您准备好分享文案，可复制粘贴啦！</p>
</div>
<div class="pannel-main">
<div>{{textContent}}</div>
<div v-html="htmlContent"></div>
</div>
<div class="pannel-footer">
<span @click="changeText">
......@@ -126,6 +126,8 @@ import {
import shareUrl from "../../assets/Bitmap@2x.png";
import icon_change from "../../assets/newLesson/icon_change@2x.png";
import { Popup } from "mint-ui";
import {addEmoji} from "@/util/wechatEmoji";
export default {
name: "success",
components: {
......@@ -157,7 +159,8 @@ export default {
userDesc: {},
subscribe: "2",
textContent: "",
textIndex:1
textIndex:1,
htmlContent: ''
};
},
computed: {
......@@ -185,25 +188,26 @@ export default {
changeText() {
if (this.textIndex == 1) {
this.textContent = `[跳跳]发现一个对孩子启蒙特别有用的平台，原来英语还可以这样学！
[礼物]现在他们的课程在做团购活动
🎉现在他们的课程在做团购活动
[红包]只要${this.groupDetail.current_price/100}元就可以团购价值${this.groupDetail.original_price/100}元${this.groupDetail.course_name}
[爱心]${this.groupDetail.desc.group_number}人即可成团
[机智]快来和我一起拼团上课吧`;
this.textIndex = 2;
} else if (this.textIndex == 2) {
this.textContent = `[强]百万家长都在带宝宝学的唱唱启蒙英语课
[礼物]现在只要${this.groupDetail.current_price/100}元就可以团购价值${this.groupDetail.original_price/100}元${this.groupDetail.course_name}
[跳跳]每天10分钟，让宝宝爱学敢说会唱
🎉现在只要${this.groupDetail.current_price/100}元就可以团购价值${this.groupDetail.original_price/100}元${this.groupDetail.course_name}
🎤每天10分钟，让宝宝爱学敢说会唱
[机智]抓住宝宝的语言黄金期，快来和我一起拼团上课吧`;
this.textIndex = 3;
} else {
this.textContent = `[激动]发现一款超赞的启蒙英语课
[太阳]只要${this.groupDetail.current_price/100}元就可以团购价值${this.groupDetail.original_price/100}元${this.groupDetail.course_name}
👉只要${this.groupDetail.current_price/100}元就可以团购价值${this.groupDetail.original_price/100}元${this.groupDetail.course_name}
[爱心]${this.groupDetail.desc.group_number}人即可成团获得课程
[强]哈佛名师亲授，比动画片更有趣哦
[机智]快来和我一起拼团上课吧`;
this.textIndex = 1;
}
this.htmlContent = addEmoji(this.textContent);
// this.$copyText(this.textContent).then(e => {
// Toast("复制成功");
// });
......@@ -362,6 +366,7 @@ export default {
[爱心]${this.groupDetail.desc.group_number}人即可成团获得课程
[强]哈佛名师亲授，比动画片更有趣哦
[机智]快来和我一起拼团上课吧`;
this.htmlContent = addEmoji(this.textContent);
this.onShare();
});
},
......@@ -695,3 +700,13 @@ export default {
opacity: 0.7;
}
</style>
<style lang="less">
@import "../../util/public";
.pannel-main{
img {
height: 18 * @toVw;
vertical-align: text-bottom;
}
}
</style>
src/components/newLesson/share.vue
View file @ baf7a9bc
......@@ -65,15 +65,14 @@
<img src="../../assets/icon_copy.png" alt />
<p>以下学习心得，可复制粘贴到朋友圈啦！</p>
</div>
<div class="pannel-main">{{textContent}}</div>
<!--<div class="pannel-main">{{textContent}}</div>-->
<div class="pannel-main" v-html="htmlContent"></div>
<div class="pannel-footer">
<span @click="changeText">
<img :src="icon_change" alt=""> 换一换</span>
</div>
</div>
<div @click="copyText" class='transparentBtn'>
复制心得
</div>
<div @click="copyText" class='transparentBtn'>复制心得</div>
</div>
</div>
</div>
......@@ -102,6 +101,8 @@ import {
} from "../../service/api";
import share_code_bg from "../../assets/newLesson/share-code-bg.png";
import share_tips from "../../assets/Bitmap@2x.png";
import {addEmoji} from "@/util/wechatEmoji";
export default {
name: "share",
data() {
......@@ -128,7 +129,8 @@ export default {
lastTime:'',
icon_change:icon_change,
textIndex:1,
textContent:''
textContent:'',
htmlContent: '',
};
},
props: ["contentData"],
......@@ -167,9 +169,10 @@ export default {
this.textContent = `陪宝宝在唱唱启蒙英语学习的第${this.watchDetail.total_day}天，宝宝又学会了一首新童谣《${this.lesson.title}》，每天都有新收获，坚持就是胜利，练就英语小神童[胜利]`
this.textIndex = 3
}else{
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语👉【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`
this.textIndex = 1
}
this.htmlContent = addEmoji(this.textContent);
},
showShare() {
this.shareVisible = true;
......@@ -266,7 +269,8 @@ export default {
});
}
);
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
this.htmlContent = addEmoji(this.textContent);
// console.log(this.contentData)
// debugger
},
......@@ -872,6 +876,10 @@ export default {
.pannel-main{
text-align: left;
margin-top: 18 * @toVw;
img {
height: 18 * @toVw;
vertical-align: text-bottom;
}
}
.pannel-footer{
margin: 0;
......@@ -889,6 +897,13 @@ export default {
}
</style>
<style>
<style lang="less">
@import "../../util/public";
.van-toast{top:35%;}
.pannel-main{
img {
height: 18 * @toVw;
vertical-align: text-bottom;
}
}
</style>
src/util/wechatEmoji.js 0 → 100755
View file @ baf7a9bc
export function addEmoji(string) {
function replaceAll(find, replace, str) {
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
var map = {
"[微笑]": "1.png",
"[撇嘴]": "2.png",
"[色]": "3.png",
"[发呆]": "4.png",
"[得意]": "5.png",
"[流泪]": "6.png",
"[害羞]": "7.png",
"[闭嘴]": "8.png",
"[睡]": "9.png",
"[大哭]": "10.png",
"[尴尬]": "11.png",
"[发怒]": "12.png",
"[调皮]": "13.png",
"[呲牙]": "14.png",
"[惊讶]": "15.png",
"[难过]": "16.png",
"[酷]": "17.png",
"[囧]": "18.png",
"[抓狂]": "19.png",
"[吐]": "20.png",
"[偷笑]": "21.png",
"[愉快]": "22.png",
"[白眼]": "23.png",
"[傲慢]": "24.png",
"[饥饿]": "25.png",
"[困]": "26.png",
"[惊恐]": "27.png",
"[流汗]": "28.png",
"[憨笑]": "29.png",
"[悠闲]": "30.png",
"[奋斗]": "31.png",
"[咒骂]": "32.png",
"[疑问]": "33.png",
"[嘘]": "34.png",
"[晕]": "35.png",
"[衰]": "37.png",
"[骷髅]": "38.png",
"[敲打]": "39.png",
"[再见]": "40.png",
"[擦汗]": "41.png",
"[抠鼻]": "42.png",
"[鼓掌]": "43.png",
"[糗大了]": "44.png",
"[坏笑]": "45.png",
"[左哼哼]": "46.png",
"[右哼哼]": "47.png",
"[哈欠]": "48.png",
"[鄙视]": "49.png",
"[委屈]": "50.png",
"[快哭了]": "51.png",
"[阴险]": "52.png",
"[亲亲]": "53.png",
"[吓]": "54.png",
"[可怜]": "55.png",
"[菜刀]": "56.png",
"[西瓜]": "57.png",
"[啤酒]": "58.png",
"[篮球]": "59.png",
"[乒乓]": "60.png",
"[咖啡]": "61.png",
"[饭]": "62.png",
"[猪头]": "63.png",
"[玫瑰]": "64.png",
"[凋谢]": "65.png",
"[嘴唇]": "66.png",
"[爱心]": "67.png",
"[心碎]": "68.png",
"[蛋糕]": "69.png",
"[闪电]": "70.png",
"[炸弹]": "71.png",
"[刀]": "72.png",
"[足球]": "73.png",
"[瓢虫]": "74.png",
"[便便]": "75.png",
"[月亮]": "76.png",
"[太阳]": "77.png",
"[礼物]": "78.png",
"[拥抱]": "79.png",
"[强]": "80.png",
"[弱]": "81.png",
"[握手]": "82.png",
"[胜利]": "83.png",
"[抱拳]": "84.png",
"[勾引]": "85.png",
"[拳头]": "86.png",
"[差劲]": "87.png",
"[爱你]": "88.png",
"[NO]": "89.png",
"[OK]": "90.png",
"[爱情]": "91.png",
"[飞吻]": "92.png",
"[跳跳]": "93.png",
"[发抖]": "94.png",
"[怄火]": "95.png",
"[转圈]": "96.png",
"[磕头]": "97.png",
"[回头]": "98.png",
"[跳绳]": "99.png",
"[投降]": "100.png",
"[激动]": "101.png",
"[乱舞]": "102.png",
"[献吻]": "103.png",
"[左太极]": "104.png",
"[右太极]": "105.png",
"[奸笑]": "106.png",
"[嘿哈]": "107.png",
"[捂脸]": "108.png",
"[机智]": "109.png",
"[茶]": "110.png",
"[红包]": "111.png",
"[蜡烛]": "113.png",
"[耶]": "114.png"
};
for (let key in map) {
if (string.indexOf(key) != -1) {
string = replaceAll(key, `<img src="/static/images/wechat/${map[key]}">`, string);
}
}
return string
}
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