Home Explore Help
Register Sign In
chenzhiguang
/
AI_Change_code
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

0524

tremble 4 years ago
parent
df6b31780a
commit
7bbed69d67
47 changed files with 699 additions and 216 deletions
Split View Show Diff Stats
  1. 2 1
      h5/code/css/app.css
  2. 166 0
      h5/code/css/style.css
  3. BIN
      h5/code/images/back.png
  4. BIN
      h5/code/images/backtophoto.png
  5. BIN
      h5/code/images/diaable_reg_btn@2x.png
  6. BIN
      h5/code/images/download.png
  7. BIN
      h5/code/images/mask/1.png
  8. BIN
      h5/code/images/mask/2.png
  9. BIN
      h5/code/images/mask/3.png
  10. BIN
      h5/code/images/mask/4.png
  11. BIN
      h5/code/images/mask/5.png
  12. BIN
      h5/code/images/mask/6.png
  13. BIN
      h5/code/images/mask/demo.jpg
  14. BIN
      h5/code/images/reg_btn@2x.png
  15. BIN
      h5/code/images/rephoto.png
  16. BIN
      h5/code/images/share.png
  17. BIN
      h5/code/images/unable_rephoto.png
  18. BIN
      h5/code/images/unable_useit.png
  19. BIN
      h5/code/images/useit.png
  20. 159 110
      h5/code/index.html
  21. 1 1
      h5/code/js/config.js
  22. 133 35
      h5/code/js/websocket.js
  23. 2 1
      miniProgram/app.js
  24. 1 1
      miniProgram/app.json
  25. 1 1
      miniProgram/assets/fonts/iconfont.wxss
  26. 6 2
      miniProgram/config/index.js
  27. 38 8
      miniProgram/pages/camera/index.js
  28. 6 6
      miniProgram/pages/camera/index.wxml
  29. 23 10
      miniProgram/pages/camera/index.wxss
  30. 9 1
      miniProgram/pages/example/index.js
  31. 3 2
      miniProgram/pages/example/index.wxml
  32. 13 0
      miniProgram/pages/example/index.wxss
  33. 8 1
      miniProgram/pages/index/index.js
  34. 1 3
      miniProgram/pages/index/index.json
  35. 5 2
      miniProgram/pages/index/index.wxml
  36. 30 2
      miniProgram/pages/index/index.wxss
  37. 6 4
      miniProgram/pages/select/index.js
  38. 3 3
      miniProgram/pages/select/index.wxml
  39. 2 1
      miniProgram/pages/select/index.wxss
  40. 36 11
      miniProgram/pages/work/index.js
  41. 2 1
      miniProgram/pages/work/index.json
  42. 8 3
      miniProgram/pages/work/index.wxml
  43. 23 0
      miniProgram/pages/work/index.wxss
  44. 2 2
      miniProgram/project.config.json
  45. 2 2
      miniProgram/project.private.config.json
  46. 5 1
      miniProgram/utils/routes.js
  47. 3 1
      miniProgram/utils/tools.js

+ 2 - 1
h5/code/css/app.css
View File 

@@ -61,7 +61,7 @@ body {
 
   background: #fff no-repeat center 10%;
 
   background-size: 20%;
 
 }
 
-.app-alert.timeout {
 
+.app-alert.timeout,.app-alert.save {
 
   background-image: url("../images/icon/used-timeout.png");
 
 }
 
 .app-alert.stop {
 
@@ -77,6 +77,7 @@ body {
 
   background-image: url("../images/icon/fail.png");
 
 }
 
 .app-alert.timeout .btns a:last-child,
 
+.app-alert.save .btns a:last-child,
 
 .app-alert.stop .btns a:last-child,
 
 .app-alert.used .btns a:last-child {
 
   color: #3EAFFF;

+ 166 - 0
h5/code/css/style.css
View File 

@@ -44,6 +44,11 @@ li {
 
   --margin: 5px;
 
 }
 
 
+.body{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
 #app {
 
   font: 16px "Microsoft YaHei", Helvetica, Arial, sans-serif;
 
   -webkit-font-smoothing: antialiased;
 
@@ -124,3 +129,164 @@ li {
 
   display: inline-block;
 
 }
 
 
+.back{
 
+  position: fixed;
 
+  left: 20px;
 
+  top: 20px;
 
+  z-index: 999;
 
+  width: 26px;
 
+}
 
+
 
+#work,#myPhoto{
 
+  width: 100vw;
 
+  height: 100%;
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  background: #000;
 
+  z-index: 99;
 
+  display: none;
 
+}
 
+
 
+
 
+#work .demo,#myPhoto .myImg{
 
+  height: 100%;
 
+  position: absolute;
 
+  transform: translate(-50%,-50%);
 
+  top: 50%;
 
+  left: 50%;
 
+  z-index: -1;
 
+}
 
+
 
+#work .mask{
 
+  width: 100%;
 
+  height: 100%;
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  background: rgba(0, 0, 0, 0.7);
 
+  text-align: center;
 
+}
 
+
 
+#work .mask > span{
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%,-50%);
 
+  display: inline-block;
 
+  width: 100%;
 
+  color: #fff;
 
+  letter-spacing: 1px;
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+}
 
+
 
+
 
+#work .btn-cls{
 
+  position: absolute;
 
+  bottom: 30px;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  align-items: center;
 
+  width: 100%;
 
+  z-index: 999;
 
+}
 
+
 
+#work .btn-cls > img{
 
+  width: 10%;
 
+}
 
+
 
+
 
+#work .btn-cls .takePhoto{
 
+  position: relative;
 
+  width: 40%;
 
+  max-width: 180px;
 
+  text-align: center;
 
+  color: #fff;
 
+}
 
+
 
+#work .takePhoto img{
 
+  position: absolute;
 
+  z-index: -1;
 
+  left: 0;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  width: 100%;
 
+}
 
+
 
+#work .takePhoto span{
 
+  line-height: 100%;
 
+}
 
+
 
+
 
+#work .after_btn{
 
+  visibility: hidden;
 
+}
 
+
 
+
 
+#work .after_btn .takePhoto{
 
+  width: 30%;
 
+}
 
+
 
+#work .after_btn > img{
 
+  width: 14%;
 
+}
 
+
 
+
 
+#myPhoto .share{
 
+  position: absolute;
 
+  bottom: 0;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  width: 100%;
 
+  padding: 0 20px;
 
+  z-index: 999;
 
+  height: 80px;
 
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #FFFFFF 100%);
 
+}
 
+
 
+#myPhoto .share > div{
 
+  background: #FFFFFF;
 
+  border-radius: 10px;
 
+  font-size: 0;
 
+  padding: 12px;
 
+}
 
