1018653686@qq.com 1 жил өмнө
parent
commit
9cac72b977

+ 26 - 0
public/callback.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Child Page</title>
+</head>
+<style>
+  body{
+    background-size:cover;
+    background: url(img/loading.gif) no-repeat fixed center top;
+  }
+</style>
+<body>
+<!--<h1>京东回调成功</h1>-->
+
+<script>
+  function notifyParentAndClose() {
+    // 向父级页面发送消息
+    window.parent.postMessage('closeIframe', '*');
+  }
+  var timer = setInterval(notifyParentAndClose, 3000); // 1000 毫秒等于 1 秒
+
+</script>
+</body>
+</html>

BIN
public/img/jd-off.jpg


BIN
public/img/jd-on.jpg


BIN
public/img/loading.gif


+ 88 - 0
public/testLogin.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login Page</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f4f4f4;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    }
+
+    .login-container {
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .login-container h2 {
+      text-align: center;
+      color: #333;
+    }
+
+    .login-form {
+      margin-top: 20px;
+    }
+
+    .form-group {
+      margin-bottom: 15px;
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: 5px;
+      color: #555;
+    }
+
+    .form-group input {
+      width: 100%;
+      padding: 8px;
+      box-sizing: border-box;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+
+    .form-group button {
+      background-color: #4caf50;
+      color: #fff;
+      padding: 10px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      width: 100%;
+    }
+
+    .form-group button:hover {
+      background-color: #45a049;
+    }
+  </style>
+</head>
+<body>
+
+<div class="login-container">
+  <h2>Login</h2>
+  <form class="login-form" action="http://127.0.0.1:9898/open/jd/callback" method="get">
+    <div class="form-group">
+      <label for="username">Username:</label>
+      <input type="text" id="username" name="username" required>
+    </div>
+    <div class="form-group">
+      <label for="password">Password:</label>
+      <input type="password" id="password" name="password" required>
+    </div>
+    <div class="form-group">
+      <button type="submit">Login</button>
+    </div>
+  </form>
+</div>
+
+</body>
+</html>

+ 130 - 40
src/components/headerBar/header-bar.vue

@@ -240,47 +240,55 @@
           </div>
         </div>
       </ul>
-      <div class="fr">
-        <!-- :value="12" -->
-        <el-badge
-          :value="badgeNum"
-          style="cursor: pointer"
-          class="badge"
-          @click="noticeTableModal = true"
-        >
-          <el-icon :size="20">
-            <BellFilled />
-          </el-icon>
-        </el-badge>
-        <notice
-          v-model="noticeTableModal"
-          @changeNum="(e) => (badgeNum = e)"
-        ></notice>
-        <el-dropdown
-          @command="handleCommand"
-          class="right-menu-item hover-effect"
-          trigger="click"
+        <div
+            class="jdTokenStatus"
+            style="display: flex; align-items: center; justify-content: center"
         >
-          <div class="dropdown-box">
-            {{ userData }}
-          </div>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <router-link to="/user/profile">
-                <el-dropdown-item>{{
-                  $t("header.personalCenter")
-                }}</el-dropdown-item>
-              </router-link>
-              <el-dropdown-item command="setLayout">
-                <span>{{ $t("header.layoutSettings") }}</span>
-              </el-dropdown-item>
-              <el-dropdown-item divided command="logout">
-                <span>{{ $t("header.logout") }}</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </div>
+          <img v-if="tokenStatus" :src="'/img/jd-on.jpg'" style="width: 40px"/>
+          <img v-if="!tokenStatus" :src="'/img/jd-off.jpg'" style="width: 40px" @click="changeJdLoginModal"/>
+        </div>
+      <jdStatus v-model="jdLoginModal" :iframeUrl="jdLoginUrl"></jdStatus>
+        <div class="fr">
+          <!-- :value="12" -->
+          <el-badge
+            :value="badgeNum"
+            style="cursor: pointer"
+            class="badge"
+            @click="noticeTableModal = true"
+          >
+            <el-icon :size="20">
+              <BellFilled />
+            </el-icon>
+          </el-badge>
+          <notice
+            v-model="noticeTableModal"
+            @changeNum="(e) => (badgeNum = e)"
+          ></notice>
+          <el-dropdown
+            @command="handleCommand"
+            class="right-menu-item hover-effect"
+            trigger="click"
+          >
+            <div class="dropdown-box">
+              {{ userData }}
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <router-link to="/user/profile">
+                  <el-dropdown-item>{{
+                    $t("header.personalCenter")
+                  }}</el-dropdown-item>
+                </router-link>
+                <el-dropdown-item command="setLayout">
+                  <span>{{ $t("header.layoutSettings") }}</span>
+                </el-dropdown-item>
+                <el-dropdown-item divided command="logout">
+                  <span>{{ $t("header.logout") }}</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
     </header>
   </div>
 </template>
@@ -291,6 +299,8 @@ import { ElMessageBox, ElNotification, ElMessage } from "element-plus";
 import useUserStore from "@/store/modules/user";
 import "@/components/headerBar/header.scss";
 import notice from "@/components/notice/index";
+import jdStatus from "@/components/jdStatus/index";
+import {getToken} from "@/utils/auth";
 const router = useRouter();
 const userStore = useUserStore();
 const { proxy } = getCurrentInstance();
@@ -304,6 +314,24 @@ const noticeTableModal = ref(false);
 const userData = ref(Cookies.get("nickName") || "");
 const commonsRouterList = ref([]);
 const activeLeftData = ref({});
+let tokenStatus = ref(false);
+
+const jdLoginModal = ref(false);
+const jdLoginUrl = ref('');
+
+
+const changeJdLoginModal = () => {
+  getJd2LoginUrl();
+  jdLoginModal.value = true;
+};
+
+
+const getJd2LoginUrl = async () => {
+  proxy.get("/open/jd/build2LoginUrl").then((res) => {
+    jdLoginUrl.value = res.data;
+  });
+}
+
 const openLeftBaner = (i, index) => {
   leftBanerType.value = 1;
   activeLeftData.value = i;
@@ -466,9 +494,64 @@ function calcAutoListChidren() {
   autoListChidrenNum.value = Math.floor((getBrowserWidth() - 616) / 120);
 }
 
+
+const intervalId = ref(null);
+const scoket = ref(null);
+const socketInit = () => {
+  window.ws = new WebSocket(
+      "ws://" +
+      import.meta.env.VITE_APP_IP +
+      import.meta.env.VITE_APP_WS_API +
+      "/webStock/" +
+      getToken()
+      // 'ws://192.168.1.97:8300/webStock/' + window.localStorage.getItem('token')
+  );
+  //申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
+  window.ws.onopen = function () {
+    //当WebSocket创建成功时,触发onopen事件
+    console.log("open");
+    scoket.value = window.ws;
+    //立马发送一次心跳
+    sendSocketMsg();
+    // 设置定时器,每30秒执行一次myFunction
+    intervalId.value = setInterval(sendSocketMsg, 15000);
+  };
+  window.ws.onmessage = function (e) {
+    //当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
+    //在data.value前面插入
+    let jsonObj = JSON.parse(e.data);
+    if(jsonObj.cmd == "jdStatus"){
+      console.log(jsonObj.status);
+      tokenStatus.value = jsonObj.status;
+    }
+  };
+  window.ws.onclose = function (e) {
+    //当客户端收到服务端发送的关闭连接请求时,触发onclose事件
+    console.log("close");
+    if(intervalId.value) clearInterval(intervalId.value);
+  };
+  window.ws.onerror = function (e) {
+    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
+    console.log("error");
+    if(intervalId.value) clearInterval(intervalId.value);
+  };
+};
+
+
+// 定义要执行的函数
+function sendSocketMsg() {
+  let jsonData = {
+    cmd: "jdStatus",
+    content: "heartbeat",
+  };
+  scoket.value.send(JSON.stringify(jsonData));
+  console.log('Timer executed!');
+}
+
 //一维数组转tree
 
 onMounted(() => {
+  getJd2LoginUrl();
   calcAutoListChidren();
   window.addEventListener("resize", calcAutoListChidren);
   proxy.get("/getInfo").then((res) => {
@@ -500,6 +583,13 @@ onMounted(() => {
   proxy.post("/sysUserMenu/list", { type: 1 }).then((res) => {
     commonsRouterList.value = res;
   });
+
+  socketInit();
+});
+
+// 在组件销毁时停止WebSocket
+onUnmounted(() => {
+  scoket.value.close();
 });
 </script>
 

+ 128 - 0
src/components/jdStatus/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="commons-notice">
+    <div
+        class="table-warp"
+        :class="modelValue ? 'table-warp-open' : ''"
+        @click.stop="closeNoticeTableModal"
+    >
+      <div class="table" @click.stop v-loading="loading">
+        <iframe id="myIframe" :src="iframeUrl" width="300" height="200"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+
+import {watch} from "@vue/runtime-core";
+
+const { proxy } = getCurrentInstance();
+const iframeSrc = ref('');
+const { modelValue, iframeUrl } = defineProps(['modelValue', 'iframeUrl']);
+
+const emit = defineEmits();
+
+const propValue = ref(modelValue);
+
+const closeNoticeTableModal = () => {
+  emit("update:modelValue", false);
+};
+let index = ref(0);
+let data = ref([]);
+const loading = ref(false);
+
+
+// 监听来自子页面的消息
+window.addEventListener('message', function(event) {
+  if (event.data === 'closeIframe') {
+    closeIframe();
+  }
+});
+
+watch(() => modelValue, (newValue, oldValue) => {
+  if(newValue){
+    alert(111)
+  } else {
+    alert(222)
+  }
+});
+
+onMounted(() => {
+  console.log('222', modelValue)
+  console.log('333', iframeUrl)
+});
+
+
+const noneUrl = () => {
+  return '';
+}
+
+function closeIframe() {
+  closeNoticeTableModal();
+}
+
+</script>
+<style lang="scss">
+iframe {
+  border: none; /* 移除边框 */
+  width: 100%; /* 使其填充父元素的宽度 */
+  height: 500px; /* 设置 iframe 的高度 */
+}
+.table-warp {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  display: none;
+}
+
+.table-warp-open {
+  opacity: 1;
+  display: block;
+}
+.table {
+  position: fixed;
+  right: 30px;
+  top: 52px;
+  padding: 0 5px 5px;
+  width: 500px;
+  background: #fff;
+  box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
+  z-index: 20;
+  .notice-btn-box {
+    text-align: right;
+  }
+  .tabs {
+    display: flex;
+    justify-content: space-between;
+    height: 60px;
+    line-height: 60px;
+    font-size: 14px;
+    font-weight: 400;
+    ul {
+      display: flex;
+      margin: 23px 0;
+      padding: 0;
+      li {
+        list-style: none;
+        padding: 0 5px;
+        cursor: pointer;
+        height: 14px;
+        line-height: 14px;
+        border-left: 1px solid #dcdcdc;
+      }
+      .active {
+        color: #0084ff;
+      }
+    }
+    .more {
+      color: #0084ff;
+      cursor: pointer;
+    }
+  }
+}
+</style>

+ 0 - 0
src/views/WDLY/jd/order/index.vue