解绑绑定微信

src/common/wxLogin.js

@@ -0,0 +1 @@
+!function(e,t){e.WxLogin=function(n){var r="default";!0===n.self_redirect?r="true":!1===n.self_redirect&&(r="false");var o=t.createElement("iframe"),s="https://open.weixin.qq.com/connect/qrconnect?appid="+n.appid+"&scope="+n.scope+"&redirect_uri="+n.redirect_uri+"&state="+n.state+"&login_type=jssdk&self_redirect="+r+"&styletype="+(n.styletype||"")+"&sizetype="+(n.sizetype||"")+"&bgcolor="+(n.bgcolor||"")+"&rst="+(n.rst||"");s+=n.style?"&style="+n.style:"",s+=n.href?"&href="+n.href:"",s+="en"===n.lang?"&lang=en":"",s+=1===n.stylelite?"&stylelite=1":"",s+=0===n.fast_login?"&fast_login=0":"",o.src=s,o.frameBorder="0",o.allowTransparency="true",o.scrolling="no",o.width="300px",o.height="400px";var i=t.getElementById(n.id);if(i.innerHTML="",i.appendChild(o),e.addEventListener&&e.JSON&&n.onReady&&"function"==typeof n.onReady){var a=function(t){if("https://open.weixin.qq.com"===t.origin)try{var r=JSON.parse(t.data);if(r&&"status"===r.type){var o="wxReady"===r.status;o&&n.onReady(o)}}catch(t){e.console&&"function"==typeof e.console.log&&e.console.log("wxLogin postMessage error",t)}};e.addEventListener("message",a,!1);var l=!1;n.onCleanup=function(){!l&&e.removeEventListener&&(e.removeEventListener("message",a,!1),l=!0)}}}}(window,document);

src/components/pages/data.vue

@@ -141,6 +141,10 @@
               <!-- <el-option >学生 </el-option> -->
             </el-select>
           </el-form-item>
+          <el-form-item label="微信登录" prop="type">
+            <el-button type="danger" size="small" @click="wxLogin" v-if="ruleForm.thirdpartyid">取消绑定</el-button>
+            <el-button type="primary" size="small" @click="wxLogin" v-else>绑定微信</el-button>
+          </el-form-item>
           <!-- <el-form-item label="个人简介" prop="intro">
             <el-input
               v-model="ruleForm.intro"
@@ -203,10 +207,27 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      title="绑定微信"
+      :visible.sync="wechatDialogVisible"
+      :append-to-body="true"
+      width="400px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div class="fa_weChat">
+        <div id="QRcode" class="QRcode" ref="QRcode"></div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="wechatDialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import '@/common/wxLogin.js'
+
 export default {
   data() {
     var validatePass = (rule, value, callback) => {
@@ -273,6 +294,7 @@ export default {
           },
         ],
       },
+      wechatDialogVisible: false,
     };
   },
   methods: {
@@ -434,6 +456,94 @@ export default {
           console.error(err);
         });
     },
+    handleClose(done) {
+      done();
+    },
+    wxLogin() {
+      if(this.ruleForm.thirdpartyid){
+        this.$confirm("确定取消绑定微信吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.ajax.post(this.$store.state.api + "UpdateOpenId", [
+            { userid: this.userid, openid: '' },
+          ]).then((res) => {
+            this.$message.success("取消绑定成功");
+            this.getUser();
+          }).catch((err) => {
+            this.$message.error("取消绑定失败");
+            console.error(err);
+          })
+        })
+        .catch(() => {
+          
+        });
+      }else {
+        this.wechatDialogVisible = true;
+        this.wechatLogin();
+      }
+    },
+    wechatLogin() {
+      setTimeout(() => {
+          const randomState = Math.random().toString(36).substring(2); // 生成随机状态
+          // eslint-disable-next-line no-undef
+          new WxLogin({
+            self_redirect: true,
+            id: "QRcode",
+            appid: "wxe9d7fff3c659445f",
+            scope: "snsapi_login",
+            redirect_uri: encodeURIComponent("https://cocorobo.cn/weixin.html"), //https://liyuan.cocorobo.cn/#/wxTest
+            state: randomState,
+            style: "black",
+            href: "data:text/css;base64,LmltcG93ZXJCb3gge2Rpc3BsYXk6IGZsZXg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMycHg7IGhlaWdodDogMjMycHh9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30KLmxvZ2luUGFuZWx7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTtkaXNwbGF5OmZsZXg7ZmxleC1kaXJlY3Rpb246Y29sdW1uO2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQoud2ViX3FyY29kZV9wYW5lbF9hcmVhe2hlaWdodDoxMDAlO3dpZHRoOjEwMCU7ZGlzcGxheTpmbGV4O2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO30K",
+            onReady: function (isReady) {
+              console.log(isReady);
+            },
+          });
+          setTimeout(() => {
+            let iframe = this.$refs.QRcode.querySelector("iframe");
+            iframe.style.width = "100%";
+            iframe.style.height = "100%";
+          }, 0);
+        }, 0);
+    },
+    setOpenId(openid) {
+      this.ajax.post(this.$store.state.api + "UpdateOpenId", [
+        { userid: this.userid, openid: openid },
+      ]).then((res) => {
+        this.$message.success("绑定成功");
+        this.wechatDialogVisible = false;
+        this.getUser();
+      }).catch((err) => {
+        this.$message.error("绑定失败请重新扫码");
+        console.error(err);
+      })
+    }
+  },
+  mounted() {
+    let _this = this;
+		window.addEventListener("message", function (e) {
+			// 监听 message 事件
+			console.log(e);
+			if (e.data && e.data.method == "getOpenId") {
+				console.log(e);
+				console.log(e.data.code);
+				console.log(_this.loginType);
+
+				if (e.data.code == 200) {
+					_this.setOpenId(e.data.data.openid);
+				} else {
+          _this.$message.error("扫码登录失败请重新扫码");
+          _this.wechatDialogVisible = false;
+          setTimeout(() => {
+            _this.wechatDialogVisible = true;
+            _this.wechatLogin();
+          }, 1000);
+				}
+			}
+		});
   },
   created() {
     this.getSchool();
@@ -576,4 +686,46 @@ export default {
 .el-form-item >>> .el-select {
   width: 300px;
 }
+
+.dialog_diy>>>.el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog {
+  background: #fafafa;
+}
+
+.fa_weChat {
+	width: 300px;
+	height: 300px;
+	margin: 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.fa_weChat > .QRcode {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	/* background-color: black; */
+}
 </style>