+
 
+#myPhoto .share > .quan{
 
+  width: auto;
 
+  display: flex;
 
+  align-items: center;
 
+  padding: 12px 36px;
 
+}
 
+
 
+#myPhoto .share > .quan > span{
 
+  display: inline-block;
 
+  font-size: 16px;
 
+  margin-left: 10px;
 
+}
 
+
 
+#myPhoto .share > div >img{
 
+  width: 32px;
 
+  height: 32px;
 
+}
 
+
 
+@media screen and (max-width: 350px) {
 
+  #myPhoto .share > div{
 
+    padding: 10px;
 
+  }
 
+  
+  #myPhoto .share > .quan{
 
+    padding: 10px 14px;
 
+  }
 
+
 
+    
+  #myPhoto .share > .quan > span{
 
+    font-size: 14px;
 
+  }
 
+
 
+  #myPhoto .share > div >img{
 
+    width: 28px;
 
+    height: 28px;
 
+  }
 
+}

BIN
h5/code/images/back.png
View File


BIN
h5/code/images/backtophoto.png
View File


BIN
h5/code/images/diaable_reg_btn@2x.png
View File


BIN
h5/code/images/download.png
View File


BIN
h5/code/images/mask/1.png
View File


BIN
h5/code/images/mask/2.png
View File


BIN
h5/code/images/mask/3.png
View File


BIN
h5/code/images/mask/4.png
View File


BIN
h5/code/images/mask/5.png
View File


BIN
h5/code/images/mask/6.png
View File


BIN
h5/code/images/mask/demo.jpg
View File


BIN
h5/code/images/reg_btn@2x.png
View File


BIN
h5/code/images/rephoto.png
View File


BIN
h5/code/images/share.png
View File


BIN
h5/code/images/unable_rephoto.png
View File


BIN
h5/code/images/unable_useit.png
View File


BIN
h5/code/images/useit.png
View File


+ 159 - 110
h5/code/index.html
View File 

@@ -2,138 +2,187 @@
 
 <html>
 
 
 <head>
 
-    <meta charset="utf-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <meta content="yes" name="apple-mobile-web-app-capable">
 
-    <meta content="yes" name="apple-touch-fullscreen">
 
-    <meta content="black" name="apple-mobile-web-app-status-bar-style">
 
-    <meta content="telephone=no" name="format-detection">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />
 
-    <title>AI换装</title>
 
-    <link href="./css/style.css" rel="stylesheet" />
 
-    <link rel="stylesheet" type="text/css" href="./css/animate.min.css" />
 
-    <link rel="stylesheet" href="./css/app.css">
 
+  <meta charset="utf-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
+  <meta content="yes" name="apple-mobile-web-app-capable">
 
+  <meta content="yes" name="apple-touch-fullscreen">
 
+  <meta content="black" name="apple-mobile-web-app-status-bar-style">
 
+  <meta content="telephone=no" name="format-detection">
 
+  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />
 
+  <title>我和我的祖先</title>
 
+  <link href="./css/style.css" rel="stylesheet" />
 
+  <link rel="stylesheet" type="text/css" href="./css/animate.min.css" />
 
+  <link rel="stylesheet" href="./css/app.css">
 
 </head>
 
 
 <body>
 
-    <div class="loading-mask">
 
+  <div class="loading-mask">
 
 
-    </div>
 
+  </div>
 
 
+  <div class="body">
 
     <div id="app">
 
-        <div class="ai_top">
 
-            <div class="ai_title">选择喜爱的三国人物，控制屏幕人物切换</div>
 
-            <ul class="ai_pic">
 
-                <li class="active" data-msg="switch 1">
 
-                    <img src="./images/1.png" alt="">
 
-                    <span>诸葛亮</span>
 
-                </li>
 
-                <li data-msg="switch 2">
 
-                    <img src="./images/2.png" alt="">
 
-                    <span>关羽</span>
 
-                </li>
 
-                <li data-msg="switch 3">
 
-                    <img src="./images/3.png" alt="">
 
-                    <span>赵云</span>
 
-                </li>
 
-                <li data-msg="switch 4">
 
-                    <img src="./images/4.png" alt="">
 
-                    <span>曹操</span>
 
-                </li>
 
-                <li data-msg="switch 5">
 
-                    <img src="./images/5.png" alt="">
 
-                    <span>吕布</span>
 
-                </li>
 
-                <li data-msg="switch 6">
 
-                    <img src="./images/6.png" alt="">
 
-                    <span>蔡文姬</span>
 
-                </li>
 
+      <div class="ai_top">
 
+        <div class="ai_title">选择喜爱的三国人物，控制屏幕人物切换</div>
 
+        <ul class="ai_pic">
 
+          <li data-msg="switch 1">
 
+            <img src="./images/1.png" alt="">
 
+            <span>诸葛亮</span>
 
+          </li>
 
+          <li data-msg="switch 2">
 
+            <img src="./images/2.png" alt="">
 
+            <span>关羽</span>
 
+          </li>
 
+          <li data-msg="switch 3">
 
+            <img src="./images/3.png" alt="">
 
+            <span>赵云</span>
 
+          </li>
 
+          <li data-msg="switch 4">
 
+            <img src="./images/4.png" alt="">
 
+            <span>曹操</span>
 
+          </li>
 
+          <li data-msg="switch 5">
 
+            <img src="./images/5.png" alt="">
 
+            <span>吕布</span>
 
+          </li>
 
+          <li data-msg="switch 6">
 
+            <img src="./images/6.png" alt="">
 
+            <span>蔡文姬</span>
 
+          </li>
 
+
 
+        </ul>
 
+      </div>
 
+      <div class="ai_bottom">
 
+        <img class="photo" src="./images/botton@2x.png" alt="">
 
+      </div>
 
+    </div>
 
 
-            </ul>
 
+    <div id="work">
 
+      <img class="back" id="back" src="./images/back.png" alt="">
 
+      <img class="demo" src="./images/mask/demo.jpg" alt="">
 
+      <div class="mask">
 
+        <span>请正对画屏摄像头拍照</span>
 
+      </div>
 
+
 
+      <div id="comfirmcon" class="btn-cls">
 
+        <img src="./images/unable_rephoto.png" alt="">
 
+        <div id="takePhoto" class="takePhoto">
 
+          <span>确认拍照</span>
 
+          <img src="./images/reg_btn@2x.png" alt="">
 
         </div>
 
-        <div class="ai_bottom">
 
-            <img class="photo" src="./images/botton@2x.png" alt="">
 
+        <img src="./images/unable_useit.png" alt="">
 
+      </div>
 
+
 
+      <div id="selectcon" class="btn-cls after_btn">
 
