7 年前 · 348d506394
--- a/html/rlcx/css/search-bar.css
+++ b/html/rlcx/css/search-bar.css
--- a/html/rlcx/html/category-cont.html
+++ b/html/rlcx/html/category-cont.html
@ -0,0 +1,132 @@
 
				<!DOCTYPE html>
			
 
				<html>
			
 
				<head>
			
 
					<meta charset="utf-8"/>
			
 
					<meta name="author" content="yihu.com"/>
			
 
					<meta name="format-detection" content="telephone=no"/>
			
 
					<meta name="viewport"
			
 
					      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
					<meta name="apple-mobile-web-app-capable" content="yes"/>
			
 
					<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
			
 
					<title>热量搜索</title>
			
 
					<link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
			
 
					<link rel="stylesheet" href="../css/search-bar.css" type="text/css"/>
			
 
					<script src="../../../../weixin_common.js"></script>
			
 
				</head>
			
 
				<body>
			
 
				
			
 
				
			
 
				<div class="c-border-t c-border-b mt10 bgc-fff" id="categoryMsgBox">
			
 
				    <script id="categoryMainData" type="text/html">
			
 
				        <div class="category-box-head mlr10 ptb5">
			
 
				            <div><img src="{{photo | getPhoto}}" class="category-box-head-img"></div>
			
 
				            <div class="category-box-head-txt ml10">
			
 
				                <strong>{{name}}</strong>
			
 
				                <span class="pl10">以下食物相应份量含：</span>
			
 
				            </div>
			
 
				        </div>
			
 
				        <div class="category-box-main c-border-t">
			
 
				
			
 
				            <div class="category-box-main-left">
			
 
				                <div>
			
 
				                    {{each component as value i}}
			
 
				                        {{i}}<span>{{value}}</span><i>+</i>
			
 
				                    {{/each}}
			
 
				                </div>
			
 
				            </div>
			
 
				
			
 
				            <div class="category-box-center">
			
 
				                <img src="../images/denghao_icon.png" width="16" height="9">
			
 
				            </div>
			
 
				            <div class="category-box-right">
			
 
				                <span>{{hot}}</span>
			
 
				                千卡热量
			
 
				            </div>
			
 
				        </div>
			
 
				    </script>
			
 
				</div>
			
 
				
			
 
				
			
 
				<ul class="category-list-box" id="categoryListBox">
			
 
				    <script id="categoryTemplate" type="text/html">
			
 
				        {{each list as value i}}
			
 
				        <li class="category-list-item">
			
 
				            <div class="category-list-img"><img src="{{value.photo | getPhoto}}" alt=""></div>
			
 
				            <div class="category-list-txt">
			
 
				                <span class="line1">{{value.name}}</span>
			
 
				                <span class="line2">{{value.weight}}</span>
			
 
				            </div>
			
 
				        </li>
			
 
				        {{/each}}
			
 
				    </script>
			
 
				</ul>
			
 
				
			
 
				<script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js"></script>
			
 
				<script src="../../../js/weixin_common.js"></script>
			
 
				<script src="../../../js/template.js"></script>
			
 
				<script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
			
 
				<script type="text/javascript">
			
 
				    // 初始化数据加载
			
 
				    function dataInit() {
			
 
					    var
			
 
						    $categoryListBox = $('#categoryListBox'),
			
 
						    $categoryMsgBox = $('#categoryMsgBox'),
			
 
						    Request = GetRequest(),
			
 
						    pid = Request["pid"],
			
 
						    data = {},
			
 
						    singleData = {},
			
 
						    pageTitle = '';
			
 
				
			
 
					    sendPost("common/health/food/list?pid=" + pid,data, "json", "post", operateFailed, operateSuccesss);
			
 
					    function operateSuccesss(res) {
			
 
						    var categoryData = res;
			
 
						    html = template('categoryTemplate', categoryData);
			
 
						    $categoryListBox.html(html);
			
 
						    
			
 
						    
			
 
						    var categoryList = window.localStorage.getItem('categoryList')
			
 
				
			
 
						    if (categoryList) {
			
 
							    categoryList = $.parseJSON(categoryList);
			
 
				
			
 
							    for (var i = 0; i < categoryList.length; i++) {
			
 
								    if(categoryList[i].id == pid){
			
 
									    singleData = categoryList[i];
			
 
								    }
			
 
							    }
			
 
							    
			
 
							    pageTitle = singleData.name;
			
 
							    singleData.component = $.parseJSON(singleData.component);
			
 
							    html = template('categoryMainData', singleData);
			
 
							    $categoryMsgBox.html(html)
			
 
							    updateTitle();
			
 
						    }
			
 
				
			
 
					    };
			
 
					    function operateFailed(res) {};
			
 
				
			
 
					    //修改header 的标题
			
 
					    function updateTitle(){
			
 
						    //需要jQuery
			
 
						    var $body = $('body');
			
 
						    document.title = pageTitle;
			
 
						    // hack在微信等webview中无法修改document.title的情况
			
 
						    var $iframe = $('<iframe src="/favicon.ico"></iframe>');
			
 
						    $iframe.on('load',function() {
			
 
							    setTimeout(function() {
			
 
								    $iframe.off('load').remove();
			
 
							    }, 0);
			
 
						    }).appendTo($body);
			
 
					    }
			
 
					    
			
 
					    template.helper('getPhoto', function(str){
			
 
					        return getImgUrl(str);
			
 
					    })
			
 
				    }
			
 
				    dataInit();
			
 
				
			
 
				    
			
 
				
			
 
				</script>
			
 
				</body>
			
 
				</html>
			
