Jelajahi Sumber

完成公众号登录、初步处理登录后的逻辑

Joe 4 tahun lalu
induk
melakukan
8b3e7d95a8
7 mengubah file dengan 187 tambahan dan 54 penghapusan
  1. 5 0
      assets/util/index.js
  2. 20 8
      layouts/default.vue
  3. 50 37
      pages/authen.vue
  4. 16 9
      pages/point/index.vue
  5. 4 0
      settings.js
  6. 70 0
      store/authen.js
  7. 22 0
      store/user.js

+ 5 - 0
assets/util/index.js

@@ -0,0 +1,5 @@
+import settings from "../../settings"
+export const getAuthen = () =>{
+  const path = window.location.pathname === "/authen" ? "/" : window.location.pathname
+  window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + settings.appId + "&redirect_uri=http%3a%2f%2fwww.onlyfido.top%2fauthen&response_type=code&scope=snsapi_userinfo&state="+ path +"#wechat_redirect"
+}

+ 20 - 8
layouts/default.vue

@@ -4,16 +4,28 @@
   </div>
 </template>
 <script>
+import Vue from "vue";
+import { mapGetters } from "vuex";
+Vue.mixin({
+  computed:{
+    ...mapGetters({
+      openId: "authen/openId",
+      accessToken: "authen/accessToken",
+      unionId: "authen/unionId",
+      stationId: "authen/stationId",
+    })
+  }
+})
 export default {
     mounted() {
-    console.log(this);
-     (function() {
-      var hm = document.createElement("script");
-      hm.src = "http://res.wx.qq.com/open/js/jweixin-1.6.0.js";
-      var s = document.getElementsByTagName("script")[0];
-      s.parentNode.insertBefore(hm, s);
-    })();
-    console.log(window)
+    // console.log(this);
+    //  (function() {
+    //   var hm = document.createElement("script");
+    //   hm.src = "http://res.wx.qq.com/open/js/jweixin-1.6.0.js";
+    //   var s = document.getElementsByTagName("script")[0];
+    //   s.parentNode.insertBefore(hm, s);
+    // })();
+
   },
 }
 </script>t

+ 50 - 37
pages/authen.vue

@@ -1,45 +1,58 @@
 <template>
-  <div>
-  123
-  </div>
+  <div>123</div>
 </template>
 
 <script>
