关注公众号进行中

src/api/weixin/index.js

@@ -0,0 +1,30 @@
+import {
+  service
+} from "../../utils/service";
+import {
+  localPath
+} from "../api.js";
+
+// 获取微信公众号access_token
+export function getAccessToken() {
+  return service({
+    url: "/weixinApi" + "/cgi-bin/token?grant_type=client_credential&appid=wx3c108aae98b1433c&secret=9ed5097e93b5a0e909dbe2b347d068ac",
+    method: "get",
+  });
+}
+// 根据微信公众号access_token获取ticket
+export function getTicket(accessToken, data) {
+  return service({
+    url: "/weixinApi" + "/cgi-bin/qrcode/create?access_token=" + accessToken,
+    method: "post",
+    data
+  });
+}
+// 通过ticket换取二维码
+export function getQrCode(data) {
+  return service({
+    url: "/weixinMp" + "/cgi-bin/showqrcode?ticket=" + data,
+    method: "get",
+    responseType: "blob"
+  });
+}

src/pages/discount-coupon/issue/components/Tencent.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <iframe src="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3c108aae98b1433c&redirect_uri=www.decaisoft.com&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect" id="mobsf" scrolling="no" frameborder="0" style="border: 1px solid #ccc"></iframe>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    };
+  },
+  mounted() {
+    /**
+    * iframe-宽高自适应显示
+    */
+    function changeMobsfIframe() {
+      const mobsf = document.getElementById('mobsf');
+      const deviceWidth = document.body.clientWidth;
+      const deviceHeight = document.body.clientHeight;
+      // mobsf.style.width = (Number(deviceWidth) - 240) + 'px'; //数字是页面布局宽度差值
+      // mobsf.style.height = (Number(deviceHeight) - 64) + 'px'; //数字是页面布局高度差
+      mobsf.style.width = '150px'; //数字是页面布局宽度差值
+      mobsf.style.height = '150px'; //数字是页面布局高度差
+    }
+
+    changeMobsfIframe()
+
+    window.onresize = function () {
+      changeMobsfIframe()
+    }
+  },
+  methods: {
+  },
+}
+</script>
+<style scoped>
+</style>

src/pages/discount-coupon/issue/components/edit.vue

@@ -106,12 +106,14 @@
 
 <script>
 import ActiveImg from './activeImg'
+import Tencent from './Tencent'
 import Store from '@/components/mulStore/index'
 import Project from '@/components/mulProject/index'
 import { partten } from "@/utils/partten/index.js";
