小程序端扫门禁码跳转；门禁端调整；bugfix小程序端商品售价和划线价反了

backend/microservice-provider-access-8002/src/main/java/com/cxyxiaomo/epp/access/controller/GateController.java

@@ -47,6 +47,20 @@ public class GateController {
         return Res.success(gateVOList);
     }
 
+    /**
+     * 获取大门详情（小程序端）
+     *
+     * @return
+     */
+    @GetMapping("/miniprogram/detail")
+    @ResponseBody
+    public Res getGateDetail(String id) {
+        Long gateId = Long.valueOf(id);
+        Gate gate = gateService.getGateById(gateId);
+        GateVO gateVO = GateVO.convertFrom(gate);
+        return Res.success(gateVO);
+    }
+
     /**
      * 获取大门列表
      *
@@ -77,10 +91,10 @@ public class GateController {
                         "大门名称", FieldBuilder.EDIT_PLACEHOLDER_SAME_AS_ADD_PLACEHOLDER,
                         FieldRuleListBuilder.create()
                                 .add(FieldRuleBuilder.create("大门名称").required())
-                                .add(FieldRuleBuilder.create("大门名称").minMax(2, 15)),
-                        "DPD @cword(2, 15)"
+                                .add(FieldRuleBuilder.create("大门名称").minMax(2, 12)),
+                        "DPD @cword(2, 12)"
                 )
-                .add("open", "open", "状态", true,
+                .add("open", "openStatus", "状态", true,
                         FieldType.TEXT, SearchType.SELECT, AddType.SELECT, EditType.SELECT,
                         FieldBuilder.SEARCH_PLACEHOLDER_SAME_AS_FIELDNAME,
                         "状态", FieldBuilder.EDIT_PLACEHOLDER_SAME_AS_ADD_PLACEHOLDER,
@@ -96,7 +110,7 @@ public class GateController {
         stateMap.put(false, "禁止通行");
         // build
         JSONArray fieldMapper = FieldMapperBuilder.create()
-                .add("open", "open", stateMap)
+                .add("open", "openStatus", stateMap)
                 .build();
 
         // 拼装返回结果

backend/microservice-provider-access-8002/src/main/java/com/cxyxiaomo/epp/access/service/GateService.java

@@ -17,6 +17,9 @@ public class GateService {
 
 
     public Gate getGateById(Long id) {
+        if (id == null) {
+            return null;
+        }
         return gateDao.getGateById(id);
     }
 

backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/index.css

@@ -1,81 +1,89 @@
 * {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
+
 html,
 body {
-  height: 100%;
+    height: 100%;
 }
 
 .container {
-  width: 100%;
-  height: 100%;
-  background-color: #0556c6;
-  display: grid;
-  grid-template-columns: 3fr 4fr;
-  place-items: center;
-  color: white;
+    width: 100%;
+    height: 100%;
+    background-color: #0556c6;
+    display: grid;
+    grid-template-columns: 3fr 4fr;
+    grid-template-rows: 60px 1fr;
+    place-items: center;
+    color: white;
 }
 
+.top-container {
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+.top-container,
 .left-container {
-  text-shadow: 2px 2px 2px #00000066;
+    text-shadow: 2px 2px 2px #00000066;
 }
 
 h1 {
-  margin-bottom: 30px;
-  font-size: 4vw;
+    margin-bottom: 30px;
+    font-size: 4vw;
 }
 
 h3 {
-  margin-bottom: 10px;
-  margin-top: 22px;
-  font-size: 2vw;
+    margin-bottom: 10px;
+    margin-top: 22px;
+    font-size: 2vw;
 }
 
 p {
-  font-size: 1.4vw;
-  line-height: 1.5em;
+    font-size: 1.4vw;
+    line-height: 1.5em;
 }
 
 .right-container {
 }
 
 #qrcode {
-  box-shadow: 0px 0px 17px 12px rgb(0 0 0 / 50%);
-  border-radius: 50%;
-  display: block;
-  width: min(40vw, 68vh);
-  height: min(40vw, 68vh);
+    box-shadow: 0px 0px 17px 12px rgb(0 0 0 / 50%);
+    border-radius: 50%;
+    display: block;
+    width: min(40vw, 68vh);
+    height: min(40vw, 68vh);
 }
 
 #refreshTimeCountDown {
-  text-align: center;
-  margin-top: 30px;
-  font-size: 2em;
-  color: #ffffff9c;
+    text-align: center;
+    margin-top: 30px;
+    font-size: 2em;
+    color: #ffffff9c;
 }
 
 /* 右上角按钮 */
 .ctrl-btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 10px;
 }
 
 .btn {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  filter: invert(1) opacity(0.8);
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    filter: invert(1) opacity(0.8);
 }
 
 .btn-ctrl {
-  margin-left: 2px;
-  vertical-align: middle;
+    margin-left: 2px;
+    vertical-align: middle;
 }
 
 #fullscreen-button {
