front-end/admin-code/src/views/member/list.vue

<template>
	<cl-crud class="liu-crud-wrap" @load="onLoad">
		<template #slot-tabs="{ scope }">
			<el-tabs class="liu-tabs" type="border-card">
				<el-tab-pane label="全部 (152)"></el-tab-pane>
				<el-tab-pane label="粉丝 (112)"></el-tab-pane>
				<el-tab-pane label="会员(82)"></el-tab-pane>
			</el-tabs>
		</template>

		<template #table-column-avatarUrl="{scope}">
			<cl-avatar
				shape="square"
				:size="40"
				:src="scope.row.avatarUrl | default_avatar"
				:style="{ margin: 'auto' }"
			></cl-avatar>
		</template>

		<template #table-column-balance="{scope}">
			<span>{{ scope.row.userAsset.balance }}</span>
		</template>

		<template #table-column-growth="{scope}">
			<span>{{ scope.row.userAsset.growth }}</span>
		</template>

		<!-- 充值 -->
		<template #slot-recharge="{scope}">
			<el-button type="text">充值</el-button>
		</template>
		<!-- 升级 -->
		<template #slot-upgrade="{scope}">
			<el-button type="text">升级</el-button>
		</template>
		<!-- 发货 -->
		<template #slot-ship="{scope}">
			<el-button type="text">发货</el-button>
		</template>
	</cl-crud>
</template>

<script>
export default {
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.member)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'avatarUrl',
							label: '头像',
							align: 'center'
						},
						{
							prop: 'userName',
							label: '来源 昵称',
							align: 'center'
						},
						{
							prop: 'mobile',
							label: '手机号',
							align: 'center'
						},
						{
							prop: 'actPrice',
							label: '会员级别',
							align: 'center',
							emptyText: '无',
							'min-width': 150
						},
						{
							prop: 'balance',
							label: '余额',
							align: 'center'
						},
						{
							prop: 'growth',
							label: '成长值',
							align: 'center'
						},
						{
							prop: 'subscribe',
							label: '关注公众号',
							align: 'center',
							sortable: true,
							width: 150
						},
						{
							prop: 'visitTimeFormat',
							label: '最近访问',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-recharge', 'slot-upgrade', 'slot-ship']
					}
				})
				.set('layout', [
					['slot-tabs'],
					['search-key', 'flex1', 'refresh-btn', 'add-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh({ status: 0 });
		}
	}
};
</script>