Преглед изворни кода

fix(admin): compact member credit cards and widen actions

彭峰 пре 3 дана
родитељ
комит
39739b00b3

+ 3 - 1
projects/xiaoshu-admin/src/app/components/member-credit-account.component.html

@@ -2,9 +2,11 @@
 @if(error()){<p role="alert" class="error">{{error()}}</p>}@if(message()){<p role="status">{{message()}}</p>}
 @if(error()){<p role="alert" class="error">{{error()}}</p>}@if(message()){<p role="status">{{message()}}</p>}
 @if(loading()){<p role="status">正在刷新课时账户…</p>}
 @if(loading()){<p role="status">正在刷新课时账户…</p>}
 @if(data();as value){
 @if(data();as value){
+<div [class.credit-account-meta]="!store">
 <p>{{store?'总部入账后,可向所属学员划拨课时。':'充值来源:'+(value.storeName||'尚未关联门店,请先在会员资料中关联有效门店')}}</p>
 <p>{{store?'总部入账后,可向所属学员划拨课时。':'充值来源:'+(value.storeName||'尚未关联门店,请先在会员资料中关联有效门店')}}</p>
 @if(!store){<p>体验资格:{{value.trialStatus==='issued'?'已发放过,不可再次领取':value.trialStatus==='eligible'?'可发放 1 次':'待核验旧系统体验记录'}} · 退回体验额度不恢复领取资格</p>@if(value.canPost&&value.trialStatus==='pending'){<button type="button" (click)="importHistory()" [disabled]="saving()">核验旧体验并补齐历史流水</button>}}
 @if(!store){<p>体验资格:{{value.trialStatus==='issued'?'已发放过,不可再次领取':value.trialStatus==='eligible'?'可发放 1 次':'待核验旧系统体验记录'}} · 退回体验额度不恢复领取资格</p>@if(value.canPost&&value.trialStatus==='pending'){<button type="button" (click)="importHistory()" [disabled]="saving()">核验旧体验并补齐历史流水</button>}}
-<div class="accounts">@for(a of value.accounts;track a.account){<article><strong>{{a.label}}</strong><b>{{a.available | number:'1.0-2'}}</b><span>可用 · 余额 {{a.balance}} · 已预留 {{a.reserved}}</span>@if(a.balance<0){<small class="error">历史负余额,需核对</small>}@if(!store){<div class="account-actions">@if(value.canPost){<button type="button" (click)="chooseAccount(a.account)">充值</button>}<button type="button" (click)="chooseAccount(a.account,true)">明细</button></div>}</article>}</div>
+</div>
+<div class="accounts" [class.member-credit-summary]="!store">@for(a of value.accounts;track a.account){<article><strong>{{a.label}}</strong><b>{{a.available | number:'1.0-2'}}</b><span>可用 · 余额 {{a.balance}} · 已预留 {{a.reserved}}</span>@if(a.balance<0){<small class="error">历史负余额,需核对</small>}@if(!store){<div class="account-actions">@if(value.canPost){<button type="button" (click)="chooseAccount(a.account)">充值</button>}<button type="button" (click)="chooseAccount(a.account,true)">明细</button></div>}</article>}</div>
 @if(!value.canPost){<p>当前账号没有充值或扣回权限,可查看账户和流水。</p>}
 @if(!value.canPost){<p>当前账号没有充值或扣回权限,可查看账户和流水。</p>}
 @if(value.canPost){<form (ngSubmit)="store?submit():check()" (input)="resetPreview()" (change)="resetPreview()"><fieldset [class.credit-entry-fields]="!store" [disabled]="saving()||loading()">
 @if(value.canPost){<form (ngSubmit)="store?submit():check()" (input)="resetPreview()" (change)="resetPreview()"><fieldset [class.credit-entry-fields]="!store" [disabled]="saving()||loading()">
 @if(!store){<label class="credit-direction">业务类型<select name="direction" [(ngModel)]="direction" (ngModelChange)="sourceId='';resetPreview()"><option value="add">门店划拨充值</option><option value="deduct">原单扣回并退回门店</option><option value="adjust">历史差错调整</option></select></label>}
 @if(!store){<label class="credit-direction">业务类型<select name="direction" [(ngModel)]="direction" (ngModelChange)="sourceId='';resetPreview()"><option value="add">门店划拨充值</option><option value="deduct">原单扣回并退回门店</option><option value="adjust">历史差错调整</option></select></label>}

+ 22 - 0
projects/xiaoshu-admin/src/app/components/member-enrollment.scss

@@ -36,6 +36,28 @@ input[type=checkbox]:disabled { cursor:not-allowed; }
 
 
 .credit-panel a{color:#1b735d;font-weight:600;text-underline-offset:3px}.credit-panel form,.ledger-panel{scroll-margin-top:90px}
 .credit-panel a{color:#1b735d;font-weight:600;text-underline-offset:3px}.credit-panel form,.ledger-panel{scroll-margin-top:90px}
 
 
+.credit-account-meta {
+  display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; margin:10px 0 12px;
+  > p { margin:0; font-size:13px; }
+}
+.member-credit-summary {
+  margin:12px 0 16px;
+  > article {
+    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 12px; padding:14px;
+    > strong { overflow-wrap:anywhere; }
+    > b { text-align:right; }
+    > span, > small, > .account-actions { grid-column:1 / -1; }
+    > span { overflow-wrap:anywhere; }
+    > .account-actions {
+      align-self:end; flex-wrap:nowrap; margin-top:6px;
+      > button { flex:1 1 0; min-width:0; min-height:44px; }
+    }
+  }
+}
+@media(max-width:480px) {
+  .member-credit-summary { grid-template-columns:1fr; }
+}
+
 // Flexible fields fill each row; numeric inputs stay narrow and actions form a shared footer.
 // Flexible fields fill each row; numeric inputs stay narrow and actions form a shared footer.
 .credit-submit-row { display:contents; }
 .credit-submit-row { display:contents; }
 .credit-entry-fields {
 .credit-entry-fields {