ytj

src/components/material.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="box" v-if="model === 'get'">
+      <div v-if="type === 'img'">
+        <div  v-for="(item,index) in img" :key="index" @click="emit(item,index)" :class="{checked:item.checked}">
+          <img :src="item.url" alt="">
+        </div>
+      </div>
+      <div v-if="type === 'view'">
+        <div v-for="(item,index) in view" :key="index" @click="emit(item,index)" :class="{checked:item.checked}">
+          <img :src="item.url" alt="">
+          <p>{{item.text}}</p>
+        </div>
+      </div>
+    </div>
+    <div v-if="model === 'set'">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapMaterialState, mapActions: mapMaterialActions } = createNamespacedHelpers('material')
+export default {
+  props: ['type', 'model'],
+  created () {
+    console.log('cre')
+    if (this.type === 'img') {
+      this.getImg()
+    } else {
+      this.getView()
+      console.log(this.view)
+    }
+  },
+  computed: {
+    ...mapMaterialState({
+      img: item => item.img,
+      view: item => item.view
+    })
+  },
+  methods: {
+    ...mapMaterialActions(['getImg', 'getView']),
+    emit (item, index) {
+      if (this.type === 'img') {
+        this.img.forEach((curr, ind) => {
+          curr.checked = false
+          if (index === ind) {
+            curr.checked = true
+          }
+        })
+      } else {
+        this.view.forEach((curr, ind) => {
+          curr.checked = false
+          if (index === ind) {
+            curr.checked = true
+          }
+        })
+      }
+
+      this.$emit('emit', item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 100%;
+  padding: 20px;
+  > div {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
+    div {
+      width: 160px;
+      height: 160px;
+      margin: 10px;
+      padding: 10px;
+      border: 1px solid #eeeeee;
+      border-radius: 5px;
+      cursor: pointer;
+      img {
+        width: 80%;
+        height: 80%;
+        margin: 0 10%;
+        object-fit: cover;
+      }
+      p {
+        padding-top: 8px;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+    .checked {
+      border: 1px solid orange;
+    }
+  }
+}
+</style>

src/components/menuForm.vue

@@ -5,7 +5,7 @@
       <Input placeholder="字数不超过4个汉字或8个字母" size="large" v-model="menuTitle" clearable @input="toolClass.CutStr(menuTitle, 8, '字数不超过4个汉字或8个字母')" name="name" style="width: 300px"/>
       <span class="error">{{toolClass.CutStr(menuTitle, 8, '字数不超过4个汉字或8个字母')}}</span>
     </div>
-    <div class="form-item">
+    <div class="form-item" v-if="hasContent">
       <label for="name">菜单内容</label>
       <RadioGroup  v-model="type" >
         <Radio label="发送消息"></Radio>
@@ -44,10 +44,28 @@
         </Modal>
       </div>
       <div v-show="active === '图片'">
-        2
+        <div>
+          <Button type="info" @click="chooseImg">从素材库中选取</Button>
+          <Button type="success" @click="uploadImg">从本地上传图片</Button>
+          <Modal width='800' v-model="showMaterial" @on-ok="checkImg" @on-cancel="closeImg">
+            <material v-if="showMaterial" :type='materialType' :model='model' @emit='setImg'></material>
+          </Modal>
+          <div class="img-view">
+            <img v-if="img.url" :src="img.url">
+          </div>
+        </div>
       </div>
       <div v-show="active === '图文'">
-        3
+        <div>
+          <Button type="info" @click="chooseView">从素材库中选取</Button>
+          <Modal width='800' v-model="showMaterialView" @on-ok="checkView" @on-cancel="closeView">
+            <material v-if="showMaterialView" :type='materialType' :model='model' @emit='setView'></material>
+          </Modal>
+          <div class="img-view">
+            <img v-if="view.url" :src="view.url">
+            <p v-if="view.text">{{view.text}}</p>
+          </div>
+        </div>
       </div>
     </div>
     <div v-if="type === '跳转网页'" class="type-content">
@@ -59,7 +77,7 @@
     </div>
     <div class="btn-group">
       <Button type="primary" @click="emit">确认</Button>
-      <Button @click="delMenu">删除当前菜单</Button>
+      <Button v-if="hasDelete" @click="delMenu">删除当前菜单</Button>
     </div>
   </div>
 </template>
@@ -67,8 +85,9 @@
 <script>
 
 import Emotion from '@/components/Emotion/index'
+import material from '@/components/material'
 export default {
-  props: ['menuConfig'],
+  props: ['data', 'menuConfig', 'hasContent', 'hasDelete'],
   data () {
     return {
       active: '文字',
@@ -80,13 +99,50 @@ export default {
       menuTitle: '',
       text: '',
       linkText: '',
-      linkHref: ''
+      linkHref: '',
+      showMaterial: false,
+      showMaterialView: false,
+      model: 'get',
+      materialType: 'img',
+      imghc: {},
+      viewhc: {},
+      img: {
+        media_id: '',
+        url: ''
+      },
+      view: {
+        media_id: '',
+        url: '',
+        text: ''
+      }
+    }
+  },
+  created () {
+    if (!this.hasContent) {
+      this.type = null
+    }
+    if (this.data) {
+      if (this.menuConfig) {
+        this.menuTitle = this.data.name
+      }
+      if (this.data.type === 'text') {
+        this.active = '文字'
+        this.text = this.data.value
+      } else if (this.data.type === 'media_id') {
+        this.active = '图片'
+        this.img.media_id = this.data.media_id
+        this.img.url = this.data.url
+      } else if (this.data.type === 'view_limited') {
+        this.active = '图文'
+        this.view.media_id = this.data.media_id
+        this.view.url = this.data.url
+      } else if (this.data.type === 'view') {
+        this.type = '跳转网页'
+        this.linkHref = this.data.url
+      }
     }
   },
   methods: {
-    check () {
-      console.log(this.error)
-    },
     checkLink () {
       if (!this.linkText) {
         this.$Message.warning('链接名称必填')
@@ -121,13 +177,48 @@ export default {
       let index = list.indexOf(word)
       return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
     },
+    setImg (img) {
+      this.imghc = img
+    },
+    checkImg () {
+      this.img = this.imghc
+      this.closeImg()
+    },
+    closeImg () {
+      this.imghc = {}
+      this.showMaterial = false
+    },
+    chooseImg () {
+      this.model = 'get'
+      this.materialType = 'img'
+      this.showMaterial = true
+    },
+    uploadImg () {
+
+    },
+    setView (view) {
+      this.viewhc = view
+    },
+    checkView () {
+      this.view = this.viewhc
+      this.closeView()
+    },
+    chooseView () {
+      this.model = 'get'
+      this.materialType = 'view'
+      this.showMaterialView = true
+    },
+    closeView () {
+      this.viewhc = {}
+      this.showMaterialView = false
+    },
     emit () {
       let emitData = {}
       if (this.menuConfig) {
         if (!this.menuTitle) {
           this.$Message.warning('菜单名称必填')
           return false
-        } else if (this.toolClass.CutStr(this.menuTitle, 8, '字数不超过4个汉字或8个字母') ) {
+        } else if (this.toolClass.CutStr(this.menuTitle, 8, '字数不超过4个汉字或8个字母')) {
           this.$Message.warning('菜单名称超过4个汉字或8个字母')
           return false
         }
@@ -135,12 +226,26 @@ export default {
       }
       if (this.type === '发送消息') {
         if (this.active === '文字') {
-          if (!this.text){
+          if (!this.text) {
             this.$Message.warning('消息文字必填')
             return false
           }
           emitData.type = 'text'
           emitData.value = this.text
+        } else if (this.active === '图片') {
+          if (!this.img.media_id) {
+            this.$Message.warning('请选择素材')
+            return false
+          }
+          emitData.type = 'media_id'
+          emitData.media_id = this.img.media_id
+        } else if (this.active === '图文') {
+          if (!this.view.media_id) {
+            this.$Message.warning('请选择素材')
+            return false
+          }
+          emitData.type = 'view_limited'
+          emitData.media_id = this.view.media_id
         }
       } else if (this.type === '跳转网页') {
         if (this.errors.first('link')) {
@@ -151,13 +256,15 @@ export default {
         emitData.type = 'view'
         emitData.url = this.linkHref
       }
+      this.$emit('emit', emitData)
     },
     delMenu () {
 
-    }
+    },
   },
   components: {
-    Emotion
+    Emotion,
+    material
   }
 }
 </script>
@@ -165,6 +272,7 @@ export default {
 <style lang="scss" scoped>
 .box {
   padding: 50px;
+  text-align: center;
   .form-item {
     display: flex;
     justify-content: flex-start;
@@ -188,7 +296,7 @@ export default {
     align-items: center;
   }
   button {
-    margin-right: 40px;
+    margin: 0 20px;
   }
   .expression {
     position: absolute;
@@ -201,5 +309,22 @@ export default {
     border-radius: 5px;
     text-align: center;
   }
+  .img-view {
+    width: 200px;
+    height: 200px;
+    margin: 20px auto 0;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    p {
+      padding-top: 8px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 }
 </style>

src/pages/main/index/index.vue

@@ -21,12 +21,15 @@
       </div>
     </div>
     <div class="content-item">
-      <menuForm :menuConfig='true'></menuForm>
+      <transition name="fade">
+        <menuForm v-if="formActive" :data='chooseItem' :menuConfig='true' :hasContent='hasContent' :hasDelete='hasDelete' @emit='checkForm'></menuForm>
+      </transition>
     </div>
   </div>
 </template>
 
 <script>
+import defultImg from '@/assets/bottomMsg.png'
 import bottomMenu from '@/components/bottomMenu.vue'
 import menuForm from '@/components/menuForm.vue'
 import { createNamespacedHelpers } from 'vuex'
@@ -34,6 +37,16 @@ const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespace
 export default {
   data () {
     return {
+      defultImg,
+      chooseItem: {},
+      chooseTag: {
+        type: 0,
+        index: 0,
+        parentIndex: 0
+      },
+      formActive: false,
+      hasContent: true,
+      hasDelete: true
     }
   },
   created () {
@@ -50,61 +63,66 @@ export default {
   },
   methods: {
     ...mapIndexActions(['getMenu', 'AddMainMenu', 'SetMainMenu', 'AddSubMenu', 'SetSubMenu', 'mainActive', 'subActive', 'mainPlusActive', 'subPlusActive']),
-    chengeForm () {
-      this.isRouterAlive = false
-      this.$nextTick(() => (this.isRouterAlive = true))
+    chengeForm (hasContent, hasDelete) {
+      this.formActive = false
+      this.hasContent = hasContent
+      this.hasDelete = hasDelete
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.formActive = true
+        }, 500)
+      })
+    },
+    checkForm (data) {
+      if (this.chooseTag.type === 0) {
+        this.addMainMenu(data)
+      } else if (this.chooseTag.type === 1) {
+        this.setMainMenu(data, this.chooseTag.index)
+      } else if (this.chooseTag.type === 2) {
+        this.addSubMenu(data, this.chooseTag.parentIndex)
+      } else if (this.chooseTag.type === 3) {
+        this.setSubMenu(data, this.chooseTag.index, this.chooseTag.parentIndex)
+      }
     },
     addMainMenuClick () {
+      this.chooseItem = {}
+      this.chooseTag.type = 0
+      this.chengeForm(true, false)
       this.mainPlusActive()
     },
     setMainMenuClick (item, index) {
+      this.chooseItem = item
+      this.chooseTag.type = 1
+      this.chooseTag.index = index
+      this.chengeForm(false, true)
       this.mainActive({ index })
     },
     addSubMenuClick (index) {
+      this.chooseItem = {}
+      this.chooseTag.type = 2
+      this.chooseTag.parentIndex = index
+      this.chengeForm(true, false)
       this.subPlusActive({ index })
     },
     setSubMenuClick (item, index, parentIndex) {
+      this.chooseItem = item
+      this.chooseTag.type = 3
+      this.chooseTag.index = index
+      this.chooseTag.parentIndex = parentIndex
+      this.chengeForm(true, true)
       this.subActive({ index, parentIndex })
     },
-    addMainMenu () {
-      let changeData = {
-        'name': '菜单'
-      }
+    addMainMenu (changeData) {
       this.AddMainMenu(changeData)
     },
     setMainMenu (item, index) {
-      item = {
-        'name': '菜单',
-        'sub_button': [
-          {
-            'type': 'view',
-            'name': '百度',
-            'url': 'http://www.baidu.com'
-          },
-          {
-            'type': 'view',
-            'name': '我的主页',
-            'url': 'http://www.tongtianguanriz.com/index.html'
-          },
-          {
-            'type': 'click',
-            'name': '为我们点赞！',
-            'key': 'V1001_GOOD'
-          }
-        ]
-      }
       let data = {
         item,
         index
       }
       this.SetMainMenu(data)
     },
-    addSubMenu (index) {
-      let item = {
-        'type': 'view',
-        'name': '百度',
-        'url': 'http://www.baidu.com'
-      }
+    addSubMenu (item, index) {
       let data = {
         item,
         index
@@ -112,11 +130,6 @@ export default {
       this.AddSubMenu(data)
     },
     setSubMenu (item, index, parentIndex) {
-      item = {
-        'type': 'view',
-        'name': '百度',
-        'url': 'http://www.baidu.com'
-      }
       let data = {
         item,
         index,
@@ -181,6 +194,13 @@ export default {
       color: #fff;
     }
   }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.5s;
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
 }
 </style>
 

src/store/index.js

@@ -17,6 +17,7 @@ export const modules = {
   login: () => require('./login').default,
   main: () => require('./main').default,
   pageIndex: () => require('./pageIndex').default,
+  material: () => require('./material').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/material.js

@@ -0,0 +1,109 @@
+// import ajax from '../util/ajax'
+// import api from '../util/api'
+
+export default {
+  namespaced: true,
+  state: {
+    img: [],
+    view: []
+  },
+  mutations: {
+    updateImg (state, data) {
+      state.img = data || []
+    },
+    updateView (state, data) {
+      state.view = data || []
+    }
+  },
+  actions: {
+    getImg (context, data) {
+      // return new Promise((resolve, reject) => {
+      //   ajax({
+      //     ...api.common.login,
+      //     data: {
+      //       ...data,
+      //     }
+      //   }).then(res => {
+      //     context.commit('updateList', res)
+      //     resolve(res)
+      //   }).catch(reject)
+      // })
+      data = [
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+      ]
+      data.forEach((curr) => {
+        curr.checked = false
+      })
+      context.commit('updateImg', data)
+    },
+    getView (context, data) {
+      // return new Promise((resolve, reject) => {
+      //   ajax({
+      //     ...api.common.login,
+      //     data: {
+      //       ...data,
+      //     }
+      //   }).then(res => {
+      //     context.commit('updateList', res)
+      //     resolve(res)
+      //   }).catch(reject)
+      // })
+      data = [
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          text: "1",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          text: "2",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+        {
+          "type": "media_id",
+          "name": "图片",
+          "media_id": "MEDIA_ID1",
+          text: "3dhkshfhdskjfhjkshdfhdshkjfhshdfihsifjsdnvkhsihfioshifhisohfshi",
+          url: 'http://mmbiz.qpic.cn/mmbiz_jpg/PiajxSqBRaEIQxibpLbyuSK4TssiajqknJS6dACV5IoTxppdoyfGEYScCFMqV3dgFzf2tGqy2IiciaysTlaZt6zchibA/0?wx_fmt=jpeg'
+        },
+      ]
+      data.forEach((curr) => {
+        curr.checked = false
+      })
+      context.commit('updateView', data)
+    }
+  }
+}