mw_odd_job/app/mobile/view/jobs/index.html

{extend name="public/base"/}
{block name="css"}
<style>
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="bg-blue"
        fixed="true"
>
    <template #title>
        <span class="text-white">招聘</span>
    </template>
</van-nav-bar>

<div style="position: fixed;top: 46px;width: 100%;z-index: 100;background:white;box-sizing:border-box;">
    <van-search v-model="form.searchval" @search="onSearch" placeholder="请输入岗位名称"></van-search>
</div>
<!--筛选-->
<van-dropdown-menu style="position: fixed;top: 102px;width: 100%;z-index: 100;">
    <van-dropdown-item v-model="form.type" :options="type_option" @change="onTypeChange"></van-dropdown-item>
    <van-dropdown-item v-model="form.cateid" :options="cate_option" @change="onCateChange"></van-dropdown-item>
</van-dropdown-menu>
<div style="width:100%;height:150px;"></div>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
    >
        <div class="job-box">
            <div class="job-item" v-for="item in list" @click="goDetail(item.id)">
                <div class="job-flex">
                    <div class="job-flex-left job-title">{{item.title}}</div>
                    <div class="job-flex-right salary">{{item.zwagall}}({{item.wtype_text}})</div>
                </div>
                <div class="job-flex margin-top-10">
                    <div class="job-flex-left">
                        <van-tag type="primary" color="#FF589B" size="medium" v-for="tag in item.tags">{{tag}}</van-tag>
                    </div>
                    <div class="job-flex-right num">{{item.recruit_num}}名</div>
                </div>
                <div class="job-flex margin-top-10">
                    <div class="job-flex-left">
                        {{item.worker.title}}
                    </div>
                    <div class="job-flex-right">
                        浏览量:{{item.volume}}
                    </div>
                </div>
            </div>
        </div>
    </van-list>
</van-pull-refresh>
<div style="width:100%;height:50px;"></div>
<van-tabbar v-model="active" active-color="#FF589B" @change="onTabChange">
    <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="description">招聘</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
</van-tabbar>
{/block}
{block name="script"}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                active: 1,
                value: '',
                list: [],
                type_option: [
                    {text: '不限类型', value: 0},
                    {text: '按月', value: 1},
                    {text: '按时', value: 2},
                    {text: '按件', value: 3},
                    {text: '按项目', value: 4},
                    {text: '其他', value: 5},
                ],
                cate_option: {$catelist},
                form: {
                    searchval: '',
                    type: {$type},
                    cateid: 0,
                },

                page: 1,
                loading: false,
                finished: false,
                refreshing: false,
            };
        },
        created() {

        },
        methods: {
            onSearch(value) {
                this.form.searchval = value;
                this.onRefresh();
            },
            onTypeChange(value) {
                this.form.type = value;
                this.onRefresh();
            },
            onCateChange(value) {
                this.form.cateid = value;
                this.onRefresh();
            },
            onTabChange(index) {
                const url = ["{:url('/')}", "{:url('/jobs/index')}", "{:url('/my/index')}"];
                location.href = url[index];
            },
            goDetail(id) {
                location.href = "{:url('/jobs/detail')}?id=" + id;
            },
            //加载
            onLoad() {
                //参数
                let self = this;
                let param = this.form;
                param.page = this.page;
                this.page++;

                $.post("{:url('/jobs/listJobs')}", 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();
            },
        },
    });
</script>
{/block}