ytj

src/components/Emotion/Emotion.vue

@@ -0,0 +1,30 @@
+<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/Emotion/index.vue

@@ -0,0 +1,73 @@
+<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;
+  box-shadow: 0 0 5px 2px #eee;
+  overflow: hidden;
+  overflow-y: auto;
+  background-color: #fff;
+  border-radius: 5px;
+}
+.emotion-box::-webkit-scrollbar {
+  display: none;
+}
+.emotion-box-line {
+  display: flex;
+}
+.emotion-item {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+}
+</style>

src/components/menuForm.vue

@@ -13,14 +13,42 @@
       </RadioGroup>
       <span class="error">{{errors.first('name')}}</span>
     </div>
-    <div v-if="type === '发送消息'">
-      <RadioGroup v-model="active" type="button" size="large">
+    <div v-if="type === '发送消息'" class="type-content">
+      <RadioGroup v-model="active" type="button" size="large" style="padding-bottom:20px">
         <Radio label="文字"></Radio>
         <Radio label="图片"></Radio>
         <Radio label="图文"></Radio>
       </RadioGroup>
       <div v-show="active === '文字'">
-        1
+        <Input type="textarea" v-model="text" :rows="4" placeholder="输入消息文字" />
+        <div style="padding-top:20px;">
+          <Button @click="showExpression = !showExpression">
+            <Icon type="ios-sad-outline" size='20'/>
+          </Button>
+          <Button @click="showLink = !showLink">
+            <Icon type="ios-link-outline" size='20'/>
+          </Button>
+        </div>
+        <div class="expression" v-show="showExpression">
+          <emotion @emotion="handleEmotion" :height="200"></emotion>
+        </div>
+        <div class="link" v-show="showLink">
+          <div class="form-item">
+            <label for="name">链接文字</label>
+            <Input placeholder="链接文字" size="large" v-model="linkText" clearable name="text" style="width: 300px"/>
+          </div>
+          <div class="form-item">
+            <label for="name">链接&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
+            <Input placeholder="链接" v-validate="'url:require_protocol'" size="large" v-model="linkHref" clearable name="link" style="width: 300px"/>
+            <span class="error" v-show="errors.first('link')">请输入正确的url</span>
+          </div>
+          <Button type="primary" @click="checkLink()">
+            确定
+          </Button>
+          <Button @click="showLink = false">
+            取消
+          </Button>
+        </div>
       </div>
       <div v-show="active === '图片'">
         2
@@ -29,11 +57,23 @@
         3
       </div>
     </div>
-    <div v-if="type === '跳转网页'">
-
+    <div v-if="type === '跳转网页'" class="type-content">
+      <div class="link">
+        <div class="form-item">
+          <label for="name">链接&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
+          <Input placeholder="链接" v-validate="'url:require_protocol'" size="large" v-model="linkHref" clearable name="link" style="width: 300px"/>
+          <span class="error" v-show="errors.first('link')">请输入正确的url</span>
+        </div>
+        <Button type="primary" @click="checkLink()">
+          确定
+        </Button>
+        <Button @click="showLink = false">
+          取消
+        </Button>
+      </div>
     </div>
     <div class="btn-group">
-      <Button type="primary" style="color:#fff;" @click="1">确认</Button>
+      <Button type="primary" @click="1">确认</Button>
       <Button @click="2">删除当前菜单</Button>
     </div>
     
@@ -41,19 +81,50 @@
 </template>
 
 <script>
+
+import Emotion from '@/components/Emotion/index'
 export default {
   props: [''],
   data () {
     return {
       active: '文字',
-      type: '发送消息'
+      type: '发送消息',
+      content: '',
+      comment: '',
+      showExpression: false,
+      showLink: false,
+      text: '',
+      linkText: '',
+      linkHref: ''
     }
   },
   methods: {
     check () {
       console.log(this.error)
+    },
+    checkLink () {
+      let text = `<a href='${this.linkHref}'>${this.linkText}</a>`
+      this.text += text
+      this.linkText = ''
+      this.linkHref = ''
+      this.showLink = false
+    },
+    handleEmotion (i) {
+      this.content = i
+      this.text += this.content
+      this.showExpression = false
+    },
+    // 将匹配结果替换表情图片
+    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">`
     }
   },
+  components: {
+    Emotion
+  }
 }
 </script>
 
@@ -73,13 +144,32 @@ export default {
       padding-left: 20px;
     }
   }
-  .btn-group{
+  .type-content {
+    position: relative;
+    height: 475px;
+  }
+  .btn-group {
     display: flex;
     justify-content: center;
     align-items: center;
-    Button{
-      margin-right: 40px;
-    }
+  }
+  button {
+    margin-right: 40px;
+  }
+  .expression {
+    position: absolute;
+    bottom: 50px;
+    left: 0px;
+    width: 400px;
+  }
+  .link {
+    position: absolute;
+    bottom: 45px;
+    left: 450px;
+    box-shadow: 0 0 5px 2px #eee;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
   }
 }
 </style>