update

h5/code/css/app.css

@@ -54,12 +54,12 @@ body {
   position: fixed;
   width: 80vw;
   left: 50%;
-  top: 25%;
+  top: 20%;
   margin-left: -40vw;
   border-radius: 12px;
   z-index: 101;
-  background: #fff no-repeat center 10%;
-  background-size: 20%;
+  background: #fff no-repeat center 20%;
+  background-size: 40%;
 }
 .app-alert.timeout,.app-alert.save {
   background-image: url("../images/icon/used-timeout.png");
@@ -80,37 +80,47 @@ body {
 .app-alert.save .btns a:last-child,
 .app-alert.stop .btns a:last-child,
 .app-alert.used .btns a:last-child {
-  color: #3EAFFF;
+  background: #37948f;
+  color: #fff;
+  border: 1px solid #37948f;
+
 }
 .app-alert.error .btns a:last-child,
 .app-alert.fail .btns a:last-child {
-  color: #F5615F;
+  background: #37948f;
+  color: #fff;
+  border: 1px solid #37948f;
 }
 .app-alert .tips {
-  margin-top: 30%;
-  margin-bottom: 5%;
+  margin-top: 66%;
+  margin-bottom: 10%;
   text-align: center;
-  color: #888;
+  color: #424242;
   line-height: 1.5;
   font-size: 16px;
 }
 .app-alert .btns {
   width: 100%;
   font-size: 0;
-  border: solid 1px #efefef;
   background: #fff;
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 40px;
 }
 .app-alert .btns a {
   display: inline-block;
-  width: 50%;
-  padding: 5%;
-  color: #666;
+  width: 38%;
+  padding: 2% 3%;
+  line-height: 1.5;
+  border-radius: 50px;
+  color: #37948f;
+  border: 1px solid #37948f;
   text-decoration: none;
   text-align: center;
   font-size: 16px;
-  border-right: solid 1px #efefef;
+  margin: 0 2%;
 }
 .app-view {
   display: none;
@@ -182,7 +192,7 @@ body {
   display: none;
   position: fixed;
   width: 66vw;
-  height: 28vh;
+  height: 35vh;
   left: 50%;
   top: 40%;
   margin-left: -33vw;
@@ -194,8 +204,8 @@ body {
   position: relative;
   width: 100%;
   height: 100%;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.7);
+  color: #424242;
+  background-color: #fff;
   border-radius: 12px;
   background-repeat: no-repeat;
   background-position: 50% 25%;
@@ -229,31 +239,42 @@ body {
   background-size: 30%;
 }
 .app-action-tips .content.loading {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: #fff;
 }
 .app-action-tips .content.loading .tips {
   font-size: 15px;
-  color: #999999;
+  color: #424242;
 }
 .app-action-tips .content.loading .lds-spinner {
   position: absolute;
   left: 50%;
-  top: 30%;
+  top: 14%;
+  width: 80%;
+
   -webkit-transform: translate(-50%, -30%);
-      -ms-transform: translate(-50%, -30%);
-          transform: translate(-50%, -30%);
+  -ms-transform: translate(-50%, -30%);
+      transform: translate(-50%, -30%);
+}
+
+.app-action-tips .content.loading .lds-spinner img{
+  width: 100%;
 }
 .app-action-tips .content.loading-switch .tips {
   font-size: 15px;
-  color: #ffff;
+  color: #424242;
 }
 .app-action-tips .content.loading-switch .lds-spinner {
   position: absolute;
   left: 50%;
-  top: 30%;
+  top: 14%;
+  width: 80%;
   -webkit-transform: translate(-50%, -30%);
-      -ms-transform: translate(-50%, -30%);
-          transform: translate(-50%, -30%);
+  -ms-transform: translate(-50%, -30%);
+      transform: translate(-50%, -30%);
+}
+
+.app-action-tips .content.loading-switch .lds-spinner img{
+  width: 100%;
 }
 .app-main {
   width: 100%;

h5/code/css/style.css

@@ -121,10 +121,12 @@ li {
   width: 100%;
   display: inline-block;
   text-align: center;
+  position: fixed;
+  bottom: 10px;
 }
 
 .ai_bottom > img{
-  width: 28%;
+  width: 24%;
   margin: 0 auto;
   display: inline-block;
 }
@@ -150,7 +152,8 @@ li {
 
 
 #work .demo,#myPhoto .myImg{
-  height: 100%;
+  width: 100%;
+  max-height: 100%;
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
@@ -166,6 +169,7 @@ li {
   left: 0;
   background: rgba(0, 0, 0, 0.7);
   text-align: center;
+  z-index: -1;
 }
 
 #work .mask > span{
@@ -221,6 +225,7 @@ li {
 
 #work .after_btn{
   visibility: hidden;
+  justify-content: center;
 }
 
 
@@ -230,6 +235,7 @@ li {
 
 #work .after_btn > img{
   width: 14%;
+  margin: 0 30px;
 }
 
 

h5/code/index.html

@@ -65,20 +65,16 @@
       </div>
 
       <div id="comfirmcon" class="btn-cls">
-        <img src="./images/unable_rephoto.png" alt="">
+        <img style="opacity: 0;" src="./images/unable_rephoto.png" alt="">
         <div id="takePhoto" class="takePhoto">
           <span>确认拍照</span>
           <img src="./images/reg_btn@2x.png" alt="">
         </div>
-        <img src="./images/unable_useit.png" alt="">
+        <img style="opacity: 0;" 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>
@@ -126,35 +122,13 @@
   <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>
+        <img src="./images/icon/tips.gif" alt="">
       </div>
       <div class="tips"></div>
     </div>
-    <div class="content loading-switch">
+    <div class="content loading-switch 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>
+        <img src="./images/icon/tips.gif" alt="">
       </div>
       <div class="tips">正在切换画风</div>
     </div>

h5/code/js/config.js

@@ -2,7 +2,7 @@ window.__config = {
   /**
    * websocket地址
    */
-  ws: 'ws://8.135.106.227:9013', //'ws://139.159.231.201:8011',
+  ws: 'ws://testhz.4dage.com:9013', //'ws://139.159.231.201:8011',
   /**
    * 静态资源地址
    */
@@ -20,5 +20,13 @@ window.__config = {
    * 画风切换间隔时间3s
    */
   switchInterval: 3,
- 
+
+  IMGSTR: {
+    qrcode:'/swapQrcode.jpg',
+    normal:'/swap.jpg'
+  },
+
+  SEVER_URL: 'https://testhz.4dage.com'
+
+  
 }

h5/code/js/websocket.js

@@ -42,7 +42,7 @@ var app = {
      */
     switchId: '',
 
-
+    urljson:{},
 
     /**
      * 事件处理
@@ -78,12 +78,18 @@ var app = {
 
             time = Date.now();
             app.switchId = msg.split(' ')[1]
-            console.log(app.switchId,'app.switchId');
+            $('.demo').attr('src',`./images/demo/${app.switchId}.jpg`)
+            $('.myImg').attr('src',`./images/demo/${app.switchId}.jpg`)
+            
             app.send(msg)
         });
 
         //跳转拍照页面
         $('.photo').on("click",function () {
+
+            if (!app.switchId) {
+                return app.showAlert('请先选择三国人物', 'fail','noCancel');
+            }
             
             app.checkOperationTimeout()
             if (!app.sendCheck()) {
@@ -91,6 +97,7 @@ var app = {
             }
             $(`.body > div[id="work"]`).fadeIn().siblings().fadeOut()
             $('.mask').show()
+            $('.mask span').text('请正对画屏摄像头拍照')
             self.send('readyphoto 1')
         })
 
@@ -104,7 +111,7 @@ var app = {
             }
             $('#comfirmcon').fadeOut()
             $('#selectcon').css({'visibility':'visible'})
-            $('.mask').hide()
+            $('.mask span').text('使用图片或重新拍照')
 
             self.send('photo 1')
         })
@@ -134,7 +141,7 @@ var app = {
             $('#comfirmcon').fadeIn()
             $('#selectcon').css({'visibility':'hidden'})
             $('.mask').show()
-
+            $('.mask span').text('请正对画屏摄像头拍照')
 
             self.send('rephoto 1')
         })
@@ -164,22 +171,23 @@ var app = {
         })
 
 
-        $('.app-alert .btn-use').on('click', function () {
+        $('.app-alert .btn-link').on('click', function () {
             var $alert = $('.app-alert')
             app.hideMask()
             $alert.removeClass($alert.data('class') + ' animated zoomIn')
             var text = $(this).text();
             if (text == '尝试使用' || text == '再次使用'|| text == '重选画风') {
-                app.send('request')
-                $(`.body > div[id="app"]`).fadeIn().siblings().fadeOut()
+                console.log(text);
+                window.location.reload()
             }
         })
 
-        $('.app-alert .btn-link').on('click', function () {
+        $('.app-alert .btn-use').on('click', function () {
             if ($(this).text() == '确定'||$(this).text() == '取消') {
-                var $alert = $('.app-alert')
-                app.hideMask()
-                $alert.removeClass($alert.data('class') + ' animated zoomIn')
+                // var $alert = $('.app-alert')
+                // app.hideMask()
+                // $alert.removeClass($alert.data('class') + ' animated zoomIn')
+                window.location.reload()
             }
         })
     },
@@ -211,28 +219,35 @@ var app = {
         }
         $elem.css('display', 'none')
     },
-    showAlert: function (msg, icon) {
+    showAlert: function (msg, icon, noCancel) {
         this.showMask();
         var $alert = $('.app-alert');
         var $btns = $alert.find('.btns a');
         $alert.data('class', icon).addClass(icon).animateCss('zoomIn')
         $alert.find('.tips').html(msg)
+        $btns.eq(0).show()
         if (/error|used/.test(icon)) {
-            $btns.eq(0).text('尝试使用')
+            $btns.eq(1).text('尝试使用')
         } else if (/timeout|stop/.test(icon)) {
-            $btns.eq(0).text('再次使用')
+            $btns.eq(1).text('再次使用')
         } else if (/fail/.test(icon)) {
-            $btns.eq(0).text('重选画风')
+            $btns.eq(1).text('重选画风')
         } else if (/save/.test(icon)) {
-            $btns.eq(0).text('确定')
+            $btns.eq(1).text('确定')
         }
 
         
-
         if (/used|timeout|stop|error|fail|save/.test(icon)) {
-            $btns.eq(1).text('取消').attr('href', 'javascript:;')
+            $btns.eq(0).text('取消').attr('href', 'javascript:;')
         }
 
+        if (noCancel) {
+            $btns.eq(1).text('确定')
+            $btns.eq(0).hide()
+        }
+        
+
+
     },
     showActionTips: function (delay, done) {
         var $elem = $('.app-action-tips');
@@ -277,7 +292,7 @@ var app = {
     showLoadingSwitch: function (done) {
         this.showMask();
         $('.app-action-tips .content').css('display', 'none');
-        $('.app-action-tips .content.loading-switch').css('display', 'block')
+        $('.app-action-tips .content.switch').css('display', 'block')
         $('.app-action-tips').animateCss('zoomIn', function ($elem, aname) {
             setTimeout(function () {
                 app.hideMask();
@@ -327,11 +342,13 @@ var app = {
             // $('.app-view').animateCss('zoomIn', function () {
             //     app.send('close')
             // }).find('.img').html('<img src="' + json.url + '?v=' + Date.now() + '">')
+            let imgurl = __config.SEVER_URL+ '/' + json.url +__config.IMGSTR['normal']
 
+            // 20210528_150142209
             var img = new Image()
-            img.src = json.url + '?v=' + Date.now()
+            img.src = imgurl + '?v=' + Date.now()
             img.onload = img.onerror = function(){
-                $('.myImg').attr('src', json.url + '?v=' + Date.now())
+                $('.myImg').attr('src', imgurl + '?v=' + Date.now())
                 $(`.body > div[id="myPhoto"]`).fadeIn().siblings().fadeOut()
                 app.send('close')
                 // app.showMask();
@@ -355,9 +372,9 @@ var app = {
 
 
     connection: function () {
-        if (!this.checkTimestamp()) {
-             return app.showAlert('二维码超时不可用', 'save')
-        }
+        // if (!this.checkTimestamp()) {
+        //      return app.showAlert('二维码超时不可用', 'save')
+        // }
         try {
             var timer
             this.websocket = new WebSocket(__config.ws);
@@ -485,6 +502,7 @@ var app = {
                                 app.is_action = true;
                                 timer && clearTimeout(timer)
                                 var json = JSON.parse(msg.data)
+                                console.log(json);
                                 if (json.url) {
                                     app.showView(json)
                                 }

miniProgram/app.js

@@ -3,6 +3,7 @@ App({
   onLaunch() {
     let info = wx.getSystemInfoSync()
     this.globalData.deviceInfo = info
+    this.globalData.top = wx.getMenuButtonBoundingClientRect()
   },
   globalData: {
     userInfo: null

miniProgram/assets/fonts/download (1)/font_2532543_pbwla2drc6s/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

miniProgram/assets/fonts/download (1)/font_2532543_pbwla2drc6s/iconfont.json

@@ -0,0 +1,93 @@
+{
+  "id": "2532543",
+  "name": "AI换装系统",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "22360983",
+      "name": "返 回",
+      "font_class": "fanhui",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "21889412",
+      "name": "重新拍照",
+      "font_class": "zhongxinpaizhao",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "6282761",
+      "name": "拍照",
+      "font_class": "paizhao",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "21465986",
+      "name": "反转相机 (1)",
+      "font_class": "fanzhuanxiangji1",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "21465993",
+      "name": "相机",
+      "font_class": "xiangji",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "21465994",
+      "name": "重新拍照（圆）",
+      "font_class": "zhongxinpaizhaoyuan",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "21465997",
+      "name": "反转相机",
+      "font_class": "fanzhuanxiangji",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "21439773",
+      "name": "返 回",
+      "font_class": "fanhui1",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "21439775",
+      "name": "取消",
+      "font_class": "quxiao",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "21439776",
+      "name": "朋友圈",
+      "font_class": "pengyouquan",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "21439777",
+      "name": "下载 ",
+      "font_class": "xiazai",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "21439779",
+      "name": "照片 ",
+      "font_class": "zhaopian",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    }
+  ]
+}

miniProgram/assets/fonts/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "22360983",
+      "name": "返 回",
+      "font_class": "fanhui",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "21889412",
+      "name": "重新拍照",
+      "font_class": "zhongxinpaizhao",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
       "icon_id": "6282761",
       "name": "拍照",
       "font_class": "paizhao",
@@ -20,13 +34,6 @@
       "unicode_decimal": 58892
     },
     {
-      "icon_id": "21465991",
-      "name": "重新拍照",
-      "font_class": "zhongxinpaizhao",
-      "unicode": "e60e",
-      "unicode_decimal": 58894
-    },
-    {
       "icon_id": "21465993",
       "name": "相机",
       "font_class": "xiangji",
@@ -50,7 +57,7 @@
     {
       "icon_id": "21439773",
       "name": "返 回",
-      "font_class": "fanhui",
+      "font_class": "fanhui1",
       "unicode": "e605",
       "unicode_decimal": 58885
     },

miniProgram/assets/fonts/iconfont.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+<metadata>
+Created by FontForge 20170731 at Mon Jun 21 10:36:30 2021
+ By Aleksey,,,
+
+Created by iconfont
+
+</metadata>
+<defs>
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face 
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    panose-1="2 0 5 3 0 0 0 0 0 0"
+    ascent="896"
+    descent="-128"
+    bbox="0 -128 1200 896"
+    underline-thickness="0"
+    underline-position="10"
+    unicode-range="U+E605-E6B4"
+  />
+<missing-glyph 
+ />
+    <glyph glyph-name=".notdef" 
+ />
+    <glyph glyph-name=".null" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
+ />
+    <glyph glyph-name="fanhui" unicode="&#xe605;" 
+d="M512 384zM0 384q0 -104 40 -199q39 -92 110 -163t163 -110q95 -40 199 -40t199 40q92 39 163 110t110 163q40 95 40 199t-40 199q-39 92 -110 163t-163 110q-95 40 -199 40t-199 -40q-92 -39 -163 -110t-110 -163q-40 -95 -40 -199zM613 66q-9 0 -18 6l-318 296
+q-8 7 -8 16.5t8 16.5l319 295q8 7 18 7t17.5 -7t7.5 -16.5t-8 -16.5l-301 -279l301 -279q8 -6 8 -16t-8 -16.5t-18 -6.5zM613 40q-18 0 -34 12l-319 297q-16 14 -16 35.5t16 34.5l318 296q15 13 35.5 13t35.5 -14t15 -35t-16 -35l-280 -260l280 -260q16 -14 16 -35.5
+t-15 -35t-36 -13.5zM614 87zM294 382zM294 387zM613 681z" />
+    <glyph glyph-name="quxiao" unicode="&#xe607;" 
+d="M512 768q104 0 193 -53q87 -51 138 -138q53 -89 53 -193t-53 -193q-51 -87 -138 -138q-89 -53 -193 -53t-193 53q-87 51 -138 138q-53 89 -53 193t53 193q51 87 138 138q89 53 193 53zM512 832q-123 0 -227 -61q-101 -59 -160 -160q-61 -104 -61 -227t61 -227
+q59 -101 160 -160q104 -61 227 -61t227 61q101 59 160 160q61 104 61 227t-61 227q-59 101 -160 160q-104 61 -227 61zM646 563l-134 -134l-134 134q-10 10 -23 10t-22.5 -9.5t-9.5 -22.5t10 -23l134 -134l-134 -134q-10 -10 -10 -23t9.5 -22.5t22.5 -9.5t23 10l134 134
+l134 -134q10 -10 23 -10t22.5 9.5t9.5 22.5t-10 23l-134 134l134 134q10 10 10 23t-9.5 22.5t-22.5 9.5t-23 -10z" />
+    <glyph glyph-name="pengyouquan" unicode="&#xe608;" 
+d="M683 868l-22 8q-27 8 -59 13q-44 7 -90 7t-90 -8q-31 -6 -59 -15l-22 -9l342 -347v351zM876 743q-34 32 -72 57q-27 18 -55 31l-21 9l-3 -476l256 242v1q-11 21 -28 46q-33 48 -77 90zM992 559l-352 -336h356l7 21q9 27 14 59q7 43 7 88t-9 89q-6 31 -15 58zM736 -72
+q11 5 21 10q26 13 53 32q37 25 70 56t59 67q19 26 32 51q11 20 10 20l-498 3zM341 -100l22 -8q28 -8 59 -13q44 -7 90 -7t90 8q32 6 59 15l22 9l-342 347v-351zM162 25q34 -32 72 -57q28 -18 55 -31l22 -9l2 477l-256 -242l11 -20q14 -25 34 -50q27 -36 60 -68zM28 559
+q-4 -10 -7 -21q-9 -27 -14 -58q-7 -44 -7 -89q0 -63 16 -122q8 -29 16 -46v0l352 336h-356zM301 840l-20 -10q-26 -13 -53 -32q-37 -25 -70 -56t-59 -67q-19 -26 -32 -51l-10 -20l498 -3z" />
+    <glyph glyph-name="xiazai" unicode="&#xe609;" 
+d="M512 896q-104 0 -199 -40q-92 -39 -163 -110t-110 -163q-40 -95 -40 -199t40 -199q39 -92 110 -163t163 -110q95 -40 199 -40t199 40q92 39 163 110t110 163q40 95 40 199t-40 199q-39 92 -110 163t-163 110q-95 40 -199 40zM303 494q11 10 26 10t26 -10l120 -121v314
+q0 15 11 26t26 11t26 -11t11 -26v-314l120 120q11 11 26 11t26 -10.5t11 -26t-11 -25.5l-183 -183q-11 -11 -26 -11t-26 11l-183 183q-11 10 -11 25.5t11 25.5v1zM748 143h-472q-16 0 -27.5 11.5t-11.5 27.5t11.5 27.5t27.5 11.5h472q16 0 27.5 -11.5t11 -27.5t-11.5 -27.5
+t-27 -11.5z" />
+    <glyph glyph-name="zhaopian" unicode="&#xe60b;" 
+d="M681 703q-28 0 -52 -14t-38 -38t-14 -52.5t14 -52.5t38 -38t52 -14t52 14t38 38t14 52.5t-14 52.5t-38 38t-52 14zM681 535q-26 0 -45 18.5t-19 45t19 45t45 18.5t44.5 -18.5t18.5 -45t-18.5 -45t-44.5 -18.5zM513 893q-104 0 -199 -40q-91 -39 -161.5 -109.5
+t-109.5 -161.5q-40 -95 -40 -198.5t40 -198.5q39 -91 109.5 -161.5t161.5 -109.5q95 -40 198.5 -40t198.5 40q91 39 161.5 109.5t109.5 161.5q40 95 40 198.5t-40 198.5q-39 91 -109.5 161.5t-162.5 109.5q-94 40 -197 40zM513 -85q-99 0 -188 39q-87 38 -152.5 107
+t-98.5 158l296 295l356 -356q6 -6 14.5 -6t14.5 6t6 14.5t-6 14.5l-74 74l155 154l133 -133q-23 -104 -89 -188t-160 -130q-98 -49 -207 -49zM850 459q-6 6 -14.5 6t-13.5 -6l-169 -169l-269 268q-6 6 -14.5 6t-14.5 -6l-295 -296q-16 60 -16 121q0 127 64 236
+q62 106 168 168q109 64 236.5 64t236.5 -64q106 -62 168 -168q64 -109 64 -236q0 -26 -3 -52z" />
+    <glyph glyph-name="fanzhuanxiangji1" unicode="&#xe60c;" 
+d="M701 554h-43l-12 35q-7 21 -24.5 34t-39.5 13h-142q-22 0 -39.5 -13t-23.5 -34l-12 -35h-42q-30 0 -54.5 -15t-39 -39.5t-14.5 -54.5v-204q0 -29 14.5 -54t39 -40t54.5 -15h378q29 0 54 15t39.5 40t14.5 54v204q0 30 -14.5 55t-39.5 39.5t-54 14.5zM769 241
+q0 -28 -19.5 -48t-47.5 -20h-379q-28 0 -48 19.5t-20 47.5v205q0 28 19 48t47 20h73l22 64q3 8 10 13.5t16 5.5h142q8 0 15.5 -5t9.5 -14l22 -64h70q28 0 48 -19.5t20 -47.5v-205v0zM642 298q-16 -35 -46 -57t-67.5 -26.5t-71.5 10.5q-41 18 -64 55l-22 -7l19 83l62 -59
+l-18 -5q14 -18 34.5 -28t43.5 -10q30 0 55.5 17t37.5 45q3 8 11 11t15.5 -1t10.5 -12t0 -16zM634 431l20 5l-20 -79l-59 56l18 5q-16 22 -41 32.5t-51.5 7.5t-47.5 -19q-19 -13 -30 -35q-4 -7 -12 -9.5t-15 1.5t-9.5 12t1.5 15q18 36 52 56.5t74 20.5q36 0 68.5 -19
+t51.5 -50zM512 -127q-104 0 -199 40q-92 39 -162.5 110t-109.5 163q-40 95 -40 198.5t40 198.5q39 92 109.5 163t162.5 110q95 40 199 40t199 -40q92 -39 162.5 -110t109.5 -163q40 -95 40 -198.5t-40 -198.5q-39 -92 -109.5 -163t-162.5 -110q-95 -40 -199 -40zM512 860
+q-129 0 -240 -65q-108 -63 -171 -171q-65 -111 -65 -240q0 -97 37 -185q37 -85 103 -151t151 -103q88 -37 185 -37t185 37q85 37 151 103t103 151q37 88 37 185q0 129 -65 240q-63 108 -171 171q-111 65 -240 65z" />
+    <glyph glyph-name="xiangji" unicode="&#xe60f;" 
+d="M651 464h-279q-24 0 -38 15t-7 33l17 49q6 13 18.5 20.5t27.5 6.5h245q15 1 27.5 -6.5t17.5 -20.5l18 -49q6 -18 -8.5 -33t-38.5 -15zM398 299q0 -29 15.5 -55t41.5 -40.5t56.5 -14.5t56.5 14.5t41.5 40.5t15.5 55.5t-15.5 55t-41.5 40t-56.5 14.5t-56.5 -14.5t-41.5 -40
+t-15.5 -55.5zM771 504h-519q-30 0 -51 -21.5t-21 -51.5v-264q0 -30 21 -51.5t51 -21.5h519q30 0 51.5 21.5t21.5 51.5v264q0 30 -21.5 51.5t-51.5 21.5zM511 159q-37 1 -68.5 20t-49.5 51t-17.5 69.5t19.5 69t51 49.5t69.5 17.5t68.5 -19t49.5 -50t18.5 -69t-19 -69.5
+t-51.5 -50.5t-70.5 -18.5v0zM699 415q-4 -3 -8 -9l-6 -14l-9 12q-3 5 -9 9l-14 6l13 9q4 2 8 9l6 14l9 -13q3 -5 9 -8l14 -7z" />
+    <glyph glyph-name="zhongxinpaizhaoyuan" unicode="&#xe610;" 
+d="M512 892q-104 0 -198 -39q-91 -39 -161.5 -109.5t-109.5 -161.5q-39 -94 -39 -198t39 -198q39 -91 109.5 -161.5t161.5 -109.5q94 -39 198 -39t198 39q91 39 161.5 109.5t109.5 161.5q39 94 39 198t-39 198q-39 91 -109.5 161.5t-161.5 109.5q-94 39 -198 39zM752 164
+q-32 -32 -74 -49q-42 -18 -90 -18h-301q-15 0 -25.5 11t-10.5 25.5t10.5 25t25.5 10.5h302q44 0 81 21.5t58.5 58.5t21.5 81t-21.5 81t-59 59t-80.5 22h-227l109 -110h-123l-144 145l144 145h123l-110 -109h227q46 0 90 -18q64 -28 102.5 -86.5t38.5 -128.5
+q1 -47 -16.5 -89.5t-50.5 -76.5z" />
+    <glyph glyph-name="fanzhuanxiangji" unicode="&#xe611;" 
+d="M805 648h-67l-19 55q-10 32 -37.5 51.5t-60.5 20.5h-220q-34 0 -61 -20t-37 -52l-19 -55h-65q-46 0 -84.5 -23t-61 -61.5t-22.5 -84.5v-317q0 -45 22.5 -84t61 -61.5t84.5 -22.5h586q46 0 84.5 22.5t61 61.5t22.5 84v317q0 46 -22.5 84.5t-61 61.5t-84.5 23zM910 162
+q0 -20 -7.5 -39.5t-22.5 -34.5t-34.5 -23t-40.5 -8h-586q-21 0 -40.5 8t-34.5 23t-22.5 34.5t-7.5 39.5v317q0 21 7.5 40.5t22.5 34.5t34.5 23t40.5 8h111l33 99q5 13 15.5 21t24.5 9h220q14 -1 25 -9t15 -21l33 -99h109q21 0 40.5 -8t34.5 -23t22.5 -34.5t7.5 -40.5v-317z
+M713 251q-24 -56 -74 -91t-110.5 -39.5t-114.5 23.5t-86 80l-34 -11l29 129l97 -91l-29 -8q22 -28 54 -43.5t67 -15.5q47 -1 86.5 25t58.5 70q4 12 16.5 16.5t24.5 0.5q12 -7 16 -20t-1 -25zM701 456l31 8l-31 -122l-91 87l28 8q-24 33 -61 49.5t-77 13.5t-74 -25.5
+t-52 -58.5q-6 -11 -18.5 -15t-23.5 2t-15 18.5t2 23.5q29 55 81.5 86.5t113.5 32.5q56 0 106 -29.5t81 -78.5zM701 456z" />
+    <glyph glyph-name="zhongxinpaizhao" unicode="&#xe616;" horiz-adv-x="1199" 
+d="M951 794h102q6 0 10.5 4t4.5 10v30q0 6 -4.5 10t-10.5 4h-102q-6 0 -10.5 -4t-4.5 -10v-30q0 -6 4.5 -10t10.5 -4zM1053 764h-249v44q0 37 -25.5 62.5t-61.5 25.5h-234q-37 0 -62.5 -25.5t-25.5 -62.5v-44h-249q-39 0 -73 -19.5t-53.5 -53t-19.5 -73.5v-600
+q0 -39 19.5 -73t53.5 -53.5t73 -19.5h907q40 0 73.5 19.5t53.5 53.5t20 73v600q0 40 -20 73.5t-53.5 53t-73.5 19.5zM614 516q-53 0 -95 -22t-66.5 -61.5t-28.5 -92.5h36q5 0 7.5 -2.5t-0.5 -5.5q-46 -54 -65 -77q-3 -2 -7 -2t-6 2l-65 77q-3 3 -0.5 5.5t7.5 2.5h36
+q4 69 42.5 124.5t98.5 84.5q62 30 131 23q62 -5 113.5 -40t81.5 -89t30 -117q0 -68 -33.5 -125.5t-91 -91t-124.5 -33.5q-60 0 -113 27t-88 76h84q28 -27 51.5 -35.5t65.5 -8.5q49 0 92 23.5t69.5 64t28.5 89.5q2 60 -21 106t-67.5 72t-102.5 26z" />
+    <glyph glyph-name="fanhui1" unicode="&#xe61e;" 
+d="M767 -126q-17 0 -29 11l-509 473q-12 11 -12 26t12 26l509 473q12 11 29 11t28.5 -11t11.5 -26.5t-12 -26.5l-481 -446l481 -446q12 -11 12 -26.5t-11.5 -26.5t-28.5 -11z" />
+    <glyph glyph-name="paizhao" unicode="&#xe6b4;" horiz-adv-x="1032" 
+d="M512 -128q-104 0 -199 40q-92 39 -163 110t-110 163q-40 95 -40 199t40 199q39 92 110 163t163 110q95 40 199 40t199 -40q92 -39 163 -110t110 -163q40 -95 40 -199t-40 -199q-39 -92 -110 -163t-163 -110q-95 -40 -199 -40zM512 -60q121 0 224 61q100 59 159 159
+q61 103 61 224t-61 224q-59 100 -159 159q-103 61 -224 61t-224 -61q-100 -59 -159 -159q-61 -103 -61 -224t61 -224q59 -100 159 -159q103 -61 224 -61zM512 -12q-108 0 -200 54q-89 53 -142 142q-54 92 -54 200t54 200q53 89 142 142q92 54 200 54t200 -54
+q89 -53 142 -142q54 -92 54 -200t-54 -200q-53 -89 -142 -142q-92 -54 -200 -54z" />
+  </font>
+</defs></svg>

miniProgram/components/toast/index.js

@@ -0,0 +1,36 @@
+// components/toast/index.js
+import { CDN_URL,API_BASE_URL,TYPE } from '../../config/index'
+import { VantComponent } from '../vant-ui/common/component';
+
+VantComponent({
+    props: {
+        show: Boolean,
+        mask: Boolean,
+        message: String,
+        forbidClick: Boolean,
+        zIndex: {
+            type: Number,
+            value: 1000
+        },
+        type: {
+            type: String,
+            value: 'text'
+        },
+        loadingType: {
+            type: String,
+            value: 'circular'
+        },
+        position: {
+            type: String,
+            value: 'middle'
+        }
+    },
+    data:{
+      cdn_url:CDN_URL,
+    },
+    methods: {
+        // for prevent touchmove
+        noop() { }
+    }
+});
+

miniProgram/components/toast/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniProgram/components/toast/index.wxml

@@ -0,0 +1,17 @@
+<view class="overlay" wx:if='{{show}}' style="'z-index':{{zIndex}}">
+  <view class="toast">
+    <image class="icon" mode="widthFix" src="{{cdn_url}}/images/icon/{{type=='loading'? 'loading.gif':(type + '.png')}}" />
+    <view class='toast-con'>
+        <text>
+          {{message}}
+        </text>
+    </view>
+
+    <view class="toast-footer" wx:if="{{ type !== 'loading' }}">
+      <button bindtap="clear">
+        确定
+      </button>
+    </view>
+  </view>
+</view>
+  

miniProgram/components/toast/index.wxss

@@ -0,0 +1,41 @@
+/* components/toast/index.wxss */
+.overlay{
+  position: fixed;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+}
+
+.toast{
+  background: #ebeae8;
+  width: 80%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  border-radius: 20rpx;
+  text-align: center;
+  padding: 8% 0;
+}
+
+.toast .icon{
+  width: 45%;
+}
+
+.toast-con text{
+  display: inline-block;    
+  width: 90%;
+  margin: 0 auto;
+}
+
+.toast-footer button{
+  background: #38948f;
+  margin-top: 40rpx;
+  color: #fff;
+  border-radius: 50rpx;
+  font-size: 32rpx;
+  font-weight: normal;
+}

miniProgram/components/toast/toast.js

@@ -0,0 +1,68 @@
+import { isObj } from '../../config/utils';
+
+const defaultOptions = {
+    type: 'text',
+    mask: false,
+    message: '',
+    show: true,
+    zIndex: 1000,
+    duration: 2000,
+    position: 'middle',
+    forbidClick: false,
+    loadingType: 'circular',
+    selector: '#van-toast'
+};
+let queue = [];
+let currentOptions = Object.assign({}, defaultOptions);
+function parseOptions(message) {
+    return isObj(message) ? message : { message };
+}
+function getContext() {
+    const pages = getCurrentPages();
+    return pages[pages.length - 1];
+}
+function Toast(toastOptions) {
+    const options = Object.assign(Object.assign({}, currentOptions), parseOptions(toastOptions));
+    const context = options.context || getContext();
+    const toast = context.selectComponent(options.selector);
+    if (!toast) {
+        console.warn('未找到 van-toast 节点，请确认 selector 及 context 是否正确');
+        return;
+    }
+    delete options.context;
+    delete options.selector;
+    toast.clear = () => {
+        toast.setData({ show: false });
+        if (options.callBack) {
+            options.callBack();
+        }
+    };
+    queue.push(toast);
+    toast.setData(options);
+    clearTimeout(toast.timer);
+    if (options.duration > 0&&options.type==='loading') {
+        toast.hideLoading = () => {
+            toast.clear();
+            queue = queue.filter(item => item !== toast);
+        };
+    }
+    return toast;
+}
+const createMethod = (type) => (options) => Toast(Object.assign({ type }, parseOptions(options)));
+Toast.loading = createMethod('loading');
+Toast.success = createMethod('success');
+Toast.fail = createMethod('fail');
+Toast.message = createMethod('message');
+Toast.clear = () => {
+    queue.forEach(toast => {
+        toast.clear();
+    });
+    queue = [];
+};
+Toast.setDefaultOptions = (options) => {
+    Object.assign(currentOptions, options);
+};
+Toast.resetDefaultOptions = () => {
+    currentOptions = Object.assign({}, defaultOptions);
+};
+export default Toast;

miniProgram/config/utils.js

@@ -0,0 +1,32 @@
+export function isDef(value) {
+  return value !== undefined && value !== null;
+}
+export function isObj(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+export function isNumber(value) {
+  return /^\d+(\.\d+)?$/.test(value);
+}
+export function range(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+export function nextTick(fn) {
+  setTimeout(() => {
+      fn();
+  }, 1000 / 30);
+}
+let systemInfo = null;
+export function getSystemInfoSync() {
+  if (systemInfo == null) {
+      systemInfo = wx.getSystemInfoSync();
+  }
+  return systemInfo;
+}
+export function addUnit(value) {
+  if (!isDef(value)) {
+      return undefined;
+  }
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}

miniProgram/pages/camera/index.js

@@ -9,6 +9,7 @@ import { CDN_URL,API_BASE_URL,TYPE } from '../../config/index'
 import {isPhoneX} from './../../utils/tools'
 
 import Router from '../../utils/routes'
+import Toast from '../../components/toast/toast';
 
 
 VueLikePage([],{
@@ -17,7 +18,8 @@ VueLikePage([],{
     isBackCamera:false,
     current:'1',
     currentImg:'',
-    isSelect: false
+    isSelect: false,
+    form:''
   },
   methods:{
     onLoad:function (options) {
@@ -25,14 +27,24 @@ VueLikePage([],{
       this.setData({
         current:id
       })
+      let left = app.globalData.deviceInfo.windowWidth - app.globalData.top.right
+
       isPhoneX().then(res => {
         this.setData({
-            isIphoneX: res
+            isIphoneX: res,
+            top:app.globalData.top,
+            left
         })
       })
     },
     onShow:function () {
       // this.reTake()
+      if (this.data.form == 'work') {
+        this.setData({
+          form:''
+        })
+        this.reTake()
+      }
     },
     loadcompele(){
       this.setData({
@@ -59,13 +71,13 @@ VueLikePage([],{
       })
     },
     submit(){
-      wx.showLoading({
-        title: '处理中…',
-        mask:true
+      let toast = Toast.loading({
+        message:'正在生成中，请耐心等候',
+        selector: '#loading-toast'
       });
         
       wx.uploadFile({
-        url: `${API_BASE_URL}/api/uploadFaceSwap/${TYPE[this.data.current]}`, //仅为示例，非真实的接口地址
+        url: `${API_BASE_URL}/api/uploadFaceSwap/${TYPE[this.data.current]}`,
         filePath: this.data.currentImg,
         name: 'file',
         success: (res)=>{
@@ -85,43 +97,92 @@ VueLikePage([],{
           } 
 
           else{
-            wx.showModal({
-              title: '无法识别人脸，请正对摄像头拍照',
-              showCancel:false
+            Toast.fail({
+              message:this.data.isSelect?'无法识别人脸，请选取正脸照片':'无法识别人脸，请正对摄像头拍照',
+              selector: '#fail-toast',
+              callBack:()=>{
+                if (this.data.isSelect) {
+                  this.back()
+                  wx.chooseImage({
+                    sourceType:["album"],
+                    count: 1,
+                    sizeType: ['original', 'compressed'],
+                    success:res =>{
+                      this.setData({
+                        currentImg: res.tempFilePaths[0],
+                        isSelect:true
+                      })
+                    },
+                    fail:error =>{
+                      console.log(error);
+                    }
+                  })
+                }
+                else{
+                  this.reTake()
+                }
+              }
             });
           }
         },
         fail:()=>{
-          wx.showModal({
-            title: '无法识别人脸，请正对摄像头拍照',
-            showCancel:false
+          Toast.fail({
+            message:this.data.isSelect?'无法识别人脸，请选取正脸照片':'无法识别人脸，请正对摄像头拍照',
+            selector: '#fail-toast',
+            callBack:()=>{
+              if (this.data.isSelect) {
+                this.back()
+                wx.chooseImage({
+                  sourceType:["album"],
+                  count: 1,
+                  sizeType: ['original', 'compressed'],
+                  success:res =>{
+                    this.setData({
+                      currentImg: res.tempFilePaths[0],
+                      isSelect:true
+                    })
+                  },
+                  fail:error =>{
+                    console.log(error);
+                  }
+                })
+              }
+              else{
+                this.reTake()
+              }
+            }
           });
         },
         complete(){
-          wx.hideLoading();
+          toast.hideLoading()
         }
       })
       
     },
     selectImage(){
-      wx.chooseImage({
-        sourceType:["album"],
-        count: 1,
-        sizeType: ['original', 'compressed'],
-        success:res =>{
-          console.log(res)
-          this.setData({
-            currentImg: res.tempFilePaths[0],
-            isSelect:true
+      Toast.message({
+        message:'请选取正脸照片',
+        selector: '#tips-toast',
+        callBack:()=>{
+          wx.chooseImage({
+            sourceType:["album"],
+            count: 1,
+            sizeType: ['original', 'compressed'],
+            success:res =>{
+              this.setData({
+                currentImg: res.tempFilePaths[0],
+                isSelect:true
+              })
+    
+              console.log(this.data.currentImg,this.data.isSelect)
+    
+            },
+            fail:error =>{
+              console.log(error);
+            }
           })
-
-          console.log(this.data.currentImg,this.data.isSelect)
-
-        },
-        fail:error =>{
-          console.log(error);
         }
-      })
+      });
     },
     takePhoto() {
       const ctx = wx.createCameraContext()

miniProgram/pages/camera/index.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "toast":"/components/toast"
+  },
   "navigationStyle": "custom"
 }

miniProgram/pages/camera/index.wxml

@@ -1,6 +1,10 @@
 <view class="container" style="opacity:{{loadCompele?1:0}}">
-  <view class="c_top" >
-      <text bindtap="back" wx:if="{{!(!isSelect&&currentImg)}}" class="iconfont iconfanhui" />
+  <view class="c_top"  style="--left: {{left+'px'}};--bottom: {{isIphoneX?'68rpx':'0'}};--top: {{top.top+'px'}};--h: {{top.height+'px'}};">
+    <view bindtap="back" wx:if="{{!(!isSelect&&currentImg)}}">
+     <view class='icon'>
+      <text class="iconfont iconfanhui" />
+     </view>
+    </view>
   </view>
   <view class="c_cam">
     <camera wx:if="{{!currentImg}}" device-position="{{isBackCamera?'back':'front'}}" flash="off" binderror="error" ></camera>
@@ -14,9 +18,13 @@
       <view class="preview">
         <text wx:if="{{!currentImg}}" bindtap="selectImage" class="iconfont iconzhaopian" />
         <image wx:else src="{{currentImg}}" mode="aspectFit" />
+        <text class='txt'>相册选择</text>
       </view>
       <text bindtap="takePhoto" class="take_photo iconfont iconpaizhao" />
-      <text bindtap="changPosition" class="iconfont iconfanzhuanxiangji1" />
+      <view class="changePos">
+        <text bindtap="changPosition" class="iconfont iconfanzhuanxiangji1" />
+        <text class='txt'>翻转镜头</text>
+      </view>
     </view>
 
     <view class="handle_img" style="--bottom: {{isIphoneX?'68rpx':'0'}};" wx:else>
@@ -25,6 +33,8 @@
     </view>
       
   </view>
-    
+  <toast id="loading-toast"/>
+  <toast id="tips-toast"/>
+  <toast id="fail-toast"/>
 </view>
   

miniProgram/pages/camera/index.wxss

@@ -8,16 +8,27 @@
   height: 12%;
   position: relative;
 }
-.c_top text{
-  position: absolute;
-  left: 40rpx;
-  bottom: 60rpx;
-  font-size: 24rpx;
+.c_top > view{
+  position: fixed;
+  left: var(--left);
+  top: var(--top);
+  height: var(--h);
+  width: var(--h);
   font-weight: bold;
-  color: #333;
-  padding: 10rpx;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.6);
+}
+.c_top .icon{
+  color: #515151;
+  font-size: 32rpx;
+  transform: translate(-50%,-50%);
+  top: 48%;
+  left: 48%;
+  position: absolute;
+}
+
+.c_top .icon >text{
+  font-size: 30rpx;
 }
 .c_cam{
   width: 100%;
@@ -69,17 +80,25 @@
   left: 0;
 }
 
-.c_btn > .preview{
-  width: 80rpx;
+.c_btn > .preview,.c_btn > .changePos{
+  width: 120rpx;
   height: 80rpx;
 }
 
+.c_btn .txt{
+  font-size: 24rpx;
+  color: #D1D1D1;
+  display: inline-block;
+  width: 100%;
+  margin-top: 20rpx;
+}
+
 .c_btn text{
   font-size: 80rpx;
 }
 
 .c_btn .iconfanzhuanxiangji1{
-  font-size: 90rpx;
+  font-size: 80rpx;
 }
 
 

miniProgram/pages/example/index.js

@@ -19,7 +19,7 @@ VueLikePage([],{
     onLoad:function (options) {
       let { id,name } = options
       this.setData({
-        current:`${this.data.cdn_url}/video/${id}.mp4`,
+        current:`${this.data.cdn_url}/video/${id}.mp4?v=${Math.random()}`,
         id
       })
       wx.setNavigationBarTitle({

miniProgram/pages/example/index.wxml

@@ -1,5 +1,5 @@
 <view class='container'>
-  <image wx:if="{{id}}" class="c_bg" src="{{cdn_url}}/images/demo/{{id}}.png" mode="aspectFit" />
+  <image wx:if="{{id}}" class="c_bg" src="{{cdn_url}}/images/demo/{{id}}.jpg" mode="scaleToFill" />
   <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" />

miniProgram/pages/work/index.js

@@ -12,12 +12,13 @@ import {
   isPhoneX
 } from './../../utils/tools'
 
-import Router from '../../utils/routes'
+import Toast from '../../components/toast/toast';
 
 VueLikePage([], {
   data: {
     cdn_url: CDN_URL,
-    baseUrl: API_BASE_URL+'/'
+    baseUrl: API_BASE_URL+'/',
+    top:0
   },
   methods: {
     onLoad: function (options) {
@@ -31,9 +32,12 @@ VueLikePage([], {
         id,
         show_img: this.data.baseUrl + vr_link + IMGSTR.normal
       })
+      let left = app.globalData.deviceInfo.windowWidth - app.globalData.top.right
       isPhoneX().then(res => {
         this.setData({
-          isIphoneX: res
+          isIphoneX: res,
+          top:app.globalData.top,
+          left
         })
       })
     },
@@ -45,10 +49,11 @@ VueLikePage([], {
     saveAlbum(e) {
       const { type } = e.currentTarget.dataset
       let img = this.data.baseUrl + this.data.vr_link + (!type?IMGSTR.normal:IMGSTR.qrcode)
-      wx.showLoading({
-        title: '保存中…',
-        mask: true
+      let toast = Toast.loading({
+        message:'保存中…',
+        selector: '#loading-toast'
       });
+      
       wx.downloadFile({
         url: img,
         type: 'image',
@@ -57,34 +62,38 @@ VueLikePage([], {
           wx.saveImageToPhotosAlbum({
             filePath: tempFilePath,
             success(res) {
-              wx.showModal({
-                title: type?'已保存,快去分享吧':'已保存到相册',
-                showCancel: false,
-                complete:()=>{
-
-                }
+              Toast.success({
+                message:type?'已保存,快去分享吧':'已保存到相册',
+                selector: '#success-toast'
               });
             },
             fail: (err) => {
-              wx.showModal({
-                title: '保存失败，请稍后再试',
+              Toast.fail({
+                message:'保存失败，请稍后再试',
+                selector: '#fail-toast'
               });
             },
             complete: () => {
-              wx.hideLoading();
+              toast.hideLoading();
             }
           })
         },
         fail: function (res) {
-          wx.showModal({
-            title: '下载失败，请稍后再试',
+          Toast.fail({
+            message:'下载失败，请稍后再试',
+            selector: '#fail-toast'
           });
-          wx.hideLoading();
+          toast.hideLoading();
         }
       });
 
     },
     back(){
+      let pages = getCurrentPages();
+      let prevPage = pages[pages.length - 2];
+      prevPage.setData({
+        form:"work"
+      })
       wx.navigateBack({  
         delta: 1
       })
@@ -97,7 +106,7 @@ VueLikePage([], {
     },
     backtoexample(){
       wx.navigateBack({
-        delta: 2
+        delta: 3
       })
       // Router.redirectTo({
       //   url:'example',

miniProgram/pages/work/index.json

@@ -1,4 +1,7 @@
 {
-  "usingComponents": {},
-  "navigationStyle": "custom"
+  "usingComponents": {
+    "toast":"/components/toast"
+  },
+  "navigationStyle": "custom",
+  "navigationBarTextStyle":"black"
 }

miniProgram/pages/work/index.wxml

@@ -1,25 +1,27 @@
 <view class='container'
- style="--bottom: {{isIphoneX?'68rpx':'0'}};--top: {{isIphoneX?'7%':'5%'}};">
-  <view class="c_top">
-      <text bindtap="backtoexample" class="iconfont iconfanhui" />
+ style="--bottom: {{isIphoneX?'68rpx':'0'}};--top: {{top.top+'px'}};--h: {{top.height+'px'}};--left: {{left+'px'}};">
+  <view class="c_top"  bindtap="backtoexample">
+      <text class="iconfont iconfanhui" />
+      <text class="txt">返回人物</text>
   </view>
-  <image style="visibility:{{loadCompele?'hidden':'visible'}};" class="c_bg" src="{{cdn_url}}/images/demo/{{id}}.png" mode="aspectFit" />
+  <image style="visibility:{{loadCompele?'hidden':'visible'}};" class="c_bg" src="{{cdn_url}}/images/demo/{{id}}.png" mode="scaleToFill" />
   <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>
-      <view bindtap="back">
-        <text class="iconfont iconzhongxinpaizhaoyuan" />
-      </view>
-      <view bindtap="saveAlbum" data-type="">
+      <view bindtap="saveAlbum" data-type="type">
         <text class="iconfont iconxiazai" />
+        <text class="txt">保存</text>
       </view>
-      <view bindtap="saveAlbum" data-type="share" class="share-quan">
-        <image src="{{cdn_url}}/images/share.png" />
-        <text>分享到朋友圈</text>
+      <view bindtap="back">
+        <text class="iconfont iconzhongxinpaizhaoyuan" />
+        <text class="txt">重拍</text>
       </view>
     </view>
   </view>
+  <toast id="loading-toast"/>
+  <toast id="success-toast"/>
+  <toast id="fail-toast"/>
 </view>
   

miniProgram/pages/work/index.wxss

@@ -9,18 +9,32 @@
   height: 100%;
 }
 
-.c_top>.iconfont{
+.c_top{
   position: fixed;
   z-index: 999;
-  left: 40rpx;
+  left: var(--left);
+  height: var(--h);
   top: var(--top);
-  font-size: 24rpx;
-  color: #333;
   font-weight: bold;
-  padding: 10rpx;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.9);
+  padding: 0 30rpx;
+  border-radius: 40rpx;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1rpx solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+}
+.c_top>.iconfont{
+  color: #3B3B3B;
+  font-size: 20rpx;
 }
+
+.c_top>.txt{
+  color: #3B3B3B;
+  font-size: 26rpx;
+  display: inline-block;
+  margin-left: 20rpx;
+}
+
  .c_bg{
   position: fixed;
   z-index: -1;
@@ -38,7 +52,7 @@
   height: 160rpx;
   width: 100%;
   left: 0;
-  z-index: 999;
+  z-index: 99;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -52,22 +66,30 @@
   bottom: 0;
   left: 0;
   opacity: 0.8;
+  z-index: -1;
 }
 
 .share_btn>view:not(.share_bg){
   background: #fff;
-  width: 112rpx;
+  width: 320rpx;
   height: 112rpx;
   border-radius: 20rpx;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.share_btn>view:not(.share_bg) .txt{
+  color: #3B3B3B;
+  margin-left: 20rpx;
+  display: inline-block;
+  font-size: 32rpx;
 }
 
+
 .share_btn>view:not(.share_bg)>.iconfont{
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  font-size: 60rpx;
+  font-size: 48rpx;
 }
 
 .share_btn>view:not(.share_bg)>.iconzhongxinpaizhaoyuan{

miniProgram/project.config.json

@@ -40,7 +40,7 @@
     "minifyWXSS": true
   },
   "compileType": "miniprogram",
-  "libVersion": "2.16.1",
+  "libVersion": "2.18.0",
   "appid": "wx43471c805cd38545",
   "projectname": "AI_change",
   "debugOptions": {

miniProgram/utils/routes.js

@@ -33,7 +33,7 @@ function toUrl (url, query) {
 export default {
   tabRoutes,
   push (options) {
-    autoSubcrebe()
+    // autoSubcrebe()
     if (typeof options === 'string') {
       return toUrl(options)
     }

miniProgram/utils/utils.js

@@ -5,28 +5,6 @@ export function bindInput(event) {
   console.log(obj)
   this.setData(obj);
 }
-
-let hasAuth = false
-const subId = 'yDycTlNKWUr_cDztZXLXqc4Nfe2TlKy5hrQdwj0yoUs'
-export function subcribe() {
-  
-  return new Promise((resolve, reject) => {
-    wx.requestSubscribeMessage({
-      tmplIds: [subId],
-      success(res) {
-        res.subId = subId
-        console.log('订阅成功')
-        resolve(res)
-      },
-      fail(err) {
-        console.log(err, '订阅消息失败')
-        reject(err)
-      }
-    })
-  })
-
-}
-
 export function autoSubcrebe() {
   return new Promise(resolve => {
     wx.getSetting({
@@ -42,4 +20,36 @@ export function autoSubcrebe() {
     })
   })
   
-}
+}
+export function isDef(value) {
+  return value !== undefined && value !== null;
+}
+export function isObj(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+export function isNumber(value) {
+  return /^\d+(\.\d+)?$/.test(value);
+}
+export function range(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+export function nextTick(fn) {
+  setTimeout(() => {
+      fn();
+  }, 1000 / 30);
+}
+let systemInfo = null;
+export function getSystemInfoSync() {
+  if (systemInfo == null) {
+      systemInfo = wx.getSystemInfoSync();
+  }
+  return systemInfo;
+}
+export function addUnit(value) {
+  if (!isDef(value)) {
+      return undefined;
+  }
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}