feat(SPA): 增加 QQ 在线咨询可选功能

Author: mutoe

resources/spa/.env.example

@@ -31,3 +31,8 @@ VUE_APP_LBS_GAODE_KEY=
 # MobLink 唤起APP
 VUE_APP_MOBLINK_ENABLE=false
 VUE_APP_MOBLINK_KEY=
+
+# QQ 在线咨询
+VUE_APP_QQ_CONSULT_ENALBE=false
+VUE_APP_QQ_CONSULT_UIN=
+VUE_APP_QQ_CONSULT_LABEL=在线咨询

resources/spa/README.md

@@ -69,8 +69,20 @@
 使用时请填写 `.env` 文件中的以下两行
 
 ``` ini
-VUE_APP_MOBLINK_ENABLE=true                           # MobLink 引导启动 APP 开关
-VUE_APP_MOBLINK_KEY=xxxxxxxxxxxx                      # MobLink APP KEY
+# MobLink 唤起APP
+VUE_APP_MOBLINK_ENABLE=true          # MobLink 引导启动 APP 开关
+VUE_APP_MOBLINK_KEY=xxxxxxxxxxxx     # MobLink APP KEY
+```
+
+### 在线咨询 QQ
+
+使用时请修改 `.env` 文件中的以下部分以唤起 QQ 在线资讯
+
+``` ini
+# QQ 在线咨询
+VUE_APP_QQ_CONSULT_ENALBE=true       # QQ 咨询开关
+VUE_APP_QQ_CONSULT_UIN=10000         # QQ 号码 （需要先开通在线状态）
+VUE_APP_QQ_CONSULT_LABEL=在线咨询      # 标签文本
 ```
 
 ## License

resources/spa/src/app.js

@@ -1,5 +1,6 @@
 // vuex utils
 import { mapActions, mapState } from 'vuex'
+import CONST from './constants/app'
 
 // components
 import PSWP from './components/pswp'
@@ -13,6 +14,7 @@ import Report from './components/Report.vue'
 import ChooseTags from './page/ChooseTags.vue'
 import ApplyTop from './components/ApplyForTop.vue'
 import PopupDialog from './components/PopupDialog.vue'
+import ChatWithQQ from './components/vendor/ChatWithQQ.vue'
 
 export default {
   render () {
@@ -31,7 +33,8 @@ export default {
           <Report />
           <ChooseTags />
           <ApplyTop />
-          <PopupDialog />
+          <PopupDialog />,
+          {CONST.ENABLE_QQ_CONSULT && <ChatWithQQ />}
         </div>
       </div>
     )

resources/spa/src/components/vendor/ChatWithQQ.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="c-chat-with-qq" @click="onChatClick">
+    <img :src="require('@/images/ico_consult.png')" alt="">
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatWithQQ',
+  data () {
+    return {
+      label: process.env.VUE_APP_QQ_CONSULT_LABEL || '在线咨询',
+    }
+  },
+  methods: {
+    onChatClick () {
+      const uin = process.env.VUE_APP_QQ_CONSULT_UIN
+      if (!uin) return this.$Message.error('没有配置正确的UIN')
+      window.open(`//wpa.qq.com/msgrd?v=3&uin=${uin}&site=qq&menu=yes`)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@margin: 20px;
+@width: 90px;
+
+.c-chat-with-qq {
+  position: fixed;
+  right: @margin;
+  bottom: @margin+100px;
+  display: flex;
+  flex-direction: column;
+  width: @width;
+  border-radius: 6px;/*no*/
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); /*no*/
+  background-color: rgba(255,255,255,.9);
+  overflow: hidden;
+
+  img {
+    width: @width;
+    height: @width;
+  }
+
+  span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 2.3*@width;
+    writing-mode: vertical-lr;
+    letter-spacing: 4px;/*no*/
+  }
+}
+</style>

resources/spa/src/constants/app.js

@@ -4,4 +4,5 @@ export default {
   ENABLE_SERVICE_WORKER: boolean(process.env.VUE_APP_ENABLE_SERVICE_WORKER || false),
   ENABLE_MOBLINK: boolean(process.env.VUE_APP_MOBLINK_ENABLE || false),
   ENABLE_GAODE: process.env.VUE_APP_LBS_GAODE_KEY || false,
+  ENABLE_QQ_CONSULT: boolean(process.env.VUE_APP_QQ_CONSULT_ENALBE || false),
 }