国产化系统/鸿蒙开发收银系统--足浴店源码———未来之窗行业应用跨平台架构

一、收银台主框架

 

二、css 

 <style type="text/css">
    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
      margin: 0;
      padding:0;
    }
    *{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    ul, ol {
      margin-top: 0;
      margin-bottom: 10px;
    }
    a {
      color: #428bca;
      text-decoration: none;
    }
    .fa {
      display: inline-block;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    :before, :after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    /*这是一个字体,可以自定义一个x图片*/
    .fa-times:before {
      content: "X";
    }

    .tabbable {
      border: none;
      margin-bottom: 10px;
	   margin-bottom: 0px;
	   margin-top: -15;
    }
    .nav {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
    }
    .nav>li {
      position: relative;
      display: block;
    }
    .nav-tabs {
      margin-bottom: 0;
      margin-left: 0;
      border: 0;
      top: 2px;
      background-color: #f3f3f3;
      -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3);
      -moz-box-shadow: 0 0 4px rgba(0,0,0,.3);
      box-shadow: 0 0 4px rgba(0,0,0,.3);
      border-bottom: 1px solid #ddd;
    }
    .nav-tabs>li {
      float: left;
      margin-bottom: 0px;
      margin-left: 5px;
    }
    .nav-tabs li i {
      position: relative;
      margin-left: 10px;
      cursor: pointer;
    }
    .nav-tabs li [class*=" fa-"], .nav-tabs li [class^="fa-"] {
      width: 1.25em;
      display: inline-block;
      text-align: center;
    }
    #myTab {
      height: 40px;
      overflow: hidden;
    }
    #myTab > li {
      height: 35px;
      overflow: hidden;
      margin-top: 5px;
      background: #dedede;
      background: rgba(0,0,0,0.05);
      color: #777;
    }
    #myTab > li.active, #myTab>li:hover, #myTab>li:focus {
      background-color: #fff;
      border-bottom-color: transparent;
      box-shadow: 0 -2px 3px 0 rgba(0,0,0,.15);
    }
    #myTab > li > a {
      position: relative;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      padding: 8px 0px 8px 10px;
      margin: 0 20px 0 0;
      border-top: 0px;
      box-shadow: none;
      background: transparent;
      line-height: 17px;
      border: 0;
      max-width: 108px;
      color: #777;
    }
    #myTab > li.active {
      border-top: 2px solid #2dc3e8;
    }
    #myTab li [class*=" fa-"], #myTab li [class^="fa-"] {
      vertical-align: middle;
      margin-left: 0px;
      position: absolute;
      right: 2px;
      margin-top: 10px;
	  /*未来之窗*/
    }
    .tab-content {
      background: none;
      padding: 0;
      padding-top: 5px;
      position: relative;
    }
    .tab-content > div{
      display: none;
	  /*未来之窗*/
	   margin-top: -30px;

    }
    .tab-content > div.active{
      display: block;
    }
    </style>

三、主框架代码

 <frameset frameborder=0 framespacing=0 border=0 rows="88,*,14">
        <frame src="../gf_app/page/top_toolbar.html" name="top" frameborder=0 noresize scrolling='no' marginwidth=0 marginheight=0>
        <frameset frameborder=0  framespacing=0 border=0 cols="100,8, *" id="frame-body">
            <frame src="../gf_app/page/frame_leftmenu.html" frameborder=0 id="menu-frame" name="menu"  scrolling='no' style="scrollbar-width: none;" >
            <frame src="./frame_left_drag.html" frameborder="no" scrolling="no" id="drag-frame" name="drag-frame" >
            <frame src="./frame_default.html" frameborder=0 id="main-frame" name="main">
        </frameset>
        <frame src="./frame_bottom.html" name="bottom" frameborder=0 noresize scrolling='no' marginwidth=0 marginheight=0>
    </frameset>
    <noframes></noframes>

四、主框架代码2

