Merge branch 'master' of http://git.shengws.com/zhangbj/scrm-vue

config/index.js

 
     host: 'test1.sgjyun.com',
     port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    host: 'test1.sgjyun.com',
+    // host: 'test1.sgjyun.com',
     autoOpenBrowser: true,
     errorOverlay: true,
     notifyOnErrors: false,

index.html

     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
+    <meta name=”referrer” content=”never”>
+    <meta name="referrer" content="no-referrer"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>血透管理-酷医云</title>
   </head>

package-lock.json

         }
       }
     },
+    "can-promise": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/can-promise/-/can-promise-0.0.1.tgz",
+      "integrity": "sha512-gzVrHyyrvgt0YpDm7pn04MQt8gjh0ZAhN4ZDyCRtGl6YnuuK6b4aiUTD7G52r9l4YNmxfTtEscb92vxtAlL6XQ==",
+      "requires": {
+        "window-or-global": "^1.0.1"
+      }
+    },
     "caniuse-api": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
         "randombytes": "^2.0.0"
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
     "dir-glob": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
       "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
-      "dev": true,
       "requires": {
         "once": "^1.4.0"
       }
         "pify": "^3.0.0"
       }
     },
+    "map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
         "os-tmpdir": "^1.0.0"
       }
     },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww="
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
+    "p-is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
+      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg=="
+    },
     "p-limit": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
       "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
       "dev": true
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcode": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.3.3.tgz",
+      "integrity": "sha512-SH7V13AcJusH3GT8bMNOGz4w0L+LjcpNOU/NiOgtBhT/5DoWeZE6D5ntMJnJ84AMkoaM4kjJJoHoh9g++8lWFg==",
+      "requires": {
+        "can-promise": "0.0.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^12.0.5"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "requires": {
+            "cross-spawn": "^6.0.0",
+            "get-stream": "^4.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "invert-kv": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA=="
+        },
+        "isarray": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.4.tgz",
+          "integrity": "sha512-GMxXOiUirWg1xTKRipM0Ek07rX+ubx4nNVElTJdNLYmNO/2YrDkgJGw9CljXn+r4EWiDQg/8lsRdHyg2PJuUaA=="
+        },
+        "lcid": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+          "requires": {
+            "invert-kv": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "mem": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
+          "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
+          "requires": {
+            "map-age-cleaner": "^0.1.1",
+            "mimic-fn": "^2.0.0",
+            "p-is-promise": "^2.0.0"
+          }
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+        },
+        "os-locale": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+          "requires": {
+            "execa": "^1.0.0",
+            "lcid": "^2.0.0",
+            "mem": "^4.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+          "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
+        "semver": {
+          "version": "5.7.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
+        },
+        "yargs": {
+          "version": "12.0.5",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
+          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^3.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^11.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
+          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qrcodejs2": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
+    "spark-md5": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.0.tgz",
+      "integrity": "sha1-NyIifFTi+vJLHcbZM8wUTm9xv+8="
+    },
     "spdx-correct": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "webim-tencent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/webim-tencent/-/webim-tencent-1.0.2.tgz",
+      "integrity": "sha512-sdSRjcTsb/4t9riUpEv3+01wNMxP8hbWOllPbmkqKJ2jhXy88w57K7Ae4BnaeFH55prdcpsKwBhsX7BiJYGv/w=="
+    },
     "webpack": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.10.0.tgz",
         "string-width": "^1.0.2 || 2"
       }
     },
+    "window-or-global": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/window-or-global/-/window-or-global-1.0.1.tgz",
+      "integrity": "sha1-2+RboqKRqrxW1iz2bEW3+jIpRt4="
+    },
     "window-size": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "0.2.1",

package.json

     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "print-js": "^1.0.50",
+    "qrcode": "^1.3.3",
     "qrcodejs2": "0.0.2",
     "screenfull": "4.2.0",
     "serve-static": "1.13.2",
     "showdown": "1.8.5",
     "simplemde": "1.11.2",
     "sortablejs": "1.7.0",
+    "spark-md5": "^3.0.0",
     "vue": "2.5.16",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-splitpane": "1.0.2",
     "vuedraggable": "^2.16.0",
     "vuex": "3.0.1",
+    "webim-tencent": "^1.0.2",
     "xlsx": "^0.11.16"
   },
   "devDependencies": {

src/api/activity/activity.js

     },
     data: activity,
   })
+}
+
+export function fetchActivityDetailViewData(id) {
+  return request({
+    url: "/api/activity/detailview",
+    method: "get",
+    params: {
+      id: id,
+    }
+  })
+}
+
+export function fetchActivitySignupUsers(activity_id, keyword, page) {
+  return request({
+    url: "/api/activity/signups",
+    method: "get",
+    params: {
+      id: activity_id,
+      keyword: keyword,
+      page: page,
+    }
+  })
+}
+
+export function deleteActivity(activity_id) {
+  return request({
+    url: "/api/activity/delete",
+    method: "post",
+    params: {
+      id: activity_id,
+    }
+  })
+}
+
+export function publishActivity(activity_id) {
+  return request({
+    url: "/api/activity/publish",
+    method: "post",
+    params: {
+      id: activity_id,
+    }
+  })
+}
+
+export function getActivityShareInfo(activity_id) {
+  return request({
+    url: "/api/activity/shareinfo",
+    method: "get",
+    params: {
+      id: activity_id,
+    }
+  })
 }

src/api/kefu/tencentim.js

+import request from '@/utils/request'
+
+export function getusersig() {
+  return request({
+    url: '/api/tencent/usersig', 
+    method: 'get',
+  })
+}

src/api/mpwechat/material.js

+import request from '@/utils/request'
+
+export function GetMaterials(params) {
+    return request({
+        url: '/api/mpwechat/media/material',
+        method: 'get',
+        params:params
+    })
+}

src/api/mpwechat/mpmenus.js

+import request from '@/utils/request'
+
+export function GetMenus() {
+  return request({
+    url: '/api/mpwechat/menus',
+    method: 'get',
+  })
+}
+
+export function SaveMenus(data) {
+  return request({
+    url: '/api/mpwechat/savemenus',
+    method: 'put',
+    data:data,
+  })
+}
+
+export function DeleteMenu(data) {
+  return request({
+    url: '/api/mpwechat/deletemenus',
+    method: 'post',
+    data:data,
+  })
+}

src/api/mpwechat/mpreply.js

+import request from '@/utils/request'
+
+export function GetSubscribeRplay() {
+    return request({
+        url: '/api/mpwechat/reply/subscribe',
+        method: 'get',
+    })
+}
+
+export function SaveSubscribeRplay(data) {
+    return request({
+        url: '/api/mpwechat/reply/subscribe',
+        method: 'put',
+        data:data,
+    })
+}
+    
+export function GetKeyWordReplys(params) {
+    return request({
+        url: '/api/mpwechat/reply/kewords',
+        method: 'get',
+        params:params,
+    })
+}
+
+export function CreateKeyWordReply(data) {
+    return request({
+        url: '/api/mpwechat/reply/keword',
+        method: 'post',
+        data:data,
+    })
+}
+export function EditKeyWordReply(id,data) {
+    return request({
+        url: '/api/mpwechat/reply/keword?id='+id,
+        method: 'put',
+        data:data,
+    })
+}
+
+export function DeleteReplys(data) {
+    return request({
+        url: '/api/mpwechat/replys',
+        method: 'delete',
+        data:data,
+    })
+}

src/api/mpwechat/mpwechat.js

     url: '/api/mpwechat/authurl',
     method: 'get',
   })
-}
-  
-export function GetMenus() {
-  return request({
-    url: '/api/mpwechat/menus',
-    method: 'get',
-  })
-}
-
-export function SaveMenus(data) {
-  return request({
-    url: '/api/mpwechat/savemenus',
-    method: 'put',
-    data:data,
-  })
-}
+}

src/lang/en.js

     activityPublish: "publish activity",
     activityModify: "edit activity",
     systemsetting:'Systemsetting',
