| 123456789101112131415 |
- import {Component,inject,signal,OnInit} from '@angular/core';
- import {OperationsService} from '../operations.service';
- import {StoreCreditAccountComponent} from '../components/store-credit-account.component';
- interface StoreHome {storeId:number;storeObjectId:string;storeName:string;summary:{total:number;todayNew:number;studying:number};}
- @Component({selector:'app-store-home',standalone:true,imports:[StoreCreditAccountComponent],template:`
- <header><div><p>门店工作台</p><h1>{{data()?.storeName||'我的门店'}}</h1><span>本店会员、排课、陪练、工资与学习记录</span></div><button type="button" (click)="load()" [disabled]="loading()">刷新</button></header>
- @if(error()){<p class="error" role="alert">{{error()}}</p>}
- @if(loading()&&!data()){<p>正在读取本店数据…</p>}
- @if(data();as d){<section class="summary"><article><span>本店学生</span><strong>{{d.summary.total}}</strong></article><article><span>学习中</span><strong>{{d.summary.studying}}</strong></article><article><span>今日新增</span><strong>{{d.summary.todayNew}}</strong></article></section><app-store-credit-account [objectId]="d.storeObjectId"/>}
- `,styles:[`:host{display:block;color:#213e38}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}h1{margin:8px 0}header p,span{color:#667e74}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.summary article{background:#fff;border:1px solid #d9e5df;border-radius:16px;padding:24px}.summary strong{display:block;font-size:32px;margin-top:12px;color:#18745f}button{padding:12px 18px;border-radius:10px;background:#18745f;color:white;border:0;text-decoration:none;cursor:pointer}.error{color:#a33322}@media(max-width:600px){.summary article{padding:14px}}`]})
- export class StoreHomeComponent implements OnInit {
- private readonly operations=inject(OperationsService);data=signal<StoreHome|null>(null);loading=signal(false);error=signal('');
- ngOnInit(){void this.load();}
- async load(){if(this.loading())return;this.loading.set(true);this.error.set('');try{this.data.set(await this.operations.request<StoreHome>('ops/store/home'));}catch(e){this.error.set(e instanceof Error?e.message:'本店数据加载失败');}finally{this.loading.set(false);}}
- }
|