-  import Vue from 'vue';
-  export default Vue.extend({
-    head() {
-      return {
-        title: '认证过渡页面'
-      }
-    },
-    data() {
-      return {
-      };
-    },
-    // created() {
-    //   console.log(this.$route.query);
-    //   this.stationId = this.$route.query.stationId;
-    //   this.stationName = this.$route.query.stationName;
-    //   this.gasNum = this.$route.query.gasNum;
-    //   this.oilName = this.$route.query.oilName;
-    //   this.account = this.$route.query.account;
-    // },
-    mounted() {
-      console.log("route");
-      console.log(this.$route)
-      console.log(this.$route.query);
-      console.log("this")
-      // console.log(this.$axios.$get("/getGzhAuthorizeInfo",{
-      //   params: {
-      //     code:this.$route.query.code,
-      //     stationId:"1"
-      //   }
-      // }))
-
-    },
-    methods: {
+import Vue from "vue";
+import { getAuthen } from "../assets/util";
+export default Vue.extend({
+  head() {
+    return {
+      title: "认证",
+    };
+  },
+  data() {
+    return {
+      redirect: "",
+    };
+  },
+  mounted() {
+    this.redirect = this.$route.query.state;
+    if (!this.$route.query.code) {
+      getAuthen();
+    } else {
+      this.$axios
+        .$get("/getGzhAuthorizeInfo", {
+          params: {
+            code: this.$route.query.code,
+            stationId: this.stationId,
+          },
+        })
+        .then((res) => {
+          if (res.retCode === 0) {
+            this.$store.dispatch("authen/setBaseData", {
+              openId: res.data.openid,
+              accessToken: res.data.access_token,
+              unionId: res.data.unionid,
+            });
+            this.handleGoto();
+          }
+        })
+        .catch((res) => {
+          alert("catch");
+          getAuthen();
+        });
     }
-  })
+  },
+  methods: {
+    handleGoto() {
+      console.log(this.redirect);
+      this.$router.replace({
+        path: this.redirect,
+      });
+    },
+  },
+});
 </script>
 
 <style lang="less">

+ 16 - 9
pages/point/index.vue

@@ -15,7 +15,7 @@
           <img src="../../static/point/shangcheng.png" alt="" />
           <span>积分商城</span>
         </nuxt-link>
-        <nuxt-link class="item item2"  to="/point/bill" tag="div">
+        <nuxt-link class="item item2" to="/point/bill" tag="div">
           <img src="../../static/point/mingxi.png" alt="" />
           <span>积分明细</span>
         </nuxt-link>
@@ -28,14 +28,14 @@
         <img src="../../static/test/new.png" alt="" />
       </nuxt-link>
       <div class="show">
-        <product-list/>
+        <product-list />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ProductList from "../../components/ProductList"
+import ProductList from "../../components/ProductList";
 export default {
   head() {
     return {
@@ -51,14 +51,21 @@ export default {
       refreshing: false, //是否正在上拉刷新
     };
   },
-  components:{
-    ProductList
+  components: {
+    ProductList,
   },
   beforeCreate() {},
   created() {},
   beforeMount() {},
   mounted() {
-    console.log(this);
+    // this.$axios.$get("/getCustomerPointsInfo", {
+    //   params: {
+    //     unionId: this.$store.state.anthen.unionId,
+    //     stationId: this.$store.state.anthen.stationId,
+    //   },
+    // }).then((res)=>{
+    //   console.log(res)
+    // });
   },
   beforeUpdate() {},
   updated() {},
@@ -114,13 +121,13 @@ export default {
   top: 8vw;
   margin: 0;
   padding: 0;
-height: 0.4rem;
-font-size: 0.28rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #ffffff;
 
-line-height: 0.4rem;
+  line-height: 0.4rem;
 }
 .point-index .background .top .point {
   position: absolute;

+ 4 - 0
settings.js

@@ -0,0 +1,4 @@
+export default {
+  appId:"wxc8189d3b3a7283e0",
+  stationId:1
+}

+ 70 - 0
store/authen.js

@@ -0,0 +1,70 @@
+import settings from '../settings'
+import { getAuthen } from '../assets/util'
+
+
+
+// 带Origin后缀的通过getter获取
+export const state = () => ({
+  openIdOrigin: "oJR5R6gWNpGre5hfPXkFvcdBhIrE",
+  accessTokenOrigin: "",
+  unionIdOrigin: "",
+  userInfoOrigin: {},
+  stationIdOrigin: settings.stationId,
+})
+
+export const getters = {
+  openId:(state)=> {
+    if(!state.openIdOrigin){
+      getAuthen()
+    }
+    return state.openId
+  },
+  accessToken:(state)=>{
+    if(!state.accessToken){
+      getAuthen()
+    }
+    return state.accessToken
+  },
+  unionId:(state)=>{
+    if(!state.unionId){
+      getAuthen()
+    }
+    return state.unionId
+  },
+  userInfo:(state)=>state.userInfoOrigin,
+  stationId:(state)=>state.stationIdOrigin,
+
+}
+
+export const mutations = {
+  setOpenId(state, openId) {
+    state.openIdOrigin = openId
+  },
+  setAccessToken(state, accessToken) {
+    state.accessTokenOrigin = accessToken
+  },
+  setUnionId(state, unionId) {
+    state.unionIdOrigin = unionId
+  },
+  setUserInfo(state, userInfo) {
+    state.userInfoOrigin = userInfo
+  }
+}
+
+export const actions = {
+  setBaseData({ commit, state }, info) {
+    commit("setOpenId", info.openId)
+    commit("setAccessToken", info.accessToken)
+    commit("setUnionId", info.unionId)
+    this.$axios.$get("/getGzhUserInfo", {
+      params: {
+        openId: info.openId,
+        stationId: state.stationId
+      }
+    }).then((res) => {
+      if (res.retCode === 0) {
+        commit("setUserInfo", res.data)
+      }
+    })
+  }
+}

+ 22 - 0
store/user.js

@@ -0,0 +1,22 @@
+// import settings from '../settings'
+// export const state = () => ({
+//   user:{}
+// })
+
+// export const mutations = {
+//   setUser(state,user){
+//     state.user = user
+//   }
+// }
+
+// export const actions = {
+//   getUserInfo({rootState}, info){
+//     console.log(rootState)
+//     this.$axios.$get("/getGzhUserInfo", {params:{
+//       openId:rootState.authen.openId,
+//       stationId:settings.stationId
+//     }}).then((res)=>{
+//       console.log(res)
+//     })
+//   }
+// }