+import { getAccessToken, getTicket, getQrCode } from "@/api/weixin/index.js";
 export default {
   name: 'Form',
-  components: { ActiveImg, Store, Project },
+  components: { ActiveImg, Tencent, Store, Project },
   data() {
     return {
       form: {
@@ -119,6 +121,7 @@ export default {
         useStoreList: [],
         projectList: [],
       },
+      qrCode: null,
       rules: {
         couponName: [
           { required: true, message: '请输入优惠券名称', trigger: 'blur' },
@@ -176,10 +179,38 @@ export default {
         ],
         imageUrl: [{ required: true, message: '请上传活动图片', trigger: ['blur', 'change'] }],
         guaranteeMoney: [{ required: true, message: '请输入保证金', trigger: ['blur', 'change'] }],
+        qrCode: [{ required: true, message: '请关注公众号', trigger: ['blur', 'change'] }],
       },
     }
   },
+  created() {
+    this.fetchAccessToken()
+  },
   methods: {
+    // ============================== 查询 ============================== //
+    // 获取微信公众号access_token
+    fetchAccessToken() {
+      getAccessToken().then(res => {
+        console.log('access_token', res);
+        if (res.expires_in == 7200) {
+          this.fetchTicket(res.access_token)
+        }
+      })
+    },
+    // 根据微信公众号access_token获取ticket
+    fetchTicket(data) {
+      getTicket(data, { "expire_seconds": 1800, "action_name": "QR_SCENE", "action_info": { "scene": { "scene_id": 1800 } } }).then(res => {
+        console.log('ticket', res);
+        this.fetchQrCode(res.ticket)
+      })
+    },
+    // 通过ticket换取二维码
+    fetchQrCode(data) {
+      getQrCode(data).then(res => {
+        console.log('QrCode', window.URL.createObjectURL(res));
+        this.qrCode = window.URL.createObjectURL(res)
+      })
+    },
     // ============================== 操作 ============================== //
     // 编辑
     handleData(row) {

src/pages/discount-coupon/issue/index.vue

@@ -32,20 +32,21 @@ export default {
     }
   },
   created() {
-    if (this.$route.params.id) {
+    // this.getAuthorize();
-      this.active = 1
+    // if (this.$route.params.id) {
-      this.$nextTick(function () {
+    //   this.active = 1
-        this.$refs.edit.handleData(this.$route.params)
+    //   this.$nextTick(function () {
-      });
+    //     this.$refs.edit.handleData(this.$route.params)
-    } else {
+    //   });
-      this.$nextTick(function () {
+    // } else {
-        this.$refs.edit.handleData({
+    //   this.$nextTick(function () {
-          couponNumber: 1,
+    //     this.$refs.edit.handleData({
-          useStoreList: [],
+    //       couponNumber: 1,
-          projectList: [],
+    //       useStoreList: [],
-        })
+    //       projectList: [],
-      });
+    //     })
-    }
+    //   });
+    // }
   },
   watch: {
     $route(to, from) {
@@ -87,6 +88,53 @@ export default {
         });
       }
     },
+    // =================================== 获取code =================================== //
+    getAuthorize() {
+      // 此方法用来判断是不是在微信中打开
+      // const isWechat = () => {
+      //   let ua = window.navigator.userAgent.toLowerCase();
+      //   return ua.match(/MicroMessenger/i) == 'micromessenger';
+      // }
+      //是微信中打开，则进行一下操作
+      // if(isWechat){
+      //先判断有没有授权(判断地址栏code，有就-用户同意了授权，没有-没授权或者拒绝授权)
+      var str = this.getUrlParam("code"); //此处使用的是history路由模式，hash这么拿不到。this.getUrlParam()方法在下面
+      console.log('获取到了 ', str);
+
+      if (str) {
+        // 走后端接口(把code传给后台，让后台根据code获取openID与用户信息)
+        // console.log('str',str);
+        //  通过code 获取openid
+        axios.get('你的url' + "/api/code",
+          {
+            params: {
+              code: str,
+              state: '123'
+            },
+          }
+        ).then(response => {
+          console.log('response', response.data);
+          localStorage.setItem("openid", response.data.openid);// 此处我将openid 进行了存储
+        })
+
+      } else {
+        var appid = 'wx3c108aae98b1433c' //你关联的微信公众号的appid;
+        var redirect_uri = window.location.href //获取到code 后返回的页面路径地址;
+        var newRedirect = encodeURIComponent(redirect_uri); // 此处需要将你的回调页面进行转码，此方法直接使用
+
+        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + newRedirect + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
+      }
+      // }
+    },
+    //获取url中的参数
+    getUrlParam(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+      var r = window.location.search.substr(1).match(reg);  //匹配目标参数
+      if (r != null) {
+        return unescape(r[2]);
+      }
+      return null; //返回参数值
+    },
   },
 }
 </script>

src/utils/service.js

@@ -1,9 +1,17 @@
 import axios from "axios";
-import { Message, MessageBox } from "element-ui";
+import {
+  Message,
+  MessageBox
+} from "element-ui";
 // import { getToken, removeToken, setToken } from "@/utils/token";
-import { getCookie, delCookie } from "./utils.js";
+import {
+  getCookie,
+  delCookie
+} from "./utils.js";
 import router from "../router/index.js";
-import { name } from "../../config/dev.env.js";
+import {
+  name
+} from "../../config/dev.env.js";
 let base = "/api";
 let baseURL = base;
 // 根据环境变量对host进行判断
@@ -15,7 +23,7 @@ axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
 // const rLoading = this.openLoading();
 // 创建axios实例
 const service = axios.create({
-  baseURL: baseURL,
+  // baseURL: baseURL,
   timeout: 15000 // 请求超时时间
 });
 // request拦截器
@@ -148,4 +156,6 @@ service.interceptors.response.use(
   }
 );
 // export default service;
-export { service };
+export {
+  service
+};