+        <img id="rephoto" src="./images/rephoto.png" alt="">
 
+        <div class="takePhoto">
 
+          <span>确认拍照</span>
 
+          <img src="./images/diaable_reg_btn@2x.png" alt="">
 
         </div>
 
+        <img id="useit" src="./images/useit.png" alt="">
 
+      </div>
 
     </div>
 
 
-    <div class="app-mask"></div>
 
-    <div class="app-alert">
 
-      <div class="tips"></div>
 
-      <div class="btns">
 
-        <a class="btn-use" href="javascript:;">再次使用</a>
 
-        <a class="btn-link" data-href="http://nerual.4dage.com/" href="javascript:;">试试在线版</a>
 
+    <div id="myPhoto">
 
+      <img class="myImg" src="./images/mask/demo.jpg" alt="">
 
+
 
+      <div class="share">
 
+        <div id="backtophoto">
 
+          <img src="./images/backtophoto.png" alt="">
 
+        </div>
 
+
 
+        <div id="download">
 
+          <img src="./images/download.png" alt="">
 
+        </div>
 
+
 
+        <div class="quan" id="quan">
 
+          <img src="./images/share.png" alt="">
 
+          <span>分享朋友圈</span>
 
+        </div>
 
+        
       </div>
 
     </div>
 
-    <div class="app-view">
 
-      <div class="img"></div>
 
-      <div class="tip">
 
-        <div>
 
-          <div>长按图片保存</div>
 
-          <div>关闭后可在【我的相片】中查看</div>
 
-        </div>
 
-        <span class="close"></span>
 
+
 
+  </div>
 
+
 
+  <div class="app-mask"></div>
 
+  <div class="app-alert">
 
+    <div class="tips"></div>
 
+    <div class="btns">
 
+      <a class="btn-use" href="javascript:;">再次使用</a>
 
+      <a class="btn-link" >确定</a>
 
+    </div>
 
+  </div>
 
+  <div class="app-view">
 
+    <div class="img"></div>
 
+    <div class="tip">
 
+      <div>
 
+        <div>长按图片保存</div>
 
+        <div>关闭后可在【我的相片】中查看</div>
 
       </div>
 
+      <span class="close"></span>
 
     </div>
 
-    <div class="app-action-tips">
 
-      <div class="content loading">
 
-        <div class="lds-spinner">
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-        </div>
 
-        <div class="tips"></div>
 
+  </div>
 
+  <div class="app-action-tips">
 
+    <div class="content loading">
 
+      <div class="lds-spinner">
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
       </div>
 
-      <div class="content loading-switch">
 
-        <div class="lds-spinner">
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-          <div></div>
 
-        </div>
 
-        <div class="tips">正在切换画风</div>
 
+      <div class="tips"></div>
 
+    </div>
 
+    <div class="content loading-switch">
 
+      <div class="lds-spinner">
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
       </div>
 
-      <div class="content face-4">
 
-        <div class="tips">
 
-          将于1秒后拍摄
 
-        </div>
 
+      <div class="tips">正在切换画风</div>
 
+    </div>
 
+    <div class="content face-4">
 
+      <div class="tips">
 
+        将于1秒后拍摄
 
       </div>
 
-      <div class="content face-3">
 
-        <div class="tips">
 
-          将于2秒后拍摄
 
-        </div>
 
+    </div>
 
+    <div class="content face-3">
 
+      <div class="tips">
 
+        将于2秒后拍摄
 
       </div>
 
-      <div class="content face-2">
 
-        <div class="tips">
 
-          将于3秒后拍摄
 
-        </div>
 
+    </div>
 
+    <div class="content face-2">
 
+      <div class="tips">
 
+        将于3秒后拍摄
 
       </div>
 
-      <div class="content face-1">
 
-        <div class="tips">
 
-          快望向你身前的艺术<br>照设备，准备拍照啦
 
-        </div>
 
+    </div>
 
+    <div class="content face-1">
 
+      <div class="tips">
 
+        快望向你身前的艺术<br>照设备，准备拍照啦
 
       </div>
 
     </div>
 
-    <script type="text/javascript" src="js/jquery.min.js"></script>
 
-    <script type="text/javascript" src="js/config.js"></script>
 
-    <script type="text/javascript" src="js/utils.js"></script>
 
-    <script type="text/javascript" src="js/websocket.js"></script>
 
+  </div>
 
+  <script type="text/javascript" src="js/jquery.min.js"></script>
 
+  <script type="text/javascript" src="js/config.js"></script>
 
+  <script type="text/javascript" src="js/utils.js"></script>
 
+  <script type="text/javascript" src="js/websocket.js"></script>
 
 </body>
 
 
 </html>

+ 1 - 1
h5/code/js/config.js
View File 

