投票流程大改

src/common/http.js

@@ -9,7 +9,18 @@ const getToken = () => {
   return !!vuex ? JSON.parse(vuex).user.token : null
 }
 const source = axios.CancelToken.source();
+let throttleMap = {}
 instance.interceptors.request.use(config => {
+  if (config.throttle) {// 节流处理
+    let timer = throttleMap[config.url]
+    if (!!timer) {
+      config.cancelToken = source.token
+      source.cancel("节流控制,取消请求:" + config.url)
+    }
+    throttleMap[config.url] = setTimeout(() => {
+      throttleMap[config.url] = null
+    }, config.throttle)
+  }
   if (config.withoutToken) {
     return config
   } else if (getToken()) {

src/common/modules.js

@@ -156,6 +156,7 @@ export const user = {
       let {module} = params, action = "/auth/wechat-mp/token"
       return http.post(action, params, {
         withoutToken: true,
+        throttle: 500,
         module,
         params: {
           ...params, grant_type: 'password',

src/project/fengdu/AppVote/AppVote.vue

@@ -16,12 +16,17 @@
     <AiGroup noBorder description>
       <u-parse :html="detail.ending"/>
     </AiGroup>
+    <weixin-login :autoShow="!user.token" content="投票需要您授权您的微信信息" @login="getList"/>
   </section>
 </template>
 
 <script>
+import {mapState} from "vuex"
+import WeixinLogin from "./weixinLogin";
+
 export default {
   name: "AppVote",
+  components: {WeixinLogin},
   appName: "公众投票",
   data() {
     return {
@@ -29,6 +34,9 @@ export default {
       list: []
     }
   },
+  computed: {
+    ...mapState(['user']),
+  },
   methods: {
     getDetail() {
       this.$http.post("/app/appvideovoteconfig/queryDetailByCorpId", null, {
@@ -41,7 +49,7 @@ export default {
     },
     getList() {
       this.$http.post("/app/appvideoinfo/list", null, {
-        withoutToken: true,
+        withoutToken: !this.user.token,
         param: {size: 20}
       }).then(res => {
         if (res?.data) {

src/project/fengdu/AppVote/voteDetail.vue

@@ -10,14 +10,17 @@
         <div class="text circle mar-l16" :class="{disabled:canotVote}" @click="handleVote">投票</div>
       </div>
     </AiBottomBtn>
+    <weixin-login :autoShow="showWxLogin" @login="handleVote"/>
   </section>
 </template>
 
 <script>
-import {mapState, mapActions, mapMutations} from "vuex"
+import {mapState} from "vuex"
+import WeixinLogin from "./weixinLogin";
 
 export default {
   name: "voteDetail",
+  components: {WeixinLogin},
   appName: "投票详情",
   computed: {
     ...mapState(['user']),
@@ -26,12 +29,11 @@ export default {
   },
   data() {
     return {
-      detail: {}
+      detail: {},
+      showWxLogin: false
     }
   },
   methods: {
-    ...mapActions(['getWechatToken', 'getCode']),
-    ...mapMutations(['setToken']),
     getDetail() {
       const {id} = this.$route.query
       this.$http.post("/app/appvideoinfo/queryDetailById", null, {params: {id}, withoutToken: !this.user.token}).then(res => {
@@ -43,11 +45,7 @@ export default {
     },
     handleVote() {
       if (!this.user.token) {//未登录,获取openId和token
-        this.$http.get("/app/appdvcpconfig/getMpAppid", {withoutToken: true}).then(res => {
-          if (res?.code == 0 && res?.data) {
-            this.getCode({scope: "snsapi_userinfo", appid: res.data})
-          }
-        })
+        this.showWxLogin = true
       } else {//已登录,直接投票
         if (!this.canotVote) {
           const {id} = this.$route.query
@@ -65,12 +63,6 @@ export default {
   },
   onShow() {
     this.getDetail()
-    if (!!this.wxCode) {
-      this.getWechatToken({module: "AppVote", code: this.wxCode}).then(this.handleVote)
-    }
-  },
-  destroyed() {
-    this.setToken(null)
   }
 }
 </script>
@@ -87,7 +79,8 @@ export default {
   ::v-deep video {
     width: 100%;
   }
-  ::v-deep.topLabel{
+
+  ::v-deep.topLabel {
     padding-right: 20px;
   }
 }

src/project/fengdu/AppVote/weixinLogin.vue

@@ -0,0 +1,69 @@
+<template>
+  <section class="weixinLogin">
+    <u-modal v-model="show" :content="content" confirm-text="去授权" cancel-text="仅浏览" show-cancel-button :show-title="false"
+             @confirm="handleConfirm" @cancel="handleCancel"/>
+  </section>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex"
+
+export default {
+  name: "weixinLogin",
+  props: {
+    content: {default: "是否要进行微信授权?"},
+    autoShow: Boolean
+  },
+  computed: {
+    ...mapState(['user']),
+    wxCode: v => v.$route.query.code,
+  },
+  data() {
+    return {
+      show: false,
+      appid: ""
+    }
+  },
+  methods: {
+    ...mapActions(['getWechatToken', 'getCode']),
+    handleConfirm() {
+      this.$http.get("/app/appdvcpconfig/getMpAppid", {withoutToken: true}).then(res => {
+        if (res?.code == 0 && res?.data) {
+          this.getCode({scope: "snsapi_userinfo", appid: res.data})
+        }
+      })
+    },
+    handleCancel() {
+      this.show = false
+    },
+    autoLogin() {
+      if (!this.user.token) this.getWechatToken({code: this.wxCode}).then(() => this.$emit("login")).catch(() => {
+        setTimeout(() => uni.showModal({
+          content: "是否要重新加载页面?",
+          success: res => {
+            if (!!res?.confirm) {
+              const redirect = this.$qs.parseUrl(location.href)
+              delete redirect.query.code
+              delete redirect.query.state
+              location.replace(this.$qs.stringifyUrl(redirect))
+            }
+          }
+        }), 500)
+      })
+    }
+  },
+  watch: {
+    autoShow: {
+      immediate: true,
+      handler(v) {
+        this.wxCode ? this.autoLogin() : this.show = !!v
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.weixinLogin {
+}
+</style>