{extend name="public/base"/}
{block name="css"}

{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
>
    <template #title>
        <span class="text-white">文章</span>
    </template>
</van-nav-bar>

<van-tabs v-model:active="tab_active" @click-tab="onTab">
    <van-tab title="全部" name="0"></van-tab>
    {volist name="cate_list" id="cate"}
        <van-tab title="{$cate.title}" name="{$cate.id}"></van-tab>
    {/volist}
</van-tabs>

{include file="public/list_load" list="<article-list :list='list'></article-list>" /}

<van-tabbar v-model="active" :placeholder="true">
    <van-tabbar-item icon="wap-home-o" url="{:url('/')}">首页</van-tabbar-item>
    <van-tabbar-item icon="description">文章</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o" url="{:url('my/index')}">我的</van-tabbar-item>
</van-tabbar>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let form = { cate_id : {$cate_id} };
        let base = list_load('/article/listArticle',form);

        base.active = 1;
        base.tab_active = Vue.ref('{$cate_id}');

        base.onTab = ({name}) => {
            base.form.cate_id = name;
            base.onRefresh();
        };

        return base;
    }
</script>
{/block}
{block name="vue"}
<script src="__COMPONENTS__/articleList.js"></script>
{/block}