@@ -2,7 +2,7 @@ window.__config = {
 
   /**
 
    * websocket地址
 
    */
 
-  ws: 'ws://4dart.4dage.com:9013', //'ws://139.159.231.201:8011',
 
+  ws: 'ws://8.135.106.227:9013', //'ws://139.159.231.201:8011',
 
   /**
 
    * 静态资源地址
 
    */

+ 133 - 35
h5/code/js/websocket.js
View File 

@@ -36,11 +36,11 @@ var app = {
 
     /**
 
      * 请求时间戳
 
      */
 
-    timestamp: __utils.getUrlParam('t'),
 
+    timestamp: __utils.getUrlParam('time'),
 
     /**
 
      * 切换风格id
 
      */
 
-    switchId: 1,
 
+    switchId: '',
 
 
 
 
@@ -82,32 +82,104 @@ var app = {
 
             app.send(msg)
 
         });
 
 
+        //跳转拍照页面
 
         $('.photo').on("click",function () {
 
+            
             app.checkOperationTimeout()
 
             if (!app.sendCheck()) {
 
                 return;
 
             }
 
-
 
+            $(`.body > div[id="work"]`).fadeIn().siblings().fadeOut()
 
+            $('.mask').show()
 
             self.send('readyphoto 1')
 
         })
 
 
+        // 确认拍照
 
+        $('#takePhoto').on("click",function () {
 
+            
+           
+            app.checkOperationTimeout()
 
+            if (!app.sendCheck()) {
 
+                return;
 
+            }
 
+            $('#comfirmcon').fadeOut()
 
+            $('#selectcon').css({'visibility':'visible'})
 
+            $('.mask').hide()
 
+
 
+            self.send('photo 1')
 
+        })
 
+
 
+        
+
 
+        //返回
 
+        $('#back').on("click",function () {
 
+
 
+            app.checkOperationTimeout()
 
+            if (!app.sendCheck()) {
 
+                return;
 
+            }
 
+
 
+            $(`.body > div[id="app"]`).fadeIn().siblings().fadeOut()
 
+            self.send('menu 1')
 
+        })
 
+
 
+        //返回拍照页面
 
+        $('#rephoto').on("click",function () {
 
+       
+            app.checkOperationTimeout()
 
+            if (!app.sendCheck()) {
 
+                return;
 
+            }
 
+
 
+            $('#comfirmcon').fadeIn()
 
+            $('#selectcon').css({'visibility':'hidden'})
 
+            $('.mask').show()
 
+
 
+
 
+            self.send('rephoto 1')
 
+        })
 
+
 
+        //拍照完成
 
+        $('#useit').on("click",function () {
 
+
 
+            app.checkOperationTimeout()
 
+            if (!app.sendCheck()) {
 
+                return;
 
+            }
 
+
 
+            self.send('usephoto 1')
 
+        })
 
+
 
+         //返回拍照
 
+         $('#backtophoto').on("click",function () {
 
+            window.location.reload()
 
+        })
 
+
 
+        $('#download').on("click",function () {
 
+            app.showAlert('请长按图片保存', 'save');
 
+        })
 
+
 
+        $('#quan').on("click",function () {
 
+            app.showAlert('请长按图片保存，分享朋友圈', 'save');
 
+        })
 
+
 
+
 
         $('.app-alert .btn-use').on('click', function () {
 
             var $alert = $('.app-alert')
 
             app.hideMask()
 
             $alert.removeClass($alert.data('class') + ' animated zoomIn')
 
             var text = $(this).text();
 
-            if (text == '尝试使用' || text == '再次使用') {
 
+            if (text == '尝试使用' || text == '再次使用'|| text == '重选画风') {
 
                 app.send('request')
 
+                $(`.body > div[id="app"]`).fadeIn().siblings().fadeOut()
 
             }
 
-
 
         })
 
 
         $('.app-alert .btn-link').on('click', function () {
 
-            if ($(this).text() == '重新拍照') {
 
+            if ($(this).text() == '确定'||$(this).text() == '取消') {
 
                 var $alert = $('.app-alert')
 
                 app.hideMask()
 
                 $alert.removeClass($alert.data('class') + ' animated zoomIn')
 
-                $('.btn-pic-take').click()
 
             }
 
         })
 
     },
 
@@ -117,7 +189,6 @@ var app = {
 
      */
 
     checkTimestamp(){
 
         let del = (new Date()).getTime() - this.timestamp
 
-        console.log(del>ONEDAY);
 
         if (del>ONEDAY) {
 
             return false
 
         }
 
@@ -152,12 +223,14 @@ var app = {
 
             $btns.eq(0).text('再次使用')
 
         } else if (/fail/.test(icon)) {
 
             $btns.eq(0).text('重选画风')
 
+        } else if (/save/.test(icon)) {
 
+            $btns.eq(0).text('确定')
 
         }
 
 
-        if (/used|timeout|stop|error/.test(icon)) {
 
-            $btns.eq(1).text('试试在线版').attr('href', $btns.eq(1).data('href'))
 
-        } else if (/fail/.test(icon)) {
 
-            $btns.eq(1).text('重新拍照').attr('href', 'javascript:;')
 
+        
+
 
+        if (/used|timeout|stop|error|fail|save/.test(icon)) {
 
+            $btns.eq(1).text('取消').attr('href', 'javascript:;')
 
         }
 
 
     },
 
@@ -258,16 +331,19 @@ var app = {
 
             var img = new Image()
 
             img.src = json.url + '?v=' + Date.now()
 
             img.onload = img.onerror = function(){
 
-                app.showMask();
 
-                var $view = $('.app-view')
 
-                if(img.width<img.height){
 
-                    json.vertical = true
 
-                    $view.addClass('vertical')
 
-                }
 
-                app.imgList.unshift(json);
 
-                $view.animateCss('zoomIn', function () {
 
-                    app.send('close')
 
-                }).find('.img').html('<img src="' + json.url + '?v=' + Date.now() + '">')
 
+                $('.myImg').attr('src', json.url + '?v=' + Date.now())
 
+                $(`.body > div[id="myPhoto"]`).fadeIn().siblings().fadeOut()
 
+                app.send('close')
 
+                // app.showMask();
 
+                // var $view = $('.app-view')
 
+                // if(img.width<img.height){
 
+                //     json.vertical = true
 
+                //     $view.addClass('vertical')
 
+                // }
 
+                // app.imgList.unshift(json);
 
+                // $view.animateCss('zoomIn', function () {
 
+                //     app.send('close')
 
+                // }).find('.myImg').attr('src', json.url + '?v=' + Date.now())
 
             }
 
         }, 300);
 
 
@@ -280,7 +356,7 @@ var app = {
 
 
     connection: function () {
 
         if (!this.checkTimestamp()) {
 
-             return app.showAlert('二维码超时不可用', 'fail')
 
+             return app.showAlert('二维码超时不可用', 'save')
 
         }
 
         try {
 
             var timer
 
@@ -302,9 +378,14 @@ var app = {
 
             }.bind(this);
 
 
             this.websocket.onmessage = function (msg) {
 
-                console.log(msg.data)
 
                 if (typeof msg.data == "string") {
 
                     switch (msg.data) {
 
+                        
+                        case 'timeout 0':
 
+                            app.hideLoading()
 
+                            app.send('close')
 
+                            app.showAlert('抱歉，因您长时间未使用<br>让下一位小伙伴体验吧', 'timeout')
 
+                            break;
 
                         case 'error 101':
 
                             console.log('发送的消息有误');
 
                             break;
 
@@ -315,6 +396,10 @@ var app = {
 
                             app.hideLoading()
 
                             app.showAlert('网络异常，生成失败', 'fail')
 
                             break;
 
+                        case 'error 303':
 
+                            app.hideLoading()
 
+                            app.showAlert('网络异常，生成失败', 'fail')
 
+                        break;
 
                         case 'error 404':
 
                             app.switchId = 0;
 
                             app.showAlert('切换图片失败', 'error');
 
@@ -326,6 +411,10 @@ var app = {
 
                                 app.showAlert('网络异常，请稍后再试', 'error');
 
                             }
 
                             break;
 
+                        case 'error 808':
 
+                            app.is_lose_used = true;
 
+                            app.is_other_used = true;
 
+                        break;
 
                         case 'error 600':
 
                             //console.log('未定义的消息');
 
                             break;
 
@@ -338,13 +427,12 @@ var app = {
 
                                 app.showAlert('当前设备正在使用中，请稍后', 'used');
 
                             }
 
                             break;
 
-                        case 'error 202':
 
-                            break;
 
                         case 'error 909':
 
-                            app.is_other_used = true;
 
-                            if (app.is_send_msg) {
 
-                                app.showAlert('当前设备正在使用中，请稍后', 'used');
 
-                            }
 
+                            app.send('close')
 
+                            setTimeout(() => {
 
+                                app.hideLoading()
 
+                                app.showAlert('生成图片失败，请稍后再试', 'fail')
 
+                            }, 500);
 
                             break;
 
                         case 'ok 200':
 
                             console.log('切换图片成功')
 
@@ -365,12 +453,21 @@ var app = {
 
                             break;
 
                         case 'ok 301':
 
                             console.log('拍照成功,开始等待照片')
 
+                            app.checkTimeout(true)
 
+                            app.checkOperationTimeout(true)
 
+                            // app.showLoading()
 
+                            break;
 
+
 
+                        case 'ok 203':
 
+                            console.log('正在合成图片')
 
                             app.is_action = false;
 
                             app.checkTimeout(true)
 
                             app.checkOperationTimeout(true)
 
-                            app.showActionTips(1000, function () {
 
-                                app.showLoading()
 
-                            });
 
+                            app.showLoading()
 
+
 
+                            // app.showActionTips(1000, function () {
 
+                            //     app.showLoading()
 
+                            // });
 
                             timer = setTimeout(function () {
 
                                 app.send('close')
 
                                 setTimeout(() => {
 
@@ -414,6 +511,7 @@ var app = {
 
         if (msg === 'request') {
 
             this.websocket.send(msg + ' ' + this.id)
 
         } else if (msg === 'close') {
 
+            this.websocket.send('menu 1')
 
             this.websocket.send(msg + ' 0')
 
         } else {
 
             app.websocket.send(msg)
 
@@ -425,10 +523,10 @@ var app = {
 
             app.showAlert('网络异常，请稍后再试', 'error');
 
             return false;
 
         } else if (this.is_other_used) {
 
-            app.showAlert('当前设备正在使用中，请稍后', 'used');
 
+            app.showAlert('当前有用户正在进行拍照换装<br/>请稍后刷新页面再次尝试', 'used');
 
             return false;
 
         } else if (this.is_lose_used) {
 
-            app.showAlert('当前设备正在使用中，请稍后', 'used');
 
+            app.showAlert('当前有用户正在进行拍照换装<br/>请稍后刷新页面再次尝试', 'used');
 
             return false;
 
         } else if (this.is_connect_ok === false) {
 
             app.showAlert('网络异常，请稍后再试', 'error');

+ 2 - 1
miniProgram/app.js
View File 

@@ -1,7 +1,8 @@
 
 // app.js
 
 App({
 
   onLaunch() {
 
-    
+    let info = wx.getSystemInfoSync()
 
+    this.globalData.deviceInfo = info
 
   },
 
   globalData: {
 
     userInfo: null

+ 1 - 1
miniProgram/app.json
View File 

@@ -9,7 +9,7 @@
 
   "window": {
 
     "backgroundTextStyle": "light",
 
     "navigationBarBackgroundColor": "#fff",
 
-    "navigationBarTitleText": "AI换装",
 
+    "navigationBarTitleText": "我和我的祖先",
 
     "navigationBarTextStyle": "black"
 
   },
 
   "style": "v2",

+ 1 - 1
miniProgram/assets/fonts/iconfont.wxss
View File 

@@ -11,7 +11,7 @@
 
 
 .iconfont {
 
   font-family: "iconfont" !important;
 
-  font-size: 16px;
 
+  font-size: 32rpx;
 
   font-style: normal;
 
   -webkit-font-smoothing: antialiased;
 
   -moz-osx-font-smoothing: grayscale;

+ 6 - 2
miniProgram/config/index.js
View File 

@@ -1,11 +1,15 @@
 
 
-export const API_BASE_URL = 'http://8.135.106.227:8007'
 
+export const API_BASE_URL = 'https://testhz.4dage.com'
 
 export const CDN_URL = 'https://houseoss.4dkankan.com/ai_change'
 
 export const TYPE = {
 
   1:'zhugeliang',
 
   2:'guanyu',
 
-  3:'zhaoyu',
 
+  3:'zhaoyun',
 
   4:'caocao',
 
   5:'lvbu',
 
   6:'caiwenji'
 
 }
 
+export const IMGSTR = {
 
+  qrcode:'/swapQrcode.jpg',
 
+  normal:'/swap.jpg'
 
+}

+ 38 - 8
miniProgram/pages/camera/index.js
View File 

@@ -14,9 +14,10 @@ import Router from '../../utils/routes'
 
 VueLikePage([],{
 
   data:{
 
     cdn_url:CDN_URL,
 
-    isBackCamera:true,
 
+    isBackCamera:false,
 
     current:'1',
 
-    currentImg:''
 
+    currentImg:'',
 
+    isSelect: false
 
   },
 
   methods:{
 
     onLoad:function (options) {
 
@@ -30,8 +31,21 @@ VueLikePage([],{
 
         })
 
       })
 
     },
 
+    onShow:function () {
 
+      // this.reTake()
 
+    },
 
+    loadcompele(){
 
+      this.setData({
 
+        loadCompele: true
 
+      })
 
+    },
 
     back(){
 
-      wx.navigateBack()
 
+      if (this.data.currentImg) {
 
+        this.reTake()
 
+      }
 
+      else{
 
+        wx.navigateBack()
 
+      }
 
     },
 
     changPosition(){
 
       this.setData({
 
@@ -40,7 +54,8 @@ VueLikePage([],{
 
     },
 
     reTake(){
 
       this.setData({
 
-        currentImg:''
 
+        currentImg:'',
 
+        isSelect:false
 
       })
 
     },
 
     submit(){
 
@@ -63,14 +78,23 @@ VueLikePage([],{
 
             Router.push({
 
               url: 'work',
 
               query: {
 
-                vr_link:data.msg
 
+                vr_link:data.msg,
 
+                id: this.data.current
 
               }
 
             })
 
           } 
+
 
+          else{
 
+            wx.showModal({
 
+              title: '无法识别人脸，请正对摄像头拍照',
 
+              showCancel:false
 
+            });
 
+          }
 
         },
 
         fail:()=>{
 
           wx.showModal({
 
-            title: '生成失败，请稍后重试'
 
+            title: '无法识别人脸，请正对摄像头拍照',
 
+            showCancel:false
 
           });
 
         },
 
         complete(){
 
@@ -85,9 +109,14 @@ VueLikePage([],{
 
         count: 1,
 
         sizeType: ['original', 'compressed'],
 
         success:res =>{
 
+          console.log(res)
 
           this.setData({
 
-            currentImg: res.tempFilePaths[0]
 
+            currentImg: res.tempFilePaths[0],
 
+            isSelect:true
 
           })
 
+
 
+          console.log(this.data.currentImg,this.data.isSelect)
 
+
 
         },
 
         fail:error =>{
 
           console.log(error);
 
@@ -100,7 +129,8 @@ VueLikePage([],{
 
         quality: 'high',
 
         success: (res) => {
 
           this.setData({
 
-            currentImg: res.tempImagePath
 
+            currentImg: res.tempImagePath,
 
+            isSelect:false
 
           })
 
         }
 
       })

+ 6 - 6
miniProgram/pages/camera/index.wxml
View File 

@@ -1,15 +1,15 @@
 
-<view class="container">
 
-  <view class="c_top">
 
-      <text bindtap="back" class="iconfont iconfanhui" />
 
+<view class="container" style="opacity:{{loadCompele?1:0}}">
 
+  <view class="c_top" >
 
+      <text bindtap="back" wx:if="{{!(!isSelect&&currentImg)}}" class="iconfont iconfanhui" />
 
   </view>
 
   <view class="c_cam">
 
     <camera wx:if="{{!currentImg}}" device-position="{{isBackCamera?'back':'front'}}" flash="off" binderror="error" ></camera>
 
     <image wx:else src="{{currentImg}}" mode="aspectFit" />
 
-    <image class="mask" src="{{cdn_url}}/images/mask/{{current}}.png" />
 
+    <image bindload="loadcompele" class="mask" wx:if="{{!isSelect}}"  mode="widthFix" src="{{cdn_url}}/images/mask/{{current}}.png" />
 
   </view>
 
     
   <view class="c_bottom">
 
-    <text>请正对摄像头拍照</text>
 
+    <text wx:if="{{!currentImg}}">请正对摄像头拍照</text>
 
     <view class="c_btn" wx:if="{{!currentImg}}">
 
       <view class="preview">
 
         <text wx:if="{{!currentImg}}" bindtap="selectImage" class="iconfont iconzhaopian" />
 
@@ -20,7 +20,7 @@
 
     </view>
 
 
     <view class="handle_img" style="--bottom: {{isIphoneX?'68rpx':'0'}};" wx:else>
 
-      <text bindtap="reTake">重拍</text>
 
+      <text bindtap="reTake">{{!isSelect?'重拍':''}}</text>
 
       <text bindtap="submit">使用图片</text>
 
     </view>

+ 23 - 10
miniProgram/pages/camera/index.wxss
View File 

@@ -12,8 +12,12 @@
 
   position: absolute;
 
   left: 40rpx;
 
   bottom: 60rpx;
 
-  font-size: 30rpx;
 
-  color: #fff;
 
+  font-size: 24rpx;
 
+  font-weight: bold;
 
+  color: #333;
 
+  padding: 10rpx;
 
+  border-radius: 50%;
 
+  background: rgba(255, 255, 255, 0.9);
 
 }
 
 .c_cam{
 
   width: 100%;
 
@@ -35,8 +39,9 @@
 
   position: absolute;
 
   width: 100%;
 
   height: 100%;
 
-  top: 0;
 
-  left: 0;
 
+  top: 50%;
 
+  transform: translate(-50%,-50%);
 
+  left: 50%;
 
 }
 
 
 
@@ -50,10 +55,14 @@
 
   width: 100%;
 
 }
 
 
+.c_bottom > text{
 
+  font-size: 28rpx;
 
+}
 
+
 
 .c_btn{
 
   display: flex;
 
   align-items: center;
 
-  justify-content: space-around;
 
+  justify-content: center;
 
   position: absolute;
 
   width: 100%;
 
   bottom: 40%;
 
@@ -61,17 +70,22 @@
 
 }
 
 
 .c_btn > .preview{
 
-  width: 60rpx;
 
-  height: 60rpx;
 
+  width: 80rpx;
 
+  height: 80rpx;
 
 }
 
 
 .c_btn text{
 
-  font-size: 60rpx;
 
+  font-size: 80rpx;
 
+}
 
+
 
+.c_btn .iconfanzhuanxiangji1{
 
+  font-size: 90rpx;
 
 }
 
 
 
 .c_btn > .take_photo{
 
   font-size: 120rpx;
 
+  margin: 0 80rpx;
 
 }
 
 
 .handle_img{
 
@@ -81,7 +95,7 @@
 
   display: flex;
 
   align-items: center;
 
   justify-content: space-between;
 
-  position: absolute;
 
+  position: fixed;
 
   width: 100%;
 
   bottom: var(--bottom);
 
   left: 0;
 
@@ -93,7 +107,6 @@
 
   display: inline-block;
 
   margin: 0 40rpx;
 
   color: rgba(255, 255, 255, 0.7);
 
-
 
 }
 
 
 .handle_img > text:last-of-type{

+ 9 - 1
miniProgram/pages/example/index.js
View File 

@@ -17,11 +17,19 @@ VueLikePage([],{
 
   },
 
   methods:{
 
     onLoad:function (options) {
 
-      let { id } = options
 
+      let { id,name } = options
 
       this.setData({
 
         current:`${this.data.cdn_url}/video/${id}.mp4`,
 
         id
 
       })
 
+      wx.setNavigationBarTitle({
 
+        title: name 
+      })
 
+    },
 
+    loadcompele(){
 
+      this.setData({
 
+        loadCompele: true
 
+      })
 
     },
 
     tapToCamera(){
 
       Router.push({

+ 3 - 2
miniProgram/pages/example/index.wxml
View File 

@@ -1,6 +1,7 @@
 
 <view class='container'>
 
-  <video src="{{current}}" loop autoplay controls="{{false}}" enable-progress-gesture="{{false}}" object-fit="cover"></video>
 
-  <view class="ai_bottom" bindtap="tapToCamera">
 
+  <image wx:if="{{id}}" class="c_bg" src="{{cdn_url}}/images/demo/{{id}}.png" mode="aspectFit" />
 
+  <video style="opacity:{{loadCompele?1:0}}" bindloadedmetadata="loadcompele" src="{{current}}" loop autoplay controls="{{false}}" enable-progress-gesture="{{false}}" object-fit="cover"></video>
 
+  <view class="ai_bottom" style="opacity:{{loadCompele?1:0}}" bindtap="tapToCamera">
 
       <image src="{{cdn_url}}/images/reg_btn@2x.png" mode="widthFix" />
 
       <text>拍照换装</text>
 
   </view>

+ 13 - 0
miniProgram/pages/example/index.wxss
View File 

@@ -6,6 +6,19 @@
 
   height: 100%;
 
   width: 100%;
 
   position: fixed;
 
+  background: none;
 
+  transition: all ease 0.5s;
 
+}
 
+
 
+.container > .c_bg{
 
+  position: fixed;
 
+  z-index: -1;
 
+  transform: translate(-50%,-50%);
 
+  left: 50%;
 
+  top: 50%;
 
+  width: 100%;
 
+  height: 100%;
 
+  filter: blur(10px);
 
 }
 
 
 .ai_bottom{

+ 8 - 1
miniProgram/pages/index/index.js
View File 

@@ -18,8 +18,15 @@ VueLikePage([],{
 
     onLoad:function () {
 
      
     },
 
+    loadcompele(){
 
+      this.setData({
 
+        loadCompele: true
 
+      })
 
+    },
 
     toSelect:function () {
 
-      Router.push('select')
 
+      Router.redirectTo({
 
+        url:'select'
 
+      })
 
     }
 
   }
 
 })

+ 1 - 3
miniProgram/pages/index/index.json
View File 

@@ -1,5 +1,3 @@
 
 {
 
-  "usingComponents": {
 
-    "frame-animation":"/components/frame-animation/frame-animation"
 
-  }
 
+  "navigationStyle": "custom"
 
 }

+ 5 - 2
miniProgram/pages/index/index.wxml
View File 

@@ -1,8 +1,11 @@
 
 <!--index.wxml-->
 
 <view class="container">
 
   <view class="body">
 
-    <frame-animation url="{{cdn_url}}/images/open/frame.jpg" width='750' height='1623' count='31' duration='1.5'></frame-animation>
 
-    <view class="a_btn">
 
+    <image class="c_bg" src="{{cdn_url}}/images/loading.jpg" mode="scaleToFill" />
 
+    <view class="frm">
 
+      <video style="opacity:{{loadCompele?1:0}}" bindloadedmetadata="loadcompele" src="{{cdn_url}}/video/loading.mp4" loop autoplay controls="{{false}}" enable-progress-gesture="{{false}}" object-fit="cover"></video>
 
+    </view>
 
+    <view class="a_btn" style="opacity:{{loadCompele?1:0}}">
 
       <image bindtap="toSelect" mode="heightFix" src="{{cdn_url}}/images/f_btn.png" />
 
     </view>

+ 30 - 2
miniProgram/pages/index/index.wxss
View File 

@@ -12,12 +12,40 @@
 
   transform: translateY(-50%);
 
 }
 
 
+.container .c_bg{
 
+  position: fixed;
 
+  z-index: -1;
 
+  transform: translate(-50%,-50%);
 
+  left: 50%;
 
+  top: 50%;
 
+  height: 100%;
 
+  width: 100%;
 
+  filter: blur(10px);
 
+}
 
+
 
+.frm{
 
+  position: fixed;
 
+  top: 50%;
 
+  height: 100%;
 
+  width: 100%;
 
+  left: 50%;
 
+  transform: translate(-50%,-50%);
 
+}
 
+
 
+.frm>video{
 
+  height: 100%;
 
+  width: 100%;
 
+  position: fixed;
 
+  background: none;
 
+  transition: all ease 0.5s;
 
+}
 
+
 
 .a_btn{
 
   position: fixed;
 
   z-index: 99;
 
-  bottom: 26%;
 
+  bottom: 28%;
 
   left: 50%;
 
-  transform: translateX(-50%);
 
+  transform: translate(-50%,-50%);
 
 }
 
 
 .a_btn image{

+ 6 - 4
miniProgram/pages/select/index.js
View File 

@@ -41,11 +41,12 @@ VueLikePage([],{
 
     cdn_url:CDN_URL,
 
     bg:CDN_URL+'/images/bg@2x.png',
 
     demo:DEMO,
 
-    showDemo:false
 
+    showDemo:false,
 
+    isBigScreen:app.globalData.deviceInfo.screenWidth>320
 
   },
 
   methods:{
 
     onLoad:function () {
 
-     
+      wx.hideHomeButton()
 
     },
 
     toggleDemo(){
 
       this.setData({
 
@@ -53,11 +54,12 @@ VueLikePage([],{
 
       })
 
     },
 
     toDemo(e){
 
-        const { id } = e.currentTarget.dataset
 
+        const { id,name } = e.currentTarget.dataset
 
         Router.push({
 
             url: 'example',
 
             query: {
 
-              id
 
+              id,
 
+              name
 
             }
 
         })

+ 3 - 3
miniProgram/pages/select/index.wxml
View File 

@@ -1,10 +1,10 @@
 
 <!--pages/select/index.wxml-->
 
 <view class="container">
 
-    <view class="app" style="background-image:url({{bg}});--margin: 10rpx;">
 
+    <view class="app" style="background-image:url({{bg}});--margin: {{isBigScreen?'10rpx':'20rpx'}};">
 
         <view class="ai_top">
 
-            <view class="ai_title">选择喜爱的三国人物，控制屏幕人物切换</view>
 
+            <view class="ai_title">选择喜爱的三国人物，拍照换装</view>
 
             <view class="ai_pic">
 
-               <view data-id="{{item.id}}" bindtap="toDemo" wx:for='{{demo}}' wx:key="{{item.id}}">
 
+               <view data-id="{{item.id}}" data-name="{{item.name}}" bindtap="toDemo" wx:for='{{demo}}' wx:key="{{item.id}}">
 
                 <image src="{{cdn_url}}/images/demo/{{item.id}}.png" mode="widthFix" />
 
                 <text>{{item.name}}</text>
 
                </view>

+ 2 - 1
miniProgram/pages/select/index.wxss
View File 

@@ -61,10 +61,11 @@
 
   text-align: center;
 
   position: relative;
 
   font-size: 0;
 
+  margin-top: 100rpx;
 
 }
 
 
 .ai_bottom >view {
 
-  width: 28%;
 
+  width: 280rpx;
 
   margin: 0 auto;
 
   display: inline-block;
 
 }

+ 36 - 11
miniProgram/pages/work/index.js
View File 

@@ -6,7 +6,7 @@ import {
 
 } from '../../utils/page'
 
 
 import {
 
-  CDN_URL
 
+  CDN_URL,API_BASE_URL,IMGSTR
 
 } from '../../config/index'
 
 import {
 
   isPhoneX
 
@@ -17,14 +17,19 @@ import Router from '../../utils/routes'
 
 VueLikePage([], {
 
   data: {
 
     cdn_url: CDN_URL,
 
+    baseUrl: API_BASE_URL+'/'
 
   },
 
   methods: {
 
     onLoad: function (options) {
 
       let {
 
-        vr_link
 
+        vr_link,
 
+        id
 
       } = options
 
+      
       this.setData({
 
-        vr_link
 
+        vr_link,
 
+        id,
 
+        show_img: this.data.baseUrl + vr_link + IMGSTR.normal
 
       })
 
       isPhoneX().then(res => {
 
         this.setData({
 
@@ -32,10 +37,14 @@ VueLikePage([], {
 
         })
 
       })
 
     },
 
+    loadcompele(){
 
+      this.setData({
 
+        loadCompele: true
 
+      })
 
+    },
 
     saveAlbum(e) {
 
       const { type } = e.currentTarget.dataset
 
-      console.log(type);
 
-      let img = this.data.vr_link
 
+      let img = this.data.baseUrl + this.data.vr_link + (!type?IMGSTR.normal:IMGSTR.qrcode)
 
       wx.showLoading({
 
         title: '保存中…',
 
         mask: true
 
@@ -49,14 +58,11 @@ VueLikePage([], {
 
             filePath: tempFilePath,
 
             success(res) {
 
               wx.showModal({
 
-                title: '保存成功',
 
+                title: type?'已保存,快去分享吧':'已保存到相册',
 
                 showCancel: false,
 
                 complete:()=>{
 
-                  Router.redirectTo({
 
-                    url:'select'
 
-                  })
 
+
 
                 }
 
-                
               });
 
             },
 
             fail: (err) => {
 
@@ -79,7 +85,26 @@ VueLikePage([], {
 
 
     },
 
     back(){
 
-      Router.back()
 
+      wx.navigateBack({  
+        delta: 1
 
+      })
 
+      // Router.redirectTo({
 
+      //   url:'camera',
 
+      //   query:{
 
+      //     id:this.data.id
 
+      //   }
 
+      // })
 
+    },
 
+    backtoexample(){
 
+      wx.navigateBack({
 
+        delta: 2
 
+      })
 
+      // Router.redirectTo({
 
+      //   url:'example',
 
+      //   query:{
 
+      //     id:this.data.id
 
+      //   }
 
+      // })
 
     }
 
   }
 
 })

+ 2 - 1
miniProgram/pages/work/index.json
View File 

@@ -1,3 +1,4 @@
 
 {
 
-  "usingComponents": {}
 
+  "usingComponents": {},
 
+  "navigationStyle": "custom"
 
 }

+ 8 - 3
miniProgram/pages/work/index.wxml
View File 

@@ -1,6 +1,11 @@
 
-<view class='container' style="--bottom: {{isIphoneX?'68rpx':'0'}};">
 
-  <view class="w_body">
 
-    <image class="work" src="{{vr_link}}" mode="aspectFill" />
 
+<view class='container'
 
+ style="--bottom: {{isIphoneX?'68rpx':'0'}};--top: {{isIphoneX?'7%':'5%'}};">
 
+  <view class="c_top">
 
+      <text bindtap="backtoexample" class="iconfont iconfanhui" />
 
+  </view>
 
+  <image style="visibility:{{loadCompele?'hidden':'visible'}};" class="c_bg" src="{{cdn_url}}/images/demo/{{id}}.png" mode="aspectFit" />
 
+  <view style="visibility:{{loadCompele?'visible':'hidden'}};" class="w_body">
 
+    <image bindload="loadcompele" class="work" src="{{show_img}}" mode="aspectFill" />
 
     <view class="share_btn">
 
       <view class="share_bg">
 
       </view>

+ 23 - 0
miniProgram/pages/work/index.wxss
View File 

@@ -9,6 +9,29 @@
 
   height: 100%;
 
 }
 
 
+.c_top>.iconfont{
 
+  position: fixed;
 
+  z-index: 999;
 
+  left: 40rpx;
 
+  top: var(--top);
 
+  font-size: 24rpx;
 
+  color: #333;
 
+  font-weight: bold;
 
+  padding: 10rpx;
 
+  border-radius: 50%;
 
+  background: rgba(255, 255, 255, 0.9);
 
+}
 
+ .c_bg{
 
+  position: fixed;
 
+  z-index: -1;
 
+  transform: translate(-50%,-50%);
 
+  left: 50%;
 
+  top: 50%;
 
+  width: 100%;
 
+  height: 100%;
 
+  filter: blur(10px);
 
+}
 
+
 
 .share_btn{
 
   position: absolute;
 
   bottom: var(--bottom);

+ 2 - 2
miniProgram/project.config.json
View File 

@@ -23,7 +23,7 @@
 
     "compileHotReLoad": false,
 
     "useMultiFrameRuntime": true,
 
     "useApiHook": true,
 
-    "useApiHostProcess": true,
 
+    "useApiHostProcess": false,
 
     "babelSetting": {
 
       "ignore": [],
 
       "disablePlugins": [],
 
@@ -41,7 +41,7 @@
 
   },
 
   "compileType": "miniprogram",
 
   "libVersion": "2.16.1",
 
-  "appid": "wx82b345d927aaf653",
 
+  "appid": "wx43471c805cd38545",
 
   "projectname": "AI_change",
 
   "debugOptions": {
 
     "hidedInDevtools": []

+ 2 - 2
miniProgram/project.private.config.json
View File 

@@ -15,7 +15,7 @@
 
         {
 
           "name": "pages/select/index",
 
           "pathName": "pages/select/index",
 
-          "query": "",
 
+          "query": "id=2",
 
           "scene": null
 
         },
 
         {
 
@@ -33,7 +33,7 @@
 
         {
 
           "name": "pages/work/index",
 
           "pathName": "pages/work/index",
 
-          "query": "vr_link=http://ossxiaoan.4dage.com/wx_reload_beijing/20210507_200817036/faceSwap.jpg",
 
+          "query": "vr_link=20210510_163005280&id=2",
 
           "scene": null
 
         }
 
       ]

+ 5 - 1
miniProgram/utils/routes.js
View File 

@@ -42,9 +42,13 @@ export default {
 
   },
 
   redirectTo(options){
 
     const { url, query } = options
 
+    let q = query
 
+    if (q) {
 
+      q = sortQuery(q)
 
+    }
 
     return (()=>{
 
       wx.redirectTo({
 
-        url: `${routes[url]}?${query}`,
 
+        url: `${routes[url]}?${q}`,
 
       })
 
     })()
 
   },

+ 3 - 1
miniProgram/utils/tools.js
View File 

@@ -26,8 +26,10 @@ export function randomString(e) {
 
 export function isPhoneX () {
 
   return new Promise((resolve) => {
 
       let screenHeight = wx.getSystemInfoSync().screenHeight
 
+      let windowHeight = wx.getSystemInfoSync().windowHeight
 
       let bottom = wx.getSystemInfoSync().safeArea.bottom
 
-      resolve(screenHeight != bottom)
 
+      
+      resolve(screenHeight != bottom || windowHeight > 750)
 
   })
 
 }