<div rows="88,*,14" frameborder="NO" noresize Borders="NO" framespacing="0" style="width:100%;height:100%;">
    <iframe name="top" frameborder=0 noresize scrolling='no' marginwidth=0 marginheight=0 noresize Borders="NO" src="顶部"
           style="width:100%;height:88px;" ></iframe>

	<div cols="100,8, *" frameborder="NO" noresize Borders="NO" framespacing="0" id="frame-body" style="width:100%;vertical-align: top;">
	        <iframe src="菜单" frameborder=0 id="menu-frame" name="menu"  scrolling='no' style="scrollbar-width: none;width:100px;height:100%;" ></iframe>
            <iframe src="收缩" frameborder="no" scrolling="no" id="drag-frame" name="drag-frame"  style="width:8px;height:100%;"></iframe>
			<!--
            <iframe   frameborder=0 id="main-frame" name="main" style="width:calc(100% - 120px);height: 100vh;;"></iframe>
			-->
 
			<div class="tabbable" id="tabs" style="width:calc(100% - 120px);height: calc(100vh - 120px);;;display: inline-block;border:none;vertical-align: top;">
　　<!-- 页面标签列表 -->
　　<ul class="nav nav-tabs" id="myTab">　
<!--　
  　　<li id="tab-04434" class="">　　　　　　<a data-toggle="tab" href="#tab-content-0" style="width: 518px; padding-left: 10px;"> 未来之窗标签 </a>　　　　　　<i class="fa fa-times" onclick="删除(0)"></i>　　　　</li>　　
  　　<li id="tab-34535" class="active">　　　　　　<a data-toggle="tab" href="#tab-content-10301" style="width: 518px; padding-left: 10px;">未来2</a>　　　　　　<i class="fa fa-times" onclick="删除(10301)"></i>　　
  　　</li>　
  -->　</ul>

 　<div class="tab-content">
 <!--
　　　　<div class=" " id="tab-content-0">　　　　　
     　<iframe id="iframepage0" name="iframepage1" width="100%" frameborder="0" scrolling="no"   height="311"></iframe>　　
	 　　</div>　　
         　　<div id="tab-content-10301" class="active">　　　
　　　    <iframe id="iframepage4" name="iframepage5" width="100%" frameborder="0" scrolling="no" height="311"></iframe>　　　
　</div>　
-->
　</div>
      </div>

	</div>
	<iframe   name="bottom" frameborder=0 noresize scrolling='no' marginwidth=0 marginheight=0 style="width:100%;height: 14px;"></iframe>
	 
      
</div>

