新增展示微信表情功能

build/webpack.base.conf.js

@@ -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

@@ -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

@@ -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

+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
+
+}