tradelove/public/themes/simpleboot3/love/active/people.html

<extend name="public@base"/>
<block name="css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.css">
    <style>
        #app{
            padding-bottom:50px;
        }
    </style>
</block>
<block name="body">
    <van-nav-bar
         @click-right="onClickRight"
         left-text="返回"
         left-arrow
         @click-left="onBack"
         style="position: fixed;top: 0;width: 100%;z-index: 100;"
    >
        <template #title>
            <span>嘉宾</span>
        </template>
        <template #right>
            <span>筛选</span>
        </template>
    </van-nav-bar>
    <div style="position: fixed;top: 46px;width: 100%;z-index: 100;background:white;box-sizing:border-box;padding:5px 10px;">
        <van-search v-model="form.id" placeholder="请输入嘉宾编号" @search="onRefresh"></van-search>
    </div>

    <van-popup v-model="show" position="right" :style="{width: '80%',height: '100%'}">
        <div class="search_wrapper">
            <p class="search_title">是否到场</p>
            <van-row :gutter="10">
                <van-col span="8" v-for="(item) in site_status_option">
                    <div :class="{btn_search_item:true,active:item.value == form.site_status}"
                         @click="selectOption('site_status',item.value)">
                        {{item.text}}
                        <van-icon v-if="item.value == form.site_status"
                                  class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-pink"></van-icon>
                    </div>
                </van-col>
            </van-row>

            <p class="search_title">性别</p>
            <van-row :gutter="10">
                <van-col span="8" v-for="(item) in sex_option">
                    <div :class="{btn_search_item:true,active:item.value == form.sex}"
                         @click="selectOption('sex',item.value)">
                        {{item.text}}
                        <van-icon v-if="item.value == form.sex"
                                  class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-pink"></van-icon>
                    </div>
                </van-col>
            </van-row>

            <p class="search_title">年龄</p>
            <van-row :gutter="10">
                <van-col span="8" v-for="(item) in age_option">
                    <div :class="{btn_search_item:true,active:item.value == form.age}"
                         @click="selectOption('age',item.value)">
                        {{item.text}}
                        <van-icon v-if="item.value == form.age"
                                  class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-pink"></van-icon>
                    </div>
                </van-col>
            </van-row>

            <p class="search_title">身高</p>
            <van-row :gutter="10">
                <van-col span="8" v-for="(item) in high_option">
                    <div :class="{btn_search_item:true,active:item.value == form.high}"
                         @click="selectOption('high',item.value)">
                        {{item.text}}
                        <van-icon v-if="item.value == form.high"
                                  class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-pink"></van-icon>
                    </div>
                </van-col>
            </van-row>

            <p class="search_title">体重</p>
            <van-row :gutter="10">
                <van-col span="8" v-for="(item) in weight_option">
                    <div :class="{btn_search_item:true,active:item.value == form.weight}"
                         @click="selectOption('weight',item.value)">
                        {{item.text}}
                        <van-icon v-if="item.value == form.weight"
                                  class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-pink"></van-icon>
                    </div>
                </van-col>
            </van-row>

            <p class="search_title">学历</p>
            <van-row :gutter="10">
                <van-col span="8" v-for="(item) in education_option">
                    <div :class="{btn_search_item:true,active:item.value == form.education}"
                         @click="selectOption('education',item.value)">
                        {{item.text}}
                        <van-icon v-if="item.value == form.education"
                                  class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-pink"></van-icon>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="search_wrapper_btnbox">
            <van-button round @click="searchReset" style="width: 40%;height: 40px;line-height: 40px;" class="btn_reset">
                重置
            </van-button>
            <van-button round style="width: 40%;height: 40px;line-height: 40px;" class="bg-pink"
                        @click="show=false;onRefresh()">搜索
            </van-button>
        </div>
    </van-popup>

    <!--列表-->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <div class="masonry">
                <div class="item" v-for="(item) in list">
                    <div class="item__content">
                        <a :href="'{:url('love/userwall/detail')}?id=' + item.id">
                            <div class="box">
                                <img class="image"
                                     :src="item.main_image_thumb ? item.main_image_thumb : '__TMPL__/public/assets/images/userwall/no_image_thumb.png'"/>
                                <div class="info">
                                    <h3 class="user_name">
                                        <span class="inline_block">
                                            <van-icon
                                                    :class="[item.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                                            {{item.realname}}{{item.user_no}}<span v-if="item.user_no">（{{item.user_no}}）</span>
                                        </span>
                                    </h3>
                                    <div class="describe">
                                        <van-tag type="primary" v-if="item.site_status == 1">到场</van-tag>
                                        <van-tag v-if="item.site_status == 2">未到场</van-tag>
                                    </div>
                                    <div class="describe">
                                        {{item.age}}岁
                                        · {{item.education}}
                                        · {{item.high}}CM
                                    </div>
                                    <div class="detail">
                                        {{item.signature}}
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    age_option: [
                        {text: '不限年龄', value: 0},
                        {text: '18-25岁', value: 1},
                        {text: '26-30岁', value: 2},
                        {text: '31-40岁', value: 3},
                        {text: '41-50岁', value: 4},
                        {text: '50岁以上', value: 5},
                    ],
                    sort_option: [
                        {text: '默认排序', value: 'star desc'},
                        {text: '最新注册', value: 'create_time desc'},
                        {text: '最新登录', value: 'last_login_time desc'},
                    ],
                    site_status_option: [
                        {text: '不限', value: 0},
                        {text: '到场', value: 1},
                        {text: '未到场', value: 2},
                    ],
                    sex_option: [
                        {text: '不限', value: 0},
                        {text: '男嘉宾', value: 1},
                        {text: '女嘉宾', value: 2},
                    ],
                    high_option: [
                        {text: '不限', value: 0},
                        {text: '150-160CM', value: 1},
                        {text: '161-170CM', value: 2},
                        {text: '171-180CM', value: 3},
                        {text: '180CM以上', value: 4},
                    ],
                    weight_option: [
                        {text: '不限', value: 0},
                        {text: '40-50KG', value: 1},
                        {text: '51-60KG', value: 2},
                        {text: '61-70KG', value: 3},
                        {text: '71-80KG', value: 4},
                        {text: '80KG以上', value: 5},
                    ],
                    education_option: [
                        {text: '不限', value: ''},
                        {text: '本科以下', value: '本科以下'},
                        {text: '本科', value: '本科'},
                        {text: '硕士', value: '硕士'},
                        {text: '博士', value: '博士'},
                    ],
                    form: {
                        age: 0,
                        sort: 'star desc',
                        id: '',
                        site_status: 0,
                        sex: 0,
                        high: 0,
                        weight: 0,
                        education: '',
                        active_id:{$id},
                    },
                    show: false,

                    page: 2,
                    loading: false,
                    finished: false,
                    refreshing: false,
                    list: {$list},
                };
            },
            methods: {
                onBack() {
                    history.back();
                },
                //筛选
                onClickRight() {
                    this.show = true;
                },
                onAgeChange(value) {
                    this.form.age = value;
                    this.onRefresh();
                },
                onSortChange(value) {
                    this.form.sort = value;
                    this.onRefresh();
                },
                selectOption(key, value) {
                    this.form[key] = value;
                },
                searchReset() {
                    this.form = {
                        age: 0,
                        sort: 'star desc',
                        id: '',
                        site_status: 0,
                        sex: 0,
                        high: 0,
                        weight: 0,
                        marry: 0,
                        education: 0,
                        active_id:{$id},
                    };
                    this.show = false;
                    this.onRefresh();
                },
                //加载
                onLoad() {
                    //参数
                    let self = this;
                    let param = this.form;
                    param.page = this.page;
                    this.page++;

                    $.post("{:url('peopleList')}", this.form, function (json) {
                        //下拉刷新
                        if (self.refreshing) {
                            self.refreshing = false;
                        }

                        // 加载状态结束
                        self.loading = false;

                        if (json.data.length == 0) {
                            // 数据全部加载完成
                            self.finished = true;
                        } else {
                            // 增加数据
                            for (let i = 0; i < json.data.length; i++) {
                                self.list.push(json.data[i]);
                            }
                        }
                    }, 'json');
                },
                onRefresh() {
                    // 清空列表数据
                    this.list = [];
                    this.page = 1;
                    this.loading = true;
                    this.finished = false;

                    this.onLoad();
                },
                tabbarChange() {
                    return false;
                },
            },
        });
    </script>
</block>