1

李宁
Commit 49713984 authored Aug 25, 2025 by 李宁
Showing 4 changed files with 172 additions and 52 deletions
huaian/css/demo.css
huaian/demo.html
huaian/js/demo.js
huaian/js/lang.js
--- a/huaian/css/demo.css
+++ b/huaian/css/demo.css
@@ -227,10 +227,6 @@ html,body{
    font-size: .36rem;
    font-weight: 500;
 }
-.conDiv .swDown .tip{
-    display: none;
-    font-size: .28rem;
-}
 .conDiv .swDown .buttDiv .one{
    border-radius: 4px;
    background: #568FFF;
@@ -275,24 +271,6 @@ html,body{
 .conDiv .swDown .buttDiv .none{
    display: none;
 }
-.conDiv .swDown .buttDiv .twoNew .left{
-    width: 1.68rem;
-    background: #2D2D2D;
-    color: #B2B2B2;
-    border: none;
-}
-.conDiv .swDown .buttDiv .twoNew .blue{
-    width: 5.18rem;
-}
-.conDiv .swDown .buttDiv .threeNew .left{
-    width: 1.68rem;
-    background: #2D2D2D;
-    color: #B2B2B2;
-    border: none;
-}
-.conDiv .swDown .buttDiv .threeNew .blue{
-    width: 2.5rem;
-}
 .alertDiv{
    position: fixed;
@@ -618,18 +596,17 @@ html,body{
 .mpCon .til{
    border-radius: .2rem .4rem .4rem 0;
    background: #568FFE;
-    width: 1.56rem;
    text-align: center;
    font-size: .28rem;
    color: #fff;
    margin-top: .56rem;
-    padding: .12rem 0;
+    padding: .12rem .2rem;
 }
 .mpCon .bts{
    color: #333;
    font-size: .32rem;
    margin-top: .2rem;
-    line-height: .52rem;
+    line-height: .4rem;
 }
 .mpCon .small{
    font-size: .28rem;
@@ -675,4 +652,116 @@ html,body{
 }
 .pickAlert .van-picker__title{
    line-height: 44px;
+}
+.noShootCon{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    background: #fff;
+    border-radius: .2rem;
+    width: 6rem;
+    font-size: .3rem;
+    padding: 0 .4rem;
+    box-sizing: border-box;
+}
+.noShootCon .topBg{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+.noShootCon .til{
+    border-radius: .2rem .4rem .4rem 0;
+    background: #568FFE;
+    text-align: center;
+    font-size: .28rem;
+    color: #fff;
+    margin-top: .56rem;
+    padding: .12rem .2rem;
+}
+.noShootCon .dtil{
+    color: #333;
+    font-size: .28rem;
+    font-weight: 500;
+    margin-top: .24rem;
+    line-height: .4rem;;
+}
+.noShootCon .dimg{
+    width: 100%;
+    margin-top: .16rem;
+}
+.noShootCon .botBut{
+    display: flex;
+    justify-content: space-between;
+    margin-top: .32rem;
+    margin-bottom: .48rem;
+}
+.noShootCon .botBut div{
+    font-size: .32rem;
+    font-weight: 500;
+    border-radius: .08rem;
+    background: #F6F6F6;
+    color: #666;
+    height: .88rem;
+    line-height: .88rem;
+    text-align: center;
+    width: 2.52rem;
+}
+.noShootCon .botBut .right{
+    color: #fff;
+    background: #568FFE;
+}
+.paiZhaoCon{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    background: #fff;
+    border-radius: .2rem;
+    width: 6.4rem;
+    padding: .48rem;
+    box-sizing: border-box;
+}
+.paiZhaoCon .til{
+    color: #333;
+    text-align: center;
+    font-size: .36rem;
+    font-weight: bold;
+    margin-bottom: .2rem;
+}
+.paiZhaoCon .ts{
+    color: #333;
+    font-size: .32rem;
+    line-height: .52rem;
+    margin-bottom: .2rem;
+}
+.paiZhaoCon img{
+    width: 3.76rem;
+    height: 6.68rem;
+    display: block;
+    margin: auto;
+}
+.paiZhaoCon .botBut{
+    display: flex;
+    justify-content: space-between;
+    margin-top: .32rem;
+}
+.paiZhaoCon .botBut div{
+    font-size: .32rem;
+    font-weight: 500;
+    border-radius: .08rem;
+    background: #F6F6F6;
+    color: #666;
+    height: .88rem;
+    line-height: .88rem;
+    text-align: center;
+    width: 2.64rem;
+}
+.paiZhaoCon .botBut .right{
+    color: #fff;
+    background: #568FFE;
 }
\ No newline at end of file
--- a/huaian/demo.html
+++ b/huaian/demo.html
@@ -6,15 +6,14 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>江苏移动</title>
  <link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
+  <link rel="stylesheet" href="css/demo.css?8989898989">
-  <link rel="stylesheet" href="css/demo.css?1289381230">
 </head>
 <body>
    <div class="container">
        <div class="cameraDiv" id="local-player"></div>
+        <canvas id="canvas" style="display: none;"></canvas>
        <div class="conDiv">
            <div class="tsDiv" id="exampleTsDiv">
@@ -52,16 +51,16 @@
                    <div>切换</div>
                </div>
                <div class="border"></div>
-                <div class="center"></div>
+                <div class="center" id="cameraArea"></div>
                <div class="border"></div>
                <div class="butt" id="inputAccountTs">
                    <div class="text">账号识别困难?点这里</div>
                    <div class="bclick" id="accountAlertShow">手动输入</div>
                </div>
-                <div class="butt" id="inputSnTs">
+                <!-- <div class="butt" id="inputSnTs">
                    <div class="text">串号识别困难?点这里</div>
                    <div class="bclick" id="snAlertShow">手动输入</div>
-                </div>
+                </div> -->
            </div>
            <div class="swDown" id="tipDiv">
@@ -70,11 +69,6 @@
                    <div class="one none clickButt" id="nextQuestion" key="nextStep">下一个问题</div>
-                    <div class="two none twoNew" id="shootButt">
-                        <div class="clickButt left" key="bunengpai">无法拍摄</div>
-                        <div class="blue clickButt" key="yiwancheng">已完成</div>
-                    </div>
                    <div class="two none" id="qiaoOrZhi">
                        <div class="clickButt" key="zhilian">直连</div>
                        <div class="clickButt" key="qiaolian">桥连</div>
@@ -102,18 +96,13 @@
                        <div class="clickButt" key="buqingchu">不清楚</div>
                    </div>
-                    <div class="three none threeNew" id="shootButt2">
+                    <div class="two none" id="shootButt2">
-                        <div class="clickButt left" key="bunengpai">无法拍摄</div>
                        <div class="clickButt blue" key="uninstall">用户未安装</div>
                        <div class="clickButt blue" key="yiwancheng">已完成</div>
                    </div>
-                    <div class="one none clickButt" id="snButton" key="yiwancheng">已完成</div>
+                    <div class="one none clickButt" id="shootButt" key="yiwancheng">已完成</div>
                </div>
-                <!-- <div class="tip1 tip">你可直接语音回复“准备好了”</div>
-                <div class="tip2 tip">你可语音回复“已完成”或“不能拍”</div>
-                <div class="tip3 tip">你可直接语音回复当前的状态</div> -->
            </div>
        </div>
@@ -144,12 +133,12 @@
        <div class="alertDiv" id="snAlertDiv2">
            <div class="inner">
-                <div class="til">请确认设备串号</div>
+                <div class="til" id="snAlertTile">请确认设备串号</div>
                <textarea id="snValue2" class="input snInput" rows="1" type="text" placeholder="请输入设备串号"></textarea>
                <div class="ts" id="snTs">如识别错误你可重新进行拍摄或直接修改</div>
                <div class="errorTs" id="snErrorTs2"></div>
                <div class="bot">
-                    <button class="cancel" id="snAgain">重新拍摄</button>
+                    <button class="cancel snAgain">重新拍摄</button>
                    <button class="submit" onclick="snInputSubmit('2')">确认</button>
                </div>
            </div>
@@ -212,7 +201,9 @@
    <div class="outAlert" id="gongfuExampleAlert">
        <div class="mpCon">
            <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
-            <div class="til">温馨提示</div>
+            <div style="display: flex;">
+                <div class="til">温馨提示</div>
+            </div>
            <div class="bts">拍摄时请手持工牌，并将工服上的logo置于屏幕中央，如图所示:</div>
            <img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png" alt="">
@@ -223,7 +214,9 @@
    <div class="outAlert" id="gongpaiExampleAlert">
        <div class="mpCon">
            <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
-            <div class="til">温馨提示</div>
+            <div style="display: flex;">
+                <div class="til">温馨提示</div>
+            </div>
            <div class="bts">如果您的工牌已经有了“岁月”的痕迹（磨损严重），拍摄时请将摄像头聚焦到工牌，如下图所示</div>
            <img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongpai.png" alt="">
@@ -267,7 +260,9 @@
    <div class="outAlert" id="jdhSnSbErrorAlert">
        <div class="mpCon">
            <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
-            <div class="til">温馨提示</div>
+            <div style="display: flex;">
+                <div class="til">串号无法识别? 请进行以下尝试</div>
+            </div>
            <div class="bts small">1、请将摄像头近距离正面聚焦在 STBID/SN 码上，确保整串字符完整清晰。</div>
            <img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/jdhSnSbError.png" alt="">
            <div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div>
@@ -280,7 +275,9 @@
    <div class="outAlert" id="cgmSnSbErrorAlert">
        <div class="mpCon">
            <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
-            <div class="til">温馨提示</div>
+            <div style="display: flex;">
+                <div class="til">温馨提示</div>
+            </div>
            <div class="bts small">1、请将摄像头近距离正面聚焦在 CMEI码上，确保整串字符完整清晰。</div>
            <img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cgmSnSbError.png" alt="">
            <div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div>
@@ -290,6 +287,40 @@
        </div>
    </div>
+    <div class="outAlert" id="noShootShowAlert">
+        <div class="noShootCon">
+            <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
+            <div style="display: flex;">
+                <div class="til">设备无法识别? 请进行以下尝试</div>
+            </div>
+            <div class="dtil" id="noShootTextShow">方法1:近距离聚焦拍摄光猫正面,露出移动的标识。</div>
+            <img class="dimg" id="noShootImgShow" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/noShoot/Ogm.png">
+            <div class="dtil">方法2:使用页面右上方镜头包功能尝试切换摄像头进行识别。</div>
+            <img class="dimg" src="http://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png">
+            <div class="dtil">方法3:点击【无法拍摄】跳过此环节。</div>
+            <div class="botBut">
+                <div class="clickButt left" key="bunengpai">无法拍摄</div>
+                <div class="right" id="hideNoShootAlert">我知道了</div>
+            </div>
+        </div>
+    </div>
+    <div class="outAlert" id="pictureShowAlert">
+        <div class="paiZhaoCon">
+            <div class="til">温馨提示</div>
+            <div class="ts">为确保准确识别串号，请拍清照片并确认串号清晰可见后，再提交。</div>
+            <img id="photoImg" src="http://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png">
+            <div class="botBut">
+                <div class="left snAgain" key="photo">重新拍摄</div>
+                <div class="right" id="submitPicture">提交</div>
+            </div>
+        </div>
+    </div>
    <!-- <script type="text/javascript" charset="utf-8" src="js/vconsole.min.js"></script>
    <script>
      var vConsole = new VConsole();
@@ -300,11 +331,9 @@
    <script src="js/axios.min.js"></script>
    <script src="js/AgoraRTC_N.js"></script>
    <script src="js/util.js?12312313"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vant.min.js"></script>
+    <script src="js/demo.js?99"></script>
-    <script src="js/demo.js?12121212"></script>
    </script>
 </body>

--- a/huaian/js/demo.js
+++ b/huaian/js/demo.js
--- a/huaian/js/lang.js
+++ b/huaian/js/lang.js
+window.noShootNum = 3
+window.snInputNum = 3
\ No newline at end of file