feat: "微信登录"

当前版本以 adminId 为主，一个微信仅可绑定一个平台账号。

src/service/bindWechat.js

@@ -1,6 +1,23 @@
 import axios from '../utils/axios';
 
 // 绑定微信
-export function bindWechat(params) {
-    return axios.post(`/SZWL-SERVER/tWechat/bindWechat`, params);
+export function bindWechat(adminId) {
+    return axios.get(`/SZWL-SERVER/tWechat/bindWechat?adminId=${adminId}`);
+}
+
+export function callback(params) {
+    return axios.get('SZWL-SERVER/tWechat/callback', {params});
+}
+
+export function auth(code, state) {
+    const params = {
+        code,
+        state,
+    };
+    return axios.post('SZWL-SERVER/tWechat/auth', params);
+}
+
+// 获取微信头像
+export function getAvatar(adminId) {
+    return axios.get(`SZWL-SERVER/tWechat/getAvatar?adminId=${adminId}`);
 }

src/service/login.js

@@ -17,4 +17,9 @@ export function getOpenid() {
 // 用微信code 获取openid，再获取用户信息
 export function getUserDetailByWxCode(code) {
   return axios.get('/SZWL-SERVER/wxLogin/getUserDetailByWxCode', { params: { code } });
+}
+
+// 微信登录
+export function wxLogin(openid) {
+  return axios.get('/SZWL-SERVER/wxLogin/wxLogin', { params: { openid } }).then(response => response.data);
 }

src/utils/axios.js

@@ -44,7 +44,7 @@ service.interceptors.response.use(res => {
     Toast.fail('服务端异常！')
     return Promise.reject(res)
   }
-  if (res.status != 200) {
+  if (res.status !== 200) {
     // 请求错误时弹窗提示错误信息
     if (res.data.message) Toast.fail(res.data.message)
     // 请求状态416时为登陆问题跳转登陆界面

src/views/bindWechat.vue

@@ -12,7 +12,7 @@
           <van-image
               width="100px"
               height="100px"
-              :src="avatarUrl"
+              :src="wechatInfo.avatarUrl"
               fit="cover"
               radius="50%"
               style="margin: auto"
@@ -20,6 +20,8 @@
         </div>
 
         <br>
+
+        <br>
         <br>
         <div class="buttonBox">
           <!-- 取消绑定微信，返回登录页 -->
@@ -36,6 +38,7 @@
               round
               type="primary"
               native-type="submit"
+              id="bind-btn"
           >{{ $t('bindWechat.bindCommit') }}
           </van-button>
         </div>
@@ -46,9 +49,9 @@
 </template>
 
 <script>
-import {onMounted, ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import {Toast} from "vant";
-import {bindWechat} from "@/service/bindWechat";
+import {bindWechat, getAvatar} from "@/service/bindWechat";
 import {setLocal, getLocal, navigatorLanguage, getLoginUser} from "@/common/js/utils";
 import sHeader from "@/components/SimpleHeader";
 import logiLogoImgUrl from "@/assets/login/logo.png";
@@ -56,7 +59,7 @@ import {useRouter} from "vue-router";
 import {useI18n} from "vue-i18n";
 
 export default {
-  setup() {
+  setup: function () {
     let languageName = ref(getLocal("curLang"));
     // eslint-disable-next-line no-unused-vars
     const {t} = useI18n();
@@ -83,35 +86,42 @@ export default {
     const cancelClick = async () => {
       await router.push("/user");
     }
+
     // 绑定微信
     const onSubmit = async () => {
       try {
-        const response = await bindWechat({
-          adminId: user.id,
-        })
-        if (response.data.code === 200) {
-          window.location.href = response.data.data;
+        const { data } = await bindWechat(
+          user.id
+        );
+        if (data.code === "00000") {
+          console.log(data.data);
+          // 在当前窗口打开链接
+          window.location.href = data.data;
+          // 绑定成功
+          Toast.success("绑定成功")
         } else {
-          Toast.fail("Failed to retrieve authorization link.");
+          Toast.fail("调用微信授权失败");
         }
       } catch (error) {
         console.error(error);
-        Toast.fail("绑定失败")
+        Toast.fail("绑定失败");
       }
-
     };
 
-    // 监听页面hash变化
-    window.addEventListener("hashchange", async () => {
-      if (window.location.hash === "#wechatBindSuccess") {
-        // 绑定成功
-        Toast.success("绑定成功");
-        await router.push("/user");
-      } else if (window.location.hash === "#wechatBindFailure") {
-        // 绑定失败
-        Toast.fail("绑定失败");
+    // 存储微信头像的链接
+    const wechatInfo = reactive({
+      avatarUrl: ''
+    })
+
+    // 在页面加载时调用后端接口获取信息
+    onMounted(async () => {
+      try {
+        const { data } = await getAvatar(user.id);
+        wechatInfo.avatarUrl = data.data;
+      } catch (error) {
+        console.error("获取微信头像失败");
       }
-    });
+    })
 
     return {
       logiLogoImgUrl,
@@ -121,6 +131,7 @@ export default {
       onSubmit,
       sys,
       cancelClick,
+      wechatInfo
     };
   },
   components: {sHeader},

src/views/login.vue

@@ -52,8 +52,8 @@
         <br>
         <br>
         <!-- 微信登录 -->
-        <!--        <div v-if="isInWeChat" class="loginWithWechatClass">-->
-        <div class="loginWithWechatClass">
+        <div v-if="isInWeChat" class="loginWithWechatClass">
+<!--                  <div class="loginWithWechatClass">-->
           <van-button class="wechat-btn" type="primary" size="large" @click="wxLoginHandler">
             <van-icon name="wechat" color="#1bd66c" size="40" class="wechat-icon"/>
           </van-button>
@@ -158,7 +158,7 @@ export default {
       });
       if (data.code === "00000") {
         setLocal("loginUser", JSON.stringify(data.data));
-        console.log('loginUser JSON：',JSON.stringify(data.data));
+        console.log('loginUser JSON：', JSON.stringify(data.data));
         Toast.success(t('login.loginSucess'));
         // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
         // window.location.href = '/';
@@ -186,12 +186,12 @@ export default {
       state.isLoading = true;
       try {
         // 用户静默授权，获取 用户信息
-        const {data}  = await getOpenid();
-        console.log("微信登录:",data)
+        const {data} = await getOpenid();
+        console.log("微信登录:", data)
         if (data.code === "00000") {
           window.location.href = data.data;
         } else {
-          Toast.fail('微信登录失败：'+data.message);
+          Toast.fail('微信登录失败：' + data.message);
         }
       } catch (error) {
         handleError(error.message || '微信登录失败，请重试');

src/views/user.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="page flex-col">
     <s-header
-      :name="sys ? sys.title : $t('public.sysName')"
-      :noback="true"
-      :isFixed="false"
+        :name="sys ? sys.title : $t('public.sysName')"
+        :noback="true"
+        :isFixed="false"
     ></s-header>
     <div class="userPageBox">
       <div class="userBaseBox">
@@ -34,110 +34,111 @@
             <div class="cust_vantBorder">
               <div class="filedInpPad">
                 <van-field
-                  @click-input="fieldValueInpClk"
-                  readonly
-                  clearable
-                  v-model="fieldValue"
-                  :placeholder="$t('user.regionPlace')"
+                    @click-input="fieldValueInpClk"
+                    readonly
+                    clearable
+                    v-model="fieldValue"
+                    :placeholder="$t('user.regionPlace')"
                 >
                   <template #right-icon>
                     <div class="l-flex-RC">
                       <van-icon
-                        v-if="fieldValue"
-                        @click="
+                          v-if="fieldValue"
+                          @click="
                           fieldValue = '';
                           accountDetail.areaId = '';
                         "
-                        class="o-mr-6"
-                        name="clear"
+                          class="o-mr-6"
+                          name="clear"
                       />
-                      <van-icon @click="fieldValueInpClk" name="arrow-down" />
+                      <van-icon @click="fieldValueInpClk" name="arrow-down"/>
                     </div>
                   </template>
                 </van-field>
               </div>
             </div>
-            <van-icon name="edit" class="editIcon" @click="editClk(4)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(4)"/>
           </div>
           <div v-else class="userInfo l-flex-between">
             <span class="userInfoLeft">{{ $t("user.region") }}: </span>
             <span>{{ fieldValue }}</span>
-            <van-icon name="edit" class="editIcon" @click="editClk(4)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(4)"/>
           </div>
           <!-- 手机号 -->
           <div v-if="!phoneNumberShow" class="userInfo l-flex-between">
             <span class="userInfoLeft">{{ $t("user.phoneNumber") }}: </span>
             <div class="cust_vantBorder">
               <van-field
-                class="relationClass"
-                v-model="cofficentForm.phone"
-                :placeholder="$t('user.phoneNumberPlace')"
+                  class="relationClass"
+                  v-model="cofficentForm.phone"
+                  :placeholder="$t('user.phoneNumberPlace')"
               >
                 <template #button>
                   <van-button
-                    type="primary"
-                    @click="mailboxChg(cofficentForm.phone, 3)"
-                    >{{ $t("user.confirmLog") }}
+                      type="primary"
+                      @click="mailboxChg(cofficentForm.phone, 3)"
+                  >{{ $t("user.confirmLog") }}
                   </van-button>
                 </template>
               </van-field>
             </div>
-            <van-icon name="edit" class="editIcon" @click="editClk(3)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(3)"/>
           </div>
           <div v-else class="userInfo l-flex-between">
             <span class="userInfoLeft">{{ $t("user.phoneNumber") }}: </span>
             <span>{{ accountDetail.phone }}</span>
-            <van-icon name="edit" class="editIcon" @click="editClk(3)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(3)"/>
           </div>
           <!-- 邮箱 -->
           <div v-if="!mailboxShow" class="userInfo l-flex-between">
             <span class="userInfoLeft">{{ $t("user.mailbox") }}: </span>
             <div class="cust_vantBorder">
               <van-field
-                class="relationClass"
-                v-model="cofficentForm.mailBox"
-                :placeholder="$t('user.mailboxPlace')"
+                  class="relationClass"
+                  v-model="cofficentForm.mailBox"
+                  :placeholder="$t('user.mailboxPlace')"
               >
                 <template #button>
                   <van-button
-                    type="primary"
-                    @click="mailboxChg(cofficentForm.mailBox, 2)"
-                    >{{ $t("user.confirmLog") }}
+                      type="primary"
+                      @click="mailboxChg(cofficentForm.mailBox, 2)"
+                  >{{ $t("user.confirmLog") }}
                   </van-button>
                 </template>
               </van-field>
             </div>
-            <van-icon name="edit" class="editIcon" @click="editClk(2)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(2)"/>
           </div>
           <div v-else class="userInfo l-flex-between">
             <span class="userInfoLeft">{{ $t("user.mailbox") }}: </span>
             <span>{{ accountDetail.email }}</span>
-            <van-icon name="edit" class="editIcon" @click="editClk(2)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(2)"/>
           </div>
           <!-- 关联上级 -->
           <div v-if="!relationType" class="userInfo l-flex-between">
             <span class="userInfoLeft">{{ $t("user.associateParent") }}: </span>
             <div class="cust_vantBorder">
               <van-field
-                class="relationClass"
-                v-model="cofficentForm.associateParent"
-                :placeholder="$t('user.associateParentPlace')"
+                  class="relationClass"
+                  v-model="cofficentForm.associateParent"
+                  :placeholder="$t('user.associateParentPlace')"
               >
                 <template #button>
                   <van-button
-                    type="primary"
-                    @click="mailboxChg(cofficentForm.associateParent, 1)"
-                    >{{ $t("user.confirmLog") }}</van-button
+                      type="primary"
+                      @click="mailboxChg(cofficentForm.associateParent, 1)"
+                  >{{ $t("user.confirmLog") }}
+                  </van-button
                   >
                 </template>
               </van-field>
             </div>
-            <van-icon name="edit" class="editIcon" @click="editClk(1)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(1)"/>
           </div>
           <div v-else class="userInfo l-flex-between">
             <span class="userInfoLeft">{{ $t("user.associateParent") }}: </span>
             <span>{{ relationAdminName }}</span>
-            <van-icon name="edit" class="editIcon" @click="editClk(1)" />
+            <van-icon name="edit" class="editIcon" @click="editClk(1)"/>
           </div>
         </div>
       </div>
@@ -151,9 +152,9 @@
         <div class="operListBox">
           <!-- 任务消息 -->
           <div
-            v-if="roleCheck()"
-            class="taskListRow flex-col"
-            @click="pushPageList('/taskMessage')"
+              v-if="roleCheck()"
+              class="taskListRow flex-col"
+              @click="pushPageList('/taskMessage')"
           >
             <div class="taskIcon taskMessageIcon"></div>
             <div class="taskRight">
@@ -163,8 +164,8 @@
 
           <!-- 提现帐号 -->
           <div
-            class="taskListRow flex-col"
-            @click="pushPageList('/joinpayMch')"
+              class="taskListRow flex-col"
+              @click="pushPageList('/joinpayMch')"
           >
             <div class="taskIcon joinPayMchIcon"></div>
             <div class="taskRight">
@@ -183,8 +184,8 @@
           </div>
 
           <!-- 绑定微信 -->
-<!--          <div v-if="isInWeChat" class="taskListRow flex-col" @click="pushPageList('/bindWechat')">-->
-            <div class="taskListRow flex-col" @click="pushPageList('/bindWechat')">
+          <div v-if="isInWeChat" class="taskListRow flex-col" @click="pushPageList('/bindWechat')">
+<!--                        <div class="taskListRow flex-col" @click="pushPageList('/bindWechat')">-->
             <div class="taskIcon bindWechatIcon"></div>
             <div class="taskRight">
               <div class="taskTitle">
@@ -195,8 +196,8 @@
 
           <!-- 修改密码 -->
           <div
-            class="taskListRow flex-col"
-            @click="pushPageList('/changepassword')"
+              class="taskListRow flex-col"
+              @click="pushPageList('/changepassword')"
           >
             <div class="taskIcon changePasswordIcon"></div>
             <div class="taskRight">
@@ -224,20 +225,20 @@
     <nav-bar></nav-bar>
     <!-- 退出登录弹窗 -->
     <kDialog
-      :dialogTitle="$t('user.logOutTips')"
-      :cancelBtnTxt="$t('user.cancelLog')"
-      :confirmBtnTxt="$t('user.confirmLog')"
-      ref="kDialogRef"
-      :dialogContent="$t('user.logOutContent')"
-      @confirmclk="confirmClk"
+        :dialogTitle="$t('user.logOutTips')"
+        :cancelBtnTxt="$t('user.cancelLog')"
+        :confirmBtnTxt="$t('user.confirmLog')"
+        ref="kDialogRef"
+        :dialogContent="$t('user.logOutContent')"
+        @confirmclk="confirmClk"
     >
     </kDialog>
     <!-- 地区弹窗 -->
     <kCascader
-      @getareaname="getAreaName"
-      :selectId="accountDetail.areaId"
-      @areapopfinish="areaPopFinish"
-      ref="kCascaderRef"
+        @getareaname="getAreaName"
+        :selectId="accountDetail.areaId"
+        @areapopfinish="areaPopFinish"
+        ref="kCascaderRef"
     ></kCascader>
   </div>
 </template>
@@ -246,11 +247,11 @@
 // 导入地区弹窗
 import kCascader from "@/components/commom/kCascader/index.vue";
 // 导入接口
-import { getAdmin } from "@/service/merchantManage";
-import { updateAdmin } from "@/service/merchantManage";
+import {getAdmin} from "@/service/merchantManage";
+import {updateAdmin} from "@/service/merchantManage";
 // 引入弹窗
 import kDialog from "@/components/commom/kDialog/index.vue";
-import { onMounted, reactive, ref } from "vue";
+import {onMounted, reactive, ref} from "vue";
 import sHeader from "@/components/SimpleHeader";
 import navBar from "@/components/NavBar";
 import {
@@ -258,15 +259,16 @@ import {
   $M_EmailAvailable,
   $M_PhoneTest,
 } from "@/common/js/utils";
-import { useRouter } from "vue-router";
-import { tAdminGetRelation, tAdminSetRelationAdmin } from "@/service/user";
-import { Toast } from "vant";
-import { useI18n } from "vue-i18n";
+import {useRouter} from "vue-router";
+import {tAdminGetRelation, tAdminSetRelationAdmin} from "@/service/user";
+import {Toast} from "vant";
+import {useI18n} from "vue-i18n";
+
 export default {
-  components: { sHeader, navBar, kDialog, kCascader },
+  components: {sHeader, navBar, kDialog, kCascader},
   setup() {
     // 引入语言
-    const { t } = useI18n();
+    const {t} = useI18n();
     // 账户信息
     const accountDetail = ref({});
     // 控制都去显示隐藏
@@ -327,7 +329,7 @@ export default {
           if (!e) {
             Toast(t("user.associateParentPlace"));
           } else {
-            const { data } = await tAdminSetRelationAdmin({
+            const {data} = await tAdminSetRelationAdmin({
               adminId: user.id,
               username: e,
             });
@@ -350,7 +352,7 @@ export default {
               id: user.id,
               email: e,
             };
-            const { data } = await updateAdmin(params);
+            const {data} = await updateAdmin(params);
             mailboxShow.value = true;
             if (data.code === "00000") {
               Toast(data.message);
@@ -370,7 +372,7 @@ export default {
               id: user.id,
               phone: e,
             };
-            const { data } = await updateAdmin(params);
+            const {data} = await updateAdmin(params);
             phoneNumberShow.value = true;
             if (data.code === "00000") {
               Toast(data.message);
@@ -384,7 +386,7 @@ export default {
     };
     // 获取账户详情
     const getAcccountDetail = () => {
-      getAdmin({ id: user.id }).then((res) => {
+      getAdmin({id: user.id}).then((res) => {
         accountDetail.value = res.data.data;
 
         // 查询地址回显
@@ -404,12 +406,12 @@ export default {
         setTimeout(() => {
           router.push({
             path: "login",
-            query: { relation_admin_id: sys.value.relationAdminId },
+            query: {relation_admin_id: sys.value.relationAdminId},
           });
         }, 200);
       } else {
         setTimeout(() => {
-          router.push({ path: "login" });
+          router.push({path: "login"});
         }, 200);
       }
     };
@@ -426,7 +428,7 @@ export default {
       getAcccountDetail();
     });
     const gettAdminGetRelation = async () => {
-      const { data } = await tAdminGetRelation({
+      const {data} = await tAdminGetRelation({
         relationAdminId: user.relationAdminId,
       });
       if (typeof data === "string") {
@@ -434,13 +436,13 @@ export default {
       }
     };
     const operUnipay = () => {
-      router.push({ path: "uniPay" });
+      router.push({path: "uniPay"});
     };
     const onperExitSys = () => {
       kDialogRef.value.openDialog();
     };
     const pushPageList = (url) => {
-      router.push({ path: url });
+      router.push({path: url});
     };
     const roleCheck = () => {
       if (user.isAdmined) {
@@ -466,7 +468,7 @@ export default {
         id: user.id,
         areaId: e.selectId,
       };
-      const { data } = await updateAdmin(params);
+      const {data} = await updateAdmin(params);
       areaShow.value = true;
       if (data.code === "00000") {
         Toast(data.message);
@@ -479,7 +481,7 @@ export default {
     const checkInWechat = () => {
       const ua = window.navigator.userAgent.toLowerCase();
       // 如果是在微信中打开
-      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
+      if (/MicroMessenger/i.test(ua)) {
         isInWeChat.value = true;
       }
     };
@@ -600,6 +602,7 @@ export default {
   .userInfoBox {
     margin-top: 25px;
     padding: 0px 15px 20px;
+
     .userInfo {
       // width: 87%;
       margin: 0 auto;
@@ -663,8 +666,7 @@ export default {
           &.taskMessageIcon::after {
             content: "";
             position: absolute;
-            background: #fff url("../assets/user/taskMessageIcon.png") top
-              center no-repeat;
+            background: #fff url("../assets/user/taskMessageIcon.png") top center no-repeat;
             background-size: 100%;
             width: 0.6rem;
             height: 0.6rem;
@@ -675,8 +677,7 @@ export default {
           &.joinPayMchIcon::after {
             content: "";
             position: absolute;
-            background: #fff url("../assets/user/joinPayMchIcon.png") top center
-              no-repeat;
+            background: #fff url("../assets/user/joinPayMchIcon.png") top center no-repeat;
             background-size: 100%;
             width: 0.6rem;
             height: 0.6rem;
@@ -687,8 +688,7 @@ export default {
           &.shandeMchIcon::after {
             content: "";
             position: absolute;
-            background: #fff url("../assets/user/shandeMchIcon.png") top center
-              no-repeat;
+            background: #fff url("../assets/user/shandeMchIcon.png") top center no-repeat;
             background-size: 100%;
             width: 0.6rem;
             height: 0.6rem;
@@ -699,8 +699,7 @@ export default {
           &.bindWechatIcon::after {
             content: "";
             position: absolute;
-            background: #fff url("../assets/user/bindWechatIcon.png") top
-            center no-repeat;
+            background: #fff url("../assets/user/bindWechatIcon.png") top center no-repeat;
             background-size: 100%;
             width: 0.6rem;
             height: 0.6rem;
@@ -711,8 +710,7 @@ export default {
           &.changePasswordIcon::after {
             content: "";
             position: absolute;
-            background: #fff url("../assets/user/changePasswordIcon.png") top
-              center no-repeat;
+            background: #fff url("../assets/user/changePasswordIcon.png") top center no-repeat;
             background-size: 100%;
             width: 0.6rem;
             height: 0.6rem;
@@ -734,8 +732,7 @@ export default {
           &.loginOutIcon::after {
             content: "";
             position: absolute;
-            background: #fff url("../assets/user/loginOut.png") top center
-              no-repeat;
+            background: #fff url("../assets/user/loginOut.png") top center no-repeat;
             background-size: 100%;
             width: 0.6rem;
             height: 0.6rem;
@@ -755,8 +752,7 @@ export default {
             position: absolute;
             width: 6px;
             height: 12px;
-            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng51122feddbc4a9b3e0b055ed6181d290e60825befaa5c777794f1412ff817e57)
-              top center no-repeat;
+            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng51122feddbc4a9b3e0b055ed6181d290e60825befaa5c777794f1412ff817e57) top center no-repeat;
             background-size: 100%;
             right: 0.55rem;
             top: 0.5rem;