master

分支 (1)

管理

管理

master

yitao-portal
/
search.html

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>易淘商城--商品搜索结果页</title>
    <!--<link rel="icon" href="assets/img/favicon.ico">-->
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
* {
    box-sizing: unset;
}
        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-famiyt: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }
        .logo-list li{
            padding:8px;
        }
       .logo-list li:hover{
            background-color: #f3f3f3;
        }

        .type-list a:hover{
            color: #1299ec;
        }
        .skus {
            list-style: none;
        }
        .skus li{
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }
        .skus li.selected{
            border: 2px solid #dd1144;
        }
        .skus img{
            width: 25px;
            height: 25px;
        }
        img[lazy=loading] {
            /*width: 100px;*/
            background-position:center center!important;
            /*background: url("img/lazy/loading.gif");*/
            background-size:100px 100px;
            background-repeat:no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        img[lazy=error] {
            /*width: 100px;*/
            background-position:center center!important;
            /*background: url("img/lazy/error.png");*/
            background-size:100px 100px;
            background-repeat:no-repeat;

            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        img[lazy=loaded] {
            /*width: 100px;*/
            background-position:center center!important;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="./js/plugins/jquery/jquery.min.js"></script>
</head>

<body >

<div id="searchApp">
<div id="nav-bottom">
    <yt-top/>
</div>


<!--list-content-->
<div class="main" >
    <div class="py-container">
        <div class="bread">
            <!--面包屑-->
            <ul class="fl sui-breadcrumb">
                <li><span>全部结果:</span></li>
                <li v-for="(c,i) in breads" :key="i">
                    <a href="#" v-if="i < 2">{{c.name}}</a>
                    <span v-else>{{c.name}}</span>
                </li>
            </ul>
            <!--已选择过滤项-->
            <ul class="tags-choose">
                <li class="tag" v-for="(v,k) in search.filter" v-if="k !== 'cid3' && k !== 'key'" :key="k">
                    {{k === 'brandId' ? '品牌' : k}}:<span style="color:red;">{{getFilterValue(k,v)}}</span>
                    <span></span>
                    <i class="sui-icon icon-tb-close" @click="removeFilter(k)"></i>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <!--selector-->
        <div class="clearfix selector">
            <div class="type-wrap" v-for="(f,i) in remainFilters" :key="i" v-if="f.k !== 'brandId'" v-show="i < 5 || show">
                <div class="fl key">{{f.k === 'cid3' ? '分类' : f.k}}</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li v-for="(option,j) in f.options" :key="j" @click="selectFilter(f.k,option)">
                            <a v-if="f.unit !== ''">{{option.name}}{{f.unit}}</a>
                            <a v-else>{{option.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>
            <div class="type-wrap logo"  v-else>
                <div class="fl key brand">{{f.k === 'brandId' ? '品牌' : f.k}}</div>
                <div class="value logos">
                    <ul class="logo-list">
                        <li v-for="(option,j) in f.options" v-if="option.image" @click="selectFilter(f.k,option)">
                            <img v-lazy="option.image" />
                        </li>
                        <li style="text-align: center" v-else>
                            <a style="line-height: 30px;font-size: 12px" href="javascript:void(0);">{{option.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext">
                    <a href="javascript:void(0);" class="sui-btn">多选</a>
                </div>
            </div>
            <div class="type-wrap">
                <div class="fl key">价格</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li v-for="v in priceInterval" @click="priceFilter(v)">
                            <a>{{v}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext">
                </div>
            </div>
            <div class="type-wrap" style="text-align: center">
                <v-btn small flat @click="show=true" v-show="!show">
                    更多<v-icon>arrow_drop_down</v-icon>
                </v-btn>
                <v-btn small="" flat @click="show=false" v-show="show">
                    收起<v-icon>arrow_drop_up</v-icon>
                </v-btn>
            </div>
        </div>
        <!--details-->
        <div class="details">
            <div class="sui-navbar">
                <div class="navbar-inner filter">
                    <ul class="sui-nav">
                        <li :class="{active:!search.sortBy}" @click="search.sortBy=''">
                            <a href="javascript:;">综合</a>
                        </li>
                        <li>
                            <a href="javascript:;">销量</a>
                        </li>
                        <li @click="search.sortBy='createTime'" :class="{active: search.sortBy === 'createTime'}">
                            <a href="javascript:;">新品</a>
                        </li>
                        <li>
                            <a href="javascript:;">评价</a>
                        </li>
                        <li @click="search.sortBy='price';search.descending = !search.descending" :class="{active:search.sortBy === 'price'}">
                            <a href="javascript:;">
                                价格
                                <v-icon v-show="search.descending">arrow_drop_down</v-icon>
                                <v-icon v-show="!search.descending">arrow_drop_up</v-icon>
                            </a>
                        </li>
                    </ul>
                    <div class="top-pagination">
                        <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                        <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                        <a class="btn-arrow" @click="prevPage" style="display: inline-block">&lt;</a>
                        <a class="btn-arrow" @click="nextPage" style="display: inline-block">&gt;</a>
                    </div>
                </div>
            </div>
            <!--搜索结果展示-->
            <div class="goods-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-5" v-for="goods in goodsList">
                        <div class="list-wrap">
                            <div class="p-img">
                                <a :href=" 'item/' + goods.id +'.html'" target="_blank"><img :src="goods.selected.image" height="200"/></a>
                                <!--多sku图片列表-->
                                <ul class="skus">
                                    <li :class="{selected: sku.id == goods.selected.id}" v-for="sku in goods.skus" :key="sku.id"
                                        @mouseEnter="goods.selected=sku">
                                        <img :src="sku.image" />
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>{{yt.formatPrice(goods.selected.price)}}</i>
                                </strong>
                            </div>
                            <div class="attr">
                                <em>{{goods.selected.title}}</em>
                            </div>
                            <div class="cu">
                                <em><span>促</span>{{goods.subTitle}}</em>
                            </div>
                            <div class="commit">
                                <i class="command">已有2000人评价</i>
                            </div>
                            <div class="operate">
                                <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="fr">
                <div class="sui-pagination pagination-large">
                    <ul>
                        <li class="prev disabled">
                            <a @click="prevPage">«上一页</a>
                        </li>
                        <li :class="{active:index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
                            <a @click="search.page=index(i)">{{index(i)}}</a>
                        </li>
                        <li class="dotted" v-show="totalPage>5"><span>...</span></li>
                        <li :class="{next:true,disabled:search.page === totalPage}">
                            <a @click="nextPage">下一页»</a>
                        </li>
                    </ul>
                    <div>
                        <span>共{{totalPage}}页&nbsp;</span>
                        <span>
                            到第
                            <input type="text" class="page-num" ref="page">
                            页 <button class="page-confirm" @click="navPage">确定</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!--hotsale-->
        <div class="clearfix hot-sale">
            <h4 class="title">热卖商品</h4>
            <div class="hot-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_01.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_03.png"/>
                            </div>
                            <div class="attr">
                                <em>金属A面，360°翻转，APP下单省300！</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
         s               <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_04.png"/>
                            </div>
                            <div class="attr">
                                <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4068.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有20人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_02.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</div>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script type="text/javascript">
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: "",   //请求失败后显示的图片
        loading: "",   //加载的loading过渡图片
        attempt: 1     // 加载图片数量
    });
    const vm = new Vue({
        el: "#searchApp",
        data: {
            yt,
            search:{
                key:"",  //搜索页面的关键字
                page: 1,
                filter:{} //发送到后台的过滤项
            },
            goodsList:[], //接收搜索到的结果
            total: 0, //总条数
            totalPage: 0,//总页数
            filters:[], // 过滤参数集合
            show: false, //是否展开更多过滤条件
            breads:"", //面包屑
            price:'' //价格区间
        },

        components:{
            ytTop: () => import("./js/pages/top.js")
        },
        watch:{
            search:{
                deep:true,
                handler(val,old){
                    if (!old || !old.key){
                        //如果旧的search值为空，或者search中的key为空，证明是第一次
                        return;
                    }
                    //把search对象变成请求参数，拼接在url路径
                    window.location.href = "http://www.yitao.com/search.html?"+yt.stringify(val);
                }
            }
        },
        methods:{
            loadData(){
                yt.http.post("/search/page",this.search).then((resp) => {
                    resp.data.rows.forEach(goods => {
                        let max = 0;
                        let min = 0;
                        //转换skus:把字符串转变为对象
                        goods.skus = JSON.parse(goods.skus);
                        //添加默认选中项,如果按价格排序则选出skus中价格最低的或者最高的，否则选skus中的第一个
                        if (this.search.sortBy === "price"){
                            if (this.search.descending === true){
                                //降序，则skus中价格选最高的
                                goods.skus.forEach(sku => {
                                    if (sku.price > max){
                                        max = sku.price;
                                    }
                                });
                                goods.skus.forEach(sku => {
                                    if (sku.price === max){
                                        goods.selected = sku;
                                    }
                                });
                            } else {
                                //升序，则skus中价格选最低的
                                min = goods.skus[0].price;
                                goods.skus.forEach(sku => {
                                    if (sku.price < min){
                                        min = sku.price;
                                    }
                                });
                                goods.skus.forEach(sku => {
                                    if (sku.price === min){
                                        goods.selected = sku;
                                    }
                                });
                            }
                        } else {
                            goods.selected = goods.skus[0];
                        }
                    });
                    this.goodsList = resp.data.rows;
                    this.total = resp.data.total;
                    this.totalPage = resp.data.totalPages;
                    //初始化商品分类过滤参数
                    if (resp.data.categories.length === 1){
                        yt.http.get("/item/category/all/level/" + resp.data.categories[0].id).then(
                            resp => this.breads = resp.data
                        );
                    }
                    //初始化分类过滤
                    this.filters.push({
                        k:"cid3",
                        options:resp.data.categories
                    });
                    //初始化品牌过滤
                    this.filters.push({
                        k:"brandId",
                        options:resp.data.brands
                    });
                    //初始化其他参数
                    resp.data.specs.forEach(spec => {
                        spec.options = spec.options.map( o => {
                            return {name:o};
                        });
                        this.filters.push(spec);
                    });
                });
            },
            navPage(){
              this.search.page = this.$refs.page.value ;
            },
            index(i){
                if(this.search.page <= 3 || this.totalPage <= 5){
                    // 如果当前页小于等于3或者总页数小于等于5
                    return i;
                }else if (this.search.page > this.totalPage - 3) {
                    //当前页码大于totalPage-3，应该从totalPage-5开始
                    return this.totalPage - 5 + i;
                } else if(this.search.page > 3) {
                    // 如果当前页大于3，应该从page-3开始
                    return this.search.page - 3 + i;
                }
            },
            prevPage(){
                if(this.search.page > 1){
                    this.search.page--
                }
            },
            nextPage(){
                if(this.search.page < this.totalPage){
                    this.search.page++
                }
            },
            selectFilter(k,o){
                const obj = {};
                Object.assign(obj,this.search);
                if (k === "分类"){
                    obj.filter.cid3 = o.id;
                }else if (k === "品牌"){
                    obj.filter.brandId = o.id;
                }else {
                    obj.filter[k] = o.name;
                }
                this.search = obj;
            },
            getFilterValue(k,v){
                //如果没有过滤参数，直接跳过展示
                if (!this.filters || this.filters.length === 0) {
                    return null;
                }
                let name = null;
                //判断是否是品牌
                if (k === 'brandId'){
                    this.filters.forEach(f =>{
                        if (f.k === "品牌"){
                            f.options.forEach(s => {
                                if (s.id.toString() === v){
                                    name = s.name;
                                }
                            })
                        }
                    });
                     return name;
                }
                return v;
            },
            removeFilter(k){
                //属性名也是变量，不能使用.
                this.search.filter[k] = null;
            },
            priceFilter(v){
                const obj = {};
                Object.assign(obj,this.search);
                obj.filter["price"] = v;
                this.search = obj;
            }
        },
        computed:{
            remainFilters(){
                const keys = Object.keys(this.search.filter);
                if (this.search.filter.cid3){
                    keys.push("cid3");
                }
                if (this.search.filter.brandId){
                    keys.push("brandId");
                }
                //使用filter方法进行过滤
                return this.filters.filter(f => !keys.includes(f.k) && f.options.length > 1);
            },
            priceInterval(){
                let array=[];
                let i = 0;
                for (i = 0;i < 7;i ++){
                    array.push(i*500+'-'+(i+1)*500+'元');
                }
                array.push(i*500+'元以上');
                return array;
            }
        },
        created:function(){
            //1.判断是否有请求参数
            if(!location.search){
                return;
            }
            //2.将请求参数转为对象
            const search = yt.parse(location.search.substring(1));
            //3.对page对象进行初始化，防止第一次访问时page为空
            search.page = search.page ? parseInt(search.page) : 1;
            //4.对排序进行初始化，默认为""，代表不排序
            search.sortBy = search.sortBy || "";
            //5.对排序方式进行初始化，转为布尔值
            search.descending = search.descending === "true" || false;
            //6.对搜索项进行初始化
            if (!search.filter) {
                search.filter = {
                    key: ""
                };
            }
            //7.记录在data的search对象中
            this.search = search;
            //8.发起请求，根据条件搜索
            this.loadData();
        },
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body >
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="./js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="./js/model/cartModel.js"></script>
<script type="text/javascript" src="./js/czFunction.js"></script>
<script type="text/javascript" src="./js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="./js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="./js/widget/cartPanelView.js"></script>

</html>