update CustomerPackagePayment.vue style

src/pages/package/CustomerPackageDetail.vue

@@ -52,15 +52,18 @@
 			</t-cell-group>
 			<card-container description="产品权益" v-entrance-transition="210">
 				<t-cell-group>
-					<div
+					<t-cell
 						v-for="item in customerPackage.itemList || []"
 						:key="item.id"
 						class="benefit"
 					>
-						<div class="head">
+						<template #title>
+							<div class="title">
 								<strong v-text="item.productNameSnapshot || '未命名产品'" />
 								<t-tag theme="primary" variant="light" :content="item.unitSnapshot || '未设置单位'" />
 							</div>
+						</template>
+						<template #description>
 							<div class="stats">
 								<div class="stat">
 									<span>总数</span>
@@ -79,7 +82,8 @@
 									<strong v-text="getPackageQuantityText(item.deliveredQuantity)" />
 								</div>
 							</div>
-					</div>
+						</template>
+					</t-cell>
 					<div v-if="!customerPackage.itemList?.length" class="empty" v-text="'暂无产品权益'" />
 				</t-cell-group>
 			</card-container>
@@ -111,7 +115,9 @@
 					hover
 					@click="toDeliveryDetail(item)"
 				>
-					<template #note><span v-text="getDeliveryItemSummary(item)" /></template>
+					<template #note>
+						<span v-text="getDeliveryItemSummary(item)" />
+					</template>
 				</t-cell>
 			</t-cell-group>
 			<t-button
@@ -437,13 +443,13 @@ watch(() => route.params.id, loadData);
 
 	.benefit {
 		padding: .875rem 1rem;
-		border-bottom: 1px solid var(--td-component-border);
 
-		&:last-of-type {
+		:deep(.t-cell__title) {
-			border-bottom: 0;
+			margin: 0;
 		}
 
-		.head {
+		.title {
+			flex: 1;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;

src/pages/package/CustomerPackagePayment.vue

@@ -6,12 +6,28 @@
 			<t-cell title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
 			<t-cell title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
 		</t-cell-group>
-		<t-form v-if="customerPackage" class="form" label-align="left" label-width="6rem" v-entrance-transition="70">
+		<t-form v-if="customerPackage" class="form" label-align="left" label-width="7rem" v-entrance-transition="70">
 			<t-form-item label="本次收款（元）" required-mark>
-				<t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="请输入本次实际收款金额" />
+				<t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="本次实际收款金额" />
 			</t-form-item>
-			<t-form-item label="发生时间" arrow @click="occurredPickerVisible = true">
+			<t-form-item label="发生时间" content-align="right">
-				<span class="picker-text" v-text="occurredAtText || '使用当前时间'" />
+				<div class="time-actions">
+					<t-button
+						theme="primary"
+						variant="outline"
+						size="extra-small"
+						:content="occurredAtText || '此刻'"
+						@click="openOccurredAtPicker"
+					/>
+					<t-button
+						v-if="occurredAtText"
+						theme="primary"
+						variant="text"
+						size="extra-small"
+						content="此刻"
+						@click="resetOccurredAt"
+					/>
+				</div>
 			</t-form-item>
 			<t-form-item label="备注">
 				<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="收款备注" />
@@ -20,12 +36,20 @@
 		<package-photo-field v-if="customerPackage" v-model="photoItems" required title="收款凭证照片" />
 		<t-empty v-if="!customerPackage" :description="isLoading ? '正在加载套餐' : '套餐不存在'" />
 		<t-popup v-model="occurredPickerVisible" placement="bottom">
-			<t-date-time-picker v-model="occurredDraft" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="发生时间" @cancel="occurredPickerVisible = false" @confirm="confirmOccurredAt" />
+			<t-date-time-picker
+				v-model="occurredDraft"
+				format="YYYY-MM-DD HH:mm"
+				:mode="['date', 'minute']"
+				title="发生时间"
+				@cancel="occurredPickerVisible = false"
+				@confirm="confirmOccurredAt"
+			/>
 		</t-popup>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import PackageAPI from "@/api/PackageAPI";
 import PackagePhotoField from "@/components/PackagePhotoField.vue";
@@ -61,11 +85,21 @@ function resolveTimestamp(value: string): number | undefined {
 	return Number.isFinite(timestamp) ? timestamp : undefined;
 }
 
-function confirmOccurredAt(value: string | number): void {
+function openOccurredAtPicker(): void {
-	occurredAtText.value = String(value);
+	occurredDraft.value = occurredAtText.value || Time.formatDateTime(new Date());
+	occurredPickerVisible.value = true;
+}
+
+function confirmOccurredAt(value?: string | number): void {
+	occurredAtText.value = String(value || occurredDraft.value);
 	occurredPickerVisible.value = false;
 }
 
+function resetOccurredAt(): void {
+	occurredAtText.value = "";
+	occurredDraft.value = "";
+}
+
 function buildAttachments(): PackageAttachment[] {
 	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
 }
@@ -139,9 +173,11 @@ onUnmounted(() => navBarStore.clearRight());
 		border-radius: .75rem;
 	}
 
-	.picker-text {
+	.time-actions {
-		width: 100%;
+		gap: .5rem;
-		text-align: right;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
 	}
 
 	.package-photo-field {