--- a/html/rlcx/html/serach-index.html
+++ b/html/rlcx/html/serach-index.html
@ -0,0 +1,84 @@
 
				<!DOCTYPE html>
			
 
				<html>
			
 
				<head>
			
 
					<meta charset="utf-8"/>
			
 
					<meta name="format-detection" content="telephone=no"/>
			
 
					<meta name="viewport"
			
 
					      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
					<meta name="apple-mobile-web-app-capable" content="yes"/>
			
 
					<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
			
 
					<title>食物热量查询</title>
			
 
					<link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
			
 
					<link rel="stylesheet" href="../css/search-bar.css" type="text/css"/>
			
 
				</head>
			
 
				<body>
			
 
				<div class="searchbar searchbar-init index9999">
			
 
					<div class="searchbar-input">
			
 
						<input type="search" placeholder="搜索" id="searchInput">
			
 
						<a href="javascript:void(0);" class="searchbar-clear"></a>
			
 
						<a class="searchbar-cancel" id="searchCancel"><img src="../images/guanbi_btn.png" width="18" height="18"></a>
			
 
					</div>
			
 
				</div>
			
 
				<!--查询结果列表-->
			
 
				<ul class="searchbar-result-list index9999 js-mask-cont" id="searchResultList">
			
 
					<script id="ResultTemplate" type="text/html">
			
 
						{{each list as value i}}
			
 
						<li class="searchbar-result-item" data-id="{{value.id}}">
			
 
							<span class="searchbar-result-name">{{value.name}}</span>
			
 
						</li>
			
 
						{{/each}}
			
 
					</script>
			
 
				</ul>
			
 
				<div class="common-mask js-mask-cont"></div>
			
 
				
			
 
				
			
 
				<!-- 分类入口 -->
			
 
				<div class="search-list-box" id="categoryIndex">
			
 
					<script id="categoryList" type="text/html">
			
 
				        {{each list as value i}}
			
 
				        <div class="search-list-item">
			
 
				            <a href="category-cont.html?pid={{value.id}}" class="search-list-item-img"><img src="{{value.photo | getPhoto}}" alt=""></a>
			
 
				            <div class="search-list-item-txt">{{value.name}}</div>
			
 
				        </div>
			
 
				        {{/each}}
			
 
					</script>
			
 
				</div>
			
 
				
			
 
				
			
 
				<div class="search-result" id="searchResult">
			
 
				    <script id="singleResult" type="text/html">
			
 
				        <div class="search-result-main">
			
 
				            <div class="search-main-box">
			
 
				                <div class="search-result-img">
			
 
				                    <img src="{{photo | getPhoto}}" alt="">
			
 
				                </div>
			
 
				                <div class="search-result-tit">
			
 
				                    <div class="line1"><span>{{name}}</span><span class="pl30">{{weight}}</span></div>
			
 
				                    <div class="line2">{{hot}}千卡热量</div>
			
 
				                </div>
			
 
				            </div>
			
 
				        </div>
			
 
				        <div class="search-result-msg mt10">
			
 
				            <div class="c-border-b pb10 pt10 pl10">营养信息</div>
			
 
				            <ul class="search-result-msg-list">
			
 
				                {{each component as value i}}
			
 
				                    <li><span>{{i}}</span><span>{{value}}</span></li>
			
 
				                {{/each}}
			
 
				            </ul>
			
 
				        </div>
			
 
				    </script>
			
 
				</div>
			
 
				
			
 
				
			
 
				<script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js"></script>
			
 
				<script src="../../../js/weixin_common.js"></script>
			
 
				<script src="../../../js/template.js"></script>
			
 
				<script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
			
 
				<script src="../js/search-bar.js"></script>
			
 
				<script type="text/javascript">
			
 
				    template.helper('getPhoto', function(str){
			
 
				        return getImgUrl(str);
			
 
				    })
			
 
				</script>
			
 
				</body>
			
 
				</html>
			