-  width: 28px;
-  height: 28px;
+    width: 28px;
+    height: 28px;
 }

backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/setting-panel.css

@@ -1,66 +1,109 @@
 .full-screen-mask {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  background-color: black;
-  opacity: 0.35;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    background-color: black;
+    opacity: 0.35;
 }
 
 .setting-container {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  display: grid;
-  place-items: center;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 20;
+    display: grid;
+    place-items: center;
 }
 
 .setting-panel {
-  width: 320px;
-  height: 450px;
-  background-color: white;
-  border-radius: 40px;
-  position: relative;
-  padding: 14px;
-  box-sizing: border-box;
+    width: 320px;
+    height: 450px;
+    background-color: white;
+    border-radius: 40px;
+    position: relative;
+    padding: 14px;
+    box-sizing: border-box;
 }
 
 #close-setting-button {
-  position: absolute;
-  right: -17px;
-  top: -21px;
-  transform: rotate(12deg) scale(0.9);
-  transition: 0.3s;
+    position: absolute;
+    right: -17px;
+    top: -21px;
+    transform: rotate(12deg) scale(0.9);
+    transition: 0.3s;
 }
 
 #close-setting-button:hover {
-  transform: rotate(102deg) scale(1.1);
+    transform: rotate(102deg) scale(1.1);
 }
 
 .save-button-container {
-  position: absolute;
-  bottom: 20px;
-  left: 0;
-  right: 0;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
 }
 
 .save-setting-button {
-  width: 120px;
-  font-weight: 200;
-  font-size: 1.1em;
-  color: white;
-  background-color: #0556C6;
-  border: none;
-  border-radius: 5px;
-  height: 32px;
-  cursor: pointer;
+    width: 120px;
+    font-weight: 200;
+    font-size: 1.1em;
+    color: white;
+    background-color: #0556C6;
+    border: none;
+    border-radius: 5px;
+    height: 32px;
+    cursor: pointer;
 }
 
 .hidden {
-  display: none;
+    display: none;
+}
+
+/* 弹窗列表样式 */
+#gate-list {
+    width: 100%;
+    height: 70%;
+    /*box-shadow: 0 2px 10px 0 rgb(0 0 0 / 19%);*/
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.gate-list-item {
+    display: grid;
+    grid-template-columns: 1fr 70px;
+    height: 50px;
+    margin: 8px 10px;
+    box-sizing: border-box;
+    place-items: center;
+    background-color: #f6f6f6;
+}
+
+.gate-list-item > p {
+    font-size: 14px;
+}
+
+.gate-list-item:hover {
+    background-color: #dcdcdc;
+}
+
+.gate-list-item.active {
+    background-color: #b7b7b7;
+}
+
+.status {
+    font-weight: bold;
+}
+
+.open {
+    color: green;
+}
+
+.closed {
+    color: red;
 }

backend/microservice-provider-access-8002/src/main/resources/static/access/assets/js/setting-panel.js

@@ -25,6 +25,15 @@ DOMSettingPanel.addEventListener('click', function (e) {
     e.stopPropagation()
 })
 DOMSaveSettingButton.addEventListener('click', function (e) {
-    closeSettingPanel()
     e.stopPropagation()
+    if (window.selectGateId) {
+        closeSettingPanel()
+        location.href = "./index.html?gateId=" + window.selectGateId
+    } else {
+        alert("请选择大门")
+    }
 })
+
+// 绑定到全局
+window.showSettingPanel = showSettingPanel
+window.closeSettingPanel = closeSettingPanel

backend/microservice-provider-access-8002/src/main/resources/static/access/index.html

@@ -8,49 +8,64 @@
     <!-- Electron -->
     <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src *; img-src *; connect-src *;"> -->
     <title>社区疫情防控系统 - 门禁端</title>
-    <link rel="stylesheet" href="./assets/css/index.css" />
-    <link rel="stylesheet" href="./assets/css/setting-panel.css" />
+    <link rel="stylesheet" href="./assets/css/index.css"/>
+    <link rel="stylesheet" href="./assets/css/setting-panel.css"/>
 </head>
 
 <body>
