二、框架核心组件

如无特殊说明，组件用法和PC端一致，只不过底层换成了vant组件实现

1. z-table 组件在移动端不可用

2. z-action 组件

2.1 mode 新增 popover

2.2 移动端新增属性

属性名	说明	类型	默认值	枚举值
position	无线端属性，弹层位置(无线端)	String	right	top/right/bottom/left

3. z-list 组件 （移动端特有）

组件属性：

属性名	说明	类型	默认值	枚举值
title	内容标题	String	-	-
url	表格数据接口地址	String	-	-
params	接口参数配置	Object	-	-
condition	搜索区域表单配置	Field[]	-	-
code	tab 选项字典	String	-	-
tabName	tab 条件的 name	String	-	-
tabValue	tab 的默认值	String	-	-
type	tab 样式	Enum	line	line|card
tabs	选项数据，建议使用字典 code	Array	-	-
size	分页大小	Number	10	-
emptyText	空数据文案	String	暂无相关数据
gutter	删格间距	Number	null	-

组件方法：

事件名	说明
refresh()	属性组件数据
jump(page)	跳转到指定页数

组件事件：

事件名	说明
finish	表格接口数据返回完成

插槽：

插槽名	说明
row	没行数据插槽，返回当前行数据
default	默认插槽

使用示例：

<template>
    <van-nav-bar title="结算账户" fixed placeholder left-arrow @click-left="goBack">
    </van-nav-bar>
    <van-search v-model="search" placeholder="请输入结算账户名称" />
    <z-list url="/do/select/pay_account" :params="params" emptyText="暂无结算账户">
        <template #row="payAccount">
            <van-cell-group inset style="margin-top: 10px;">
                <van-cell :title="payAccount.title" :value="payAccount.status == 1 ? '已启用' : '禁用'">
                    <template #label>
                        <div>初始余额：<z-money :modelValue="payAccount.beginBalance" allowMinus/></div>
                        <div>总余额：<z-money :modelValue="payAccount.totalBalance || 0" allowMinus/></div>
                        <div>开账时间：<z-date :value="payAccount.createGmt" /></div>
                        <div>备注：{{ payAccount.extra }}</div>
                    </template>
                </van-cell>
                <van-cell>
                    <z-action label="明细" size="small" type="primary" >
                        <Detail :payAccount="payAccount" />
                    </z-action>
                    <z-action label="编辑" size="small" url="/api/common/patchPayAccount" type="primary"
                        :data="payAccount" :fields="fields" />
                    <z-action label="删除" size="small" url="/do/delete/pay_account" type="danger" mode="confirm"
                        :data="payAccount" />
                </van-cell>
            </van-cell-group>
        </template>
        <z-action label="新增" url="/do/put/pay_account" :fields="fields" size="small" type="bubble" :beforeSubmit="beforeSubmit" />
    </z-list>
</template>

<script>
import Detail from './blocks/detail.vue';
export default {
    components: {
        Detail
    },
    data() {
        return {
            search: '',
            fields: [
                { label: '账户名称', name: 'title' },
                { label: '初始余额', name: 'beginBalance', type: 'money' },
                { label: '备注', name: 'extra', type: 'textarea' },
            ],
        };
    },
    computed: {
        account() {
            return window.localStorage.getItem('_ac_');
        },
        params() {
            return { account: this.account, title: this.search };
        }
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        beforeSubmit(formData) {
            formData.account = this.account;
            return formData;
        }
    }
};
</script>
<style scoped lang="scss">
.van-button--small {
    margin-right: 10px;

    &:last-child {
        margin-right: 0;
    }
}
</style>