+    activityDetail: "activity detail",
+    activityShare: "activity share",
+    activityPreview: "activity preview",
+    activitySignupList: "activity sign up list",
   },
   navbar: {
     logOut: 'Log Out',

src/lang/zh.js

     activityModify: "编辑活动",
     systemsetting:'系统设置',
     staffmanagement:'员工管理',
+    activityDetail: "活动详情",
+    activityShare: "活动分享",
+    activityPreview: "活动预览",
+    activitySignupList: "报名列表",
   },
   navbar: {
     logOut: '退出登录',

src/router/index.js

 import marketing_tool from './modules/marketing_tool'
 import system from './modules/system'
 import site from './modules/site'
+import kefu from './modules/kefu'
 
 /** note: submenu only apppear when children.length>=1
  *   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
       noCache: true
     }
   }]
+},
+{
+  path: '/activity/preview',
+  component: () => import('@/scrm_pages/marketing_tool/activity_preview'),
+  hidden: true
 }
   // service
 ]
 
 var _asy_router_map = [
   member,
+  kefu,
   article,
   marketing_tool,
   org,

src/router/modules/kefu.js

+import Layout from '@/views/layout/Layout'
+//客服管理模块
+
+
+export default {
+    alwaysShow: true,
+    path: '/kefu',
+    component: Layout,
+    redirect: 'noredirect',
+    name: 'kefu',
+    meta: {
+      title: '客服管理',
+      icon: 'message'
+    },
+    children: [
+      {
+        path: '/kefu',
+        component: () => import('@/scrm_pages/kefu'),
+        name: 'kefuBox',
+        meta: { title: '咨询管理', noCache: true }
+      },
+    ]
+  }

src/router/modules/marketing_tool.js

         noCache: true
       }
     },
+    {
+      path: "/activity",
+      hidden: true,
+      is_menu: false,
+      component: () => import("@/scrm_pages/marketing_tool/activity_detail"),
+      name: "activityDetail",
+      meta: {
+        title: "activityDetail",
+        noCache: true,
+      }
+    },
+    {
+      path: "/activity/share",
+      hidden: true,
+      is_menu: false,
+      component: () => import("@/scrm_pages/marketing_tool/activity_share"),
+      name: "activityShare",
+      meta: {
+        title: "activityShare",
+        noCache: true,
+      }
+    },
+    // {
+    //   path: "/activity/preview",
+    //   hidden: true,
+    //   is_menu: false,
+    //   component: () => import("@/scrm_pages/marketing_tool/activity_preview"),
+    //   name: "activityPreview",
+    //   meta: {
+    //     title: "activityPreview",
+    //     noCache: true,
+    //   }
+    // },
+    {
+      path: "/activity/signupusers",
+      hidden: true,
+      is_menu: false,
+      component: () => import("@/scrm_pages/marketing_tool/activity_signup_users"),
+      name: "activitySignupList",
+      meta: {
+        title: "activitySignupList",
+        noCache: true,
+      }
+    },
   ]
 }

src/router/modules/member.js

     {
       path: '/member/members',
       component: () => import('@/scrm_pages/members/members'),
-      name: 'memberslist',
+      name: 'memberslists',
       meta: { title: '会员管理', noCache: true }
     },
     {

src/router/modules/system.js

       name: 'weixinMpMenus',
       meta: { title: '公众号菜单', noCache: true }
     },
+    {
+      path: '/weixinmp/reply/subscribe',
+      component: () => import('@/scrm_pages/weixinmp/subscribereply'),
+      name: 'weixinAutoReply',
+      meta: { title: '自动回复', noCache: true }
+    },
+    {
+      path: '/weixinmp/reply/keyword',
+      component: () => import('@/scrm_pages/weixinmp/keywordreply'),
+      name: 'weixinKeywordReply',
+      hidden: true,
+      meta: { title: '关键词回复', noCache: true }
+    },
     {
       path: '/Systemsetting/staffmanagement',
       component: () => import('@/scrm_pages/Systemsetting/staffmanagement'),

src/scrm_pages/contactBox/index.vue

+<template>
+    <div class="contact-box" id="contact-box">
+        <div class="contact-box-item msg-box" >
+            <div class="box-btn " @click="toggleMsgBox">
+                <i class="el-icon-service"></i>
+                <span>在线客服</span>
+            </div>
+            <div class="contact-msg-box" v-show="showMsgBox">
+                <div class="msg-box-panel">
+                    <div class="panel-header">
+                        <i class="el-icon-close kf-close" @click="showMsgBox=false"></i>
+                        <p class="kf-h-line">酷医云在线客服</p>
+                        <div class="clearfix"></div>
+                    </div>
+                    <div class="panel-body">
+                        <ul class="msg-inner scroll-y">
+                            <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="cell clearfix" :class="messageitem.float=='right'?'cell_right':''">
+                                <template v-if="messageitem.float=='right'">
+                                    <div class="msg_body fl">
+                                        <div class="inner" v-html="messageitem.message"></div>
+                                    </div>
+                                    <div class="cell_pic fl">
+                                        <div class="pic">
+                                            <img :src="messageitem.avatar" alt="">
+                                        </div>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <div class="cell_pic fl">
+                                        <div class="pic">
+                                            <img :src="messageitem.avatar" alt="">
+                                        </div>
+                                    </div>
+                                    <div class="msg_body fl">
+                                        <div class="inner" v-html="messageitem.message"></div>
+                                    </div>
+                                </template>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="panel-tool">
+                        <i class="icon-face" title="表情" @click="showEmotion"></i>
+                        <el-upload
+                        class="avatar-uploader"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :show-file-list="false"
+                        :http-request='handleIMPicUload'
+                        :on-success="handleIMPicSuccess"
+                        :before-upload="beforeIMPicUpload">
+                        <i class="el-icon-picture" title="图片"></i>
+                        </el-upload>
+                        <div class="face-box" v-show="showFace">
+                            <div class="face-box-title">
+                                <span>表情</span>
+                                <i class="el-icon-close " @click="showFace=false" style="float:right" ></i>
+                            </div>
+                            <ul class="face-box-list clearfix">
+                                <li v-for="(faceitem, index) in facelist" :key="index" @click="selectEmotion(faceitem)" >
+                                    <img :src="faceitem[1]" :id="faceitem[0]"  alt="">
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                    <div class="panel-booter">
+                        <div class="msg-input-box">
+                            <textarea class="textarea scroll-y message-textarea"  v-model="message" placeholder="请输入"></textarea>
+                        </div>
+                        <div class="msg-send-btn-box">
+                            <span class="time fl">服务时间:工作时间:9:00-22:00 节假日:9:00-18:00</span>
+                            <el-button type="primary" icon="el-icon-edit" class="fr" size="mini" @click="sendMessage">发送</el-button>
+                            <!-- <button type="submit" id="sendadminkfmsg" class="send_btn fr">发送</button> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="contact-box-item phone-box">
+            <div class="box-btn" @click="togglePhoneBox">
+                <i class="el-icon-phone-outline"></i>
+                <span>客服电话</span>
+            </div>
+            <div class="contact-phone-box" v-show="showPhoneBox">
+                <i class="el-icon-phone-outline" ></i>
+                <span>0755-86526342</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import {getusersig} from "@/api/kefu/tencentim";
+import webim from 'webim-tencent';
+let selType =  webim.SESSION_TYPE.C2C;
+let reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数
+var msgList = [];
+var getPrePageC2CHistroyMsgInfoMap = {};
+export default {
+    name:'contactBox',
+    data(){
+        return{
+            showMsgBox:false,
+            showPhoneBox:false,
+            selToID:'',
+            loginInfo: {
+                sdkAppID: '', //用户所属应用id,必填
+                appIDAt3rd: '',
+                identifier: '', //当前用户ID,必须是否字符串类型，必填
+                accountType: '', //用户所属应用帐号类型，必填
+                userSig: '', //当前用户身份凭证，必须是字符串类型，必填
+                identifierNick: '', //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
+                headurl: '', //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
+            },
+            useradmin:{
+                usersig: '',
+                Indentifier: '',
+                appIDAt3rd:'',
+                IdentifierNick:'',
+                HeadURL:'',
+            },
+            kefuUrl:'https://images.shengws.com/ico_gjh.png',
+            userSigFlag:false,
+            imloginFlag:false,
+            message:'',
+            messageBox:[],
+            facelist:[],
+            showFace:false,
+        }
+    },
+    created(){
+        
+        this.getusersig();
+    },
+    methods:{
+        getusersig() {
+            getusersig().then(response => {
+                if (response.data.state == 0) {
+                    this.$message.error(response.data.msg);
+                    return false;
+                } else {
+                    this.useradmin = {
+                        usersig: response.data.data.sig,
+                        Indentifier: response.data.data.Indentifier,
+                        appIDAt3rd:response.data.data.appIDAt3rd,
+                        IdentifierNick:response.data.data.IdentifierNick,
+                        HeadURL:response.data.data.HeadURL,
+                    } 
+                    
+                    this.loginInfo.appIDAt3rd = this.useradmin.appIDAt3rd
+                    this.loginInfo.identifier = this.useradmin.Indentifier
+                    this.loginInfo.userSig = this.useradmin.usersig
+                    this.loginInfo.identifierNick = this.useradmin.IdentifierNick
+                    this.loginInfo.headurl = this.useradmin.HeadURL
+                    this.loginInfo.sdkAppID = response.data.data.sdkAppID
+                    this.loginInfo.accountType = response.data.data.accountType
+                    this.selToID = response.data.data.selToAdmin;
+                    this.userSigFlag = true;
+                }
+            });
+        },
+        showEmotion:function(){
+            this.facelist = [];
+            for (const index in webim.Emotions) {
+                this.facelist.push(webim.Emotions[index]);
+            }
+            this.showFace = true;
+        },
+        selectEmotion:function(face){
+            this.message += face[0];
+            this.showFace = false;
+        },
+        sendMessage:function(){
+            var message = this.message.trim();
+            var msgLen = webim.Tool.getStrBytes(message);
+            if(message == '') {
+                this.$message.error('不能发送空消息');
+                return false;
+            }
+            var maxLen, errInfo;
+            if (selType == webim.SESSION_TYPE.C2C) {
+                maxLen = webim.MSG_MAX_LENGTH.C2C;
+                errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
+            } else {
+                maxLen = webim.MSG_MAX_LENGTH.GROUP;
+                errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
+            }
+            if (msgLen > maxLen) {
+                this.$message.error(errInfo);
+                return false;
+            }
+            this.handleMsgSend(message);
+        },
+        handleMsgSend(msgContent) {
+            var selSess = new webim.Session(selType, this.selToID, this.selToID, this.kefuUrl, Math.round(new Date().getTime() / 1000));
+            var isSend = true; //是否为自己发送
+            var seq = -1; //消息序列，-1表示sdk自动生成，用于去重
+            var random = Math.round(Math.random() * 4294967296); //消息随机数，用于去重
+            var msgTime = Math.round(new Date().getTime() / 1000); //消息时间戳
+            var subType; //消息子类型
+            if (selType == webim.SESSION_TYPE.C2C) {
+                subType = webim.C2C_MSG_SUB_TYPE.COMMON;
+            } else {
+                subType = webim.GROUP_MSG_SUB_TYPE.COMMON;
+            }
+            var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, this.loginInfo.identifier, subType, this.loginInfo.identifierNick);
+
+            var text_obj, face_obj, tmsg, emotionIndex, emotion, restMsgIndex;
+            //解析文本和表情
+            var expr = /\[[^[\]]{1,3}\]/mg;
+            var emotions = msgContent.match(expr);
+            if (!emotions || emotions.length < 1) {
+                text_obj = new webim.Msg.Elem.Text(msgContent);
+                msg.addText(text_obj);
+            } else {
+                for (var i = 0; i < emotions.length; i++) {
+                    tmsg = msgContent.substring(0, msgContent.indexOf(emotions[i]));
+                    if (tmsg) {
+                        text_obj = new webim.Msg.Elem.Text(tmsg);
+                        msg.addText(text_obj);
+                    }
+                    emotionIndex = webim.EmotionDataIndexs[emotions[i]];
+                    emotion = webim.Emotions[emotionIndex];
+
+                    if (emotion) {
+                        face_obj = new webim.Msg.Elem.Face(emotionIndex, emotions[i]);
+                        msg.addFace(face_obj);
+                    } else {
+                        text_obj = new webim.Msg.Elem.Text(emotions[i]);
+                        msg.addText(text_obj);
+                    }
+                    restMsgIndex = msgContent.indexOf(emotions[i]) + emotions[i].length;
+                    msgContent = msgContent.substring(restMsgIndex);
+                }
+                if (msgContent) {
+                    text_obj = new webim.Msg.Elem.Text(msgContent);
+                    msg.addText(text_obj);
+                }
+            }
+
+            msg.PushInfo = {
+                "PushFlag": 0,
+                "Desc": '测试离线推送内容', //离线推送内容
+                "Ext": '测试离线推送透传内容', //离线推送透传内容
+                "AndroidInfo": {
+                    "Sound": "android.mp3" //离线推送声音文件路径。
+                },
+                "ApnsInfo": {
+                    "Sound": "apns.mp3", //离线推送声音文件路径。
+                    "BadgeMode": 1
+                }
+            };
+
+            msg.PushInfoBoolean = true; //是否开启离线推送push同步
+            msg.sending = 1;
+            msg.originContent = msgContent;
+            // turnoffFaces_box();
+            var _this = this;
+
+            webim.sendMsg(msg, function (resp) {
+                _this.addMsg(msg);
+                _this.message = '';
+            }, function (err) {
+                console.log(err)
+            });
+        },
+        addMsg(msg, prepage) {
+            var messageitem = {
+                id:'',
+                message:'',
+                avatar:'',
+                time:'',
+                float:''
+            };
+            var isSelfSend, fromAccount, fromAccountNick, fromAccountImage, sessType, subType;
+
+            //webim.SESSION_TYPE.GROUP-群聊，
+            //webim.SESSION_TYPE.C2C-私聊，
+            sessType = msg.getSession().type();
+            isSelfSend = msg.getIsSend();//消息是否为自己发的
+            fromAccount = msg.getFromAccount();
+            if (!fromAccount) {
+                return;
+            }
+            if (isSelfSend) {//如果是自己发的消息
+                messageitem.avatar = this.loginInfo.headurl;
+                messageitem.float = "right";
+            } else {
+                messageitem.avatar = this.kefuUrl;
+                messageitem.float = "left";
+            }
+            messageitem.id = msg.random;
+            messageitem.time = webim.Tool.formatText2Html(webim.Tool.formatTimeStamp(msg.getTime()));
+            messageitem.message = this.convertMsgtoHtml(msg)
+            this.messageBox.push(messageitem);
+
+            var msgflow = document.getElementsByClassName("msg-inner")[0];
+            if (prepage) {
+                //300ms后,等待图片加载完，滚动条自动滚动到底部
+                if (msgflow.scrollTop == 0) {
+                    setTimeout(function () {
+                        msgflow.scrollTop = 0;
+                    }, 300);
+                }
+            } else {
+                //300ms后,等待图片加载完，滚动条自动滚动到底部
+                setTimeout(function () {
+                    msgflow.scrollTop = msgflow.scrollHeight;
+                }, 300);
+            }
+        },
+        sendPic(images, imgName) {
+            var _this = this;
+            if (!this.selToID) {
+                alert("请先选择对话用户");
+                return;
+            }
+
+            if (!this.selSess) {
+                this.selSess = new webim.Session(selType, this.selToID, this.selToID, this.kefuUrl, Math.round(new Date().getTime() / 1000));
+            }
+            var msg = new webim.Msg(this.selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
+            var images_obj = new webim.Msg.Elem.Images(images.File_UUID);
+            for (var i in images.URL_INFO) {
+                var img = images.URL_INFO[i];
+                var newImg;
+                var type;
+                switch (img.PIC_TYPE) {
+                    case 1://原图
+                        type = 1;//原图
+                        break;
+                    case 2://小图（缩略图）
+                        type = 3;//小图
+                        break;
+                    case 4://大图
+                        type = 2;//大图
+                        break;
+                }
+                newImg = new webim.Msg.Elem.Images.Image(type, img.PIC_Size, img.PIC_Width, img.PIC_Height, img.DownUrl);
+                images_obj.addImage(newImg);
+            }
+            msg.addImage(images_obj);
+            //if(imgName){
+            //    var data=imgName;//通过自定义消息中的data字段保存图片名称
+            //    var custom_obj = new webim.Msg.Elem.Custom(data, '', '');
+            //    msg.addCustom(custom_obj);
+            //}
+            //调用发送图片消息接口
+            webim.sendMsg(msg, function (resp) {
+                if (selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
+                    _this.addMsg(msg);
+                }
+            }, function (err) {
+                alert(err.ErrorInfo);
+            });
+        },
+        bindScrollHistoryEvent(axtion){
+            var msgflow = document.getElementsByClassName("msg-inner")[0];
+            var _this = this;
+            if (axtion=='init') {
+                msgflow.onscroll = function () {
+                    if (msgflow.scrollTop == 0) {
+                        msgflow.scrollTop = 10;
+                        if (selType == webim.SESSION_TYPE.C2C) {
+                            _this.getPrePageC2CHistoryMsgs();
+                        } 
+                    }
+                }
+            }else {
+                msgflow.onscroll = null;
+            }
+        },
+        getPrePageC2CHistoryMsgs  (cbOk, cbError) {
+            var _this = this;
+            if (selType == webim.SESSION_TYPE.GROUP) {
+                _this.$message.error("当前的聊天类型为群聊天，不能进行拉取好友历史消息操作");
+                return;
+            }
+            var tempInfo = getPrePageC2CHistroyMsgInfoMap[_this.selToID];//获取下一次拉取的c2c消息时间和消息Key
+            var lastMsgTime;
+            var msgKey;
+            if (tempInfo) {
+                lastMsgTime = tempInfo.LastMsgTime;
+                msgKey = tempInfo.MsgKey;
+            } else {
+                _this.$message.error("获取下一次拉取的c2c消息时间和消息Key为空");
+                return;
+            }
+            var options = {
+                'Peer_Account': _this.selToID, //好友帐号
+                'MaxCnt': reqMsgCount, //拉取消息条数
+                'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
+                'MsgKey': msgKey
+            };
+            webim.getC2CHistoryMsgs(
+                options,
+                function (resp) {
+                    var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
+                    if (resp.MsgList.length == 0) {
+                        webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
+                        return;
+                    }
+                    getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
+                        'LastMsgTime': resp.LastMsgTime,
+                        'MsgKey': resp.MsgKey
+                    };
+                    if (cbOk) {
+                        cbOk(resp.MsgList);
+                    } else {
+                        _this.getHistoryMsgCallback(resp.MsgList, true);
+                    }
+                },
+                cbError
+            );
+        },
+        getLastC2CHistoryMsgs (cbOk, cbError) {
+            var _this = this;
+            var lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
+            var msgKey = '';
+            var options = {
+                'Peer_Account': this.selToID, //好友帐号
+                'MaxCnt': reqMsgCount, //拉取消息条数
+                'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
+                'MsgKey': msgKey
+            };
+            this.selSess = null;
+            webim.MsgStore.delSessByTypeId(selType, this.selToID);
+
+            webim.getC2CHistoryMsgs(
+                options,
+                function (resp) {
+                    var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
+
+                    if (resp.MsgList.length == 0) {
+                        webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
+                        return;
+                    }
+                    getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
+                        'LastMsgTime': resp.LastMsgTime,
+                        'MsgKey': resp.MsgKey
+                    };
+                    
+                    if (cbOk)
+                        cbOk(resp.MsgList);
+                },
+                cbError
+            );
+        },
+        getHistoryMsgCallback(msgList, prepage) {
+            var msg;
+            var prepage = prepage || false;
+
+            //如果是加载前几页的消息，消息体需要prepend，所以先倒排一下
+            if (prepage) {
+                msgList.reverse();
+            }
+
+            for (var j in msgList) {//遍历新消息
+                msg = msgList[j];
+                if (msg.getSession().id() == this.selToID) {//为当前聊天对象的消息
+                    this.selSess = msg.getSession();
+                    //在聊天窗体中新增一条消息
+                    this.addMsg(msg, prepage);
+                }
+            }
+            //消息已读上报，并将当前会话的消息设置成自动已读
+            webim.setAutoRead(this.selSess, true, true);
+        },
+        convertMsgtoHtml(msg) {
+            var html = "",
+                elems, elem, type, content;
+            elems = msg.getElems(); //获取消息包含的元素数组
+            var count = elems.length;
+            for (var i = 0; i < count; i++) {
+                elem = elems[i];
+                type = elem.getType();//获取元素类型
+                content = elem.getContent();//获取元素对象
+                switch (type) {
+                    case webim.MSG_ELEMENT_TYPE.TEXT:
+                        var eleHtml = this.convertTextMsgToHtml(content);
+                        //转义，防XSS
+                        html += webim.Tool.formatText2Html(eleHtml);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.FACE:
+                        html += this.convertFaceMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.IMAGE:
+                        if (i <= count - 2) {
+                            var customMsgElem = elems[i + 1];//获取保存图片名称的自定义消息elem
+                            var imgName = customMsgElem.getContent().getData();//业务可以自定义保存字段，demo中采用data字段保存图片文件名
+                            html += this.convertImageMsgToHtml(content, imgName);
+                            i++;//下标向后移一位
+                        } else {
+                            html += this.convertImageMsgToHtml(content);
+                        }
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.SOUND:
+                        html += this.convertSoundMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.FILE:
+                        html += this.convertFileMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.LOCATION:
+                        html += this.convertLocationMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.CUSTOM:
+                        var eleHtml = this.convertCustomMsgToHtml(content);
+                        //转义，防XSS
+                        html += webim.Tool.formatText2Html(eleHtml);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
+                        var eleHtml = this.convertGroupTipMsgToHtml(content);
+                        //转义，防XSS
+                        html += webim.Tool.formatText2Html(eleHtml);
+                        break;
+                    default:
+                        webim.Log.error('未知消息元素类型: elemType=' + type);
+                        break;
+                }
+            }
+            return html;
+        },
+        convertTextMsgToHtml(content) {
+            return content.getText();
+        },
+        //解析表情消息元素
+        convertFaceMsgToHtml(content) {
+            var faceUrl = null;
+            var data = content.getData();
+            var index = webim.EmotionDataIndexs[data];
+
+            var emotion = webim.Emotions[index];
+            if (emotion && emotion[1]) {
+                faceUrl = emotion[1];
+            }
+            if (faceUrl) {
+                return "<img src='" + faceUrl + "'/>";
+            } else {
+                return data;
+            }
+        },
+        //解析图片消息元素
+        convertImageMsgToHtml(content, imageName) {
+            var smallImage = content.getImage(webim.IMAGE_TYPE.SMALL);//小图
+            var bigImage = content.getImage(webim.IMAGE_TYPE.LARGE);//大图
+            var oriImage = content.getImage(webim.IMAGE_TYPE.ORIGIN);//原图
+            if (!bigImage) {
+                bigImage = smallImage;
+            }
+            if (!oriImage) {
+                oriImage = smallImage;
+            }
+            return "<img name='" + imageName + "' src='" + smallImage.getUrl() + "#" + bigImage.getUrl() + "#" + oriImage.getUrl() + "' style='CURSOR: hand' id='" + content.getImageId() + "' bigImgUrl='" + bigImage.getUrl() + "'/>";
+        }, 
+        handleIMPicUload:function(fileobj){
+            var file = fileobj.file
+            console.log("file", file);
+            var _this = this;
+            var businessType;//业务类型，1-发群图片，2-向好友发图片
+            if (selType != webim.SESSION_TYPE.C2C) {//向好友发图片
+                this.$message.error('不支持群聊');
+                return; 
+            } 
+            businessType = webim.UPLOAD_PIC_BUSSINESS_TYPE.C2C_MSG;
+            //封装上传图片请求
+            var opt = {
+                'file': file, //图片对象
+                'onProgressCallBack': this.onProgressCallBack, //上传图片进度条回调函数
+                //'abortButton': document.getElementById('upd_abort'), //停止上传图片按钮
+                'To_Account': this.selToID, //接收者
+                'businessType': businessType//业务类型
+            };
+            //上传图片
+            webim.uploadPic(opt,
+                function (resp) {
+                    //上传成功发送图片
+                    _this.sendPic(resp, file.name);
+                    
+                },
+                function (err) {
+                    alert(err.ErrorInfo);
+                }
+            );
+        },
+        handleIMPicSuccess:function(){},
+        beforeIMPicUpload:function(file){
+            var fileType = file.type;
+            const isJPG = fileType.indexOf("image") > -1;
+            if (!isJPG) {
+                this.$message.error('只能上传图片');
+            }
+            return isJPG;
+        },
+        togglePhoneBox:function(){
+            if (this.showPhoneBox) {
+                this.showPhoneBox = false;
+            }else {
+                this.showPhoneBox = true;
+            }
+            this.showMsgBox = false;
+        },
+        toggleMsgBox:function(){
+            if (this.showMsgBox) {
+                this.showMsgBox = false;
+            }else {
+                this.showMsgBox = true;
+            }
+            this.showPhoneBox = false;
+        },
+        webimlogin(){
+            let _this = this;
+            let listeners = {
+                "onConnNotify": this.onConnNotify //监听连接状态回调变化事件,必填
+                , "jsonpCallback": this.jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
+                , "onMsgNotify": this.onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
+                , "onProfileSystemNotifys": this.onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
+                , "onKickedEventCall": this.onKickedEventCall //被其他登录实例踢下线
+                , "onC2cEventNotifys": this.onC2cEventNotifys //监听C2C系统消息通道
+            };
+            webim.login(this.loginInfo, listeners, this.loginOptions, 
+                function(resp){
+                    _this.$message.success('webim登录成功');
+                    _this.imloginFlag = true;
+                },
+                function(err) {
+                    _this.$message.error('webim登录错误');
+                }
+            );
+        },
+        onConnNotify(){},
+        jsonpCallback(){},
+        onMsgNotify(newMsgList){
+            //监听新消息事件
+            var msgList = [];
+            var dateStart = null;
+            var dateEnd = null;
+
+            //console.warn(newMsgList);
+            var sess, newMsg, formId;
+            //获取所有聊天会话
+            var sessMap = webim.MsgStore.sessMap();
+
+            for (var j in newMsgList) {//遍历新消息
+
+                newMsg = newMsgList[j];
+                formId = newMsg.getSession().id();
+                if (formId.indexOf("AdminKeFu")<0) {
+                    continue;
+                }else {
+                    if (newMsg.getSession().id() == this.selToID) {//为当前聊天对象的消息
+                        this.addMsg(newMsg);
+                    }
+                    msgList.push(newMsg.elems[0].content.text);
+                }
+                
+            }
+        },
+        onProfileSystemNotifys(){},
+        onKickedEventCall(){},
+        onC2cEventNotifys(){},
+    },
+    watch:{
+        'userSigFlag':function(value){
+            if(this.userSigFlag) {
+                this.webimlogin();
+            }
+        },
+        'imloginFlag':function(value) {
+            var _this = this;
+            if (this.imloginFlag) {
+                this.bindScrollHistoryEvent('reset');
+                this.getLastC2CHistoryMsgs(function (msgList) {
+                    _this.getHistoryMsgCallback(msgList);
+                    _this.bindScrollHistoryEvent('init');
+                    //绑定滚动操作
+                }, function (err) {
+                    alert(err.ErrorInfo);
+                });
+            }
+        }
+    },
+
+}
+</script>
+
+<style scoped>
+.contact-box {
+    position: fixed;
+    right: 12px;
+    bottom: 10%;
+    margin-top: -100px;
+    z-index: 9999;
+}
+    
+.contact-box .contact-box-item{
+    position: relative;
+    margin-bottom: 6px;
+    border: 1px solid #999;
+}
+
+.contact-box .contact-box-item .box-btn {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    display: block;
+    position: relative;
+    background: #fff;
+    cursor: pointer;
+}
+.contact-box .contact-box-item .box-btn i{
+    font-size:30px; 
+    margin: 9px;
+    color: #59a3ec;
+    display: inline-block;
+}
+/* .contact-box .contact-box-item .box-btn:hover {
+} */
+.contact-box .box-btn span{
+    display: none;
+    color:#fff;
+    padding: 8px;
+    font-size: 14px;
+    background: #5aa6f1;
+}
+.contact-box .box-btn:hover span{
+    display: block;
+}
+.contact-box .box-btn:hover i{
+    display: none;
+}
+.contact-box .contact-phone-box {
+    border: 1px solid #999;
+    position: absolute;
+    bottom: 0px;
+    right: 56px;
+    height: 48px;
+    display:flex;
+    background: #fff;
+    width: 230px;
+    align-items: center;
+}
+.contact-box .contact-phone-box i {
+    color: #59a3ec;
+    font-size:30px; 
+    margin: 9px;
+}
+.contact-box .contact-phone-box span {
+    font-size:20px; 
+    margin-left: 15px;
+    color: #485b6d;
+}
+
+.contact-box .contact-info-box {
+    border: 1px #e5e5e5 solid;
+    position: absolute;
+    bottom: 0px;
+    right: 56px;
+    display: none;
+    background: #fff;
+    width: 175px;
+    z-index: 10000;
+}
+.contact-box .msg-box:hover .contact-info-box{
+    display:block;
+    color: #485b6d;
+    font-size:20px; 
+    padding: 5px;
+}
+
+.contact-box .contact-msg-box {
+    border: 1px #e5e5e5 solid;
+    position: absolute;
+    bottom: 0px;
+    right: 56px;
+    background: #fff;
+}
+.contact-box .msg-box-panel {
+    width: 408px;
+    background-color: #fff;
+    position: relative;
+}
+.contact-box .panel-header {
+    border-bottom: 1px #e5e5e5 solid;
+}
+.contact-box .panel-header .kf-close {
+    width: 30px;
+    height: 20px;
+    float: right;
+    cursor: pointer;
+    margin: 12px 0 0 0;
+}
+.contact-box .panel-header .kf-h-line {
+    float: left;
+    color: #485b6d;
+    font-size: 16px;
+    line-height: 40px;
+    height: 40px;
+    padding-left: 10px;
+}
+.contact-box .panel-body {
+    overflow-x: visible;
+    overflow-y: auto;
+    height: 182px;
+}
+
+.contact-box .msg-inner {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    border-bottom: 1px #e5e5e5 solid;
+}
+.contact-box .scroll-y::-webkit-scrollbar {
+    width: 6px;
+    height: 3px;
+}
+.contact-box .scroll-y::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
+    box-shadow: inset 0 0 6px rgba(0,0,0,.1);
+    border-radius: 2px;
+}
+.contact-box .scroll-y::-webkit-scrollbar-track {
+    border-radius: 2px;
+}
+.contact-box .msg-inner .cell {
+    margin-bottom: 15px;
+}
+.contact-box .cell_right {
+    float: right;
+}
+
+.contact-box .clearfix {
+    clear: both;
+}
+.contact-box .msg-inner .msg_body {
+    border: 1px #e5e5e5 solid;
+    line-height: 22px;
+    display: inline-block;
+    padding: 6px;
+    max-width: 292px;
+}
+.contact-box .fl {
+    float: left;
+}
+.contact-box .msg-inner .msg_body .inner {
+    color: #465b6e;
+}
+.contact-box .msg-inner .cell_pic {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    margin: 0 20px;
+}
+.contact-box .msg-inner .cell_pic .pic {
+    width: 40px;
+    height: 40px;
+    display: flex;
+}
+.contact-box .msg-inner .cell_pic .pic img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.contact-box .msg-box-panel .panel-booter .textarea {
+    border: 1px #fff solid;
+    padding: 10px 20px;
+    color: #465b6e;
+    height: 100px;
+    resize: none;
+    width: 100%;
+}
+.contact-box .msg-box-panel .panel-booter .msg-send-btn-box {
+    padding: 0 20px 10px 20px;
+    float: left;
+    background: #fff;
+    width: 408px;
+}
+.contact-box .msg-box-panel .panel-booter .time {
+    font-size: 12px;
+    color: #bebebe;
+    height: 26px;
+    line-height: 26px;
+}
+.contact-box .msg-box-panel .panel-booter .msg-send-btn-box .send_btn {
+    color: #fff;
+    padding: 6px 20px;
+    border-radius: 4px;
+    font-size: 12px;
+    background: #58a1ed;
+    border: none;
+}
+
+.contact-box  .panel-tool {
+    color: #465b6e;
+    height: 30px;
+    border-bottom: 1px #e5e5e5 solid;
+    display:flex;
+    align-items: center;
+}
+
+.contact-box  .panel-tool i {
+    font-size: 20px;
+    padding: 0 5px;
+    margin: 0 5px;
+    cursor: pointer;
+}
+
+.contact-box  .panel-tool .icon-face::before {
+    content: '\1F642';
+    font-size: 15px;
+}
+.contact-box .face-box {
+    width: 304px;
+    z-index: 10001;
+    background: #fff;
+    position: relative;
+    bottom: 70px;
+    left: -100px;
+    border: 2px #e5e5e5 solid;
+}
+.contact-box .face-box-list li {
+    display: inline-block;
+    
+    border-right: 1px #CCC solid;
+    border-bottom: 1px #CCC solid;
+    cursor: pointer;
+}
+.contact-box .face-box-title {
+    border-bottom: 1px #e5e5e5 solid;
+    margin: 2px 0;
+}
+</style>

