48px

wujingjing

2025-04-14 77b15609b62c9bcd80fcdfd65f134a06252920b9

 src/layout/component/sidebar/components/UserInformation.vue

@@ -2,33 +2,70 @@
   <div class="flex flex-col">
      <el-dialog v-model="isShowInformation" title="我的信息" width="500" :before-close="handleCloseInformation">
         <el-form :model="userInformationInfo" ref="autoDialogFormRef" label-width="85">
            <el-row :gutter="20" class="form_Class">
               <el-col :span="12" class="id">
                  <el-form-item label="用户ID" prop="name"> <el-input v-model="userInformationInfo.id" readonly></el-input> </el-form-item
               ></el-col>
               <el-col :span="12" class="mb20">
                  <el-form-item label="姓名" prop="realName">
                     <el-input v-model="userInformationInfo.realName" readonly></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="12" class="mb20">
                  <el-form-item label="手机号" prop="phoneNumber">
                     <el-input v-model="userInformationInfo.phoneNumber" readonly></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="12" class="mb20"
                  ><el-form-item label="性别" prop="sex"> <el-input v-model="userInformationInfo.sex" readonly></el-input> </el-form-item
               ></el-col>
               <el-col :span="24" class="mb20">
                  <el-form-item label="部门" prop="department"> <el-input v-model="userInformationInfo.department" readonly></el-input> </el-form-item
               ></el-col>
            <el-form-item label="用户ID" prop="name">
               <el-input v-model="userInformationInfo.userName" readonly></el-input>
            </el-form-item>

               <el-col :span="24" class="mb20">
                  <el-form-item label="邮箱" prop="email">
                        <el-input v-model="userInformationInfo.email" readonly />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-form-item label="姓名" prop="realName">
               <el-input v-model="userInformationInfo.realName" readonly></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
               <el-input v-model="userInformationInfo.sex" readonly></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="department">
               <el-input v-model="userInformationInfo.department" readonly></el-input>
            </el-form-item>
            <!-- <el-form-item label="用户状态" prop="phoneNumber">
               <el-input v-model="userInformationInfo.a" readonly></el-input>
            </el-form-item> -->
            <el-form-item label="电话" prop="phoneNumber">
               <el-input v-model="userInformationInfo.phoneNumber" readonly></el-input>
            </el-form-item>
            <!-- <el-form-item label="微信号" prop="phoneNumber">
               <el-input v-model="userInformationInfo.phoneNumber" readonly></el-input>
            </el-form-item> -->
            <el-form-item label="邮箱" prop="email">
               <el-input v-model="userInformationInfo.email" readonly></el-input>
            </el-form-item>
            <el-form-item v-if="userInformationInfo.wechatNickname" label="微信昵称" prop="wechatNickname">
               <el-input v-model="userInformationInfo.wechatNickname" readonly></el-input>
					
            </el-form-item>

            <el-form-item label="微信绑定" prop="wechat">
               <div id="wechat-bind">
                  <div v-if="bindingCodeShow" class="flex flex-col items-center justify-center">
                     <iframe
                        ref="wechatQrRef"
                        sandbox="allow-top-navigation allow-scripts"
                        style="width: 200px; height: 170px; overflow: hidden"
                        frameborder="0"
                     ></iframe>
                     <span>使用微信扫一扫绑定</span>
                  </div>
                  <template v-else>
                     <div v-if="userInformationInfo.isBindWechat" class="flex items-center">
                        <span>已绑定</span>
                        <el-button link type="primary" @click="openWechatLogin">重新绑定</el-button>
                     </div>
                     <div v-else class="flex items-center">
                        <span>未绑定</span>
                        <el-button link type="primary" @click="openWechatLogin">点击绑定</el-button>
                     </div>
                  </template>
               </div>
            </el-form-item>


            <!-- <el-form-item label="角色" prop="role">
               <el-select v-model="userInformationInfo.role" placeholder="请选择角色" disabled>
                  <el-option label="角色A" value="roleA"></el-option>
                  <el-option label="角色B" value="roleB"></el-option>
               </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="说明" prop="description">
               <el-input v-model="userInformationInfo.description" type="textarea" readonly></el-input>
            </el-form-item> -->
         </el-form>
      </el-dialog>
   </div>
@@ -36,11 +73,12 @@

<script setup lang="ts">
//#region ====================== 我的信息 ======================
import { onMounted, ref } from 'vue';
import { nextTick, onMounted, ref, watch } from 'vue';
import { useUserInfo } from '/@/stores/userInfo';
import { accessSessionKey, handleNoAuth, userInfoKey } from '/@/utils/request';
import { Local } from '/@/utils/storage';
import { userInfo } from '/@/stores/chatRoom';
import { SERVE_URL } from '/@/constants';
const isShowInformation = defineModel({
   type: Boolean,
});
@@ -50,12 +88,87 @@
   isShowInformation.value = false;
};
//#endregion

const wechatQrRef = ref<HTMLIFrameElement>();

const handleBindWechat = () => {};

const getWechartQrCode = () => {
   const state = (new Date().getTime() / 1000).toString();
   // JJJHHH 表示＃号
   const url = `${SERVE_URL}JJJHHH/home?isWxLogin=N`;
   const obj = new window.WxLogin({
      id: 'wechat-bind',
      appid: 'wx4ea2dca37170074c',
      scope: 'snsapi_login',
      redirect_uri: encodeURIComponent(`http://apiv3.xpump.net/User/wxUserLoginCB.html?from=wi&url=${url}`),
      state: state,
   });
};

const bindingCodeShow = ref(false);

const openWechatLogin = async () => {
   bindingCodeShow.value = true;
   await nextTick();
   if (!wechatQrRef.value) return;
   const url = `${SERVE_URL}JJJHHH/home?isWxLogin=N`;
   const appid = 'wx4ea2dca37170074c';
   const state = (new Date().getTime() / 1000).toString();
   const base64 = btoa(`
   .impowerBox .title {display:none;}

   .impowerBox .status.status_browser  p:nth-of-type(2){
      display: none;
   }

   .impowerBox .qrcode {
   width: 160px;
   margin-top:0;

   }

   .info{
      display: none;
   }
   .impowerBox .status{
   }
   #tpl_for_iframe{
      height:100%;
      overflow: hidden;

          display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
	
   `);
   const wechatAuthUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${encodeURIComponent(
      `http://apiv3.xpump.net/User/wxUserLoginCB.html?from=wi&url=${url}`
   )}&response_type=code&scope=snsapi_login&state=${state}&href=data:text/css;base64,${base64}#wechat_redirect`;
   wechatQrRef.value.src = wechatAuthUrl;
};

onMounted(async () => {
   if(!Local.get(accessSessionKey)){
      handleNoAuth()
   if (!Local.get(accessSessionKey)) {
      handleNoAuth();
      return;
   }
	
   // getWechartQrCode();
   userInformationInfo.value = Local.get(userInfoKey);
});

watch(
   () => isShowInformation.value,
   (val) => {
      if (val) {
         // nextTick(() => {
         //    openWechatLogin();
         // });
      }
   }
);
</script>
<style scoped lang="scss"></style>