feat(report): 集成一键举报功能

components/Common/ComplaintsDeal.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+import CONFIG from '@/config'
+import { mapGetters, mapActions } from 'vuex'
+import { CUSTOM_SOURCE_TYPE } from '@/utils/constant'
+
+export default {
+  name: 'ComplaintsDeal',
+  computed: {
+    ...mapGetters({
+      isLogin: 'users/isLogin'
+    })
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
+    init() {
+      const { uin, id } = this.$route.query
+      if (typeof complaintsDeal === 'undefined') {
+        return null
+      }
+      // eslint-disable-next-line no-undef
+      complaintsDeal({
+        target: document.body,
+        props: {
+          // defaultEntryPosition: {
+          //   right: '10px',
+          //   bottom: '10%',
+          //   zIndex: 1
+          // },
+          uin,
+          url: window.location.href,
+          company: '管理员',
+          pageId: id,
+          pageType: CUSTOM_SOURCE_TYPE.vote,
+          env: CONFIG.env,
+          beforeShow: next => {
+            if (this.isLogin) {
+              next()
+            } else {
+              const self = this
+              this.$toast({
+                message: '请先登录',
+                duration: 1500,
+                onClose() {
+                  if (process.client && window.self !== window.top) return
+                  self.jumpToLogin()
+                }
+              })
+            }
+          },
+          afterSuccessSub: next => {
+            this.$toast('提交成功，感谢您的反馈')
+            next()
+          },
+          afterFailSub: res => {
+            res.statusText && this.$toast(res.statusText)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+</style>

components/Lottery/Instant/CountdownBar.vue

@@ -24,7 +24,7 @@
           </template>
         </van-count-down>
       </template>
-      <template v-if="parseInt(status, 10) === LOTTERY_STATUS.end">抽奖已结束</template>
+      <div v-if="parseInt(status, 10) === LOTTERY_STATUS.end" class="countdown-bar__end">抽奖已结束</div>
     </div>
   </section>
 </template>
@@ -113,5 +113,9 @@ export default {
     font-size: 13px;
     font-weight: 400;
   }
+  &__end{
+    width: 100%;
+    text-align: center;
+  }
 }
 </style>

nuxt.config.js

@@ -13,8 +13,9 @@ const env = Object.assign(globalEnvConfig, envConfig)
 const WebpackAliOSSPlugin = require('@gdyfe/webpack-alioss-plugin')
 const time = WebpackAliOSSPlugin.getFormat('YYMMDD')
 
-const flag = process.env.NODE_ENV === 'production' && !env.private
-const plugins = flag
+const PROJECT_NAME = 'lottery'
+const IS_USE_OSS = process.env.NODE_ENV === 'production' && !env.private
+const plugins = IS_USE_OSS
   ? [
       // 优化打包速度
       new WebpackAliOSSPlugin({
@@ -22,7 +23,7 @@ const plugins = flag
         accessKeySecret: 'rsWsmunIglT1NqYUNe8fvbjl02UqTk',
         region: 'oss-cn-hangzhou',
         bucket: `guangdianyun-static-${env.run_server}`,
-        prefix: 'lottery',
+        prefix: PROJECT_NAME,
         limit: 10, // 备份最近 3 个版本的 oss 文件
         format: time,
         exclude: [/.*\.html$/], // 或者 /.*\.html$/,排除.html文件的上传
@@ -32,6 +33,7 @@ const plugins = flag
       })
     ]
   : []
+const REMOTE_OSS_DOMAIN = `//static-${env.run_server}.guangdianyun.tv`
 
 export default {
   buildDir: 'nuxt-dist',
@@ -77,6 +79,7 @@ export default {
         ssr: false
       },
       { rel: 'icon', href: `${env.OSS_DOMAIN}/common/img/gdy_favicon.png` },
+      { rel: 'stylesheet', href: `${REMOTE_OSS_DOMAIN}/web-component/complaintsDeal/complaintsDeal.min.css` },
       {
         href: '//apiliveroom.dev.guangdianyun.tv/v1',
         rel: 'dns-prefetch'
@@ -98,7 +101,7 @@ export default {
         rel: 'dns-prefetch'
       }
     ],
-    script: []
+    script: [{ src: `${REMOTE_OSS_DOMAIN}/web-component/complaintsDeal/complaintsDeal.min.js`, defer: true }]
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
@@ -143,7 +146,7 @@ export default {
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
     publicPath: !env.private
-      ? `//static-${env.run_server}.guangdianyun.tv/lottery/${time}`
+      ? `${REMOTE_OSS_DOMAIN}/${PROJECT_NAME}/${time}`
       : `/${env.X_CA_STAGE.toLowerCase() || 'prod'}/`,
     transpile: [/vant.*?less/],
     babel: {

pages/index/index.vue

@@ -4,6 +4,7 @@
       :is="lotteryComponents[parseInt(lotteryInfo.type, 10)]"
       v-if="'type' in lotteryInfo && lotteryInfo.type"
     ></component>
+    <ComplaintsDeal></ComplaintsDeal>
     <Loading v-model="isLoading" class="lottery-box__loading"></Loading>
   </section>
 </template>
@@ -14,10 +15,13 @@ import { LOTTERY_TYPE } from '@/utils/constant'
 import Bus from '@/utils/Bus'
 import UserAgents from '@/utils/UserAgents'
 import CONFIG from '@/config'
+import ComplaintsDeal from '@/components/Common/ComplaintsDeal'
+
 
 export default {
   components: {
-    Loading: () => import('@/components/Loading')
+    Loading: () => import('@/components/Loading'),
+    ComplaintsDeal
   },
   data() {
     return {