timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update CustomerPackagePayment.vue style

Browse Source
This commit is contained in:
Timi
2026-09-02 01:18:45 +08:00
parent f430f8ecd4
commit 551bb149fd
2 changed files with 79 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/package/CustomerPackageDetail.vue
+33 -27
View File
@@ -52,34 +52,38 @@
</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">
<strong v-text="item.productNameSnapshot || '未命名产品'" />
<t-tag theme="primary" variant="light" :content="item.unitSnapshot || '未设置单位'" />
</div>
<div class="stats">
<div class="stat">
<span>总数</span>
<strong v-text="getPackageQuantityText(item.totalQuantity)" />
<template #title>
<div class="title">
<strong v-text="item.productNameSnapshot || '未命名产品'" />
<t-tag theme="primary" variant="light" :content="item.unitSnapshot || '未设置单位'" />
</div>
<div class="stat available">
<span>可发</span>
<strong v-text="getPackageQuantityText(item.availableQuantity)" />
</template>
<template #description>
<div class="stats">
<div class="stat">
<span>总数</span>
<strong v-text="getPackageQuantityText(item.totalQuantity)" />
</div>
<div class="stat available">
<span>可发</span>
<strong v-text="getPackageQuantityText(item.availableQuantity)" />
</div>
<div class="stat pending">
<span>待核销</span>
<strong v-text="getPackageQuantityText(item.pendingQuantity)" />
</div>
<div class="stat delivered">
<span>已核销</span>
<strong v-text="getPackageQuantityText(item.deliveredQuantity)" />
</div>
</div>
<div class="stat pending">
<span>待核销</span>
<strong v-text="getPackageQuantityText(item.pendingQuantity)" />
</div>
<div class="stat delivered">
<span>已核销</span>
<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 {
border-bottom: 0;
:deep(.t-cell__title) {
margin: 0;
}
.head {
.title {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
src/pages/package/CustomerPackagePayment.vue
+46 -10
View File
@@ -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">
<span class="picker-text" v-text="occurredAtText || '使用当前时间'" />
<t-form-item label="发生时间" content-align="right">
<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 {
occurredAtText.value = String(value);
function openOccurredAtPicker(): void {
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 {
width: 100%;
text-align: right;
.time-actions {
gap: .5rem;
display: flex;
align-items: center;
justify-content: flex-end;
}
.package-photo-field {