lw_test/app/mobile/view/human/seeme.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 .booth {color:var(--red);font-size:16px;margin-top:10px;font-weight: bold;text-align: center;}
    .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"
            left-text="返回"
            left-arrow
            @click-left="onBack"
    >
        <template #title>
            <span class="text-white">谁看过我</span>
        </template>
    </van-nav-bar>
</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">
                <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="join" v-if="item.join">
                    <div class="flex-1">姓名：{{item.join}}</div>
                    <div class="flex-1 mobile" v-if="item.join_mobile" @click="call(item.join_mobile)">
                        <van-icon name="phone" color=" #dd4250"></van-icon>
                        {{item.join_mobile}}
                    </div>
                </div>
                <div class="address">
                    查看时间：{{item.create_time}}
                </div>
            </div>
        </div>
    </van-list>
</van-pull-refresh>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.active = Vue.ref(0);

        //列表
        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;
            base.page.value++;

            postJson("human/listSeeme", 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.onBack = () => {
            history.back();
        };

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