完成XGL微信授权

.env.prod

@@ -1,6 +1,17 @@
+// 生产环境
 NODE_ENV = 'production'
+
+// 入口地址
 VUE_APP_BASE_URL = 'https://cdn.xglpa.com/tcubic/pdf/'
+
+// 业务接口
 VUE_APP_API = 'https://cdn.xglpa.com/tcubic/pdf/'
+
+// CDN地址
 VUE_APP_CDN = 'https://cdn.xglpa.com/tcubic/pdf/'
-VUE_APP_APPID = '1aeedce2a31340e591a5d64080d6105b'
-VUE_APP_ACTIVITYID = '20220510563146'
+
+// XGL授权接口
+VUE_APP_XGL_DOMAIN = https://wealth.newone.com.cn
+
+// 招商证券授权接口
+VUE_APP_ZS_DOMAIN = https://wealth.newone.com.cn

.env.test

@@ -1,6 +1,17 @@
+// 测试环境
 NODE_ENV = 'test'
-VUE_APP_BASE_URL = 'https://hd.xglpa.com/zszq-celebration/activity/'
+
+// 入口地址
+VUE_APP_BASE_URL = 'https://test.szxgl.cn/zszq-celebration/activity/'
+
+// 业务接口
 VUE_APP_API = 'https://test.szxgl.cn/zszq-celebration'
+
+// CDN地址
 VUE_APP_CDN = 'https://test.szxgl.cn/zszq-celebration/activity/'
-VUE_APP_APPID = '1aeedce2a31340e591a5d64080d6105b'
-VUE_APP_ACTIVITYID = '20220510563146'
+
+// XGL授权接口
+VUE_APP_XGL_DOMAIN = 'https://test.szxgl.cn/zszq-celebration/zsApi/xfhdAuthorize'
+
+// 招商证券授权接口
+VUE_APP_ZS_DOMAIN = 'https://wealth.newone.com.cn'

deploy.config.js