--- a/html/rlcx/images/01baicai_img.png
+++ b/html/rlcx/images/01baicai_img.png
--- a/html/rlcx/images/01dami_img.png
+++ b/html/rlcx/images/01dami_img.png
--- a/html/rlcx/images/01doufu_img.png
+++ b/html/rlcx/images/01doufu_img.png
--- a/html/rlcx/images/01douyou_img.png
+++ b/html/rlcx/images/01douyou_img.png
--- a/html/rlcx/images/01duixia_img.png
+++ b/html/rlcx/images/01duixia_img.png
--- a/html/rlcx/images/01gushulei_icon.png
+++ b/html/rlcx/images/01gushulei_icon.png
--- a/html/rlcx/images/01xigua_img.png
+++ b/html/rlcx/images/01xigua_img.png
--- a/html/rlcx/images/02caomei_img.png
+++ b/html/rlcx/images/02caomei_img.png
--- a/html/rlcx/images/02doujiang_img.png
+++ b/html/rlcx/images/02doujiang_img.png
--- a/html/rlcx/images/02fanqie_img.png
+++ b/html/rlcx/images/02fanqie_img.png
--- a/html/rlcx/images/02huashengyou_img.png
+++ b/html/rlcx/images/02huashengyou_img.png
--- a/html/rlcx/images/02shucailei_icon.png
+++ b/html/rlcx/images/02shucailei_icon.png
--- a/html/rlcx/images/02xiaomi_img.png
+++ b/html/rlcx/images/02xiaomi_img.png
--- a/html/rlcx/images/02yangrou_img.png
+++ b/html/rlcx/images/02yangrou_img.png
--- a/html/rlcx/images/03.shuiguolei_icon.png
+++ b/html/rlcx/images/03.shuiguolei_icon.png
--- a/html/rlcx/images/03caiziyou_img.png
+++ b/html/rlcx/images/03caiziyou_img.png
--- a/html/rlcx/images/03doujiao_img.png
+++ b/html/rlcx/images/03doujiao_img.png
--- a/html/rlcx/images/03lvdou_img.png
+++ b/html/rlcx/images/03lvdou_img.png
--- a/html/rlcx/images/03niurou_img.png
+++ b/html/rlcx/images/03niurou_img.png
--- a/html/rlcx/images/03pingguo_img.png
+++ b/html/rlcx/images/03pingguo_img.png
--- a/html/rlcx/images/04.roudanlei_icon.png
+++ b/html/rlcx/images/04.roudanlei_icon.png
--- a/html/rlcx/images/04huloubu_img.png
+++ b/html/rlcx/images/04huloubu_img.png
--- a/html/rlcx/images/04matou_img.png
+++ b/html/rlcx/images/04matou_img.png
--- a/html/rlcx/images/04xiangchang_img.png
+++ b/html/rlcx/images/04xiangchang_img.png
--- a/html/rlcx/images/04zimajiang_img.png
+++ b/html/rlcx/images/04zimajiang_img.png
--- a/html/rlcx/images/05.dadoulei_icon.png
+++ b/html/rlcx/images/05.dadoulei_icon.png
--- a/html/rlcx/images/05hetao_img.png
+++ b/html/rlcx/images/05hetao_img.png
--- a/html/rlcx/images/05jidan_img.png
+++ b/html/rlcx/images/05jidan_img.png
--- a/html/rlcx/images/05ou_img.png
+++ b/html/rlcx/images/05ou_img.png
--- a/html/rlcx/images/05wotou_img.png
+++ b/html/rlcx/images/05wotou_img.png
--- a/html/rlcx/images/06.nailei_icon.png
+++ b/html/rlcx/images/06.nailei_icon.png
--- a/html/rlcx/images/06xianmianbao_img.png
+++ b/html/rlcx/images/06xianmianbao_img.png
--- a/html/rlcx/images/06xingren_img.png
+++ b/html/rlcx/images/06xingren_img.png
--- a/html/rlcx/images/07.youzhilei_icon.png
+++ b/html/rlcx/images/07.youzhilei_icon.png
--- a/html/rlcx/images/07binggan_img.png
+++ b/html/rlcx/images/07binggan_img.png
--- a/html/rlcx/images/07guazi_img.png
+++ b/html/rlcx/images/07guazi_img.png
--- a/html/rlcx/images/08huasheng_img.png
+++ b/html/rlcx/images/08huasheng_img.png
--- a/html/rlcx/images/08toudou_img.png
+++ b/html/rlcx/images/08toudou_img.png
--- a/html/rlcx/images/banner.png
+++ b/html/rlcx/images/banner.png
--- a/html/rlcx/images/denghao_icon.png
+++ b/html/rlcx/images/denghao_icon.png
--- a/html/rlcx/images/guanbi_btn.png
+++ b/html/rlcx/images/guanbi_btn.png
--- a/html/rlcx/images/shuannai_img.png
+++ b/html/rlcx/images/shuannai_img.png
--- a/html/rlcx/js/search-bar.js
+++ b/html/rlcx/js/search-bar.js
@ -0,0 +1,144 @@
 
				;$(function () {
			
 
				    var $searchInput = $('#searchInput'),
			
 
				        $searchCancel = $('#searchCancel'),
			
 
				        $categoryIndex = $('#categoryIndex'),
			
 
				        $searchResultList = $('#searchResultList'),
			
 
				        $searchResult = $('#searchResult'),
			
 
				        $maskCont = $('.js-mask-cont'),
			
 
				        data = {},
			
 
				        timer = null;
			
 
				
			
 
				    // 初始化数据加载
			
 
				    function dataInit() {
			
 
				        sendPost("common/health/food/list?pid=0",data, "json", "post", operateFailed, operateSuccesss);
			
 
				        function operateSuccesss(res) {
			
 
				            var categoryData = res,
			
 
				                dataStr = JSON.stringify(res.list);
			
 
				
			
 
				            localStorage.setItem("categoryList", dataStr);
			
 
				            html = template('categoryList', categoryData);
			
 
				            $categoryIndex.html(html);
			
 
				
			
 
				        };
			
 
				        function operateFailed(res) {
			
 
				        };
			
 
				    }
			
 
				    dataInit();
			
 
				
			
 
				    // 视图逻辑层处理
			
 
				    var viewLogic = {
			
 
				        showFoodDeital:function () {
			
 
				            $searchResult.show();
			
 
				            $categoryIndex.hide();
			
 
				            $maskCont.hide();
			
 
				        },
			
 
				        hideFoodDetial:function () {
			
 
				            $searchResult.hide();
			
 
				            $categoryIndex.show();
			
 
				            $maskCont.hide();
			
 
				        }
			
 
				    }
			
 
				
			
 
				    var timer = null;
			
 
					$searchInput.on('input',controlCancelBtn)
			
 
				    function controlCancelBtn() {
			
 
				        clearTimeout(timer);
			
 
				        var val = $(this).val();
			
 
				
			
 
				        // 查询
			
 
				        function searchAjaxFn(){
			
 
				            var postData = {},
			
 
					            singleData = null;
			
 
					            resData = null;
			
 
				
			
 
				            timer = setTimeout(function () {
			
 
				                postData.name = val;
			
 
				                sendPost("common/health/food/search", postData, "json", "post", operateFailed, operateSuccesss);},700)
			
 
				
			
 
				            function operateSuccesss(res) {
			
 
					            resData = res.list;
			
 
					            var length = resData.length,
			
 
						            delNum;
			
 
				
			
 
				                $maskCont.show();
			
 
				
			
 
				                // 排除大类别
			
 
				                console.log(resData);
			
 
					            for (var i = 0; i < length; i++) {
			
 
				                    if (resData[i].pid == 0) {
			
 
				                        delNum = i;
			
 
				                    }
			
 
					            }
			
 
				                if (typeof  delNum !== 'undefined') {
			
 
					                resData.splice(delNum,1)
			
 
				                }
			
 
				
			
 
				                if (resData.length > 0) {
			
 
				
			
 
					                var html = template('ResultTemplate', res);
			
 
				
			
 
				                    $searchResultList.html(html);
			
 
				
			
 
				                    $searchResultList.on('click','.searchbar-result-item',function () {
			
 
				
			
 
					                    var id = $(this).data('id'),
			
 
				                            length = resData.length;
			
 
				
			
 
				                        for (var i = 0; i < length; i++) {
			
 
				                              if (resData[i].id === id) {
			
 
				                                  singleData = resData[i];
			
 
				                              }
			
 
				                        }
			
 
				
			
 
				                        if (typeof singleData.component === 'string') {
			
 
					                        singleData.component = JSON.parse(singleData.component);
			
 
				                        }
			
 
				
			
 
					                    html = template('singleResult', singleData);
			
 
				                        $searchResult.html(html)
			
 
				                        $searchInput.val(singleData.name);
			
 
				                        viewLogic.showFoodDeital();
			
 
				
			
 
				                    })
			
 
				                }else {
			
 
				                    var
			
 
				                        data = {
			
 
				                            list: [{name:'查无结果'}],
			
 
				                        },
			
 
				                        html = template('ResultTemplate', data);
			
 
				                        $searchResultList.html(html);
			
 
				                }
			
 
				
			
 
				            }
			
 
				            function operateFailed(res) {
			
 
				
			
 
				            }
			
 
				        }
			
 
				
			
 
				        if (val !== '') {
			
 
				            $searchCancel.show();
			
 
				            searchAjaxFn();
			
 
				        } else {
			
 
				            $searchCancel.hide();
			
 
				            $maskCont.hide();
			
 
				            viewLogic.hideFoodDetial();
			
 
				        }
			
 
				    }
			
 
				
			
 
				
			
 
				
			
 
				
			
 
				    $searchCancel.click(hideCancelBtn)
			
 
				    function hideCancelBtn() {
			
 
				        $searchInput.val('');
			
 
				        $(this).hide();
			
 
				        $maskCont.hide();
			
 
				
			
 
				        viewLogic.hideFoodDetial();
			
 
				    }
			
 
				
			
 
				
			
 
				
			
 
				
			
 
				
			
 
				})