lw_test/app/mobile/view/human/institution_list.html

{extend name="public/base_human"/}
{block name="css"}
<style>
    .lw-list {width:90%;margin:0 auto;}
    .lw-item {background: #fff;box-shadow: 0 4px 8px 1px rgba(0,0,0,.03);border-radius: 6px;padding: 13px 8px;margin-top:10px;}
    .lw-item .title {display: flex;flex-direction: row;align-items: center;font-size:16px;font-weight: bold;}
    .lw-item .tel {font-size:14px;margin-top:10px;border-bottom:1px solid #ddd;padding-bottom: 10px;}
    .lw-item .join {display: flex;flex-direction: row;align-items: center;color:#777;font-size:14px;margin-top:10px;}
    .lw-item .join .flex-1{flex:1;}
    .lw-item .join .mobile{display: flex;flex-direction: row;align-items: center;}
    .lw-item .address {color:#777;font-size:14px;margin-top:10px;}
    .lw-item .tags {margin-top:10px;}
    .lw-item .tags .van-tag{margin-right:5px;}
</style>
{/block}
{block name="body"}
<van-sticky>
    <van-nav-bar
            class="nav-theme"
            :fixed="true"
            :placeholder="true"
    >
        <template #title>
            <span class="text-white">机构列表</span>
        </template>
    </van-nav-bar>

    <van-search v-model="keyword" placeholder="请输入机构名称" @search="onRefresh"></van-search>

    <van-dropdown-menu >
        <van-dropdown-item v-model="cooperate" :options="cooperate_list" @change="onRefresh"></van-dropdown-item>
    </van-dropdown-menu>
</van-sticky>

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onList"
    >
        <div class="lw-list">
            <div class="lw-item" v-for="item in list" @click="toDetail(item.id)">
                <div class="title">
                    <div style="width: 6px; height: 6px; background: #dd4250; border-radius: 50%; margin-right: 11px;"><span></span></div>
                    <div>{{item.name}}</div>
                </div>
                <div class="tel" @click.stop="call(item.tel)">
                    <van-icon name="phone" color=" #dd4250"></van-icon>
                    {{item.tel}}
                </div>
                <div class="tags">
                    <van-tag type="primary" v-for="tag in item.cooperate" size="medium">{{tag}}</van-tag>
                </div>
                <div class="join" v-if="item.join">
                    <div class="flex-1">参会人：{{item.join}}</div>
                    <div class="flex-1 mobile" v-if="item.join_mobile" @click.stop="call(item.join_mobile)">
                        <van-icon name="phone" color=" #dd4250"></van-icon>
                        {{item.join_mobile}}
                    </div>
                </div>
                <div class="address">
                    机构地址：{{item.address}}
                </div>
            </div>
        </div>
    </van-list>
</van-pull-refresh>
<div style="width:100%;height:50px;"></div>
<van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" @click="toEnterprise">企业列表</van-tabbar-item>
    <van-tabbar-item icon="friends-o">机构列表</van-tabbar-item>
    <van-tabbar-item icon="manager-o" @click="toCenter">服务中心</van-tabbar-item>
</van-tabbar>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.active = Vue.ref(1);

        //搜索
        base.keyword = Vue.ref('');
        base.cooperate = Vue.ref('');
        base.cooperate_list = Vue.reactive({$cooperate_list});

        //列表
        base.page = Vue.ref(1);
        base.loading = Vue.ref(false);
        base.finished = Vue.ref(false);
        base.refreshing = Vue.ref(false);
        base.list = Vue.reactive([]);
        base.onList = () => {
            let param = {};
            param.page = base.page.value;
            param.name = base.keyword.value;
            param.cooperate = base.cooperate.value;
            base.page.value++;

            postJson("human/listInstitution", param).then( ({data}) => {
                base.loading.value = false;
                if (base.refreshing.value) base.refreshing.value = false;
                if (data.length === 0) {
                    base.finished.value = true;
                } else {
                    base.list.push(...data);
                }
            });

        };
        base.onRefresh = () => {
            base.list = Vue.reactive([]);
            base.page.value = 1;
            base.loading.value = true;
            base.finished.value = false;

            base.onList();
        };

        base.call = (tel) => {
            location.href = "tel://" + tel;
        };

        base.toDetail = (id) => {
            location.href = "{:url('human/institutionDetail')}?id=" + id;
        };

        base.toEnterprise = () => {
            location.href = "{:url('human/enterpriseList')}";
        };

        base.toCenter = () => {
            location.href = "{:url('human/center')}";
        };

        return base;
    }
</script>
{/block}