@@ -10,7 +10,7 @@ module.exports = {
     host: '39.108.110.167', // 服务器地址
     port: 22, // 服务器端口号
     username: 'root', // 服务器登录用户名
-    password: 'XfhdTest123', // 服务器登录密码
+    password: 'xFhD@Test123', // 服务器登录密码
     distPath: 'dist', // 本地打包生成目录
     webDir: "/mnt/services/tomcat-8090-test/webapps/zszq-celebration/activity",  // test替换自己实际项目目录 服务器部署路径（不可为空或'/'）
     isRemoveRemoteFile: true // 是否删除远程文件（默认true）

src/api/authorize-api.js

@@ -0,0 +1,127 @@
+import axios from 'axios'
+import qs from 'qs'
+
+const domain_zs = process.env.VUE_APP_ZS_AUTHORIZE_DOMAIN;
+const domain_xgl = process.env.VUE_APP_XGL_AUTHORIZE_DOMAIN;
+///////////////////////////
+
+// get || post 请求方法封装
+function get(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios
+            .get(url, {
+                params: params
+            })
+            .then(res => {
+                resolve(res.data)
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+    // 或者return axios.get();
+}
+/**
+ * post方法，对应post请求
+ * @param {String} url [请求的url地址]
+ * @param {Object} params [请求时携带的参数]
+ */
+function post(url, params) {
+    return new Promise((resolve, reject) => {
+        axios
+            .post(url, qs.stringify(params))
+            .then(res => {
+                resolve(res.data)
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+    //  或者return axios.post();
+}
+
+
+
+// 1.公众号网页授权
+// 请求方法：get请求
+// 请求链接：/wxauth/official/account/authorize
+// 请求参数：
+// 	    redirectUrl 请求链接
+// 	    scope 授权类型：0用户授权，1静默授权
+// 返回值：无
+// 备注：回调页面URL后可能携带参数：token、userid、forceauth。
+//      先取token，如有，表示登录成功（登录成功userid会有值），
+//      如token无值，取forceauth，为1时表示需要进行0-用户授权跳转。
+function get_authorize() {
+    let href = window.location.href
+    let h_idx = window.location.href.indexOf('#')
+    let out_href = href.slice(0, h_idx)
+
+    window.location.href = `${domain_xgl}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`
+}
+
+
+// 2.获取微信公众号jssdk
+// 请求方法：get请求
+// 请求链接：/wxauth/official/account/jssdk/get
+// 请求参数：
+// url 请求链接
+function get_jssdk(url, params) {
+    // Bus.debug && (params.openid = Bus.testOpenId)
+    // return readyGet(domain_zs + "/wxauth/official/account/jssdk/get", params)
+    return new Promise((resolve, reject) => {
+        axios
+            .get(url, {
+                params: params
+            })
+            .then(res => {
+                resolve(res.data)
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+
+}
+
+function getOpenId(code) {
+    return new Promise((reslove, reject) => {
+        utils.rebuildAjax.post(process.env.VUE_APP_BASE_URL + 'cott-acts/api/wx/oauthInfo', {
+            code
+        }).then((res) => {
+            if (res.ret == 0) {
+                Vue.prototype.$userInfo = {
+                    openid: res.data.openid,
+                    nickname: res.data.nickname,
+                    headimgurl: res.data.headimgurl
+                };
+                reslove();
+            } else {
+                location.replace(window.location.protocol + '//' + window.location.host + window.location.pathname)
+            }
+        })
+    })
+
+}
+
+// 获取wx 授权 code
+function getCode(activityId, gameId, rankType) {
+    let redirect_uri = `${window.location.protocol}//${window.location.host + window.location.pathname}?activityId=${activityId}&gameId=${gameId}&rankType=${rankType}`;
+    utils.rebuildAjax.post(process.env.VUE_APP_BASE_URL + 'cott-acts/api/wx/getOAuthUrl', {
+        redirect_uri
+    }).then((res) => {
+        if (res.ret == 0) {
+            console.log(res.url)
+            location.replace(res.url);
+        }
+    })
+}
+
+
+
+
+
+export {
+    get_authorize,
+    get_jssdk,
+}

src/components/Index.vue

@@ -1,63 +1,144 @@
 <template>
-    <div class="welcomePage">
-        <div @click="btn">招商证券88司庆活动</div>
+    <div class="indexPage">
+        <div>招商证券88司庆活动</div>
+        <div @click="auth">点击授权</div>
+        <div>授权信息：{{ authData }}</div>
     </div>
 </template>
 
 <script setup>
-import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
+import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs, getCurrentInstance, computed } from 'vue'
 import gsap from "gsap";
 import axios from 'axios'
-import { Toast } from 'vant';
+import { Toast, Dialog } from 'vant';
+import { useStore } from "vuex";
+import { get_authorize, get_jssdk } from '@/api/authorize-api'
+import service from "@/api/httpServe"
+import qs from 'qs'
+import h5plugin from '@/utils/plugin'
+
 
 
 // 初始化
-const emit = defineEmits(["welcomePage"]); // 声明触发事件，对应父组件上面的方法
+const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore()  //初始化vuex
+const { proxy } = getCurrentInstance();  //初始化全局方法：plugin工具箱
 
 
+const authData = ref('')
+const authCode = ref('')
+
 
 // 页面挂载前
 onBeforeMount(() => { })
 
 
 
-
-
 // 页面挂载后
-onMounted(() => { })
+onMounted(() => {
+    console.log("用户活动信息：", store.state.userAccount);
+    console.log("api:", process.env.VUE_APP_XGL_DOMAIN);
+
+
+    console.log('code:', h5plugin.getQueryString('code'));
+
+    if (h5plugin.getQueryString('code')) {
+        authCode.value = h5plugin.getQueryString('code')
+
+        console.log("存在code");
+        getOpenId(authCode.value)
+    } else {
+        getCode()
+    }
+
+})
 
 const btn = () => {
-    Toast('项目开发中');
+    // Toast('项目开发中');
+    emit('indexPage', 'hello')
+
+
+
+
+
+    Dialog.alert({
+        title: '招商证券88司庆活动',
+        message: '项目开发中',
+        confirmButtonText: '确定',
+        showCancelButton: true,
+    }).then((e) => {
+
+        // 更新openid
+        store.commit({ type: 'updateOpenid', openid: 'openid110' })
+
+
+        console.log(e, store.state.userAccount);
+    }).catch((e) => {
+        console.log(e);
+    });
 }
 
 
+const auth = () => {
+    // get_authorize()
+    // let api = get_jssdk(process.env.VUE_APP_XGL_AUTHORIZE_DOMAIN)
+
+    // service.get('/zsApi/xfhdAuthorize')
+    //     .then((res) => {
+    //         console.log("结果：", res);
+    //         authData.value = res.data
+    //     })
+
+    getCode()
+}
+
+// getCode
+const getCode = () => {
+    // let redirect_uri = `${window.location.protocol}//${window.location.host + window.location.pathname}?activityId=${activityId}&gameId=${gameId}&rankType=${rankType}`;
+    let redirect_uri = window.location.href;
+    service.post(process.env.VUE_APP_API + '/zsApi/xfhdAuthorize', qs.stringify({
+        redirect_uri: redirect_uri
+
+    })).then((res) => {
+
+        let code = res.data.data
+        authCode.value = res.data.data
+
+        window.location.href = res.data.data
+
+    })
+}
+
+// getOpenid
+const getOpenId = (code) => {
+
+    service.post(process.env.VUE_APP_API + '/zsApi/oauthInfo', qs.stringify({
+        code: code
+    })).then((res) => {
+
+    })
+}
+
+
+
 
 </script>
 
 <style lang="scss" scoped>
-.welcomePage {
+.indexPage {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #000;
+    flex-wrap: wrap;
+    flex-direction: column;
+}
 
-
-    .video_container {
-        width: 80%;
-
-        .video {
-            width: 100%;
-
-
-        }
-    }
-
-
-
-
-
+span {
+    color: rgb(255, 0, 0);
+    font-weight: 700;
 }
 </style>

src/components/MyPrize.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="myPrizeCon">
+
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
+import gsap from "gsap";
+import axios from 'axios'
+import { Toast } from 'vant';
+import { useStore } from "vuex";
+
+// 初始化
+const emit = defineEmits(["welcomePage"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore()
+
+
+// 页面挂载前
+onBeforeMount(() => { })
+
+
+
+
+
+// 页面挂载后
+onMounted(() => {
+
+})
+
+
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.welcomePage {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #000;
+
+
+    .video_container {
+        width: 80%;
+
+        .video {
+            width: 100%;
+
+
+        }
+    }
+
+
+
+
+
+}
+</style>

src/page/Home/Home.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="homePage">
-    <Index />
+    <!-- 加载页 -->
+
+    <!-- 首页 -->
+    <Index @indexPage="indexPage" />
   </div>
 </template>
 
@@ -18,17 +21,14 @@ import Index from "@/components/Index"
 onBeforeMount(() => { });
 
 // 页面挂载
-onMounted(() => {
+onMounted(() => { });
+
+
+// 来自首页的事件
+const indexPage = (actions) => {
+  console.log("来自index组件：", actions);
+}
 
-  // 微信分享
-  const optionShare = {
-    title: '2022中国中产女性财富管理及幸福指数报告', // 分享标题
-    desc: ' ', // 分享描述
-    link: process.env.VUE_APP_BASE_URL + 'index.html', // 分享链接
-    imgUrl: process.env.VUE_APP_CDN + 'share.jpg', // 分享图标
-  }
-  wxShare(optionShare)
-});
 </script>
 
 <style lang="scss" scoped>

src/page/Home/main.js

@@ -5,15 +5,26 @@ import App from './Home.vue'
 import Vue from 'vue'
 import store from '@/store'
 import "amfe-flexible"
+import h5plugin from '@/utils/plugin'
 
 
 import VConsole from 'vconsole'
-const vConsole = new VConsole();
 
 
 // 注册全局方法
 const app = createApp(App);
 
+app.config.globalProperties.$H5Plugin = h5plugin;
+
+// 测试环境微信端才展示vconsole
+if (h5plugin.isMobile() && h5plugin.isWX() && process.env.NODE_ENV == "test") {
+    const vConsole = new VConsole();
+
+}
+
+console.log("环境：", process.env.NODE_ENV)
+
+
 // app.use(router)
 app.use(store)
 app.mount('#app')

src/store/index.js

@@ -2,37 +2,33 @@ import { createStore } from 'vuex';
 import h5plugin from "@/utils/plugin.js"
 
 export default createStore({
+    // 数据源
     state: {
-        userProgress: {
-            pass1IsComplete: 0,    //第一题完成情况
-            pass2IsComplete: 0,    //第二题完成情况
-            pass3IsComplete: 0,    //第三题完成情况
-            pass1IsDraw: 0,        //第一题抽奖情况
-            pass2IsDraw: 0,        //第二题抽奖情况
-            pass3IsDraw: 0,        //第三题抽奖情况
-            pass1Prize: '',         //第一题抽奖结果
-            pass2Prize: '',         //第二题抽奖结果
-            pass3Prize: '',         //第三题抽奖结果
-        },        //用户进度
-        openId: '',             //用户openid
-        openToken: '',             //用户openToken
-        pass1IsComplete: '',    //第一题完成情况
-        pass1IsDraw: '',        //第一题抽奖情况
-        pass1Prize: '',         //第一题抽奖结果
-        pass2IsComplete: '',    //第二题完成情况
-        pass2IsDraw: '',        //第二题抽奖情况
-        pass2Prize: '',         //第二题抽奖结果
-        pass3IsComplete: '',    //第三题完成情况
-        pass3IsDraw: '',        //第三题抽奖情况
-        pass3Prize: '',         //第三题抽奖结果
+        userAccount: {
+            openid: 'openid12138',      //用户openid
+            token: 'token12138',        //用户token
+            isDraw: false,              //是否抽过奖
+            isHasAccount: false,        //是否存在牛卡号
+            isAddCustomer: false,       //是否添加过服务人员
+            isHasPrize: [],             //是否存在奖品
+
         },
-    // 改变方法
+
+    },
+    // 计算
+    getters: {},
+
+    // 改变方法(同步)：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)
     mutations: {
-        updateOpenid(state) {
-            // state.openid = changVal
-            // console.log(state.openid);
+        // 更新openid
+        updateOpenid(state, val) {
+            console.log("update");
+            state.userAccount.openid = val.openid
+
         }
     },
+    // 改变方法：异步
     actions: {},
+    // 模块化
     modules: {},
 })

src/utils/plugin.js

@@ -5,13 +5,23 @@ const h5plugin = {
     isWX() {
         var ua = window.navigator.userAgent.toLowerCase();
         if (ua.match(/MicroMessenger/i) == 'micromessenger') {
-            console.log("微信环境");
+
             return true;
         } else {
-            console.log("非微信环境");
+
             return false;
         }
     },
+
+    // 判断是否移动端
+    isMobile() {
+        let userAgentInfo = navigator.userAgent;
+        let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
+        let getArr = Agents.filter(i => userAgentInfo.includes(i));
+        return getArr.length ? true : false;
+    },
+
+
     // 判断微博环境
     isWeibo() {
         var ua = window.navigator.userAgent.toLowerCase();
@@ -260,6 +270,8 @@ const h5plugin = {
 
 
 
+
+
 }
 
 export default h5plugin;

vue.config.js

@@ -49,7 +49,18 @@ module.exports = {
     // 开启gzip压缩
     configureWebpack: config => {
         const plugins = [];
-        if (IS_PROD) {
+        // if (IS_PROD) {
+        //     plugins.push(
+        //         new CompressionWebpackPlugin({
+        //             filename: "[path].gz[query]",
+        //             algorithm: "gzip",
+        //             test: productionGzipExtensions,
+        //             threshold: 10240,
+        //             minRatio: 0.8
+        //         })
+        //     );
+
+        // }
         plugins.push(
             new CompressionWebpackPlugin({
                 filename: "[path].gz[query]",
@@ -59,8 +70,6 @@ module.exports = {
                 minRatio: 0.8
             })
         );
-
-        }
         config.plugins = [...config.plugins, ...plugins];
     },