-    <div class="ctrl-btn">
-        <img class="btn btn-ctrl" id="setting-button" src="./assets/svg/setting.svg" alt="">
-        <img class="btn btn-ctrl" id="fullscreen-button" src="./assets/svg/fullscreen.svg" alt="">
+<div class="ctrl-btn">
+    <img class="btn btn-ctrl" id="setting-button" src="./assets/svg/setting.svg" alt="">
+    <img class="btn btn-ctrl" id="fullscreen-button" src="./assets/svg/fullscreen.svg" alt="">
+</div>
+<div class="container">
+    <div class="top-container">
+        <p id="gate-name" style="font-size: 28px;">Loading...</p>
     </div>
-    <div class="container">
-        <div class="left-container">
-            <h1>进出社区请扫码</h1>
-            <h3>社区居民</h3>
-            <p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
-            <p>2. 点击确认进入，门即开启</p>
+    <div class="left-container">
+        <h1>进出社区请扫码</h1>
+        <h3>社区居民</h3>
+        <p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
+        <p>2. 点击确认进入，门即开启</p>
 
-            <h3>外来访客</h3>
-            <p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
-            <p>2. 填写进入申请表</p>
+        <h3>外来访客</h3>
+        <p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
+        <p>2. 填写进入申请表</p>
 
-            <h3>长期租客</h3>
-            <p>1. 请联系管理员为你添加进出权限</p>
-        </div>
-        <div class="right-container">
-            <img id="qrcode" src="">
-            <p id="refreshTimeCountDown"></p>
-        </div>
+        <h3>长期租客</h3>
+        <p>1. 请联系管理员为你添加进出权限</p>
     </div>
+    <div class="right-container">
+        <h1 id="no-qrcode">请选择大门</h1>
+        <img id="qrcode" src="" style="display: none">
+        <p id="refreshTimeCountDown"></p>
+    </div>
+</div>
 
-    <div id="full-screen-mask" class="full-screen-mask"></div>
-    <div id="setting-container" class="setting-container">
-        <div class="setting-panel">
-            <!-- 关闭按钮 -->
-            <img id="close-setting-button" class="btn" src="./assets/svg/close.svg" alt="">
+<div id="full-screen-mask" class="full-screen-mask hidden"></div>
+<div id="setting-container" class="setting-container hidden">
+    <div class="setting-panel">
+        <!-- 关闭按钮 -->
+        <img id="close-setting-button" class="btn" src="./assets/svg/close.svg" alt="">
 
-            <div class="save-button-container" style="text-align: center;">
-                <button class="save-setting-button">保 存</button>
+        <h3 style="text-align: center;">请选择大门</h3>
+
+        <div id="gate-list">
+            <div class="gate-list-item">
+                <p>大门1</p>
+                <p class="status open closed">
+                    开放 封闭
+                </p>
             </div>
         </div>
+
+        <div class="save-button-container" style="text-align: center;">
+            <button class="save-setting-button">保 存</button>
+        </div>
     </div>
-    <script src="./renderer.js" type="module"></script>
-    <script src="./assets/js/setting-panel.js" type="module"></script>
-    <script src="./assets/js/websocket.js"></script>
+</div>
+<script src="./assets/js/setting-panel.js" type="module"></script>
+<script src="./renderer.js" type="module"></script>
+<script src="./assets/js/websocket.js"></script>
 </body>
 
 </html>

backend/microservice-provider-access-8002/src/main/resources/static/access/renderer.js

@@ -1,3 +1,4 @@
+// 定义常量
 const url = "https://epp.only4.work/access/wechat/getUnlimitedQRCode"
 const page = "pages/index/index" // "pages/scan/entrance"
 const envVersion = "develop" // 正式版为 "release"，体验版为 "trial"，开发版为 "develop"
@@ -5,6 +6,36 @@ const autoColor = true
 const isHyaline = false
 const width = 500
 
