<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>海尔商城</title>
        <link rel="icon" type="image/png" sizes="12x12" href="https://statics02.ehaier.com/h5/ehaier/iHaier.png">
        <link rel="stylesheet" type="text/css" href="./css/layout.css" />
    </head>
    <body>
        <div class="app">
            <div class="container">
                <div class="header-bar">
                    <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/haier-logo.png">  
                </div>
                <div class="tab-container">
                    <div class="tab-item" onclick="selectTab(0)">
                        <div class="tab-content title-style" id="title0">
                            主页
                        </div>
                        <div class="tab-line" id="line0"></div>
                    </div>
                    <div class="tab-item" onclick="selectTab(1)">
                        <div class="tab-content" id="title1">
                            商品
                        </div>
                        <div class="tab-line hide-style" id="line1"></div>
                    </div>
                </div>
                <div class="content-container" id="content0">
                    <div class="banner-top">
                        <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/banner1.png">  
                    </div>
                    <div class="with-family">
                        <div class="with-family-text">
                            <h2 class="title">和家人一起，体验智慧的家</h2>
                            <h6 class="des">支持快速绑定和在线管理智慧家电，实时查看家电状态及能耗，还可以一键邀请家人共同管理</h6>
                        </div>
                        <div class="with-family-icons">
                            <div  class="icon-item">
                                <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/with-family1.png">  
                                <h6>家电管理</h6>
                            </div>
                            <div  class="icon-item">
                                <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/with-family2.png">  
                                <h6>实时监控</h6>
                            </div>
                            <div  class="icon-item">
                                <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/with-family3.png">  
                                <h6>场景管理</h6>
                            </div>
                            <div  class="icon-item">
                                <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/with-family4.png">  
                                <h6>语音助手</h6>
                            </div>
                            <div  class="icon-item">
                                <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/with-family5.png">  
                                <h6>家庭共享</h6>
                            </div>
                            <div  class="icon-item">
                                <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/with-family6.png">  
                                <h6>主动服务</h6>
                            </div>
                        </div>
                    </div>
                    <div  class="banner2">
                    <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/banner2.png">  
                    </div>
                    <div class="ctrl">
                        <div class="ctrl-text">
                            <h2 class="title">想控制家电？一句话的事儿</h2>
                            <h6 class="des">语音唤醒“小优”助手，轻松控制智能家电和智慧生活场景，更方便，更智能</h6>
                        </div>
                    </div>
    
                    <div class="banner3">
                        <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/banner3.png">  
                    </div>
                    <div class="design">
                        <div class="design-text">
                            <h2 class="title">轻松设计，定制专属智家</h2>
                            <h6 class="des">5大空间、7大解决方案、N多场景的全屋解决方案，更有专业案例和作品分享，帮助您轻松定制自己专属的智家</h6>
                        </div>
                    </div>
                    <div class="banner4">
                        <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/banner4.png">  
                    </div>
                    <div class="banner5">
                        <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/banner5.png">
                        <div class="vip-icons">
                            <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/vip1.png">
                            <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/vip3.png">
                            <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/vip3.png">
                        </div>
                        <div  class="vip-des">
                            <span class="text1">海尔会员</span>
                            <span class="text2">会员权益尊享好礼</span>
                            <span class="text3">打通了海尔会员体系，升级会员权益，会员等级和会员积分，让您成为海尔终身用户</span>
                        </div>
                    </div>
                    <div class="banner6">
                        <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/banner6.png">  
                    </div>
                    <div class="download-tip"><span>下载智家APP，开启智慧生活</span></div>
                    <div class="banner7">
                        <img src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/banner7.png">
                    </div>
                    <div class="bottom des"><a href="https://beian.miit.gov.cn/" target="_blank" id="recordNumber"></a></div>
                    <div style="clear: both;"></div>
                </div>
                <div class="cate-container hide-style" id="content1"></div>
            </div>
        </div>
        <script src="./js/main.js"></script>
        <script src="./js/jquery-3.6.3.min.js"></script>
        <script>
            const qrCodeUrl = "https://cdn09.ehaier.com/shunguang/H5/www/img/other/qrcode.jpg"
            // 批量提交辅助数组变量
            const cateList = [{
                id: '9627',
                name: '冰箱/冰柜'
            },{
                id: '2725',
                name: '洗衣机'
            },{
                id: '2729',
                name: '空调'
            },{
                id: '2741',
                name: '热水器'
            }]
            let selectedTab = 0
            let pluList = []
            let contentStr = ''
            let recordNumber = '鲁ICP备09096283号-18'

            _handleDomain()
            _getList()
        
            /**
             * @description  获取商品列表
             **/
            function _getList() {
                for(let i = 0; i < 4; i++) {
                    let url = `https://s.ehaier.com/search/wdCommonSearchNew.html?provinceId=16&cityId=173&districtId=2450&streetId=12036596&fromType=1&visitStore=&memberId=&keyword=&qs=isHotDesc&filterData=all%40all%400&pageIndex=1&pageSize=8&actTagId=&productCateId=${cateList[i].id}&longitude=120.41803&latitude=36.12784&visitMdCode=`
                    _ajaxRequest('get', url).then(function(data) {
                        contentStr = `<div class="cate-title">${cateList[i].name}</div>`
                        if (data?.success && data?.data?.productList?.length) {
                            _formatPluList(i,data.data.productList)
                        }else{
                            _setFailMessage(i)
                        }
                    },function(error) {
                        contentStr = `<div class="cate-title">${cateList[i].name}</div>`
                        _setFailMessage(i)
                    })
                }
            }
            /**
             * @description  获取商品列表
             * @param {string} type 请求类型
             * @param {string} url 请求的url
             **/
            function _ajaxRequest(type, url) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type,
                        url,
                        dataType: "json",//后台返回值类型
                        contentType: "application/json;charset=utf-8", //如果提交的是json数据类型，则必须有此参数,表示提交的数据类型 
                        async: false,//异步请求
                        headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token"), 'Access-Control-Allow-Origin':'*'},
                        success: function (data) {
                            resolve(data)
                        },
                        error: function () {
                            reject(data)
                        }
                    })
                })
            }
            /**
             * @description  处理商品列表
             * @param {number} cateIndex 品类下标
             * @param {Array} pluList 商品列表
             **/
            function _formatPluList (cateIndex, pluList) {
                let listLen = pluList.length < 8 ? pluList.length : 8
                contentStr += `<div class="plu-container">`
                for(let j = 0; j < listLen; j ++) {
                    _formatPrice(pluList[j])
                    contentStr += `<div class="plu-item">
                            <div class="plu-img-container" onmouseenter="showQrCode('mask${cateIndex}${j}')" onmouseleave="hideQrCode('mask${cateIndex}${j}')">
                                <img class="plu-img" src="${pluList[j].defaultImageUrl}" />
                                <div class="hide-style" id="mask${cateIndex}${j}">
                                    <div class="mask-container">
                                        <img class="mask-img" src="${qrCodeUrl}" />
                                        <div class="mask-text">扫码下载智家APP购买</div>
                                    </div>
                                </div>
                            </div>
                            <div class="plu-name">${pluList[j].productFullName}</div>
                            <div class="plu-price">
                                <div class="symbol">￥</div>
                                <div class="price-int">${pluList[j].priceInt}</div>
                                <div class="price-float">${pluList[j].priceFloat}</div>
                            </div>
                        </div>`
                }
                contentStr += `</div>`
                $("#content1").append(contentStr)
            }
            /**
             * @description  处理失败时的信息展示
             * @param {number} cateIndex 品类下标
             **/
            function _setFailMessage(cateIndex) {
                contentStr += `<div class="plu-fail">
                        <img class="fail-img" src="https://cdn09.ehaier.com/shunguang/H5/www/img/other/load-failed.png" />
                        <div class="fail-text">加载失败，请稍后重试</div>
                    </div>`
                $("#content1").append(contentStr)
            }
            /**
             * @description  处理商品价格
             * @param {Object} pluList 商品列表
             **/
            function _formatPrice (plu) {
                let price = ''
                try {
                    if (plu.defaultPrice && Number(plu.defaultPrice)) {
                        price = parseFloat(`${plu.defaultPrice}`).toFixed(2)
                    } else {
                        price = '0.00'
                    }
                } catch(err) {
                    price = '0.00'
                }
                plu.priceInt = price.split('.')[0]
                plu.priceFloat = '.' + price.split('.')[1]
            }
            /**
             * @description  选中tab
             * @param {number} tabIndex tab下标
             **/
            function selectTab(tabIndex) {
                if(selectedTab != tabIndex) {
                    selectedTab = tabIndex
                    let index = $(`#tab${tabIndex}`)
                    // 选中tab
                    $(`#title${tabIndex}`).addClass("title-style")
                    $(`#line${tabIndex}`).removeClass("hide-style")
                    $(`#content${tabIndex}`).removeClass("hide-style")
                    //取消选中tab
                    $(`#title${0+!tabIndex}`).removeClass("title-style")
                    $(`#line${0+!tabIndex}`).addClass("hide-style")
                    $(`#content${0+!tabIndex}`).addClass("hide-style")
                }
            }
            /**
             * @description  显示二维码
             * @param {number} id dom元素ID
             **/
            function showQrCode(id) {
                $(`#${id}:last-child`).removeClass("hide-style")
            }
            /**
             * @description  隐藏二维码
             * @param {number} id dom元素ID
             **/
            function hideQrCode(id) {
                $(`#${id}:last-child`).addClass("hide-style")
            }

            function _handleDomain() {
                const hostname = document.location.hostname
                console.log('hostname', hostname)
                if(hostname.includes('tiyany.com')) {
                    recordNumber = '鲁ICP备2022016592号-3'
                }else if(hostname.includes('tiyany.net')) {
                    recordNumber = '鲁ICP备2022016592号-2'
                }else if(hostname.includes('tiyany.cn')) {
                    recordNumber = '鲁ICP备2022016592号-4'
                }else if(hostname.includes('haier-home.top')) {
                    recordNumber = '鲁ICP备2022016592号-1'
                }else if(hostname.includes('haiersmarthomes.com')) {
                    recordNumber = '鲁ICP备14026385号-4'
                }else {
                    recordNumber = '鲁ICP备09096283号-18'
                }
                $('#recordNumber').text(recordNumber)
            }
        </script>
    </body>
</html>