src/scrm_pages/kefu/index.vue

+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs='crumbs'></bread-crumb>
+    </div>
+    <div class="app-container">
+        <div class="customer_plate white-bg">
+            <div class="aside">
+                <div class="customer_search clearfix">
+                <div class="super_searchbox">
+                    <span class="search_icon"></span>
+                    <input type="text" class="cus_search_input" v-model="searchname" placeholder="请输入客户名称">
+                </div>
+                </div>
+                <div class="client_list_box">
+                <div class="client_list">
+                    <ul class="users-list">
+                    <li v-for="(patient, key) in patientsMap" v-show="searchname == '' || (patient.name.indexOf(searchname)>=0)" :class="thisPatient && patient.user_id==thisPatient.user_id?'Active':''" :key="key" :id="'sessDiv_User_'+patient.user_id" class="item" :data-username="patient.name" @click="chooseThisUser(patient)">
+                        <span :id="'badgeDiv_User_'+patient.user_id" class="circle-count" style="" v-show="patient.unread_msg_count"><i class="count">{{patient.unread_msg_count}}</i></span>
+                        <figure :id="'faceImg_User_'+patient.user_id" class="session-pic"><img :src="patient.avatar"></figure>
+                        <h3 :id="'nameDiv_User_'+patient.user_id" class="nick">{{patient.name}}</h3>
+                        <!-- <span class="square-close" title="退出接待" :data-toid="'User_'+patient.user_id">×</span> -->
+                    </li>
+                    </ul>
+                </div>
+                </div>
+            </div>
+
+            <div class="left_content">
+                <div class="conversation-admin">
+                <span class="nickname">
+                    <span></span>
+                </span>
+                </div>
+                <div class="message-list-wrap">
+                <div class="message-list-item">
+                    <ul class="message-list">
+                    
+                    <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="message-item clearfix">
+                        <div class="time"><span v-html="messageitem.time"></span></div>
+                        <div class="user " :class="messageitem.float">
+                            <figure class="bg-pic circle-bg-pic">
+                            <div class="bg-pic-content">
+                                <img :src="messageitem.avatar">
+                            </div>
+                            </figure>
+                        </div>
+                        <div class="message-body " :class="messageitem.float"><div class="inner" v-html="messageitem.message"></div></div>
+                    </li>
+
+                    </ul>
+                </div>
+                <div class="no_session">
+                    <span class="no_session_pic"></span>
+                    <p class="no_session_txt">没有选中会话哦！</p>
+                </div>
+                </div>
+                <div class="send_box" v-loading="loadingbox" :element-loading-text="loadingboxtext">
+                <div class="inputer_actions">
+                    <!-- <div class="face">
+                    <span class="face_icon" @click="showEmotionDialog"></span>
+                    </div> -->
+                    <div class="picture">
+                    <span class="picture_icon" @click="selectPicClick"></span>
+                    </div>
+                </div>
+                <div id="wl_faces_box" class="wl_faces_box" v-bind:style="{left:'0px', display:facesBoxDisplay}">
+                    <div class="wl_faces_content">
+                    <div class="title">
+                        <ul>
+                        <li class="title_name">常用表情</li>
+                        <li class="wl_faces_close">
+                            <span @click="facesBoxDisplay='none'">&nbsp;</span>
+                        </li>
+                        </ul>
+                    </div>
+                    <div id="wl_faces_main" class="wl_faces_main">
+                        <ul id="emotionUL">
+                        <li v-for="(emotion, key) in emotionList" :key="key" @click="chooseThisFace(emotion)">
+                            <img :src="emotion.src" :id="emotion.id" alt="" style="cursor:pointer;">
+                        </li>
+                        </ul>
+                    </div>
+                    </div>
+                    <div class="wlf_icon"></div>
+                </div>
+                <div class="inputer-area">
+                    <textarea
+                    maxlength="500" v-model="message"
+                    class="message-textarea transparent-txta"
+                    placeholder
+                    id="message"
+                    ></textarea>
+                </div>
+                <div class="send_box_btn">
+                    <button class="send_btn" id="sendMessaeg" @click="sendMessage">发送</button>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BreadCrumb from '../components/bread-crumb'
+  export default {
+    name: 'commentList',
+    components:{
+      BreadCrumb,
+    },
+    data(){
+      return{
+        crumbs: [
+          { path: false, name: '客服管理' },
+          { path: false, name: '咨询管理' }
+        ],
+        searchname:'',
+        patientsMap:{},
+        thisPatient:null,
+        messageBox:[],
+      }
+    },
+    methods:{},
+    created(){
+    }
+  }
+</script>
+
+<style scoped>
+  /*.app-container .cell.clearfix .time ul li {*/
+    /*float: left;*/
+    /*list-style: none;*/
+    /*cursor: pointer;*/
+    /*padding: 6px 20px;*/
+    /*color: #606266;*/
+    /*border-radius: 4px;*/
+    /*margin: 0 8px 0 0;*/
+    /*font-size: 14px;*/
+    /*text-align: center;*/
+  /*}*/
+
+  
+.app-container{
+  height: 750px;  
+}
+.customer_plate {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height:100%;
+}
+.customer_plate .aside {
+  width: 282px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border-right: 1px solid #e5e8ea;
+}
+.customer_plate .aside .client_list_box {
+  position: absolute;
+  width: 100%;
+  top: 50px;
+  left: 0;
+  bottom: 0;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.channelswitch-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.customer_plate .aside .client_list_box .client_list {
+  height: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.customer_plate .aside .customer_search {
+  margin: 0 10px;
+  height: 34px;
+}
+.customer_plate .aside .super_searchbox {
+  padding: 0 8px;
+  background-color: #f4f7fa;
+  border-radius: 30px;
+  margin-top: 15px;
+  font-size: 12px;
+}
+.customer_plate .aside .super_searchbox .cus_search_input {
+  border: none;
+  background: none;
+  width: 224px;
+  height: 22px;
+  line-height: 22px;
+}
+.customer_plate .aside .super_searchbox .search_icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat;
+  float: left;
+  background-position: -460px -314px;
+  margin: 4px 5px 0 0;
+}
+.left_content {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  width: 100%;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+.left_content .message-list-wrap {
+  position: absolute;
+  top: 50px;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  border-bottom: 1px #e5e8ea solid;
+  bottom: 210px;
+}
+.left_content .message-list-wrap .message-list-item {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.left_content .message-list-wrap .message-list {
+  padding: 0 12px 20px;
+}
+.left_content .conversation-admin {
+  height: 48px;
+  line-height: 48px;
+  border-bottom: 1px #e5e8ea solid;
+  margin-left: 2px;
+  width: 100%;
+}
+.left_content .conversation-admin .nickname {
+  padding-left: 22px;
+}
+.client_list ul {
+  list-style: none;
+}
+.client_list ul .item {
+  padding: 17px 12px 17px 62px;
+  min-height: 36px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.2s linear;
+  -webkit-transition: background-color 0.2s linear;
+  -moz-transition: background-color 0.2s linear;
+  position: relative;
+}
+.client_list ul .Active {
+  background: #f4f7fa;
+}
+.client_list ul .item .nick {
+  font-size: 14px;
+  color: #485b6d;
+  margin-bottom: 7px;
+}
+.client_list ul .item:hover {
+  background: #dfedfb;
+}
+.client_list ul .item .time {
+  position: absolute;
+  top: 14px;
+  right: 12px;
+  color: #a8b3ba;
+}
+.client_list ul .item .circle-count {
+  padding: 2px;
+  background-color: #ff7979;
+  text-align: center;
+  left: 8px;
+  z-index: 2;
+  min-width: 17px;
+  min-height: 15px;
+  line-height: 12px;
+  border-radius: 10px;
+  position: absolute;
+  top: 12px;
+  display: inline-block;
+}
+.client_list ul .item .circle-count .count {
+  color: #fff;
+  display: inline-block;
+  -webkit-transform: scale(0.83);
+  -moz-transform: scale(0.83);
+  -ms-transform: scale(0.83);
+  transform: scale(0.83);
+}
+.client_list ul .item .session-pic {
+  position: absolute;
+  top: 17px;
+  left: 13px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+}
+.client_list ul .item .session-pic img {
+  width: 40px;
+  height: 40px;
+}
+.client_list ul .item .square-close {
+  color: #fff;
+  background-color: #d2d2d5;
+  display: none;
+  width: 14px;
+  height: 14px;
+  line-height: 12px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.client_list ul .item:hover .square-close {
+  display: block;
+}
+.client_list ul .item .desc {
+  color: #a8b3ba;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 150px;
+}
+.service_fixed {
+  position: fixed;
+}
+.message-list-wrap ul li {
+  padding: 12px;
+}
+.message-list-wrap .message-item .time {
+  text-align: center;
+  margin: 20px 0 6px 0;
+}
+.message-list-wrap .message-item .time span {
+  font-size: 12px;
+  color: #a8b3ba;
+}
+.message-list .message-item .user .bg-pic {
+  display: inline-block;
+  margin-right: 20px;
+}
+.message-list .message-item .message-body {
+  background: #e5e8ea;
+  padding: 16px 12px 12px 12px;
+  border-radius: 4px;
+  color: #485b6d;
+  max-width: 520px;
+}
+.message-list .message-item .user .bg-pic .bg-pic-content {
+  border-radius: 50%;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+}
+.message-list .message-item .user .bg-pic img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.no_session {
+  text-align: center;
+}
+.send_box {
+  position: absolute;
+  font-size: 13px;
+  bottom: 0;
+  height: 210px;
+  left: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -moz-box-orient: vertical;
+  -moz-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.send_box .inputer_actions {
+  padding: 10px;
+  background: #f5f5f5;
+}
+
+.send_box .inputer_actions .face {
+  float: left;
+  margin: 0;
+  height: auto;
+}
+.send_box .inputer_actions .face_icon {
+  width: 24px;
+  height: 22px;
+  background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat -478px -314px;
+  display: inline-block;
+  margin-right: 22px;
+  cursor: pointer;
+}
+.send_box .inputer_actions .picture_icon {
+  width: 28px;
+  height: 24px;
+  background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat -508px -314px;
+  display: inline-block;
+  margin-right: 22px;
+  cursor: pointer;
+}
+.inputer-area {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 2px;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -moz-box;
+  display: flex;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.inputer-area .message-textarea {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -moz-box;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: auto;
+  height: 100%;
+  resize: none;
+  margin: 0;
+  padding: 9px 4px;
+  font-size: 14px;
+  line-height: 1.5em;
+  border: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  padding: 0 9px 4px;
+}
+.send_box .send_box_btn {
+  position: absolute;
+  bottom: 26px;
+  right: 40px;
+}
+.send_box .send_box_btn .send_btn {
+  background: #58a2ec;
+  color: #fff;
+  padding: 12px 55px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+}
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/*
+    Created on : 2015-7-6, 15:55:30
+    Author     : peakerdong
+*/
+
+#login {
+    display: block;
+    margin: 150px auto;
+    text-align: center;
+}
+
+.aio {
+    display: none;
+    width: 734px;
+    border: 1px black solid;
+    padding: 0px;
+    background: white;
+    margin: 20px auto;
+    font: 10px/1.5 "微软雅黑";
+}
+
+.titlebar {
+    height: 82px;
+    background: #5c95b3;
+}
+
+.titlebar #p_my_face {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border: 1px white solid;
+    margin: 10px;
+    float: left;
+}
+
+.titlebar #t_my_name {
+    position: relative;
+    top: 10px;
+    left: 10px;
+    float: left;
+    font-size: 20px;
+    color: white;
+}
+
+.titlebar #t_my_menu {
+    width: 150px;
+    position: relative;
+    top: 5px;
+    right: 5px;
+    float: right;
+
+}
+
+.sesspart {
+    clear: both;
+    float: left;
+    width: 208px;
+    height: 535px;
+    background: #d7eaf3;
+}
+
+.accordion {
+    margin-bottom: 18px;
+}
+
+.accordion-group {
+    margin-bottom: 2px;
+    border: 1px solid #e5e5e5;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.accordion-heading {
+    border-bottom: 0;
+    background-color: bisque;
+}
+
+.accordion-heading .accordion-toggle {
+    display: block;
+    padding: 8px 15px;
+    font-size: medium;
+}
+
+.accordion-inner {
+    padding: 9px 15px;
+    border-top: 1px solid #e5e5e5;
+}
+.sesslist-recent {
+    height: 450px;
+    background: #f5f5f5;
+    border-width: 0px 1px 0px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+}
+
+
+.sesslist {
+    /* height: 400px; */
+    height: 450px;
+    background: #f5f5f5;
+    border-width: 0px 1px 0px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+    overflow: auto;
+}
+
+.sesslist-group {
+    /* height: 400px; */
+    height: 450px;
+    background: #f5f5f5;
+    border-width: 0px 1px 0px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+    overflow: auto;
+}
+
+.sessinfo {
+    clear: both;
+    height: 50px;
+    border-width: 0px 0px 1px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+}
+
+.sessinfo-sel {
+    clear: both;
+    height: 50px;
+    border-width: 0px 0px 1px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+    background: #d7eaf3;
+}
+
+.face {
+    float: left;
+    width: 40px;
+    height: 40px;
+    margin: 5px 5px 5px 10px;
+}
+
+.name {
+    float: left;
+    height: 20px;
+    text-indent: 2px;
+    font-size: 12px;
+    color: #1f1f1f;
+    margin: 15px 0 0 0;
+}
+
+.badge {
+    display: none;
+    float: right;
+    margin: 18px 0 0 0;
+    width: 32px;
+    height: 20px;
+    background: #f00000;
+    color: white;
+    text-align: center;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}
+
+.badge span {
+    position: relative;
+    top: 1px;
+    font-size: 10px;
+}
+
+.chatpart {
+    float: right;
+    width: 526px;
+    border: 0px red solid;
+    background: #d7eaf3;
+    margin-top: -535px;
+}
+
+.msgflow {
+    width: 525px;
+    height: 380px;
+    border: 1px rgb(181, 178, 178) solid;
+    padding: 20px 6px 0 6px;
+    background: #f5f5f5;
+    overflow: auto;
+}
+.msgflow .onemsg{position:relative;}
+.msgflow .onemsg .msghead {
+    color: green;
+    line-height: 12px;
+    font-size: 12px;
+}
+
+.msgflow .onemsg .msgbody {
+    margin: 0 0 0 18px;
+    line-height: 13px;
+    font-size: 14px;
+}
+
+.msgflow .msgbody img {
+    max-width: 500px;
+}
+
+.editbar {
+    width: 526px;
+    height: 25px;
+}
+
+.chat02_title_btn {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/icon.png') no-repeat 0 0;
+    cursor: pointer;
+    float: left;
+    display: block;
+    width: 15px;
+    height: 15px;
+    margin: 5px 6px;
+}
+
+.ctb01 {
+    background-position: 0 -90px;
+    margin-left: 18px;
+    _margin-left: 8px;
+}
+
+.ctb03 {
+    background-position: 0 -152px;
+}
+
+.ctb02 {
+    background-position: 0 -457px;
+}
+
+.ctb05 {
+    background-position: 0 -217px;
+}
+
+.ctb04 {
+    background-position: 0 -543px;
+}
+
+.wl_faces_box {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_bg.png') repeat 0 0;
+    position: relative;
+    /*position: absolute;*/
+    width: 428px;
+    height: 225px;
+    bottom: 290px;
+    left: -42px;
+    display: none;
+}
+
+.wl_faces_content {
+    background: #fff;
+    border: 1px #ccc solid;
+    width: 417px;
+    height: 216px;
+    margin: 3px 4px;
+}
+
+.wl_faces_content .title {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_title_bg.jpg') repeat-x 0 0;
+    height: 40px;
+    position: relative;
+}
+
+.wl_faces_content .title ul {
+
+}
+
+.wl_faces_content .title ul li {
+    position: absolute;
+    display: block;
+}
+
+.wl_faces_content .title ul li.title_name {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_title_btn.jpg') no-repeat 0 0;
+    width: 82px;
+    height: 30px;
+    bottom: 0;
+    _bottom: -2px;
+    left: 15px;
+    text-align: center;
+    line-height: 32px;
+    font-weight: bold;
+    color: #333;
+}
+
+.wl_faces_content .title ul li.wl_faces_close {
+    right: 8px;
+    top: 15px;
+}
+
+.wl_faces_content .title ul li.wl_faces_close span {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/icon.png') repeat-x 0 0;
+    cursor: pointer;
+    display: block;
+    width: 15px;
+    height: 15px;
+}
+
+.wl_faces_main {
+
+}
+
+.wl_faces_main ul {
+    margin: 12px 12px;
+    padding: 0px;
+    overflow: hidden;
+    border-top: 1px #CCC solid;
+    border-left: 1px #CCC solid;
+    list-style: none;
+    width: 393px;
+}
+
+.wl_faces_main ul li {
+    float: left;
+    border-right: 1px #CCC solid;
+    border-bottom: 1px #CCC solid;
+    height: 28px;
+    width: 28px;
+    margin: 0px 0px 0px 0px;
+    padding: 4px 2px;
+    text-align: center;
+}
+
+.wl_faces_main ul li img {
+    width: 24px;
+    height: 24px;
+}
+
+.wlf_icon {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/layer_arrow.png') no-repeat 0 0;
+    position: absolute;
+    width: 22px;
+    height: 9px;
+    bottom: -4px;
+    _bottom: -11px;
+    left: 61px;
+}
+
+.msgedit {
+    width: 525px;
+    height: 100px;
+    border: 1px rgb(181, 178, 178) solid;
+    background: #f5f5f5;
+    padding: 6px 6px;
+    line-height: 1.5;
+}
+
+.sendbar {
+    width: 526px;
+    height: 30px;
+}
+
+.sendbtn {
+    float: right;
+    width: 80px;
+    margin-right: 10px;
+    font: 10px/1.5 "微软雅黑";
+}
+
+.closebtn {
+    float: right;
+    width: 80px;
+    margin-right: 10px;
+    font: 10px/1.5 "微软雅黑";
+}
+
+.bottom {
+    clear: both;
+    height: 3px;
+    background: #d7eaf3;
+}
+
+#demo_type_desc {
+    color: red;
+}
+
+#myself_type_desc {
+    display: none;
+    color: red;
+}
+
+#qcloudLink {
+    color: blue;
+}
+
+#sdkAppIdDiv {
+    display: none;
+}
+
+#accountTypeDiv {
+    display: none;
+}
+
+.pic_thumb {
+    width: 200px;
+    height: 200px;
+}
+
+
+
+.spinner {
+    width: 60px;
+    text-align: center;
+    position: absolute;
+    right: 10px;
+    top: 32px;
+    text-align: right;
+}
+
+.spinner > div {
+  width: 6px;
+  height: 6px;
+  background-color: #333;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+
+.headurlClass{
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+}
+
+.delChat{
+    color: red;
+    width: 50px;
+    padding: 16px 0;
+    float: right;
+    margin-right: 5px;
+}
+figure {
+  margin: 0;
+}
+</style>

src/scrm_pages/marketing_tool/activity_detail.vue

+<template>
+    <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs="crumbs"></bread-crumb>
+        </div>
+        <div class="app-container" style="padding-top: 0; background-color: #f6f8f9;">
+            <div class="base-info">
+                <div class="poster-photo">
+                    <img :src="poster_photo" />
+                </div>
+                <div class="title-panel">
+                    <p class="title">
+                        <!-- <router-link v-if="activity != null && activity.status == 4" :to="activity_url" target="_blank">{{ title }}</router-link>
+                        <router-link v-else :to="activity_url">{{ title }}</router-link> -->
+                        <router-link :to="activity_url" target="_blank">{{ title }}</router-link>
+                    </p>
+                    <p class="date">活动日期：{{ activity_time }}</p>
+                </div>
+                <div class="action-panel">
+                    <el-button type="primary" v-if="show_share_btn" @click="$router.push({ path: '/activity/share', query: { id: activity_id } })">再次分享</el-button>
+                    <el-button type="primary" v-if="show_publish_btn" @click="publishActivity" :loading="publishing">发布</el-button>
+                </div>
+            </div>
+            <div class="times-statistics">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <div class="item">
+                            <span class="count">{{ read_times }}</span>
+                            <p class="desc">展示次数</p>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <div class="item">
+                            <span class="count">{{ join_count }}</span>
+                            <p class="desc">参与人数</p>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+            <div class="signup-header">
+                <div class="input">
+                    <el-input v-model="signup_keyword" placeholder="搜索报名人" style="width: 330px;"></el-input>
+                    <el-button type="primary" icon="el-icon-search" :loading="loading_search" @click="fetchSignupUsers">搜索</el-button>
+                </div>
+                <div class="all-btn">
+                    <el-button type="primary" @click="$router.push({ path: '/activity/signupusers', query: { id: activity_id } })">查看全部</el-button>
+                </div>
+            </div>
+            <div class="signup-table-panel">
+                <el-table :data="signup_users" empty-text="暂无人报名">
+                    <el-table-column label="报名号" align="center" prop="id"></el-table-column>
+                    <el-table-column label="手机号" align="center" prop="mobile"></el-table-column>
+                    <el-table-column label="客户姓名" align="center" prop="real_name"></el-table-column>
+                    <el-table-column label="报名时间" align="center">
+                        <template slot-scope="scope">
+                            <span>{{ parseTime(scope.row.ctime, "{y}-{m}-{d} {h}:{i}") }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import BreadCrumb from "@/scrm_pages/components/bread-crumb"
+import { fetchActivityDetailViewData, fetchActivitySignupUsers, publishActivity } from "@/api/activity/activity"
+import { parseTime } from "@/utils"
+
+export default {
+    name: "ActivityDetail",
+    components: {
+        BreadCrumb,
+    },
+    data() {
+        return {
+            crumbs: [
+                { path: false, name: "营销工具" },
+                { path: false, name: "活动详情" },
+            ],
+
+            activity_id: 0,
+            activity: null,
+
+            signup_keyword: "",
+            signup_users: [],
+
+            loading_search: false,
+            publishing: false,
+        }
+    },
+    computed: {
+        title: function() {
+            return this.activity == null ? "" : this.activity.title
+        },
+        poster_photo: function() {
+            return this.activity == null ? "/" : this.activity.poster_photo
+        },
+        activity_url: function() {
+            if (this.activity != null) {
+                return "/activity/preview?id=" + this.activity_id
+            }
+            return ""
+        },
+        activity_time: function() {
+            return this.activity == null ? "" : parseTime(this.activity.start_time, "{y}-{m}-{d} {h}:{i}")
+        },
+        show_share_btn: function() {
+            return this.activity == null ? false : (this.activity.status == 1)
+        },
+        show_publish_btn: function() {
+            return this.activity == null ? false : (this.activity.status == 4)
+        },
+        read_times: function() {
+            return this.activity == null ? 0 : this.activity.read_num
+        },
+        join_count: function() {
+            return this.activity == null ? 0 : this.activity.join_num
+        }
+    },
+    mounted() {
+        this.activity_id = this.$route.query.id
+
+        fetchActivityDetailViewData(this.activity_id).then(rs => {
+            var resp = rs.data
+            if (resp.state == 1) {
+                this.activity = resp.data.activity
+                this.signup_users = resp.data.users
+            } else {
+                this.$message.error(resp.msg)
+            }
+
+        }).catch(err => {
+            this.$message.error(err)
+        })
+    },
+    methods: {
+        parseTime,
+        fetchSignupUsers: function() {
+            this.loading_search = true
+            fetchActivitySignupUsers(this.activity_id, this.signup_keyword, 1).then(rs => {
+                this.loading_search = false
+                var resp = rs.data
+                if (resp.state == 1) {
+                    this.signup_users = resp.data.users
+                } else {
+                    this.$message.error(resp.msg)
+                }
+            }).catch(err => {
+                this.loading_search = false
+                this.$message.error(err)
+            })
+        },
+        publishActivity: function() {
+            this.publishing = true
+            publishActivity(this.activity_id).then(rs => {
+                this.publishing = false
+                var resp = rs.data
+                if (resp.state == 1) {
+                    this.activity.status = 1
+                } else {
+                    this.$message.error(resp.msg)
+                } 
+
+            }).catch(rs => {
+                this.publishing = false
+                this.$message.error(err)
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.base-info {
+    padding: 20px 25px;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    align-items: center;
+    background-color: white;
+    box-shadow: 0 0 1px #dee2e5;
+
+    .poster-photo {
+        width: 120px;
+        height: 96px;
+        display: flex;
+        justify-content: center;
+        margin-right: 22px;
+
+        img {
+            width: 100%;
+            height: auto;
+            border-radius: 4px;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .title-panel {
+        flex: 3;
+        padding-right: 20px;
+
+        .title {
+            font-size: 18px;
+            color: #485b6d;
+            font-weight: 700;
+            word-break: break-all;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            height: 70px;
+            line-height: 34px;
+        }
+        .date {
+            color: #7b8a97;
+            line-height: 20px;
+            font-size: 14px;
+        }
+    }
+    .action-panel {
+        flex: 1;
+        text-align: right;
+    }
+}
+.times-statistics {
+    margin-top: 20px;
+
+    .item {
+        padding: 40px 0 30px 0;
+        box-shadow: 0 0 1px #dee2e5;
+        background-color: white;
+        text-align: center;
+
+        .count {
+            font-size: 36px;
+            color: #58a2ec;
+        }
+        .desc {
+            margin-top: 5px;
+            font-size: 14px;
+            color: #485b6d;
+        }
+    }
+}
+.signup-header {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    .input {
+        width: 500px;
+        display: block;
+    }
+    .all-btn {
+        display: block;
+    }
+}
+.signup-table-panel {
+    margin-top: 10px;
+}
+</style>
+
+

src/scrm_pages/marketing_tool/activity_list.vue

       <div>
         <template v-for="(activity, index) in activities">
           <published-cell v-if="activity.status == 1 || activity.status == 4" :key="index" :activity="activity"></published-cell>
-          <unapproved-cell v-else-if="activity.status == 3" :key="index" :activity="activity"></unapproved-cell>
-          <drafts-cell v-else-if="activity.status == 2" :key="index" :activity="activity"></drafts-cell>
+
+          <unapproved-cell v-else-if="activity.status == 3" :key="index" :activity="activity" @delete="deleteActivity(activity.id, index)"></unapproved-cell>
+
+          <drafts-cell v-else-if="activity.status == 2" :key="index" :activity="activity" @delete="deleteActivity(activity.id, index)"></drafts-cell>
         </template>
       </div>
       <div class="cell clearfix" style="padding-top: 15px;">
 </template>
 
 <script>
-import BreadCrumb from "@/scrm_pages/components/bread-crumb";
+import BreadCrumb from "@/scrm_pages/components/bread-crumb"
 import PublishedCell from "@/scrm_pages/marketing_tool/components/published_cell"
 import UnapprovedCell from "@/scrm_pages/marketing_tool/components/unapproved_cell"
 import DraftsCell from "@/scrm_pages/marketing_tool/components/drafts_cell"
-import { fetchActivities } from "@/api/activity/activity"
+import { fetchActivities, deleteActivity } from "@/api/activity/activity"
 
 export default {
   name: "ActivityList",
         this.$message.error(err)
       })
     },
+
+    deleteActivity(id, index) {
+      this.loading_activities = true
+      deleteActivity(id).then(rs => {
+        this.loading_activities = false
+        var resp = rs.data
+        if (resp.state == 1) {
+          this.activities.splice(index, 1)
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(err => {
+        this.loading_activities = false
+        this.$message.error(err)
+        return err
+      })
+    }
   },
 };
 </script>

src/scrm_pages/marketing_tool/activity_preview.vue

+<template>
+<div style="background-color: #f6f8f9;">
+    <div class="main">
+        <div class="border title-panel">
+            <img :src="activity.poster_photo"/>
+            <div class="text">
+                <p class="title">{{ activity.title }}</p>
+                <p class="subtitle">{{ activity.subtitle }}</p>
+            </div>
+        </div>
+        <div class="org-info border">
+            <div class="logo">
+                <img :src="org.logo" />
+            </div>
+            <div class="info">
+                <p class="name">{{ org.name }}</p>
+                <p class="address">{{ activity.address }}</p>
+            </div>
+            <div class="arrow">
+                <img src="@/assets/img/sa_52.png" />
+            </div>
+        </div>
+        <div class="simple-cell border">
+            <div class="icon">
+                <img src="@/assets/img/sa_21.png" />
+            </div>
+            <div class="text">
+                <p>{{ parseTime(activity.start_time, "{y}-{m}-{d} {h}:{i}") }}</p>
+            </div>
+            <div class="arrow-panel">
+                <img src="@/assets/img/sa_52.png" />
+            </div>
+        </div>
+        <div class="simple-cell border" v-if="activity.phone_number.length > 0">
+            <div class="icon">
+                <img src="@/assets/img/sa_24.png" />
+            </div>
+            <div class="text">
+                <p>{{ activity.phone_number }}</p>
+            </div>
+            <div class="arrow-panel">
+                <img src="@/assets/img/sa_52.png" />
+            </div>
+        </div>
+        <div class="simple-cell border" v-if="activity.limit_num > 0">
+            <div class="title">
+                <p>活动名额</p>
+            </div>
+            <div class="detail">
+                <p>{{ activity.limit_num + "人" }}</p>
+            </div>
+        </div>
+
+        <div class="large-text-cell border" v-if="sign_up_notice.length > 0">
+            <div class="title">
+                <img src="@/assets/img/sa_25.png" />
+                <span>报名须知</span>
+            </div>
+            <p class="content" v-html="sign_up_notice">
+            </p>
+        </div>
+
+        <div class="large-text-cell border" v-if="activity_paragraph.title.length > 0">
+            <div class="title">
+                <img src="@/assets/img/sa_26.png" />
+                <span>{{ activity_paragraph.title }}</span>
+            </div>
+            <p class="content" v-html="activity_paragraph.content">
+            </p>
+        </div>
+
+        <div class="signup-fake-btn">
+            立即报名
+        </div>
+    </div>
+</div> 
+</template>
+
+<script>
+import { fetchActivity } from "@/api/activity/activity"
+import { parseTime } from "@/utils"
+
+export default {
+    name: "ActivityPreview",
+    data() {
+        return {
+            activity_id: 0,
+
+            activity: {
+                id: 0,
+                poster_photo: "",
+                title: "",
+                subtitle: "",
+                address: "",
+                limit_num: 0,
+                sign_up_deadline: 0,
+                start_time: 0,
+                phone_number: "",
+                sign_up_notice: "",
+            },
+            activity_paragraph: {
+                title: "",
+                content: "",
+            },
+            org: {
+                name: "",
+                logo: "",
+            }
+        }
+    },
+    computed: {
+        sign_up_notice: function() {
+            return this.activity.sign_up_notice.replace(/\n/g, "<br/>")
+        }
+    },
+    mounted() {
+        this.activity_id = this.$route.query.id
+
+        fetchActivity(this.activity_id).then(rs => {
+            var resp = rs.data
+            if (resp.state == 1) {
+                // console.log(resp.data)
+                var activity = resp.data.activity
+                this.activity.id = activity.id
+                this.activity.poster_photo = activity.poster_photo
+                this.activity.title = activity.title
+                this.activity.subtitle = activity.subtitle
+                this.activity.address = activity.address
+                this.activity.limit_num = activity.limit_num
+                this.activity.sign_up_deadline = activity.sign_up_deadline * 1000
+                this.activity.start_time = activity.start_time * 1000
+                this.activity.phone_number = activity.phone_number
+                this.activity.sign_up_notice = activity.sign_up_notice
+
+                var paragraph = resp.data.paragraph
+                this.activity_paragraph.title = paragraph.title
+                this.activity_paragraph.content = paragraph.content
+
+                this.org.name = resp.data.org.name
+                this.org.logo = resp.data.org.logo
+
+            } else {
+                this.$message.error(resp.msg)
+            }
+
+        }).catch(err => {
+            this.$message.error(err)
+        })
+    },
+    methods: {
+        parseTime,
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+    width: 750px;
+    margin: 0 auto;
+    padding: 14px 30px 0 30px;
+
+    .title-panel {
+        background-color: white;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+        .text {
+            padding: 12px 15px 16px 20px;
+
+            .title {
+                font-size: 18px;
+                color: #485b6d;
+                font-weight: bold;
+                line-height: 32px;
+            }
+            .subtitle {
+                margin-top: 4px;
+                color: #a6a6a6;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .org-info {
+        padding: 26px 20px;
+        position: relative;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        margin-top: 15px;
+        background-color: white;
+
+        .logo {
+            img {
+                width: 40px;
+                height: 40px;
+                border-radius: 20px;
+                object-fit: cover;
+                object-position: center;
+            }
+        }
+
+        .info {
+            flex: 1;
+            padding-left: 23px;
+            color: #485b6d;
+
+            .name {
+                font-size: 16px;
+                line-height: 22px;
+            }
+            .address {
+                font-size: 14px;
+                line-height: 20px;
+            }
+        }
+        
+        .arrow {
+            width: 20px;
+            position: relative;
+            img {
+                width: 8px;
+                float: right;
+            }
+        }
+    }
+
+    .simple-cell {
+        background-color: white;
+        padding: 20px 20px;
+        margin-top: 15px;
+        position: relative;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+
+        .icon {
+            img {
+                width: 20px;
+                height: auto;//20px;
+                vertical-align: middle;
+            }
+        }
+        .text {
+            flex: 1;
+            padding-left: 17px;
+            color: #485b6d;
+            line-height: 20px;
+        }
+        .arrow-panel {
+            width: 20px;
+            position: relative;
+
+            img {
+                width: 8px;
+                float: right;
+                vertical-align: middle;
+            }
+        }
+
+        .title {
+            p {
+                color: #485b6d;
+            }
+        }
+        .detail {
+            flex: 1;
+            padding-left: 23px;
+            color: #485b6d;
+
+            p {
+                color: #485b6d;
+                float: right;
+                text-align: right;
+            }
+        }
+    }
+
+    .large-text-cell {
+        background-color: white;
+        padding: 20px 20px;
+        position: relative;
+        -webkit-box-align: center;
+        align-items: center;
+        margin-top: 15px;
+
+        .title {
+            color: #485b6d;
+            line-height: 18px;
+            height: 18px;
+
+            img {
+                margin-right: 11px;
+                float: left;
+            }
+        }
+        .content {
+            color: #a8b3ba;
+            margin: 10px 0 0 0;
+            font-size: 14px;
+            line-height: 20px;
+        }
+    }
+
+    .signup-fake-btn {
+        background: #58a1ed;
+        color: #fff;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        width: 100%;
+        margin-top: 100px;
+        font-size: 16px;
+    }
+}
+</style>
+
+<style scoped>
+.border {
+    border: solid 1px #dee2e5;
+    border-radius: 4px;
+}
+</style>

src/scrm_pages/marketing_tool/activity_share.vue

+<template>
+    <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs="crumbs"></bread-crumb>
+        </div>
+        <div class="app-container" style="padding: 0 6px 20px; background-color: #f6f8f9;">
+            <div class="wx-share-panel">
+                <div class="text-panel">
+                    <p class="title">微信分享</p>
+                    <p class="desc">以微信方式推送给客户，该方式可以监测活动的展现及参与次数</p>
+                </div>
+                <div class="qrcode-panel">
+                    <div class="qrcode">
+                        <img :src="qr_img" :style="{ opacity: qr_img.length > 0 ? 1 : 0 }" />
+                    </div>
+                    <div class="btn">
+                        <el-button type="primary" @click="previewAction">新窗口预览</el-button>
+                    </div>
+                </div>
+            </div>
+            <div class="sms-share-panel">
+                <div class="text-panel">
+                    <p class="title">短信分享</p>
+                    <p class="desc">以短信方式推送给客户</p>
+                </div>
+                <div class="btn-panel">
+                    <el-button type="primary">短信推送</el-button>
+                </div>
+            </div>
+            <div class="link-share-panel">
+                <div>
+                    <p class="title">网页链接</p>
+                    <p class="desc">可以直接分享以下链接到相应媒体（邮件、QQ、微博等），或者嵌入到微信公众号菜单</p>
+                </div>
+                <div class="input-line">
+                    <div class="input">
+                        <el-input readonly v-model="short_url"></el-input>
+                    </div>
+                    <el-button type="primary" @click="copyAction">复制链接</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import BreadCrumb from "@/scrm_pages/components/bread-crumb"
+import QRCode from "qrcode"
+import { getActivityShareInfo } from "@/api/activity/activity"
+
+export default {
+    name: "ActivityShare",
+    components: {
+        BreadCrumb,
+    },
+    data() {
+        return {
+            crumbs: [
+                { path: false, name: "活动详情" },
+                { path: false, name: "活动分享" },
+            ],
+
+            activity_id: 0,
+            short_url: "",
+            qr_img: "",
+        }
+    },
+    mounted() {
+        this.activity_id = this.$route.query.id
+
+        getActivityShareInfo(this.activity_id).then(rs => {
+            var resp = rs.data
+            if (resp.state == 1) {
+                this.short_url = resp.data.url
+
+                var opts = {
+                    errorCorrectionLevel: "H",
+                    type: "image/png"
+                };
+                var that = this;
+                QRCode.toDataURL(this.short_url, opts, function(err, qr_url) {
+                    if (err) {
+                        console.log(err);
+                    } else {
+                        that.qr_img = qr_url;
+                    }
+                });
+
+            } else {
+                this.$message.error(resp.msg)
+            }
+        }).catch(err => {
+            this.$message.error(err)
+        })
+
+    },
+    methods: {
+        previewAction: function () {
+            // var new_page = this.$router.resolve({ 
+            //     path: '/activity/preview',
+            //     query: {
+            //         id: this.activity_id,
+            //     }   
+            // })
+            // window.open(new_page.href, '_blank');
+            window.open(this.short_url, "_blank")
+        },
+        copyAction: function() {
+            var input = document.createElement("input");
+            input.value = this.short_url;
+            document.body.appendChild(input);
+            input.select();
+            document.execCommand("Copy");
+            document.body.removeChild(input);
+
+            this.$message.success("已复制链接")
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.wx-share-panel {
+    box-shadow: 0 0 1px #dee2e5;
+    padding: 25px 35px;
+    display: flex;
+    background-color: white;
+
+    .text-panel {
+        flex: 1;
+
+        .title {
+            font-size: 16px;
+            color: #485b6d;
+            font-weight: bold;
+            height: 40px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+        .desc {
+            color: #7b8a97;
+            font-size: 14px;
+        }
+    }
+    .qrcode-panel {
+        text-align: right;
+
+        .qrcode {
+            text-align: center;
+
+            img {
+                width: 120px;
+                height: 120px;
+            }
+        }
+
+        .btn {
+            text-align: center;
+        }
+    }
+}
+
+.sms-share-panel {
+    box-shadow: 0 0 1px #dee2e5;
+    padding: 25px 35px;
+    display: flex;
+    margin-top: 20px;
+    background-color: white;
+
+    .text-panel {
+        flex: 1;
+
+        .title {
+            font-size: 16px;
+            color: #485b6d;
+            font-weight: bold;
+            height: 40px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+        .desc {
+            color: #7b8a97;
+            font-size: 14px;
+        }
+    }
+    .btn-panel {
+        text-align: right;
+        padding-right: 4px;
+    }
+}
+
+.link-share-panel {
+    box-shadow: 0 0 1px #dee2e5;
+    padding: 25px 35px;
+    // display: flex;
+    margin-top: 20px;
+    background-color: white;
+
+    .title {
+        font-size: 16px;
+        color: #485b6d;
+        font-weight: bold;
+        height: 40px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    .desc {
+        color: #7b8a97;
+        font-size: 14px;
+    }
+    .input-line {
+        margin-top: 20px;
+
+        .input {
+            display: inline-block;
+            width: 400px;
+        }
+    }
+}
+</style>
+

src/scrm_pages/marketing_tool/activity_signup_users.vue

+<template>
+    <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs="crumbs"></bread-crumb>
+        </div>
+        <div class="app-container" style="padding-top: 0; background-color: #f6f8f9;">
+            <div style="display: flex;">
+                <div style="flex: 1;">
+                    <router-link to="/activity/list">
+                        <el-button type="primary">返回列表</el-button>
+                    </router-link>
+                </div>
+                <el-button type="primary" @click="printAction">导出</el-button>
+            </div>
+            <div style="margin-top: 10px;" id="table-panel">
+                <el-table id="table" border :data="signup_users" empty-text="暂无人报名">
+                    <el-table-column label="报名号" align="center" prop="id"></el-table-column>
+                    <el-table-column label="手机号" align="center" prop="mobile"></el-table-column>
+                    <el-table-column label="客户姓名" align="center" prop="real_name"></el-table-column>
+                    <el-table-column label="报名时间" align="center">
+                        <template slot-scope="scope">
+                            <span>{{ parseTime(scope.row.ctime, "{y}-{m}-{d} {h}:{i}") }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div style="margin-top: 10px;">
+                <el-pagination :total="total" :current-page.sync="current_page" :page-size="10" layout="total, prev, pager, next" @current-change="getActivities()"></el-pagination>
+            </div>
+            <div id="print-table" style="width:960px; display: none;">
+                <el-table border :data="signup_users" empty-text="暂无人报名">
+                    <el-table-column label="报名号" align="center" prop="id"></el-table-column>
+                    <el-table-column label="手机号" align="center" prop="mobile"></el-table-column>
+                    <el-table-column label="客户姓名" align="center" prop="real_name"></el-table-column>
+                    <el-table-column label="报名时间" align="center">
+                        <template slot-scope="scope">
+                            <span>{{ parseTime(scope.row.ctime, "{y}-{m}-{d} {h}:{i}") }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import BreadCrumb from "@/scrm_pages/components/bread-crumb"
+import { fetchActivitySignupUsers } from "@/api/activity/activity"
+import { parseTime } from "@/utils"
+import printJS from "print-js"
+
+export default {
+    name: "ActivitySignupUsers",
+    components: {
+        BreadCrumb,
+    },
+    data() {
+        return {
+            crumbs: [
+                { path: false, name: "活动详情" },
+                { path: false, name: "报名列表" },
+            ],
+
+            activity_id: 0,
+
+            signup_users: [],
+            loading_search: false,
+            total: 0,
+            current_page: 1,
+        }
+    },
+    mounted() {
+        this.activity_id = this.$route.query.id
+
+        this.fetchSignupUsers()
+    },
+    methods: {
+        parseTime,
+        fetchSignupUsers: function() {
+            this.loading_search = true
+            fetchActivitySignupUsers(this.activity_id, "", this.current_page).then(rs => {
+                this.loading_search = false
+                var resp = rs.data
+                if (resp.state == 1) {
+                    this.signup_users = resp.data.users
+                    this.total = resp.data.total
+                } else {
+                    this.$message.error(resp.msg)
+                }
+            }).catch(err => {
+                this.loading_search = false
+                this.$message.error(err)
+            })
+        },
+        printAction: function() {
+            printJS({
+                printable: 'table',
+                type: "html",
+                scanStyles: false,
+                css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css'],
+                // maxWidth: 960,
+            })
+        },
+    },
+}
+</script>
+

src/scrm_pages/marketing_tool/components/drafts_cell.vue

         </div>
         <div class="activity-info-panel">
             <h3 class="title">
-                <a href="/">{{ activity.title }}</a>
+                <router-link :to="activityUrl">
+                    <a>{{ activity.title }}</a>
+                </router-link>
             </h3>
             <div class="operation">
                 <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="$router.push({ path: '/activity/modify', query: {id: activity.id} })">编辑</el-button>
-                <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
+                <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteActivity">删除</el-button>
             </div>
         </div>
     </div>
             
         }
     },
+    computed: {
+        activityUrl: function() {
+            return "/activity?id=" + this.activity.id
+        }
+    },
+    methods: {
+        deleteActivity() {
+            this.$emit("delete")
+        }
+    }
 }
 </script>
 

src/scrm_pages/marketing_tool/components/edit_activity_edit_form.vue

             <div class="submit-button-panel">
                 <el-button style="padding: 10px 30px;" type="primary" @click="publishAction" :loading="publishing_activity" :disabled="saving_activity || saving_before_preview_activity">发 布</el-button>
                 <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;" @click="saveAction" :loading="saving_activity" :disabled="publishing_activity || saving_before_preview_activity">保存草稿</el-button>
-                <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;" :loading="saving_before_preview_activity" :disabled="publishing_activity || saving_activity">预 览</el-button>
+                <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;" @click="previewAction" :loading="saving_before_preview_activity" :disabled="publishing_activity || saving_activity">预 览</el-button>
             </div>
         </div>
     </div>
 
         saveAction: function() {
             this.saving_activity = true
-            this.submitActivity(false)
+            this.submitActivity(false, function() {
+                // 弹框 => 再发一条/前往列表
+            })
         },
         publishAction: function() {
             this.publishing_activity = true
             this.submitActivity(true, function() {
-                // 前往活动详情页
+                this.$router.push({ path: "/activity", query: { id: this.activity.id } })
             })
         },
         previewAction: function() {
             this.saving_before_preview_activity = true
+            var t = this
             this.submitActivity(false, function() {
-                // 前往活动预览页
+                var new_page = t.$router.resolve({ 
+                    path: '/activity/preview',
+                    query: {
+                        id: t.activity.id,
+                    }   
+                })
+                window.open(new_page.href, '_blank');
             })
         },
         submitActivity: function(is_publish, successCallBack) {
                     this.saving_before_preview_activity = false
 
                 }).catch(err => {
+                    console.log('------  ' + err)
                     this.$message.error(err)
                     this.saving_activity = false
                     this.publishing_activity = false
                 })
 
             }).catch(err => {
+                console.log('asdada  ' + err)
                 this.$message.error(err)
                 this.saving_activity = false
                 this.publishing_activity = false
                 this.saving_before_preview_activity = false
             })
-            
         },
         validActivityInfo: function() {
             return new Promise((resolve, reject) => {
                 if (this.activity.poster_photo.length == 0) {
                     reject("海报不能为空")
+                    return
                 } else if (this.activity.title.length == 0) {
                     reject("标题不能为空")
+                    return
                 } else if (this.activity.subtitle.length == 0) {
                     reject("副标题不能为空")
+                    return
                 } else if (this.activity.address.length == 0) {
                     reject("活动地址不能为空")
+                    return
                 } else if (this.activity.sign_up_deadline == 0) {
                     reject("活动报名时间不能为空")
+                    return
                 } else if (this.activity.start == 0) {
                     reject("活动时间不能为空")
+                    return
                 } else {
                     if (this.activity.phone_number.length > 0) {
                         if (/^1\d{10}$/.test(this.activity.phone_number) == false && /^(0\d{2,3}-?\d{7,8}$)/.test(this.activity.phone_number) == false) {

src/scrm_pages/marketing_tool/components/published_cell.vue

         </div>
         <div class="activity-info-panel">
             <h3 class="title">
-                <a href="">{{ activity.title }}</a>
+                <router-link :to="activityUrl">
+                    <a>{{ activity.title }}</a>
+                </router-link>
             </h3>
             <div class="statistics">
                 阅读：{{ activity.read_num }} 丨 评论：{{ activity.comment_num }} 丨 点赞：{{ activity.star_num }}
                 return "已发布"
             }
         },
+        activityUrl: function() {
+            return "/activity?id=" + this.activity.id
+        },
         progress_percent: function() {
             if (this.activity.limit_num > 0) {
                 return (this.activity.join_num / this.activity.limit_num) * 100
             }
         },
         start_time: function() {
-            return parseTime(this.activity.start_time, "{y}-{m}-{d}")
+            return parseTime(this.activity.start_time, "{y}-{m}-{d} {h}-{i}")
         },
     },
 }

src/scrm_pages/marketing_tool/components/unapproved_cell.vue

             </div>
             <div class="operation">
                 <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="$router.push({ path: '/activity/modify', query: {id: activity.id} })">编辑</el-button>
-                <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
+                <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteActivity">删除</el-button>
             </div>
         </div>
         <div class="activity-time-panel">
     },
     computed: {
         start_time: function() {
-            return parseTime(this.activity.start_time, "{y}-{m}-{d}")
+            return parseTime(this.activity.start_time, "{y}-{m}-{d} {h}:{i}")
         },
     },
+    methods: {
+        deleteActivity() {
+            this.$emit("delete")
+        }
+    }
 }
 </script>
 

src/scrm_pages/site/components/add-contact.vue

+<template>
+    <div>
+         <div class="feature ">
+            <ul >
+                <li @click="slideshow = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>轮播图</p>  
+                    </span>
+                </li>
+                <li @click="address = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>医院地址</p>  
+                    </span>
+                </li>
+                <li @click="contact = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>联系方式</p>  
+                    </span>
+                </li>
+                <li @click="time = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>工作时间</p>  
+                    </span>
+                </li>
+                <li @click="type = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>乘车方式</p>  
+                    </span>
+                </li>
+            </ul>
+         </div>
+<!-- 轮播图 -->
+<el-dialog
+    title="新增轮播图"
+    :visible.sync="slideshow"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="添加图片: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="slideshow = false">取 消</el-button>
+      <el-button type="primary" @click="slideshow = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 医院地址 -->
+  <el-dialog
+    title="新增轮播图"
+    :visible.sync="address"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="医院地址: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="医院地图: ">
+
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="address = false">取 消</el-button>
+      <el-button type="primary" @click="address = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+<!-- 新增联系方式 -->
+<el-dialog
+    title="新增联系方式"
+    :visible.sync="contact"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="联系方式: ">
+        <div class="used">
+             <ul>
+                 <li>
+                    <span class="name">医院电话</span>
+                    <span class="icon"> 
+                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
+                        <i class="el-icon-delete" @click="deleteList = true"></i>
+                    </span>
+                 </li>
+                 <li>
+                    <span class="name">微信号</span>
+                    <span class="icon"> 
+                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
+                        <i class="el-icon-delete" @click="deleteList = true"></i>
+                    </span>
+                 </li>
+             </ul>
+        </div>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="addLink = true">添加联系方式</el-button>      
+      <el-button @click="contact = false">取 消</el-button>
+      <el-button type="primary" @click="contact = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+
+  <!-- 确定删除组件 -->
+    <el-dialog
+        title="删除提示"
+        :visible.sync="deleteList"
+        width="550px"
+        :before-close="handleClose">
+        <span>确认要删除该组件吗？删除后，该组件将无法恢复</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="deleteList = false">取 消</el-button>
+            <el-button type="primary" @click="deleteList = false">确 定</el-button>
+        </span>
+    </el-dialog>
+  <!-- 新增联系方式 -->
+  <el-dialog
+    title="新增联系方式"
+    :visible.sync="addLink"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="标题:">
+            <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="联系方式:">
+            <el-radio-group v-model="form.resource">
+            <el-radio label="电话"></el-radio>
+            <el-radio label="非电话"></el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="内容:">
+            <el-input v-model="form.name"></el-input>
+        </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="addLink = false">取 消</el-button>
+        <el-button type="primary" @click="addLink = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+ <!-- 工作时间 -->
+ <el-dialog
+    title="新增工作时间"
+    :visible.sync="time"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="工作时间: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="time = false">取 消</el-button>
+      <el-button type="primary" @click="time = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增乘车方式 -->
+ <el-dialog
+    title="新增乘车方式"
+    :visible.sync="type"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="乘车方式: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="type = false">取 消</el-button>
+      <el-button type="primary" @click="type = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+
+    </div>
+</template>
+
+
+<script>
+export default {
+  name: "addcontact",
+  data() {
+    return {
+      slideshow:false,
+      address:false,
+      contact:false,
+      addLink:false,
+      time:false,
+      type:false,
+      new1: require("../../../assets/preview/new-1.png"),
+      form: {
+        name: ""
+      }
+    };
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.tips {
+  font-size: 12px;
+  line-height: 18px;
+}
+.used {
+  ul {
+    li {
+      height: 44px;
+      line-height: 44px;
+      font-size: 14px;
+      display: flex;
+      color: #606266;      
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid #e4e7ed;
+      padding: 0 10px;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      i {
+        font-size: 19px;
+        margin: 0 6px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/scrm_pages/site/components/contact-used.vue

+<template>
+    
+</template>
+
+
+<script>
+export default {
+    name:'contactused'
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

src/scrm_pages/site/components/new-feature.vue

 <template>
-<div class="feature">
-    <ul >
-        <li>
+<div class="feature-box">
+  <div class="feature ">
+      <ul >
+          <li @click="dialogVisible = true">
+              <span>
+                <img :src="new1" alt="">
+                <p>轮播图</p>  
+              </span>
+          </li>
+          <li @click="two = true">
             <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>  
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>  
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>  
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p class="title">轮播图</p>  
-            </span>  
-        </li>
-    </ul>
-    <!-- <el-row :gutter="21" type="flex"  justify="space-around">
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
-    </el-row>
-    <el-row :gutter="21" type="flex"  justify="space-around">
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
-    </el-row>
-    <el-row :gutter="21" type="flex"  justify="space-around">
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
-    </el-row> -->
-</div>    
-</template>
+                <img :src="new1" alt="">
+                <p>医院介绍</p>  
+              </span>  
+          </li>
+          <li @click="three = true">
+            <span>
+                <img :src="new1" alt="">
+                <p>科室介绍</p>  
+              </span>  
+          </li>
+          <li @click="four = true">
+            <span>
+                <img :src="new1" alt="">
+                <p>名医介绍</p>  
+              </span>  
+          </li>
+          <li @click="five = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">科室环境</p>  
+              </span>  
+          </li>
+          <li @click="six = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">文章列表</p>  
+              </span>  
+          </li>
+          <li @click="seven = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">活动列表</p>  
+              </span>  
+          </li>
+          <li @click="eight = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">魔方导航</p>  
+              </span>  
+          </li>
+      </ul>
+  </div>    
+  <div class="clear"></div>
+
+  <!-- 新增轮播图 -->
+  <el-dialog
+    title="新增轮播图"
+    :visible.sync="dialogVisible"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="添加图片: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增医院介绍 -->
+  <el-dialog
+    title="新增医院介绍"
+    :visible.sync="two"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="医院介绍: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="two = false">取 消</el-button>
+      <el-button type="primary" @click="two = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增科室介绍 -->
+  <el-dialog
+    title="新增科室介绍"
+    :visible.sync="three"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="科室介绍: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="three = false">取 消</el-button>
+      <el-button type="primary" @click="three = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增名医介绍 -->
+  <el-dialog
+    title="新增名医介绍"
+    :visible.sync="four"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增名医: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="four = false">取 消</el-button>
+      <el-button type="primary" @click="four = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增科室环境 -->
+   <el-dialog
+    title="新增科室环境"
+    :visible.sync="five"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="five = false">取 消</el-button>
+      <el-button type="primary" @click="five = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增文章列表 -->
+  <el-dialog
+    title="新增文章列表"
+    :visible.sync="six"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="文章分类: ">
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:left;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:right;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="six = false">取 消</el-button>
+      <el-button type="primary" @click="six = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增活动列表 -->
+   <el-dialog
+    title="新增活动列表"
+    :visible.sync="seven"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+     
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="seven = false">取 消</el-button>
+      <el-button type="primary" @click="seven = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增魔方导航 -->
+  <el-dialog
+    title="新增魔方导航"
+    :visible.sync="eight"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="eight = false">取 消</el-button>
+      <el-button type="primary" @click="eight = false">确 定</el-button>
+    </span>
+  </el-dialog>
 
 
+</div>
+</template>
+
 <script>
 export default {
   name: "newfeature",
   data() {
     return {
-      new1: require("../../../assets/preview/new-1.png")
+      new1: require("../../../assets/preview/new-1.png"),
+      dialogVisible: false,
+      two: false,
+      three: false,
+      four: false,
+      five: false,
+      six: false,
+      seven: false,
+      eight: false,
+      form: {
+        name: ""
+      }
     };
   }
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.feature {
-  ul {
-    border: 1px solid #eaeefb;
-    float: left;
-    width: 100%;
-    li {
-      width: 33.3%;
-      float: left;
-      text-align: center;
-      height: 120px;
-      color: #666;
-      font-size: 13px;
-      border-right: 1px solid #eee;
-      border-bottom: 1px solid #eee;
-      margin-right: -1px;
-      margin-bottom: -1px;
-      span {
-        vertical-align: middle;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 120px;
-        img {
-          display: inline-block;
-          font-size: 32px;
-          margin-bottom: 15px;
-          color: #606266;
-          transition: color 0.15s linear;
-          vertical-align: middle;
-        }
-        .title {
-          display: inline-block;
-          padding: 0 3px;
-          height: 30px;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
+
+.clearfix {
+  clear: both;
+}
+
+.el-upload--picture-card {
+  width: 80px !important;
+  height: 80px !important;
+  line-height: 80px !important;
+}
+.tips {
+  font-size: 12px;
+  line-height: 18px;
 }
 </style>

src/scrm_pages/site/components/used-list.vue

+<template>
+<div>
+    <div class="used">
+        <ul>
+            <li>
+                <span class="name">轮播图</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="dialogVisible = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">魔方导航</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="eight = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">医院介绍</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="two = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">科室介绍</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="three = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">名医介绍</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="four = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">科室环境</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="five = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">文章列表</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="six = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">活动列表</span> 
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="seven = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+        </ul>
+    </div>
+
+<!-- 确定删除组件 -->
+    <el-dialog
+        title="删除提示"
+        :visible.sync="deleteList"
+        width="550px"
+        :before-close="handleClose">
+        <span>确认要删除该组件吗？删除后，该组件将无法恢复</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="deleteList = false">取 消</el-button>
+            <el-button type="primary" @click="deleteList = false">确 定</el-button>
+        </span>
+    </el-dialog>
+
+
+  <!-- 新增轮播图 -->
+  <el-dialog
+    title="新增轮播图"
+    :visible.sync="dialogVisible"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="添加图片: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增医院介绍 -->
+  <el-dialog
+    title="新增医院介绍"
+    :visible.sync="two"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="医院介绍: ">
+          <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="two = false">取 消</el-button>
+      <el-button type="primary" @click="two = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增科室介绍 -->
+  <el-dialog
+    title="新增科室介绍"
+    :visible.sync="three"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="科室介绍: ">
+           <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="three = false">取 消</el-button>
+      <el-button type="primary" @click="three = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增名医介绍 -->
+  <el-dialog
+    title="新增名医介绍"
+    :visible.sync="four"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增名医: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="four = false">取 消</el-button>
+      <el-button type="primary" @click="four = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增科室环境 -->
+   <el-dialog
+    title="新增科室环境"
+    :visible.sync="five"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="five = false">取 消</el-button>
+      <el-button type="primary" @click="five = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增文章列表 -->
+  <el-dialog
+    title="新增文章列表"
+    :visible.sync="six"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="文章分类: ">
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:left;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:right;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="six = false">取 消</el-button>
+      <el-button type="primary" @click="six = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增活动列表 -->
+   <el-dialog
+    title="新增活动列表"
+    :visible.sync="seven"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+     
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="seven = false">取 消</el-button>
+      <el-button type="primary" @click="seven = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增魔方导航 -->
+  <el-dialog
+    title="新增魔方导航"
+    :visible.sync="eight"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="eight = false">取 消</el-button>
+      <el-button type="primary" @click="eight = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+
+</div>
+
+</template>
+
+
+<script>
+export default {
+  name: "usedlist",
+  data() {
+    return {
+      deleteList: false,
+      two: false,
+      three: false,
+      four: false,
+      five: false,
+      six: false,
+      seven: false,
+      eight: false,
+      dialogVisible: false,      
+      form: {
+        name: ""
+      }
+    };
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.used {
+  ul {
+    li {
+      height: 44px;
+      line-height: 44px;
+      font-size: 14px;
+      display: flex;
+      color: #606266;      
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #e4e7ed;
+      i {
+        font-size: 19px;
+        margin: 0 6px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/scrm_pages/site/preview.vue

                                  <new-feature> </new-feature>
                             </el-tab-pane>
                             <el-tab-pane label="已使用" name="second">
-
+                                 <used-list></used-list>
                             </el-tab-pane>
                         </el-tabs>
                     </el-tab-pane>
                     <el-tab-pane label="联系我们">
                         <el-tabs v-model="activeName" @tab-click="handleClick">
                             <el-tab-pane label="新增模块" name="three">
-
+                                <add-contact></add-contact>
                             </el-tab-pane>
                             <el-tab-pane label="已使用" name="four">
                                 
 <script> 
 import BreadCrumb from "../components/bread-crumb";
 import NewFeature from "./components/new-feature";
+import UsedList from "./components/used-list";
+import AddContact from "./components/add-contact";
 export default {
   name: "preview",
   components: {
     BreadCrumb,
-    NewFeature
+    NewFeature,
+    UsedList,
+    AddContact
   },
   data() {
     return {

src/scrm_pages/weixinmp/components/CreateKWReplyForm.vue

+<template>
+    <div id="create-kw-reply-form-box">
+        <el-dialog title="添加关键词回复" :visible.sync="createKWReplyFormVisible" width="700px" >
+            <el-form ref="replyForm" :rules="replyRules" :model="form" label-width="90px">
+                <el-form-item label="规则名称:" required prop="message_regular_name">
+                    <el-input v-model="form.message_regular_name"></el-input>
+                </el-form-item>
+                <el-form-item label="模式:" required prop="message_key_type">
+                    <el-radio-group v-model="form.message_key_type">
+                        <el-radio :label="item.id" :value="item.id" v-for="(item, index) in keyTypeOptions" :key="index" >{{item.name}}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="关键字:" required prop="message_key_name">
+                    <el-input v-model="form.message_key_name"></el-input>
+                </el-form-item>
+                <el-form-item label="回复内容:" required prop="message_content">
+                    <el-input v-model="form.message_content" type="textarea" rows="4"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="createKWReplyFormVisible = false">取消</el-button>
+                <el-button
+                type="primary"
+                @click="submitForm('replyForm')"
+                >保 存
+                </el-button>
+            </div>
+        </el-dialog>  
+    </div>
+</template>
+
+<script>
+import {CreateKeyWordReply} from "@/api/mpwechat/mpreply";
+
+export default {
+    name:'CreateReplyForm',
+    props:{
+        replysData:{
+            type: Array,
+            default: function () {
+                return [];
+            }
+        },
+    },
+    data(){
+        return {
+            createKWReplyFormVisible:false,
+            keyTypeOptions:[
+                {id:1, name:'半匹配'},
+                {id:2, name:'全匹配'},
+            ],
+            replyRules: {
+                message_regular_name: [{required: true, message: "请填写规则名称",},],
+                message_key_type: [{required: true, message: "请选择模式",},],
+                message_key_name: [{required: true, message: "请填写关键字",},],
+                message_content: [{required: true, message: "请填写回复内容",},],
+            },
+            form:{
+                message_regular_name:'',
+                message_key_type:1,
+                message_key_name:'',
+                message_content:'',
+            },
+            
+        }
+    },
+    methods:{
+        open:function(){
+            this.resetForm("replyForm");
+            this.createKWReplyFormVisible = true;
+        },
+        resetForm(formName) {
+            if (typeof(this.$refs[formName]) !='undefined') {
+                this.$refs[formName].resetFields();
+            }
+        },
+        submitForm(formName){
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    CreateKeyWordReply(this.form).then(response=>{
+                        var res = response.data;
+                        if(res.state === 1) {
+                            var message = res.data.message;
+                            this.replysData.unshift(message);
+                            this.resetForm("replyForm");
+                            this.createKWReplyFormVisible = false;
+                            this.$message.success("添加成功");
+                        }else {
+                            this.$message.error(res.msg);
+                        }
+                    }).catch(e=>{});
+
+                } else {
+                    return false;
+                }
+            });
+        },
+    }
+}
+</script>
+

src/scrm_pages/weixinmp/components/EditKWReplyForm.vue

+<template>
+    <div id="edit-kw-reply-form-box">
+        <el-dialog title="编辑关键词回复" :visible.sync="editKWReplyFormVisible" width="700px" >
+            <el-form ref="replyForm" :rules="replyRules" :model="form" label-width="90px">
+                <el-form-item label="规则名称:" required prop="message_regular_name">
+                    <el-input v-model="form.message_regular_name"></el-input>
+                </el-form-item>
+                <el-form-item label="模式:" required prop="message_key_type">
+                    <el-radio-group v-model="form.message_key_type">
+                        <el-radio :label="item.id" :value="item.id" v-for="(item, index) in keyTypeOptions" :key="index" >{{item.name}}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="关键字:" required prop="message_key_name">
+                    <el-input v-model="form.message_key_name"></el-input>
+                </el-form-item>
+                <el-form-item label="回复内容:" required prop="message_content">
+                    <el-input v-model="form.message_content" type="textarea" rows="4"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="editKWReplyFormVisible = false">取消</el-button>
+                <el-button
+                type="primary"
+                @click="submitForm('replyForm')"
+                >保 存
+                </el-button>
+            </div>
+        </el-dialog>  
+    </div>
+</template>
+
+<script>
+import {EditKeyWordReply} from "@/api/mpwechat/mpreply";
+
+export default {
+    name:'EditReplyForm',
+    props:{
+        replysData:{
+            type: Array,
+            default: function () {
+                return [];
+            }
+        },
+        replyIndex:{
+            type:Number,
+            default:-1,
+        },
+        form:{
+            id:0,
+            message_regular_name:'',
+            message_key_type:1,
+            message_key_name:'',
+            message_content:'',
+        },
+    },
+    data(){
+        return {
+            editKWReplyFormVisible:false,
+            keyTypeOptions:[
+                {id:1, name:'半匹配'},
+                {id:2, name:'全匹配'},
+            ],
+            replyRules: {
+                message_regular_name: [{required: true, message: "请填写规则名称",},],
+                message_key_type: [{required: true, message: "请选择模式",},],
+                message_key_name: [{required: true, message: "请填写关键字",},],
+                message_content: [{required: true, message: "请填写回复内容",},],
+            },
+            
+        }
+    },
+    methods:{
+        open:function(){
+            this.editKWReplyFormVisible = true;
+        },
+        resetForm(formName) {
+            if (typeof(this.$refs[formName]) !='undefined') {
+                this.$refs[formName].resetFields();
+            }
+        },
+        submitForm(formName){
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    EditKeyWordReply(this.form.id, this.form).then(response=>{
+                        var res = response.data;
+                        if(res.state === 1) {
+                            var message = res.data.message;
+                            this.replysData.splice(this.replyIndex, 1, message);
+                            this.resetForm("replyForm");
+                            this.editKWReplyFormVisible = false;
+                            this.$message.success("编辑成功");
+                        }else {
+                            this.$message.error(res.msg);
+                        }
+                    }).catch(e=>{});
+
+                } else {
+                    return false;
+                }
+            });
+        },
+    }
+}
+</script>
+

src/scrm_pages/weixinmp/components/ImageMaterialBox.vue

+<template>
+    <div id="image-material-box">
+        <el-dialog title="选择图片" :visible.sync="ImageMaterialBoxVisible" width="900px" >
+            <el-row>
+                <el-col :span="24" style="text-align: right;" >
+                    <el-upload
+                        class="media-uploader"
+                        :action="addMaterialUrl"
+                        :show-file-list="false"
+                        :with-credentials='true'
+                        :on-success="handleMediaSuccess"
+                        :before-upload="beforeMediaUpload"
+                        >
+                        <el-button type="primary" size="small" icon="el-icon-upload" >上传图片</el-button>
+                    </el-upload>
+                </el-col>
+            </el-row>
+            <div class="material-box">
+                <div class="mateial-item" v-for="(media, index) in medias" :key="index" @click="selectThis(media.media_id, media.media_url)">
+                    <div class="mateial-item-image" :class="selectId==media.media_id?'active':''">
+                        <img :src="'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url='+media.media_url" alt="" srcset="">
+                    </div>
+                </div>
+            </div>
+            <el-row style="clear:both">
+                <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :page-sizes="[20,50,100]"
+                    :page-size="20"
+                    :current-page="pageParams.page"
+                    background
+                    style="margin-top:20px;"
+                    align="right"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total">
+                </el-pagination>
+            </el-row>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="ImageMaterialBoxVisible = false">取消</el-button>
+                <el-button
+                type="primary"
+                @click="submitSelect"
+                >保 存
+                </el-button>
+            </div>
+        </el-dialog>  
+    </div>
+</template>
+
+<script>
+
+import {GetMaterials} from "@/api/mpwechat/material";
+
+export default {
+    name:'imageMaterialBox',
+    props:{
+        currentMenu:{
+            big_type:0,
+            type:'',
+            name:'',
+            url:'',
+            appid:'',
+            pagepath:'',
+            key:'',//key规则：V_[number]_click;VC_[number]_click
+            message:'',
+            sub_button:[],
+            media_id:'',
+            media_url:'',
+        },
+    },
+    data(){
+        return {
+            addMaterialUrl: process.env.BASE_API + '/api/mpwechat/media/add_material',
+            ImageMaterialBoxVisible:false,
+            medias:[],
+            selectId:'',
+            selectUrl:'',
+            total:0,
+            pageParams:{
+                page:1,
+                limit:20,
+                media_type:'image',
+            },
+        }
+    },
+    methods:{
+        open:function(){
+            
+            this.pageParams={
+                page:1,
+                limit:20,
+                media_type:'image',
+            },
+            
+            this.selectId='',
+            this.selectUrl='',
+            this.GetMaterials();
+            this.ImageMaterialBoxVisible = true;
+        },
+        submitSelect:function(){
+            if (this.selectId.length==0) {
+                this.$message.error('未选择图片');
+                return false;
+            }
+            this.currentMenu.media_id = this.selectId;
+            this.currentMenu.media_url = 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=' +  this.selectUrl;
+            this.ImageMaterialBoxVisible = false;
+        },
+        selectThis(id, url) {
+            this.selectId = id;
+            this.selectUrl = url;
+        },
+        handleSizeChange(limit) {
+            this.pageParams.limit = limit;
+            this.GetMaterials();
+        },
+        handleCurrentChange(page) {
+            this.pageParams.page = page;
+            this.GetMaterials();
+        },
+        handleMediaSuccess:function(res, file) {
+            if (res.state==1) {
+                this.$message.success('上传成功');
+                this.currentMenu.media_url = 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=' + res.data.media.media_url;
+                this.currentMenu.media_id =  res.data.media.media_id;
+                this.pageParams.page = 1;
+                
+                this.selectId='',
+                this.selectUrl='',
+                this.GetMaterials();
+            }else {
+                this.$message.error(res.msg);
+            }
+        },
+        beforeMediaUpload:function(file) {
+            var allow = {"image/bmp":1,"image/png":1,"image/jpeg":1,"image/jpg":1,"image/gif":1};
+            // const isJPG = file.type === 'image/jpeg';
+            const isImg = file.type in allow;
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isImg) {
+                this.$message.error('上传图片只能是 bmp/png/jpeg/jpg/gif 格式!');
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+            }
+            return isImg && isLt2M;
+        },
+        GetMaterials:function(){
+            GetMaterials(this.pageParams).then(response=>{
+                var res = response.data;
+                if (res.state==1) {
+                    this.medias = res.data.medias;
+                    this.total = res.data.total;
+                }
+            }).catch(e=>{});
+        }
+    }
+}
+</script>
+
+<style >
+#image-material-box .mateial-item {
+    float: left;
+    margin: 6px;
+}
+
+#image-material-box  .mateial-item-image {
+    width: 199px;
+    height: 90px;
+    position: relative;
+    border: none;
+    background: #dde1e4;
+    color: #58a2ec;
+    display: block;
+    padding: 4px;
+    line-height: 1.42857143;
+    background-color: #fff;
+    -webkit-transition: border .2s ease-in-out;
+    transition: border .2s ease-in-out;
+}
+
+#image-material-box  .mateial-item .active {
+    border: 1px solid rgb(68, 181, 73);
+}
+#image-material-box  .mateial-item-image img {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>
+

src/scrm_pages/weixinmp/components/replyNav.vue

+<template>
+    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick" style="margin-bottom:10px">
+        <el-tab-pane label="关键词回复" name="keyword"></el-tab-pane>
+        <el-tab-pane label="关注后回复" name="subscribe"></el-tab-pane>
+    </el-tabs>
+</template>
+<script>
+export default {
+    props:{
+        activeName:{
+            type:String,
+            default: 'subscribe'
+        }
+    },
+    data(){
+        return{
+            tabActiveName:'subscribe',
+        }
+    }, 
+    methods:{
+        handleTabClick(tab, event) {
+            this.$router.push({ path: "/weixinmp/reply/"+this.tabActiveName });
+        }
+    },
+    created(){
+        this.tabActiveName = this.activeName
+    },
+}
+</script>
+

src/scrm_pages/weixinmp/keywordreply.vue

+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs='crumbs'></bread-crumb>
+      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate">添加回复</el-button>
+    </div>
+    <div class="app-container">
+        <reply-nav activeName="keyword"></reply-nav>
+        <div style="margin-bottom: 10px">
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <el-input style="width: 300px" v-model="listQuery.search" placeholder="请输入您需要搜索的内容"></el-input>
+                    <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
+            <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
+            <el-button size="small" icon="el-icon-delete" @click="openDeleteReplys">批量删除</el-button>
+        </div>
+        <el-table ref="multipleTable"  @selection-change="handleSelectionChange"  :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="messagesData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
+            <el-table-column
+                align="center"
+                type="selection"
+                width="55">
+             </el-table-column>
+            <el-table-column label="关键词" align="center">
+                <template slot-scope="scope">
+                    {{scope.row.message_key_name}}
+                </template>
+            </el-table-column>
+            <el-table-column label="回复内容" align="center">
+                <template slot-scope="scope">
+                <span>{{scope.row.message_content}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="模式" align="center">
+                <template slot-scope="scope">
+                <span>{{keyTypeName(scope.row.message_key_type)}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+                        <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="openEdit(scope.row, scope.$index)" ></el-button>
+                    </el-tooltip>
+                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="openDelete(scope.row, scope.$index)" ></el-button>
+                    </el-tooltip>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :page-sizes="[10,20,50,100]"
+            :page-size="10"
+            background
+            style="margin-top:20px;"
+            align="right"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+        </el-pagination>
+        <!--添加-->
+        <create-k-w-reply-form ref="createKWReplyForm" :replysData="messagesData" ></create-k-w-reply-form>
+        <!--编辑-->
+        <edit-k-w-reply-form ref="editKWReplyForm" :replysData="messagesData" :replyIndex="replyIndex" :form="editForm"></edit-k-w-reply-form>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {GetKeyWordReplys,DeleteReplys} from "@/api/mpwechat/mpreply";
+  import BreadCrumb from '../components/bread-crumb';
+  import CreateKWReplyForm from './components/CreateKWReplyForm';
+  import EditKWReplyForm from './components/EditKWReplyForm';
+import replyNav from "./components/replyNav";
+
+  export default {
+    name: 'keywordreply',
+    components:{
+      BreadCrumb,
+      replyNav,
+      CreateKWReplyForm,
+      EditKWReplyForm,
+    },
+    data(){
+      return{
+        crumbs: [
+        { path: false, name: "系统设置" },
+        { path: false, name: "关键词回复" }
+        ],
+        total:0,
+        listQuery:{
+            page:1,
+            limit:10,
+            search:'',
+        },
+        checkAllStatus:false,
+        selectedReplys:[],
+        messagesData:[],
+        replyIndex:-1,
+        editForm:{
+            id:0,
+            message_regular_name:'',
+            message_key_type:1,
+            message_key_name:'',
+            message_content:'',
+        },
+      }
+    },
+    methods:{
+        openCreate:function(){
+          this.$refs.createKWReplyForm.open();
+        },
+        openEdit:function(row,index){
+            this.replyIndex = index;
+            for (const key in this.editForm) {
+              this.editForm[key] = row[key];
+            }
+            this.$refs.editKWReplyForm.open();
+        },
+        openDeleteReplys:function(){
+          if (this.selectedReplys.length==0) {
+            this.$message.error("请选择要删除的回复");
+            return false;
+          }
+
+          this.$confirm('确认要删除所选的回复吗？<br>删除后，回复将无法恢复', '删除提示', {
+            dangerouslyUseHTMLString:true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            var ids = [];
+            var idMap = {};
+            for (const index in this.selectedReplys) {
+              ids.push(this.selectedReplys[index].id);
+              idMap[this.selectedReplys[index].id] = this.selectedReplys[index].id;
+            }
+            DeleteReplys({ids:ids}).then(response=>{
+              var res = response.data;
+              if (res.state === 1) {
+                var dataLength = this.messagesData.length;
+                for (let index = dataLength-1; index >= 0; index--) {
+                  if(this.messagesData[index].id in idMap) {
+                    this.messagesData.splice(index, 1);
+                  }                  
+                }
+                this.$message.success("删除成功");
+              }else {
+                this.$message.error(res.msg);
+              }
+            }).catch(e=>{});
+          }).catch(() => {
+            return false        
+          });
+        },
+        openDelete:function(row,index){
+          this.$confirm('确认要删除该回复吗？<br>删除后，该回复将无法恢复', '删除提示', {
+            dangerouslyUseHTMLString:true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            var ids = [];
+            ids.push(row.id);
+            DeleteReplys({ids:ids}).then(response=>{
+              var res = response.data;
+              if (res.state === 1) {
+                this.messagesData.splice(index, 1);
+                this.$message.success("删除成功");
+              }else {
+                this.$message.error(res.msg);
+              }
+            }).catch(e=>{});
+          }).catch(() => {
+            return false        
+          });
+        },
+        changeCheck:function(){
+          this.$refs.multipleTable.clearSelection();
+          if (this.checkAllStatus) {
+            this.$refs.multipleTable.toggleAllSelection();
+          }
+        },
+        handleSelectionChange:function (val) {
+          this.selectedReplys = val;
+        },
+        handleSizeChange(limit) {
+            this.listQuery.limit = limit;
+            this.GetKeyWordReplys();
+        },
+        handleCurrentChange(page) {
+            this.listQuery.page = page;
+            this.GetKeyWordReplys();
+        },
+        changeKey(){
+            this.GetKeyWordReplys();
+        },
+        keyTypeName:function(type){
+          return type == 1?'半匹配':'全匹配';
+        },
+        GetKeyWordReplys(){
+            GetKeyWordReplys(this.listQuery).then(response=>{
+                var res = response.data;
+                if(res.state===1) {
+                    this.messagesData = res.data.messages;
+                    this.total = res.data.total;
+                }
+            }).catch(e=>{})
+        }
+    },
+    computed:{
+    },
+    created(){
+        this.GetKeyWordReplys();
+    }
+  }
+</script>
+
+<style scoped>
+  /*.app-container .cell.clearfix .time ul li {*/
+    /*float: left;*/
+    /*list-style: none;*/
+    /*cursor: pointer;*/
+    /*padding: 6px 20px;*/
+    /*color: #606266;*/
+    /*border-radius: 4px;*/
+    /*margin: 0 8px 0 0;*/
+    /*font-size: 14px;*/
+    /*text-align: center;*/
+  /*}*/
+</style>

src/scrm_pages/weixinmp/menus.vue

       <bread-crumb :crumbs="crumbs"></bread-crumb>
       <el-col :span="5" style="text-align: right;" v-show="initButtons">
         <el-button type="primary" size="small" :disabled="subload" icon="el-icon-upload" @click="submitSave">保存并发布</el-button>
-        <el-button  type="danger" size="small" :disabled="subload" icon="el-icon-delete" >停用菜单</el-button>
+        <el-button  type="danger" size="small" :disabled="subload" icon="el-icon-delete" @click="deleteMenus">停用菜单</el-button>
       </el-col>
     </div>
     <div class="app-container" id="winxin-menus-box">
                             </div> 
                         </li>
 
-                          <li class="jsAddMenu pre_menu_li" v-show="menus.button.length<3">
+                          <li class="jsAddMenu pre_menu_li" v-show="!menus.button||menus.button.length<3">
                               <a href="javascript:void(0);" class="pre_menu_link" @click="addItem(-1)">
                                   <i class="icon_menu_dot "></i>
                                   <span class="js_l1Title_">
                   <div class="menu_form_item menu_more_info" v-show="typeof(currentMenu.sub_button) == 'undefined' || !currentMenu.sub_button || currentMenu.sub_button.length==0">
                       <div class="menu_form__nav clearfix">
                           <label for="" class="tit">菜单内容</label>
-                          <el-radio-group v-model="menuType" class="radio_item" @change="changeMenuType">
+                          <el-radio-group v-model="menuType" class="radio_item" @change="changeBigType">
                             <el-radio v-for="(menu, index) in menuTypeOptions" :key="index" :label="menu.id" :value="menu.id">{{menu.name}}</el-radio>
                           </el-radio-group>
                       </div>
                         <div class="inner send_message " v-show="menuType==1">
                             <div class="send_message_tit">
                                 <div class="send_nav">
-                                    <i class="ico_size"></i>
-                                    文字
+                                    <el-button type="text" icon="el-icon-edit-outline" style="padding:0" :disabled="currentMenu.type=='click'" @click="selectMenuType(1)">文字</el-button>
                                 </div>
+                                <div class="send_nav">
+                                    <el-button type="text" icon="el-icon-picture-outline" style="padding:0" :disabled="currentMenu.type=='media_id'" @click="selectMenuType(2)">图片</el-button>
+                                </div>
+                            </div>
+                            <textarea v-show="currentMenu.type=='click'" class="send_message_edit" id="click_menu_act" v-model="currentMenu.message" placeholder="请输入你需要的文字"></textarea>
+                            <span v-show="currentMenu.type=='click'" class="tips" id="acterrinfo" v-if="!messageError" >&nbsp;&nbsp;{{menuMessageTip}}</span>
+                            <span v-show="currentMenu.type=='click'" class="tips" id="acterrinfo" v-if="messageError"  style="color: #f00;">&nbsp;&nbsp;{{menuMessageTip}}</span>
+                            <div v-show="currentMenu.type=='media_id'" class="mediaID-box">
+                              <el-row>
+                                <el-col :span="12" >
+                                  <div class="mediaID-item">
+                                    <i class="el-icon-news" @click="openMediaBox"></i>
+                                    <span class="icon-name">从素材库选择</span>
+                                  </div>
+                                </el-col>
+                                <el-col :span="12" >
+                                  <div class="mediaID-item">
+                                    <el-upload
+                                      class="media-uploader"
+                                      :action="addMaterialUrl"
+                                      :show-file-list="false"
+                                      :with-credentials='true'
+                                      :on-success="handleMediaSuccess"
+                                      :before-upload="beforeMediaUpload"
+                                      >
+                                      <img v-if="currentMenu.media_url" :src="currentMenu.media_url" class="media">
+                                      <i v-else class="el-icon-plus media-uploader-icon"></i>
+                                    </el-upload>
+                                    <span class="icon-name">上传图片</span>
+                                  </div>
+                                </el-col>
+                              </el-row>
+                              
+                            <span class="tips" id="acterrinfo"  >&nbsp;&nbsp;如果出现：此图片来自微信公众平台，未经允许不可引用！是正常情况</span>
+                              
                             </div>
-                            <textarea class="send_message_edit" id="click_menu_act" v-model="currentMenu.message" placeholder="请输入你需要的文字"></textarea>
-                            <span class="tips" id="acterrinfo" v-if="!messageError" >&nbsp;&nbsp;{{menuMessageTip}}</span>
-                            <span class="tips" id="acterrinfo" v-if="messageError"  style="color: #f00;">&nbsp;&nbsp;{{menuMessageTip}}</span>
                         </div>
                         <div class="inner  jump_page" v-show="menuType==2">
                             <span class="tips_size">订阅者点击该子菜单会跳到以下链接</span>
           </div>
       </div>
     </div>
+    <!--选择图片-->
+    <image-material-box ref="imageMaterialBox" :currentMenu="currentMenu"></image-material-box>
   </div>
 </template>
 
 <script>
 import BreadCrumb from "../components/bread-crumb";
-import {GetAuthorizationInfo,GetMenus,SaveMenus} from "@/api/mpwechat/mpwechat";
+import ImageMaterialBox from "./components/ImageMaterialBox";
+import {GetAuthorizationInfo} from "@/api/mpwechat/mpwechat";
+import {GetMenus,SaveMenus,DeleteMenu} from "@/api/mpwechat/mpmenus";
+
 export default {
   name: "menus",
   components: {
     BreadCrumb,
+    ImageMaterialBox,
   },
   data() {
     return {
         {id:2, name:' 跳转网页'},
         {id:3, name:' 跳转小程序'},
       ],
+      addMaterialUrl: process.env.BASE_API + '/api/mpwechat/media/add_material',
       initButtons:false,
       subload:false,
       menus:{button:[]},
       currentMenu:{
+        big_type:0,
         type:'',
         name:'',
         url:'',
         message:'',
         sub_button:[],
         media_id:'',
+        media_url:'',
       },
       menuType:0,
       currentPatient:-1,
         }
       }).catch(e=>{});
     },
+    openMediaBox:function(){
+      this.$refs.imageMaterialBox.open();
+    },
+    handleMediaSuccess:function(res, file) {
+      if (res.state==1) {
+        this.$message.success('上传成功');
+        this.currentMenu.media_url = 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=' + res.data.media.media_url;
+        this.currentMenu.media_id =  res.data.media.media_id;
+      }else {
+        this.$message.error(res.msg);
+      }
+    },
+    beforeMediaUpload:function(file) {
+      var allow = {"image/bmp":1,"image/png":1,"image/jpeg":1,"image/jpg":1,"image/gif":1};
+      // const isJPG = file.type === 'image/jpeg';
+      const isImg = file.type in allow;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isImg) {
+        this.$message.error('上传图片只能是 bmp/png/jpeg/jpg/gif 格式!');
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+      }
+      return isImg && isLt2M;
+    },
+    deleteMenus:function(){
+      this.$confirm('删除后，公众号的菜单也将被删除', '删除提示', {
+        dangerouslyUseHTMLString:true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        DeleteMenu().then(response=>{
+          var res = response.data;
+          if (res.state==1) {
+            this.$message.success('删除成功');
+            this.currentMenu = {
+              type:'',
+              name:'',
+              url:'',
+              appid:'',
+              pagepath:'',
+              key:'',//key规则：V_[number]_click;VC_[number]_click
+              message:'',
+              sub_button:[],
+              media_id:'',
+              media_url:'',
+              big_type:0
+            };
+            this.currentPatient = -1;
+            this.currentChild = -1;
+            this.menus = {button:[]};
+          }else {
+            this.$message.error(res.msg);
+          }
+        }).catch(e=>{});
+      }).catch(() => {
+      });
+    },
     submitSave:function () {
         this.subload = true;
         var res = this.checkMenus();
               message:'',
               sub_button:[],
               media_id:'',
+              media_url:'',
+              big_type:0
             };
           }
         }
             this.menus = res.data.menus;
             for (const index in this.menus.button) {
               var button = this.menus.button[index];
+              this.menus.button[index]['big_type'] = typeof(button.type) !='undefined' && button.type ? this.setBigType(button.type):0;
               if(typeof(button.key) !='undefined' && button.key) {
                 var keys = button.key.split("_")
                 if (typeof(keys[1]) !='undefined') {
               if(typeof(button.sub_button) !='undefined' && button.sub_button) {
                 for (const chilid in button.sub_button) {
                   var cbutton = button.sub_button[chilid];
+                  this.menus.button[index].sub_button[chilid]['big_type'] = typeof(cbutton.type) !='undefined' && cbutton.type ? this.setBigType(cbutton.type):0;
                   if(typeof(cbutton.key) !='undefined' && cbutton.key) {
                     var keys = cbutton.key.split("_")
                     if (typeof(keys[1]) !='undefined') {
           break;
       }
     },
-    changeMenuType:function(value){
+    setBigType(type) {
+       var bitType = 0;
+       switch (this.currentMenu.type) {
+        case 'click':
+          bitType = 1;
+          break;
+        case 'media_id':
+          bitTypee = 2;
+          break;
+      }
+      return bitType;
+    },
+    changeBigType:function(value){
+      // this.currentMenu.big_type = value;
       switch (value) {
         case 1:
-          this.currentMenu.type = 'click';
+          if (this.currentMenu.big_type == 1 ) {
+            this.currentMenu.type = 'click';
+          } else if (this.currentMenu.big_type == 2) {
+            this.currentMenu.type = 'media_id';
+          } else {
+            this.currentMenu.type = 'click';
+          }
           break;
         case 2:
           this.currentMenu.type = 'view';
           break;
       }
     },
+    selectMenuType:function(type){
+      this.currentMenu.big_type = type;
+      if(type==1) {
+        this.currentMenu.type = 'click';
+      }else if(type==2) {
+        this.currentMenu.type = 'media_id';
+      }
+    },
     selectItem:function(mi, ni, node){
       this.currentPatient = mi;
       this.currentChild = ni;
         message:'',
         sub_button:[],
         media_id:'',
+        media_url:'',
+        big_type:0,
       };
       for (const key in node) {
         this.currentMenu[key] = node[key]; 
       }
     },  
     'currentMenu.type':function(){
+
       if (this.currentPatient>=0&&this.currentChild>=0) {
         this.menus.button[this.currentPatient].sub_button[this.currentChild].type = this.currentMenu.type;
+        this.menus.button[this.currentPatient].sub_button[this.currentChild].big_type = this.currentMenu.big_type;
         if (this.currentMenu.type == 'click' && this.currentMenu.key.length==0) {
           this.cclick += 1;
           var key = 'VC_' + this.cclick + "_click";
         }
       } else if (this.currentPatient>=0){
         this.menus.button[this.currentPatient].type = this.currentMenu.type;
+        this.menus.button[this.currentPatient].big_type = this.currentMenu.big_type;
         if (this.currentMenu.type == 'click' && this.currentMenu.key.length==0) {
           this.pclick += 1;
           var key = 'V_' + this.cclick + "_click";
       }
       this.CheckPagePathError();
     },  
+    'currentMenu.media_id':function(){
+      if (this.currentPatient>=0&&this.currentChild>=0) {
+        this.menus.button[this.currentPatient].sub_button[this.currentChild].media_id = this.currentMenu.media_id;
+      } else if (this.currentPatient>=0){
+        this.menus.button[this.currentPatient].media_id = this.currentMenu.media_id;
+      }
+    },
+    'currentMenu.media_url':function(){
+      if (this.currentPatient>=0&&this.currentChild>=0) {
+        this.menus.button[this.currentPatient].sub_button[this.currentChild].media_url = this.currentMenu.media_url;
+      } else if (this.currentPatient>=0){
+        this.menus.button[this.currentPatient].media_url = this.currentMenu.media_url;
+      }
+    },
     'currentMenu.message':function(){
       var len = $.trim(this.currentMenu.message+'').length; 
       var mt = 600-len;
 };
 </script>
 
-<style scoped>
+<style >
 #winxin-menus-box {
   font-size: 14px;
   color: #485b6d;
 }
 #winxin-menus-box .menu_form_item .send_message_tit .send_nav {
     width: 80px;
+    display: inline-block;
 }
 #winxin-menus-box .menu_form_item .send_message_tit .ico_size {
     width: 14px;
 #winxin-menus-box .menu_form__con .mitips {
   display:block;left:84px;position:relative;margin-top:10px;color: #c0c8d4;
 }
+#winxin-menus-box .mediaID-item {
+    text-align: center;
+    padding: 10px;
+    /* cursor: pointer; */
+}
+
+#winxin-menus-box .mediaID-item .el-icon-news{
+  
+    cursor: pointer;
+}
+
+/* #winxin-menus-box .mediaID-item:hover {
+  background:#c0c8d4;
+}  */
+#winxin-menus-box .mediaID-item i {
+  display: block;
+    width: 80px;
+    margin: 0 auto;
+}
+#winxin-menus-box .mediaID-item .el-icon-news {
+  font-size: 80px;
+}
+#winxin-menus-box .mediaID-item .media-uploader .el-upload {
+  border: 1px dashed #d9d9d9 !important;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  margin: 10px;
+}
+#winxin-menus-box .mediaID-item  .media-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+#winxin-menus-box .mediaID-item .media-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 155px;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+}
+#winxin-menus-box .mediaID-item  .media {
+  width: 155px;
+  height: 70px;
+  display: block;
+}
+
 /*.app-container .cell.clearfix .time ul li {*/
 /*float: left;*/
 /*list-style: none;*/

src/scrm_pages/weixinmp/subscribereply.vue

+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+    </div>
+    <div class="app-container" id="winxin-subscribe-replu-box">
+      <reply-nav activeName="subscribe"></reply-nav>
+      <el-form ref="form" :model="form" >
+        <el-form-item label="">
+          <el-input type="textarea" v-model="form.message_content" rows='5'></el-input>
+        </el-form-item>
+        <el-form-item>
+          <!-- <el-col :span="24" style="text-align: right;"> -->
+            <el-button type="primary" align="right" @click="saveReply">保存</el-button>
+          <!-- </el-col> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import BreadCrumb from "../components/bread-crumb";
+import replyNav from "./components/replyNav";
+import {GetAuthorizationInfo} from "@/api/mpwechat/mpwechat";
+import {GetSubscribeRplay,SaveSubscribeRplay} from "@/api/mpwechat/mpreply";
+
+export default {
+  name: "subscribereply",
+  components: {
+    BreadCrumb,
+    replyNav,
+  },
+  data() {
+    return {
+      crumbs: [
+        { path: false, name: "系统设置" },
+        { path: false, name: "关注后回复" }
+      ],
+      initReply:false,
+      form:{
+        'message_content':'',
+      },
+    };
+  },
+  methods: {
+    GetAuthorizationInfo:function(){
+      GetAuthorizationInfo().then(response=>{
+        var res =  response.data;
+        if(res.state===1) {
+          if(res.data.authorization) {
+            this.authData = res.data.authorization;
+            if (this.authData.authorizer_status != 1) {
+              this.$message.error("公众号未授权");
+              this.$router.push({path:"/weixinmp/authorization"})
+              return false;
+            }else if (this.authData.authorizer_verify_type_info>=0 || this.authData.authorizer_service_type_info==2) {
+              this.initReply = true;
+            }
+          }else {
+              this.$message.error("公众号未授权");
+              this.$router.push({path:"/weixinmp/authorization"})
+          }
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    },
+    GetSubscribeRplay:function(){
+      GetSubscribeRplay().then(response=>{
+        var res = response.data;
+        if (res.state==1) {
+          if (res.data.message) {
+            this.form.message_content = res.data.message.message_content;
+          }
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    },
+    saveReply:function(){
+      SaveSubscribeRplay(this.form).then(response=>{
+        var res = response.data;
+        if (res.state === 1) {
+          this.$message.success('保存成功');
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    }
+  },
+  created() {
+    this.GetAuthorizationInfo();
+  },
+  computed:{
+  },
+  watch:{
+    'initReply':function(){
+      this.GetSubscribeRplay();
+    }
+  },
+};
+</script>
+
+<style scoped>
+/*.app-container .cell.clearfix .time ul li {*/
+/*float: left;*/
+/*list-style: none;*/
+/*cursor: pointer;*/
+/*padding: 6px 20px;*/
+/*color: #606266;*/
+/*border-radius: 4px;*/
+/*margin: 0 8px 0 0;*/
+/*font-size: 14px;*/
+/*text-align: center;*/
+/*}*/
+</style>

src/styles/index.scss

   color: #C0C4CC;
   padding: 0 3px;
 }
+
+// 微网站-新增模块
+.feature {
+  ul {
+    border: 1px solid #eaeefb;
+    float: left;
+    width: 100%;
+    li {
+      width: 33.3%;
+      float: left;
+      text-align: center;
+      height: 120px;
+      color: #666;
+      font-size: 13px;
+      border-right: 1px solid #eee;
+      border-bottom: 1px solid #eee;
+      margin-right: -1px;
+      margin-bottom: -1px;
+      span {
+        vertical-align: middle;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 120px;
+        cursor: pointer;
+        img {
+          display: inline-block;
+          font-size: 32px;
+          margin-bottom: 15px;
+          color: #606266;
+          transition: color 0.15s linear;
+          vertical-align: middle;
+        }
+        .title {
+          display: inline-block;
+          padding: 0 3px;
+          height: 30px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}

src/views/layout/Layout.vue

     <div class="main-container">
       <tags-view></tags-view>
       <app-main></app-main>
+      <contact-box></contact-box>
     </div>
    </div>
   </div>
 
 <script>
 import { Navbar, Sidebar, AppMain, TagsView } from './components'
+import ContactBox from '@/scrm_pages/contactBox';
 import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
     Navbar,
     Sidebar,
     AppMain,
-    TagsView
+    TagsView,
+    ContactBox,
   },
   mixins: [ResizeMixin],
   computed: {

src/xt_permission.js

 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
-const loginWhiteList = ['/token/verify', '/401', '/404'] // 登录验证白名单
+const loginWhiteList = ['/token/verify', '/401', '/404', "/activity/preview"] // 登录验证白名单
 const permissionWhiteList = loginWhiteList.concat(['/']) // 权限验证白名单
 
 router.beforeEach((to, from, next) => {