+// 页面上的元素
+const image = document.getElementById('qrcode')
+const noQrInfo = document.getElementById('no-qrcode')
+const refreshTimeCountDown = document.getElementById('refreshTimeCountDown')
+const DOMGateList = document.getElementById('gate-list')
+
+// 大门列表
+window.gateList = []
+
+// 当前大门
+window.currentGate = null
+
+// 点击全屏
+document.getElementById("fullscreen-button").addEventListener("click", function () {
+    if (document.fullscreenElement) {
+        document.exitFullscreen();
+    } else {
+        if (inElectron) {
+            // electron 中
+            const message = JSON.stringify({
+                action: 'fullscreen'
+            });
+            window.parent.postMessage(message, '*');
+        } else {
+            // 浏览器中
+            document.body.requestFullscreen()
+        }
+    }
+})
+
 // 获取 Url 参数
 function getUrlParams() {
     let params = {}
@@ -18,46 +49,19 @@ function getUrlParams() {
     // console.log(params)
     return params
 }
-let urlParams = getUrlParams()
-console.log("urlParams", urlParams)
-
-// 是否在 electron 中
-const inElectron = urlParams['inElectron']
-
-// 当前的门禁端
-let gateId = urlParams['gateId'] || ""
-
-if (!gateId) {
-    // 弹出选择框
-}
-
-// 点击全屏
-document.getElementById("fullscreen-button").addEventListener("click", function () {
-    if (document.fullscreenElement) {
-        document.exitFullscreen();
-    } else {
-        if(inElectron) {
-            // electron 中
-            const message = JSON.stringify({
-                action: 'fullscreen'
-            });
-            window.parent.postMessage(message, '*');
-        } else {
-            // 浏览器中
-            document.body.requestFullscreen()
-        }
-    }
-})
-
-// 页面上的元素
-const image = document.getElementById('qrcode')
-const refreshTimeCountDown = document.getElementById('refreshTimeCountDown')
 
 // 定时更新页面上的小程序码
 let i = 0, refreshTime = 10 + 1
+
 function updateQRCode() {
+    // 取消图片隐藏
+    image.style.visibility = '';
+    image.style.display = '';
+    noQrInfo.style.display = 'none';
+
     if (i % refreshTime == 0) {
-        let scene = encodeURIComponent(`guard&${Date.now()}`);
+        // scene 最长支支持 32 位，所以这里不传入时间戳
+        let scene = encodeURIComponent(`guard&${window.currentGate.id}`); // &${Date.now()}
         image.src = `${url}?page=${page}&scene=${scene}&envVersion=${envVersion}&width=${width}&autoColor=${autoColor}&isHyaline=${isHyaline}`
         console.log(image.src)
         refreshTimeCountDown.innerHTML = ` `
@@ -67,5 +71,76 @@ function updateQRCode() {
     i = i % refreshTime + 1
 }
 
-updateQRCode()
-setInterval(updateQRCode, 1000)
+// 挂载到 window 上
+window.updateQRCode = updateQRCode
+
+// 弹窗中修改 item
+function changePanelSelectGate(gateId) {
+    // 删除旧的 active
+    let activeList = document.querySelectorAll('.gate-list-item.active')
+    for (let a of activeList) {
+        a.classList.remove('active')
+    }
+
+    // 添加新的 active
+    let newActiveItem = document.getElementById(`gate-list-${gateId}`)
+    if (newActiveItem) {
+        newActiveItem.classList.add('active')
+        window.selectGateId = gateId
+    }
+}
+
+// 挂载到 window 上
+window.changePanelSelectGate = changePanelSelectGate
+
+// 发送请求，获取大门列表
+async function getGateList() {
+    const response = await fetch('https://epp.only4.work/access/gate/guard-client/getGateList');
+    const data = await response.json();
+    return data.data;
+}
+
+window.onload = async function () {
+    // 获取 url 参数
+    let urlParams = getUrlParams()
+    console.log("urlParams", urlParams)
+
+    // 是否在 electron 中
+    const inElectron = urlParams['inElectron']
+
+    // 当前的门禁端
+    let gateId = urlParams['gateId'] || ""
+
+    // 获取大门列表
+    window.gateList = await getGateList()
+    console.log("gateList", window.gateList)
+
+    let domList = []
+    for (let gate of window.gateList) {
+        domList.push(`
+            <div id="gate-list-${gate.id}" class="gate-list-item" onclick="window.changePanelSelectGate('${gate.id}')">
+                <p>${gate.name}</p>
+                <p class="status ${gate.open ? 'open' : 'closed'}">
+                    ${gate.open ? '开放' : '封闭'}
+                </p>
+            </div>
+        `)
+    }
+    DOMGateList.innerHTML = domList.join('')
+
+    // 通过id 找门禁
+    window.currentGate = gateList.find((gate) => gate.id === gateId)
+
+    if (!window.currentGate) {
+        // 弹出选择框
+        window.showSettingPanel && window.showSettingPanel()
+    } else {
+        document.querySelector('#gate-name').textContent = window.currentGate.name
+        // 开始更新图片
+        updateQRCode()
+        setInterval(updateQRCode, 1000)
+    }
+}
+
+
+