美发软件流水单效果制作——未来之窗行业应用跨平台架构

一、流水单界面

流水单设计创意，在于模拟现场经营吧台一排排水单，便于寻找。

可以同时展示多个单子

。多个师傅的单子都可以看到

水单也可以看到每个单子的状态。

二、左侧旋转动画技术

传统都是用js，如今css也是很强大，这的源于浏览器的强大

复制代码

   .re-item img {
                max-width: 90px;
            }

            .re-item-front,
            .re-item-back {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
               
				background:#ff333d;
				border-radius:30px;
				opacity: 0.9;
				text-align: center;
                -webkit-perspective: 1000;
                /*backface-visibility: hidden;*/
                -webkit-transition: all 1.5s;
                -moz-transition: all 1.5s;
                -ms-transition: all 1.5s;
                -o-transition: all 1.5s;
                box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;
                overflow: hidden;
            }

            .re-item-back {
                position: relative;
                transform: rotateY(-180deg);
                -webkit-transform: rotateY(-180deg);
            }

            .re-item:hover .re-item-front {
                transform: rotateY(-180deg);
                -webkit-transform: rotateY(-180deg);
            }

            .re-item:hover .re-item-back {
                transform: rotateY(-360deg);
                -webkit-transform: rotateY(-360deg);
            }

            .re-box .re-item dd {
                text-align: center;
                font-family: "微软雅黑";
            }

            .re-item .re-item-job {
                margin: 2px 0;
                font-size: 18px;
                color: #303030;
                line-height: 40px;
            }

            .re-item .re-item-des {
                padding: 0 12px;
                font-size: 14px;
                color: #939393;
            }

关键动画

复制代码

  .re-item:hover .re-item-front {
                transform: rotateY(-180deg);
                -webkit-transform: rotateY(-180deg);
            }

            .re-item:hover .re-item-back {
                transform: rotateY(-360deg);
                -webkit-transform: rotateY(-360deg);
            }

三、新增单据技术

复制代码

Service_flowBill_CashierDesktop_createorder('');

四、判断客户端环境

复制代码

//cyberwin_offline_Application_SyncHardware 智能硬件
 //未来之窗客户端技术

   function check_Support_CwpdClient_4_this_synchardwareclient(){
	  if( typeof CyberWin_JsStandardPlug == "undefined"){
		   return false;
	  }

	   if(CyberWin_JsStandardPlug){
		   return true;
	   }
	   return false;
   }

五、xhr收银台优势

首先，不重新加载网页资源意味着收银过程能够保持连续性。在繁忙的收银场景中，每一秒都很关键。传统的网页重新加载可能会导致短暂卡顿，而 XHR 动态交互可以让收银员流畅地进行操作，如扫描商品、修改订单数量等，无需等待页面刷新，从而大大提高收银效率。

其次，从顾客体验角度来看，这种方式能够实现实时反馈。例如，当收银员为顾客添加会员优惠或者折扣时，系统可以立即通过 XHR 动态更新订单总价并显示在界面上，顾客能及时看到价格变化，减少等待时间和误解，提升满意度。

再者，对于系统的数据更新非常方便。如果后台的商品信息（如价格、库存）发生变化，通过 XHR 可以在不刷新整个收银页面的情况下，动态更新商品相关数据，确保收银员始终使用最新的数据进行收银，减少因数据不同步导致的错误。

六、网络震荡处理

网页办的sass有个很大问题就是外网ip一旦变化，或者超时就会提示登录超时。这时候需要无状态进入模式，需要服务器配合建立不需要sesseion链接的网页，不需要cookie技术的网页，这样在网络切换的过程中不会要求登录。保证的收银的业务连续性。

七、电脑死机，突然断电技术

电脑使用过程中，难免会遇到突然断电，断网，司机的情况。对于saas这无疑是致命的，大大降低了收银体验，这时候需要使用web缓存技术，将未处理的事务存放于缓存，例如收银挂单，未结算的订单，未录入完成的进货单，未完成的出库单。利用web缓存及时存放于前段，这样即时电脑突然关机，，关机，重新进入saas也可以还原单据。实现了saas和客户端一样的效果。