add point redemption
This commit is contained in:
Timi
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.pointRedemption.create" class="redemption-detail">
|
||||
<customer-profile-card
|
||||
v-if="customer"
|
||||
class="customer-profile"
|
||||
:customer="customer"
|
||||
v-entrance-transition
|
||||
/>
|
||||
<t-cell-group v-if="item" title="兑换信息" theme="card">
|
||||
<t-cell title="客户" :note="item.customer?.name || item.customerId || '-'" />
|
||||
<t-cell title="兑换商品" :note="item.productNameSnapshot || item.skuNameSnapshot || '-'" />
|
||||
<t-cell title="兑换数量" :note="`${quantityText(item.quantity)} ${item.unitSnapshot || ''}`" />
|
||||
<t-cell title="积分" :note="`${formatPoint(item.actualPointCost)}${item.actualPointCost !== item.defaultPointCost ? '（已减免）' : ''}`" />
|
||||
<t-cell title="状态" :note="statusText(item.status)" />
|
||||
<t-cell title="兑换时间" :note="timeText(item.redeemedAt)" />
|
||||
<t-cell v-if="item.remark" title="备注" :note="item.remark" />
|
||||
<div class="photo-wrap bg-white">
|
||||
<photo-scroller
|
||||
:model-value="attachmentUrls"
|
||||
:show-add="false"
|
||||
:show-remove="false"
|
||||
:show-viewer-actions="false"
|
||||
title="兑换凭证照片"
|
||||
/>
|
||||
</div>
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="returnList.length" title="退货记录" theme="card">
|
||||
<t-cell
|
||||
v-for="record in returnList"
|
||||
:key="record.id"
|
||||
:title="`退货 ${quantityText(record.quantity)} ${item?.unitSnapshot || ''}`"
|
||||
:note="`${formatPoint(record.pointCost)} · ${timeText(record.returnedAt)}`"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<t-empty v-if="!item" :description="loading ? '正在加载兑换单' : '兑换单不存在'" />
|
||||
<t-button v-if="canReturn" class="return-button cell-button" theme="danger" @click="returnVisible = true">
|
||||
冲正兑换
|
||||
</t-button>
|
||||
</div>
|
||||
<bottom-popup
|
||||
v-model="returnVisible"
|
||||
title="冲正兑换"
|
||||
left-button-text="取消"
|
||||
:right-button-text="returning ? '提交中' : '确认冲正'"
|
||||
@left-button-click="returnVisible = false"
|
||||
@right-button-click="submitReturn"
|
||||
>
|
||||
<div class="return-form">
|
||||
<t-form class="form" label-width="6rem">
|
||||
<t-form-item label="剩余数量">
|
||||
<span v-text="`${remainText} ${item?.unitSnapshot || ''}`" />
|
||||
</t-form-item>
|
||||
<t-form-item label="冲正数量" required-mark>
|
||||
<t-input v-model.trim="returnQuantity" type="number" align="right" borderless />
|
||||
</t-form-item>
|
||||
<t-form-item label="冲正原因">
|
||||
<t-textarea v-model.trim="returnRemark" maxlength="500" autosize />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
v-model="returnPhotoUrls"
|
||||
v-model:photo-items="returnPhotos"
|
||||
:upload="uploadPhotoList"
|
||||
edit-mode
|
||||
required
|
||||
title="冲正凭证照片"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</div>
|
||||
</bottom-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { AttachmentAPI, useUserStore } from "timi-web-api";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { PointRedemption, PointRedemptionReturn, PointRedemptionStatus } from "@/types/Point";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { comparePackageQuantity, getPackageQuantityText, normalizePackageQuantity } from "@/utils/package";
|
||||
import { uploadPhotoList } from "@/utils/photo";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "PointRedemptionDetail" });
|
||||
|
||||
const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
const item = ref<PointRedemption>();
|
||||
const customer = ref<Customer>();
|
||||
const returnList = ref<PointRedemptionReturn[]>([]);
|
||||
const loading = ref(false);
|
||||
const returnVisible = ref(false);
|
||||
const returnQuantity = ref("");
|
||||
const returnRemark = ref("");
|
||||
const returnPhotos = ref<PhotoItem[]>([]);
|
||||
const returnRequestNo = ref("");
|
||||
const returning = ref(false);
|
||||
const attachmentUrls = computed(() => (item.value?.attachmentList || [])
|
||||
.filter(attachment => !!attachment.id)
|
||||
.map(attachment => AttachmentAPI.getReadURL(attachment.id!)));
|
||||
const returnPhotoUrls = computed(() => returnPhotos.value.map(photo => photo.url));
|
||||
const canReturn = computed(() => userStore.hasPermissions(permissionCodes.pointRedemption.return)
|
||||
&& (item.value?.status === "COMPLETED" || item.value?.status === "PARTIALLY_RETURNED")
|
||||
&& 0 < comparePackageQuantity(remaining(), "0"));
|
||||
const remainText = computed(() => quantityText(remaining()));
|
||||
|
||||
function remaining(): string {
|
||||
const total = Number(item.value?.quantity || 0);
|
||||
const returned = Number(item.value?.returnedQuantity || 0);
|
||||
return String(Math.max(0, total - returned));
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
item.value = await PointAPI.redemptionDetail(id);
|
||||
customer.value = item.value.customer;
|
||||
if (!customer.value && item.value.customerId) {
|
||||
try {
|
||||
customer.value = await CustomerAPI.detail(item.value.customerId);
|
||||
} catch {
|
||||
customer.value = undefined;
|
||||
}
|
||||
}
|
||||
returnList.value = await PointAPI.redemptionReturnList(id);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "兑换单加载失败"));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function attachments(): Array<{ tempFileId: string; attachType: "PHOTO"; name?: string }> {
|
||||
return returnPhotos.value.flatMap(photo => photo.tempFileId ? [{
|
||||
tempFileId: photo.tempFileId,
|
||||
attachType: "PHOTO" as const
|
||||
}] : []);
|
||||
}
|
||||
|
||||
async function submitReturn(): Promise<void> {
|
||||
const quantity = normalizePackageQuantity(returnQuantity.value);
|
||||
const redemptionId = item.value?.id;
|
||||
if (
|
||||
returning.value
|
||||
|| !redemptionId
|
||||
|| !quantity
|
||||
|| 0 < comparePackageQuantity(quantity, remaining())
|
||||
|| !attachments().length
|
||||
) {
|
||||
Message.warning("请填写不超过剩余数量的退货数量并上传照片");
|
||||
return;
|
||||
}
|
||||
if (!returnRequestNo.value) {
|
||||
returnRequestNo.value = window.crypto.randomUUID();
|
||||
}
|
||||
returning.value = true;
|
||||
try {
|
||||
item.value = await PointAPI.redemptionReturn({
|
||||
redemptionId,
|
||||
requestNo: returnRequestNo.value,
|
||||
quantity,
|
||||
attachmentList: attachments(),
|
||||
remark: returnRemark.value || null
|
||||
});
|
||||
customer.value = item.value.customer || customer.value;
|
||||
returnList.value = await PointAPI.redemptionReturnList(redemptionId);
|
||||
returnVisible.value = false;
|
||||
returnQuantity.value = "";
|
||||
returnRemark.value = "";
|
||||
returnPhotos.value = [];
|
||||
returnRequestNo.value = "";
|
||||
Message.success("退货已完成");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "退货失败，重试将复用同一请求号"));
|
||||
} finally {
|
||||
returning.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatPoint(value?: number): string {
|
||||
return `${(value || 0).toLocaleString("zh-CN")} 分`;
|
||||
}
|
||||
|
||||
function quantityText(value?: number | string): string {
|
||||
return getPackageQuantityText(value);
|
||||
}
|
||||
|
||||
function statusText(value?: PointRedemptionStatus): string {
|
||||
return ({
|
||||
COMPLETED: "已兑换",
|
||||
PARTIALLY_RETURNED: "部分退货",
|
||||
FULLY_RETURNED: "已退完"
|
||||
} as Record<string, string>)[value || ""] || "未知";
|
||||
}
|
||||
|
||||
function timeText(value?: number): string {
|
||||
return value ? new Date(value).toLocaleString("zh-CN", { hour12: false }) : "-";
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.redemption-detail {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
flex-direction: column;
|
||||
|
||||
.return-button {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.customer-profile {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.photo-wrap {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.return-form {
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.form {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user