baseXX/application/wap/view/first/index/search.html

{extend name="public/container"}
{block name="title"}搜索{/block}
{block name="head_top"}
<style>
    .underline {
        min-width: 0;
    }

    .index-search .form {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: .18rem .3rem;
    }

    .index-search .form .label {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: .66rem;
        padding-right: .3rem;
        padding-left: .3rem;
        border-radius: .33rem;
        background-color: #f7f7f7;
    }

    .index-search .form .iconfont {
        font-weight: 500;
        font-size: .24rem;
        color: #999;
    }

    .index-search .form .input {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        margin-left: .13rem;
        font-weight: 500;
        font-size: .26rem;
        color: #333;
    }

    .index-search .form .input::placeholder {
        color: #999;
    }

    .index-search .form .button {
        height: .66rem;
        padding-right: .1rem;
        padding-left: .1rem;
        margin-left: .2rem;
        font-weight: 500;
        font-size: .28rem;
        font-family: inherit;
        color: #282828;
    }

    .index-search .section .head {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: .35rem .3rem;
    }

    .index-search .section .head .name {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        font-weight: bold;
        font-size: .28rem;
        color: #282828;
    }

    .index-search .section .head .iconfont {
        font-size: .26rem;
        color: #999;
        cursor: pointer;
    }

    .index-search .section .cont {
        padding-right: .3rem;
        padding-left: .3rem;
    }

    .index-search .section .cont .item {
        display: inline-block;
        height: .44rem;
        padding-right: .22rem;
        padding-left: .22rem;
        border-radius: .22rem;
        margin-right: .2rem;
        margin-bottom: .22rem;
        background-color: #f2f2f2;
        vertical-align: middle;
        font-weight: 500;
        font-size: .24rem;
        line-height: .44rem;
        color: #666;
        cursor: pointer;
    }
    .del-search{
        color: #666;
        font-size: .24rem;
    }
    .nothing {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4rem;
        height: 4rem;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="index-search">
        <form class="form">
            <label class="label">
                <span class="iconfont icon-sousuo"></span>
                <input v-model.trim="search" class="input" placeholder="输入搜索内容">
            </label>
            <button class="button" type="button" @click="goSearch">搜索</button>
        </form>
        <div v-if="history.length" class="section">
            <div class="head">
                <div class="name">历史记录</div><span class="del-search" @click="delSearchHistory">清除</span>
                <div class="iconfont"></div>
            </div>
            <div class="cont">
                <ul class="list">
                    <li v-for="(item, index) in history" :key="index" class="item" @click="goSearch(item.search)">{{ item.search }}</li>
                </ul>
            </div>
        </div>
        <div v-if="hotSearch.length" class="section">
            <div class="head">
                <div class="name">热门搜索</div>
            </div>
            <div class="cont">
                <ul class="list">
                    <li v-for="(item, index) in hotSearch" :key="index" class="item" @click="goSearch(item)">{{ item }}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="search-page">
        <div class="searchResult swiper-details" v-if="(searchList.special.length) && search"
            v-cloak="">
            <div class="title acea-row row-middle line1" v-if="searchList.special.length">专题</div>
            <div class="swiper-list2">
                <div class="item acea-row row-between-wrapper" v-for="item in searchList.special">
                    <a class="pictrue" :href="getSpecialUrl(item.id)"><img :src="item.image"></a>
                    <div class="underline">
                        <a class="text-pic acea-row row-column" :href="getSpecialUrl(item.id)">
                            <div class="name line1" v-text="item.title"></div>
                            <div class="notes line1" v-text="item.abstract"></div>
                            <div class="bottom acea-row row-between-wrapper">
                                <div class="acea-row row-middle">
                                    <div class="num acea-row row-center-wrapper" v-for="(vo,index) in item.label"
                                        v-text="vo" v-if="index <= 1"></div>
                                </div>
                                <div class="money">
                                    {{item.is_pink ? (item.pink_money == 0 ? '免费':'￥'+item.pink_money): (item.money <= 0 ? '免费':'￥'+item.money) }}
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <a class="more acea-row row-middle row-right" v-if="searchList.special.length > limit"
                :href="getMoreList(0)">查看更多></a>
        </div>
        <p class="loading-line" style="background-color: #ffffff" v-cloak=""
            v-if="searchList.special.length < 1 && search && is_search">
            <img class="nothing"  src="/wap/first/zsff/images/no_result.png">
        </p>
    </div>
    <shortcut></shortcut>
</div>
{/block}
{block name='foot'}
<script>
    var phone="{$phone}";
    require(['vue', 'helper', 'store', '{__WAP_PATH}zsff/js/shortcut.js'], function (Vue, $h, app) {
        new Vue({
            el: '#app',
            data: {
                search: '',
                hotSearch: [],
                history: [],
                searchList: { special: []},
                loading: false,
                limit: 2,
                is_search: false,
            },
            watch: {
                search: function (n) {
                    if (n == '') this.$set(this, 'searchList', { special: [] });
                }
            },
            methods: {
                getMoreList: function (type) {
                    return $h.U({ c: 'index', a: 'more_list', p: { type: type }, q: { search: this.search } });
                },
                getSpecialUrl: function (id) {
                    return $h.U({ c: 'special', a: 'details', q: { id: id } });
                },
                getTashUrl: function (id) {
                    return $h.U({ c: 'special', a: 'details', q: { id: id } }) + '#act2';
                },
                get_search_history: function () {
                    app.baseGet($h.U({ c: 'index', a: 'get_search_history' }), function (res) {
                        this.$set(this, 'history', res.data.data);
                    }.bind(this));
                },
                get_host_search: function () {
                    app.baseGet($h.U({ c: 'index', a: 'get_host_search' }), function (res) {
                        this.$set(this, 'hotSearch', res.data.data);
                    }.bind(this));
                },
                delSearchHistory: function () {
                    var that=this;
                    app.baseGet($h.U({ c: 'index', a: 'del_search_history' }), function (res) {
                        that.get_search_history();
                        that.$set(that, 'search', '');
                        that.$set(that, 'searchList', { special: []});
                        return $h.pushMsgOnce('清除缓存');
                    }.bind(this));
                },
                goSearch: function (name) {
                    if (typeof name == 'string' && name) this.search = name;
                    if (this.search == '') return;
                    if (this.loading) return;
                    this.loading = true;
                    app.baseGet($h.U({ c: 'index', a: 'go_search', q: { search: this.search, limit: this.limit + 1 } }), function (res) {
                        this.loading = false;
                        this.$set(this, 'searchList', res.data.data);
                        this.is_search = res.data.data.special.length < 1 ? true : false;
                        if(phone){
                            this.get_search_history();
                        }
                    }.bind(this), function () {
                        this.loading = false;
                    }.bind(this));
                }
            },
            mounted: function () {
                var that = this;
                this.get_host_search();
                if(phone){
                    that.get_search_history();
                }


            }
        })
    })
</script>
{/block}