124 lines
3.6 KiB
Vue
124 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import type {
|
|
PointMallRecordDetailViewModel,
|
|
PointMallVerifyForm,
|
|
} from '../types';
|
|
|
|
import { Drawer, Form, Input } from 'ant-design-vue';
|
|
|
|
import {
|
|
POINTS_MALL_REDEEM_TYPE_CLASS_MAP,
|
|
POINTS_MALL_VERIFY_METHOD_OPTIONS,
|
|
} from '../composables/points-mall-page/constants';
|
|
import { formatPoints } from '../composables/points-mall-page/helpers';
|
|
|
|
defineProps<{
|
|
canManage: boolean;
|
|
form: PointMallVerifyForm;
|
|
loading: boolean;
|
|
open: boolean;
|
|
record: null | PointMallRecordDetailViewModel;
|
|
submitting: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'close'): void;
|
|
(event: 'setVerifyMethod', value: 'manual' | 'scan'): void;
|
|
(event: 'setVerifyRemark', value: string): void;
|
|
(event: 'submit'): void;
|
|
}>();
|
|
|
|
function resolveMemberText(record: PointMallRecordDetailViewModel) {
|
|
return `${record.memberName} (${record.memberMobileMasked})`;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Drawer
|
|
:open="open"
|
|
title="兑换核销"
|
|
width="460"
|
|
class="mpm-verify-drawer"
|
|
@close="emit('close')"
|
|
>
|
|
<div v-if="record" class="mpm-verify-content">
|
|
<div class="mpm-verify-card">
|
|
<div class="mpm-verify-product">
|
|
<div class="name">{{ record.productName }}</div>
|
|
<span
|
|
class="mpm-type-tag"
|
|
:class="POINTS_MALL_REDEEM_TYPE_CLASS_MAP[record.redeemType]"
|
|
>
|
|
{{ record.redeemTypeText }}
|
|
</span>
|
|
</div>
|
|
<div class="mpm-verify-grid">
|
|
<div class="item">
|
|
<span class="label">兑换单号</span>
|
|
<span class="value mono">{{ record.recordNo }}</span>
|
|
</div>
|
|
<div class="item">
|
|
<span class="label">消耗积分</span>
|
|
<span class="value is-primary">{{
|
|
formatPoints(record.usedPoints)
|
|
}}</span>
|
|
</div>
|
|
<div class="item">
|
|
<span class="label">兑换会员</span>
|
|
<span class="value">{{ resolveMemberText(record) }}</span>
|
|
</div>
|
|
<div class="item">
|
|
<span class="label">兑换时间</span>
|
|
<span class="value">{{ record.redeemedAt }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Form layout="vertical">
|
|
<Form.Item label="核销方式">
|
|
<div class="mpm-pill-row">
|
|
<button
|
|
v-for="item in POINTS_MALL_VERIFY_METHOD_OPTIONS"
|
|
:key="item.value"
|
|
type="button"
|
|
class="mpm-pill"
|
|
:class="{ checked: form.verifyMethod === item.value }"
|
|
:disabled="!canManage || loading"
|
|
@click="emit('setVerifyMethod', item.value)"
|
|
>
|
|
{{ item.label }}
|
|
</button>
|
|
</div>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="核销备注">
|
|
<Input.TextArea
|
|
:value="form.verifyRemark"
|
|
:rows="3"
|
|
:maxlength="256"
|
|
:disabled="!canManage || loading"
|
|
placeholder="可选，如：顾客已到店领取"
|
|
@update:value="
|
|
(value) => emit('setVerifyRemark', String(value ?? ''))
|
|
"
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="mpm-drawer-footer">
|
|
<button type="button" class="g-btn" @click="emit('close')">取消</button>
|
|
<button
|
|
type="button"
|
|
class="g-btn g-btn-primary"
|
|
:disabled="!canManage || loading || submitting"
|
|
@click="emit('submit')"
|
|
>
|
|
确认核销
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</Drawer>
|
|
</template>
|