五、交互代码

 var 未来之窗_人工智能_当前_tab="";
  //切换tab页的显示
  $(document).on('click','#myTab > li',function(e){
    //清除原来显示的tab页
	 
    var oldTab = $("#myTab li.active").removeClass("active").find("a[data-toggle='tab']");
    $(oldTab.attr("href")).removeClass("active");

   
	 
	

    刷新(false/*isDelete*/,$(this).attr('id').substring(4));
	

  });

  function 未来之窗_人工智能_tab切换(tab,页面id){
	 
	 $("#tab-"+页面id).addClass("active");

	if(未来之窗_人工智能_当前_tab == tab){
		return;
	}
	$(".cyberwin_tabs_contents").hide();
	

	未来之窗_人工智能_当前_tab = tab;
	$("#"+未来之窗_人工智能_当前_tab).show();

	
	 
  }
  //手动调用切换到要显示的tab页,当前的action只支持show
  //eg:$("#tab-0 a[data-toggle='tab']").tab("show");
  $.fn.tab = function(action){
    if(action == "show"){
      $(this).parent().click();
    }
  }

  var currentTabId = '';//当前焦点Tab
  //在非左侧菜单栏弹出的tab页也会用到该数据，如common.js中的pageForward函数
  var pageCounter = 0;
  
 
  function 未来之窗_人工智能_tabADD(id,text,url,innerTab,禁止删除) {
    //如果某个页面已经打开，则切换到该页显示即可，不会新添加tab页
    if($('#myTab #tab-'+id).length > 0){
      $('#myTab  #tab-' + id + ' a').tab('show');
    }else{
      var tab_id = "tab-" + id,
      tab_content_id = "tab-content-"+id;
      
      //添加tab页签
      $("#myTab > li").removeClass("active");
     // $("#myTab").append("<li id='" + tab_id + "' class='active'><a data-toggle='tab' href='#"
    //    + tab_content_id + "'>" + text + "</a>"
     //   + ("<i class='fa fa-times' onclick='deleteTab(\"" + id + "\")'></i>") + "</li>");

		  
		if(禁止删除 == "Y"){
			 $("#myTab").append("<li id='" + tab_id + "' class='active'><a data-toggle='tab' href='javascript:未来之窗_人工智能_tab切换(\""
            + tab_content_id + "\",\""+id+"\");'>" + text + "</a>"
           + ("") + "</li>");
		}else{
			 $("#myTab").append("<li id='" + tab_id + "' class='active'><a data-toggle='tab' href='javascript:未来之窗_人工智能_tab切换(\""
          + tab_content_id + "\",\""+id+"\");'>" + text + "</a>"
           + ("<i class='fa fa-times' onclick='删除(\"" + id + "\")'></i>") + "</li>");
		}
      
      //添加新的内容显示
      $(".tab-content > div").removeClass("active");
      $(".tab-content").append("<div id='"+ tab_content_id +"' class='active cyberwin_tabs_contents'>"
        + "<iframe id='iframepage" + (pageCounter++) + "' name='iframepage" + (pageCounter++) 
        + "' width='100%' style='height:calc(100vh - 90px);;' frameborder='0' scrolling1='no'  src='" + url + "'></iframe></div>");      
    }
    //刷新切换tab的历史记录
    刷新(false/*isDelete*/,id);
    //重新设置tab页签的宽度
    refreshWidth();
  }
  //参数id为tab的标志，但是并不是tab页的id属性，真正的id属性值是"tab-"+id
  function 删除(id){
    var tabJQ = $("#tab-"+id),
    tabContentJQ = $("#tab-content-" + id);    
    
    if(!tabJQ.hasClass("active")){
      tabJQ.remove();
      tabContentJQ.remove();
      刷新(true/*isDelete*/,id);
    }else{    
      tabJQ.remove();
      tabContentJQ.remove();
      刷新(true/*isDelete*/,id);
      $('#tab-' + currentTabId + ' > a').tab('show').click();
    }
    refreshWidth();
  }
  //关闭当前tab页的快速方法
  function closeCurrentTab(){
    deleteTab(currentTabId);
  }

 
  function 刷新(isdelete,curTabId){
    if(!refreshTabHistory.histoty){
      //用来记录用户点击tab的历史
      refreshTabHistory.histoty = [];
    }
    var index = 0,
    leng = refreshTabHistory.histoty.length;
    //查找传入的tab页签在历史记录中的位置
    for(; index < leng; index++){
      if(refreshTabHistory.histoty[index] == curTabId){
        break;
      }
    }
    
    
    if(isdelete){
      refreshTabHistory.histoty.splice(index,1);

    
    }else{
      if(index < leng) {
        refreshTabHistory.histoty.splice(index,1);
      }
      refreshTabHistory.histoty.push(curTabId);
    }
    currentTabId = refreshTabHistory.histoty[refreshTabHistory.histoty.length - 1];
  }

  
  function refreshWidth(){
    var panelWidth = $('#myTab').width() - 20,
    tabs = $('#myTab > li'),
    tabContentAverageWidth = 0,
    minTabAverageWidth = 25,
    zeroContentTabWidth = 35,
    aPaddingLeft = 10;
    
    averageWidth = parseInt(panelWidth/(tabs.length),10);// 
    if(averageWidth >= zeroContentTabWidth){
      tabContentAverageWidth = averageWidth - zeroContentTabWidth;
      
    /*35 > averageWidth >= 25*/ 
    }else if(averageWidth >= minTabAverageWidth){
      tabContentAverageWidth = 0;
      aPaddingLeft = averageWidth - minTabAverageWidth;
      
    //averageWidth < 25
    }else{
      tabContentAverageWidth = 0;
      aPaddingLeft = 0;
    }
    
    tabs.find('>a').css({'width':(tabContentAverageWidth + aPaddingLeft),'padding-left':aPaddingLeft});
  }

  //测试代码
  for(var i = 0; i < 4; i++){
  未来之窗_人工智能_tabADD(i,"test" + i,"地址");
  }

  

六、子页面调用

未来之窗_人工智能_并行传送阵('收银台','9089url','','Y');

七、阿雪技术观

拥抱开源与共享，见证科技进步奇迹，畅享人类幸福时光！

让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量