節前一個朋友找我叫我幫他做一個微信線上客服的系統。其實微信公眾號是有線上客服功能的，只是這個功能算是最基本的吧。之前我們公司使用過智齒，後來到期了就沒做了。這次又有機會用第三方的客服系統就記錄下來。

需求：

1.使用者開啟微信公眾號，點選線上客服，使用者可以選擇指定的客服聊天(微信客服是不支援的);
2.微信公眾號聊天自動轉入第三方客服接入。
公眾號介面：

微信介面-客服列表

在做之前看了一下七魚的開發指南。發現沒有獲取客服人員列表的介面，後來線上諮詢了一下七魚的人，發現確實沒有這個介面，這樣就很尷尬了。意味著客服列表介面的客服資訊，需要手動從七魚去貼上複製，每次七魚上面客服資訊有異動就都需要手動修改一次這個介面的資料。不知道七魚為什麼不開放這個介面。具體開發請詳看文件。
比如有些公司，不同客服負責的地理區域或者產品類別不一樣，但是客戶在微信裡面聊天就只能是客服看見訊息後先判斷是不是自己負責的，如果不是還需要轉接其他客服。假如直接讓客戶去選擇對應的客服就可以節省很多時間和提高效率了。這個需求我也和七魚的人員反饋了。
既然七魚沒有，就只能自己像辦法解決了。我的做法是自己做一個PC介面，讓公眾號管理員，去新增和修改客服資訊。這樣公眾號管理員幾不需要修改程式碼層面上的東西了。

解決：

1.手機端
手機端這個只有 一個介面，就是客服人員列表介面，具體的聊天介面是七魚自帶的。
。手機端介面的實現就不在具體貼程式碼了。
2.PC端
PC端也就是一個列表頁面加一個彈框

為了介面的好看和寫程式碼方便還是使用了vue.js + element-ui。這裡並沒有使用腳手架vue-cli。也順便做了一個登陸頁面，嘿嘿，你懂的。
3.後臺
後臺部分，鄙人不才只會一些Node.js，就用Node.js擼出來了。
一個七牛雲的圖片上傳介面，
客服的：新增，刪除，修改，獲取。也就是對應Mysql的增改查，刪除客服人員只是修改了一個欄位值，沒從資料庫刪除。這些介面程式碼就不貼出來了。
全部做出來，今天上午半天就搞定了，還順便做了一個使用說明，其實就是貼幾張圖而已。

體會

做這個深刻的體會到了一點就是：儘量不要讓不懂程式碼的人去修改程式碼層面的東西。從朋友那邊瞭解到，他的客戶不懂程式碼這些，如果讓他們去修改配置或者程式碼風險很大。所以就自己辛苦一點，多做一點，讓客戶省時省事。如果網易七魚有獲取客服列表的功能，那麼PC端就省去了，如果介面可以前臺呼叫，Node.js也省去了，還好這個不難，半天全部搞定並部署。接下來就是教客戶使用了。