fix PackagePurchase.vue style
This commit is contained in:
Timi
@@ -45,12 +45,74 @@
|
||||
v-entrance-transition
|
||||
/>
|
||||
<div v-if="config && !isSaleable" class="saleable-tip red">套餐当前不可购买，请检查套餐状态和有效期</div>
|
||||
<package-purchase-form
|
||||
:package-config="config"
|
||||
:can-price-override="canPriceOverride"
|
||||
v-model:item-list="packagePurchaseItemList"
|
||||
v-model:sale-amount="saleAmountText"
|
||||
/>
|
||||
<section class="package-purchase-form">
|
||||
<div v-if="config" class="config-summary">
|
||||
<div class="header">
|
||||
<div class="text-bold" v-text="config.name || '未命名套餐'" />
|
||||
<div class="price">
|
||||
<span class="label gray">标准价：</span>
|
||||
<span class="value red text-bold" v-text="formatPackageAmount(config.standardAmount)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="description" v-text="config.description" />
|
||||
</div>
|
||||
<div v-else class="center-tips" v-text="'当前套餐未返回，无法完成购买。'" />
|
||||
<t-form-item label="成交价（元）" label-width="6rem" required-mark>
|
||||
<t-input
|
||||
v-model.trim="saleAmountText"
|
||||
type="number"
|
||||
align="right"
|
||||
borderless
|
||||
:readonly="!canPriceOverride"
|
||||
placeholder="请输入成交价"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<t-form class="items" label-width="2.5rem">
|
||||
<div class="title">
|
||||
<strong>购买权益明细</strong>
|
||||
<span v-if="!canPriceOverride">当前账号无定制权限，明细不可修改</span>
|
||||
</div>
|
||||
<t-form-item
|
||||
v-for="(item, index) in packagePurchaseItemList"
|
||||
:key="`${index}-${item.productId}-${item.productUnitId}`"
|
||||
class="item"
|
||||
>
|
||||
<template #label>
|
||||
<t-image
|
||||
v-if="getItemPhotoURL(item)"
|
||||
:src="getItemPhotoURL(item)"
|
||||
:alt="getItemName(item)"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="avatar fallback"
|
||||
v-text="getItemName(item).slice(0, 1)"
|
||||
/>
|
||||
</template>
|
||||
<div class="content">
|
||||
<span class="name" v-text="getItemLabel(item)" />
|
||||
<t-input
|
||||
:model-value="item.totalQuantity"
|
||||
type="number"
|
||||
:readonly="!canPriceOverride"
|
||||
placeholder="总权益数量"
|
||||
borderless
|
||||
align="right"
|
||||
@update:model-value="updateItemQuantity(index, $event)"
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<span class="unit" v-text="getItemUnit(item)" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
</t-form-item>
|
||||
<div v-if="!packagePurchaseItemList.length" class="center-tips" v-text="'当前套餐暂无权益明细'" />
|
||||
</t-form>
|
||||
</t-form-item>
|
||||
</section>
|
||||
<t-form-item label="购买时间" content-align="right">
|
||||
<div class="time-actions">
|
||||
<t-button
|
||||
@@ -78,6 +140,15 @@
|
||||
placeholder="购买说明"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
:upload="uploadPhotoList"
|
||||
:edit-mode="true"
|
||||
title="订单照片"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
@@ -125,15 +196,19 @@ import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerList from "@/components/CustomerList.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PackagePurchaseForm from "@/components/PackagePurchaseForm.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { usePackagePurchase } from "@/pages/package/usePackagePurchase";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { GaoPackageConfig } from "@/types/Package";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { GaoPackageConfig, PackageAttachment, PackagePurchaseItem } from "@/types/Package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatPackageAmount } from "@/utils/package";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { uploadPhotoList } from "@/utils/photo";
|
||||
import { getProductPhotoURL } from "@/utils/product";
|
||||
|
||||
defineOptions({
|
||||
name: "PackagePurchase"
|
||||
@@ -270,6 +345,16 @@ function parseDateTime(value: string): Date {
|
||||
|
||||
const note = ref("");
|
||||
const isSaving = ref(false);
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const photoUrlList = computed(() => photoItems.value.map(item => item.url));
|
||||
|
||||
function buildAttachments(): PackageAttachment[] {
|
||||
return photoItems.value.flatMap(item => item.tempFileId ? [{
|
||||
tempFileId: item.tempFileId,
|
||||
attachType: item.attachType || "PHOTO"
|
||||
}] : []);
|
||||
}
|
||||
|
||||
const {
|
||||
isSaleable,
|
||||
canPriceOverride,
|
||||
@@ -284,9 +369,35 @@ const {
|
||||
selectedCustomerList,
|
||||
note,
|
||||
hasPermission: permissionCode => userStore.hasPermissions(permissionCode),
|
||||
buildRegisteredAt: buildPurchasedAt
|
||||
buildRegisteredAt: buildPurchasedAt,
|
||||
buildAttachments
|
||||
});
|
||||
|
||||
function getItemLabel(item: PackagePurchaseItem): string {
|
||||
const configItem = config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId);
|
||||
return configItem ? `${configItem.productNameSnapshot || "未命名产品"}` : "产品权益";
|
||||
}
|
||||
|
||||
function getItemName(item: PackagePurchaseItem): string {
|
||||
return config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId)?.productNameSnapshot || "未命名产品";
|
||||
}
|
||||
|
||||
function getItemPhotoURL(item: PackagePurchaseItem): string {
|
||||
const configItem = config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId);
|
||||
return getProductPhotoURL(configItem?.product || {});
|
||||
}
|
||||
|
||||
function getItemUnit(item: PackagePurchaseItem): string {
|
||||
return config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId)?.unitSnapshot || "";
|
||||
}
|
||||
|
||||
function updateItemQuantity(index: number, value: string | number): void {
|
||||
packagePurchaseItemList.value = packagePurchaseItemList.value.map((item, itemIndex) => itemIndex === index ? {
|
||||
...item,
|
||||
totalQuantity: String(value)
|
||||
} : item);
|
||||
}
|
||||
|
||||
async function submitRecord(): Promise<void> {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
@@ -385,6 +496,87 @@ watch(config, value => {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.package-purchase-form {
|
||||
gap: .75rem;
|
||||
display: grid;
|
||||
margin-top: 1rem;
|
||||
|
||||
.config-summary {
|
||||
gap: .25rem;
|
||||
margin: 0 1rem;
|
||||
padding: .5rem .75rem;
|
||||
display: flex;
|
||||
background: var(--td-error-color-1);
|
||||
border-radius: .75rem;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.label {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
gap: .5rem;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
|
||||
.title {
|
||||
font-size: .8125rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
box-shadow: .25rem .25rem 1rem rgba(0, 0, 0, .08);
|
||||
border-radius: 1rem;
|
||||
|
||||
.avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
flex: none;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-input {
|
||||
@@ -392,6 +584,13 @@ watch(config, value => {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.package-purchase-form .avatar .t-image__img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.selected-customer-popup {
|
||||
height: 70vh;
|
||||
overflow: auto;
|
||||
|
||||
Reference in New Issue
Block a user