feat(member): implement points mall module pages

apps/web-antd/src/views/member/points-mall/components/PointsMallVerifyDrawer.vue

@@ -0,0 +1,123 @@
+<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>