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

{extend name="public/base"/}
{block name="css"}
    <style>
        .van-nav-bar__text, .van-nav-bar .van-icon{color:white;}
        .header {width:100%;height:45px;background:var(--pink);}
        .company-box {width:90%;height:60px;background:white;transform:translate(5%,-30px);display:flex;box-sizing:border-box;padding:5px 10px;align-items:center;}
        .company-box .company-img {width:45px;height:45px;}
        .company-box .company-title-box {display:flex;padding:5px 10px;flex-direction:column;}
        .company-box .company-title {color: #666;font-size:16px;}
        .company-box .company-address {color: #999;font-size:12px;display:flex;align-items:center;}
        .company-box .company-address span {margin-left:5px;}
    </style>
{/block}
{block name="body"}
<van-nav-bar
        class="bg-blue"
        fixed="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
        <template #title>
            <span class="text-white">微店</span>
        </template>
    </van-nav-bar>
<div style="width:100%;height:46px;"></div>
<div class="header"></div>
<div class="company-box">
    <img class="company-img" :src="img_worker">
    <div class="company-title-box">
        <div class="company-title">{{worker.title}}</div>
        <div class="company-address"><van-icon name="location-o" ></van-icon><span>{{worker.address}}</span></div>
    </div>
</div>
<div class="content-box">
    <div class="title"><span class="mark"></span>企业介绍</div>
    <div class="item" v-html="worker.details"></div>
</div>
<div class="content-box margin-top-10">
    <div class="title"><span class="mark"></span>招聘推荐</div>
</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_name}}
                    </div>
                    <div class="job-flex-right">
                        浏览量:{{item.volume}}
                    </div>
                </div>
            </div>
        </div>
    </van-list>
</van-pull-refresh>
{/block}
{block name="script"}
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    worker: {$worker},

                    list: [],
                    page: 1,
                    loading: false,
                    finished: false,
                    refreshing: false,
                };
            },
            methods: {
                onBack() {
                    history.back();
                },
                //加载
                onLoad() {
                    //参数
                    let self = this;
                    let param = {page: this.page,workerid:this.worker.id};
                    this.page++;

                    $.post("{:url('/jobs/listJobs')}", param, 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();
                },
                goDetail(id) {
                    location.href = "{:url('/jobs/detail')}?id=" + id;
                },
            },
            computed: {
                img_worker() {
                    const default_img = "__MSTATIC__/images/img_worker.png";
                    if (this.worker.tilpic) {
                        return this.worker.tilpic;
                    }
                    return default_img;
                },
            },
        });
    </script>
{/block}