feat: 龙里小程序第一次上传

src/components/BenefitDialog/index.vue

@@ -0,0 +1,88 @@
+<script setup>
+/**
+ * 使用确认弹窗（需求 §7.4）
+ * 点已领取的权益 → 弹窗确认 → 仅记录一次使用，权益保持可用（可多次使用，不失效）
+ */
+import { computed } from "vue";
+import { BENEFIT_TYPE_LABEL } from "@/constant";
+import { dateRangeText, priceText } from "@/utils";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  benefit: { type: Object, default: null },
+});
+
+const emit = defineEmits(["close", "confirm"]);
+
+const b = computed(() => props.benefit || {});
+const typeLabel = computed(() => BENEFIT_TYPE_LABEL[b.value.type] || "权益");
+
+const priceLine = computed(() => {
+  const deal = priceText(b.value.price?.deal);
+  const original = priceText(b.value.price?.original);
+  if (!deal) return b.value.scope_desc || "";
+  return original ? `¥${deal} · 原价 ¥${original}` : `¥${deal}`;
+});
+
+const validLine = computed(() => {
+  const { valid_from: from, valid_to: to, valid_days: days } = b.value;
+  if (from && to) return dateRangeText(from, to);
+  if (days) return `领取后 ${days} 天内有效`;
+  return to ? dateRangeText("", to) : "";
+});
+
+const ruleText = computed(
+  () =>
+    b.value.rule_text ||
+    "该权益不绑定具体商品，可多次使用。本次操作仅记录一次使用，不会使权益失效。"
+);
+
+/** 弹窗内四行对照：label + 值 */
+const rows = computed(() => [
+  { label: "优惠价格", value: priceLine.value, accent: true },
+  { label: "适用规格", value: b.value.price?.spec || "—" },
+  { label: "适用门店", value: b.value.merchant_name || b.value.scope_desc || "—" },
+  { label: "有效期", value: validLine.value || "—" },
+]);
+</script>
+
+<template>
+  <view
+    v-if="visible"
+    class="fixed inset-0 z-[200] flex items-center justify-center px-[34px] bg-[rgba(3,20,15,0.52)] backdrop-blur-[7px]"
+    @click="emit('close')"
+  >
+    <view class="w-full bg-white rounded-dialog pt-6 px-[22px] pb-[18px] text-center shadow-dialog" @click.stop>
+      <view class="w-[52px] h-[52px] rounded-full mx-auto flex items-center justify-center grad-brand shadow-glowbrand">
+        <AppIcon name="check" tone="white" :size="22" />
+      </view>
+
+      <view class="mt-[14px] text-title font-semibold text-ink">确认使用该权益？</view>
+
+      <view class="mt-[14px] p-3 text-left rounded-[10px] border-[0.5px] border-line2 grad-brand-soft">
+        <view class="text-[13.5px] font-semibold text-ink">{{ typeLabel }}</view>
+        <view v-for="row in rows" :key="row.label" class="flex justify-between gap-3 mt-[5px] text-[11.5px] text-ink2">
+          <text>{{ row.label }}</text>
+          <text class="text-right" :class="row.accent ? 'font-semibold text-accent' : ''">{{ row.value }}</text>
+        </view>
+      </view>
+
+      <view class="mt-3 text-[11px] leading-[1.7] text-ink3 text-left">{{ ruleText }}</view>
+
+      <view class="flex gap-[10px] mt-[18px]">
+        <view
+          class="flex-1 h-11 rounded-[16px] flex items-center justify-center text-body bg-alt text-ink2 font-normal"
+          @click="emit('close')"
+        >
+          再想想
+        </view>
+        <view
+          class="flex-1 h-11 rounded-[16px] flex items-center justify-center text-body font-semibold grad-brand shadow-glowbrand"
+          @click="emit('confirm')"
+        >
+          确认使用
+        </view>
+      </view>
+    </view>
+  </view>
+</template>