feat：【mall 商城】满减送活动优化（antd）

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { computed, ref } from 'vue';
+
+import { PromotionConditionTypeEnum } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Button,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Row,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
+
+defineOptions({ name: 'RewardRule' });
+
+const props = defineProps<{
+  modelValue: MallRewardActivityApi.RewardActivity;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const formData = useVModel(props, 'modelValue', emits);
+const rewardRuleCouponSelectRef =
+  ref<InstanceType<typeof RewardRuleCouponSelect>[]>();
+
+const isPriceCondition = computed(() => {
+  return (
+    formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
+  );
+});
+
+function addRule() {
+  if (!formData.value.rules) {
+    formData.value.rules = [];
+  }
+  formData.value.rules.push({
+    limit: 0,
+    discountPrice: 0,
+    freeDelivery: false,
+    point: 0,
+  });
+}
+
+function deleteRule(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
+function setRuleCoupon() {
+  if (!rewardRuleCouponSelectRef.value) {
+    return;
+  }
+  rewardRuleCouponSelectRef.value.forEach((item: any) =>
+    item.setGiveCouponList(),
+  );
+}
+
+defineExpose({ setRuleCoupon });
+</script>
+
+<template>
+  <Row :gutter="[16, 16]">
+    <template v-if="formData.rules">
+      <Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
+        <!-- 规则标题 -->
+        <div class="mb-4 flex items-center">
+          <span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
+          <Button
+            v-if="index !== 0"
+            type="link"
+            danger
+            class="ml-2"
+            @click="deleteRule(index)"
+          >
+            删除
+          </Button>
+        </div>
+
+        <Form :model="rule" layout="horizontal">
+          <!-- 优惠门槛 -->
+          <FormItem label="优惠门槛" :label-col="{ span: 4 }">
+            <div class="flex items-center gap-2">
+              <span>满</span>
+              <InputNumber
+                v-if="isPriceCondition"
+                v-model:value="rule.limit"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                :controls="false"
+                class="!w-40"
+                placeholder="请输入金额"
+              />
+              <Input
+                v-else
+                v-model:value="rule.limit"
+                :min="0"
+                class="!w-40"
+                placeholder="请输入数量"
+                type="number"
+              />
+              <span>{{ isPriceCondition ? '元' : '件' }}</span>
+            </div>
+          </FormItem>
+
+          <!-- 优惠内容 -->
+          <FormItem label="优惠内容" :label-col="{ span: 4 }">
+            <div class="flex flex-col gap-4">
+              <!-- 订单金额优惠 -->
+              <div class="flex flex-col gap-2">
+                <div class="font-medium">订单金额优惠</div>
+                <div class="ml-4 flex items-center gap-2">
+                  <span>减</span>
+                  <InputNumber
+                    v-model:value="rule.discountPrice"
+                    :min="0"
+                    :precision="2"
+                    :step="0.1"
+                    :controls="false"
+                    class="!w-40"
+                    placeholder="请输入金额"
+                  />
+                  <span>元</span>
+                </div>
+              </div>
+
+              <!-- 包邮 -->
+              <div class="flex items-center gap-2">
+                <span class="font-medium">包邮：</span>
+                <Switch
+                  v-model:checked="rule.freeDelivery"
+                  checked-children="是"
+                  un-checked-children="否"
+                />
+              </div>
+
+              <!-- 送积分 -->
+              <div class="flex items-center gap-2">
+                <span class="font-medium">送积分：</span>
+                <span>送</span>
+                <InputNumber
+                  v-model:value="rule.point"
+                  :min="0"
+                  :controls="false"
+                  class="!w-40"
+                  placeholder="请输入积分"
+                />
+                <span>积分</span>
+              </div>
+
+              <!-- 送优惠券 -->
+              <div class="flex items-start gap-2">
+                <span class="font-medium">送优惠券：</span>
+                <RewardRuleCouponSelect
+                  ref="rewardRuleCouponSelectRef"
+                  :model-value="rule"
+                />
+              </div>
+            </div>
+          </FormItem>
+        </Form>
+      </Col>
+    </template>
+
+    <!-- 添加规则按钮 -->
+    <Col :span="24" class="mt-2">
+      <Button type="primary" @click="addRule">+ 添加优惠规则</Button>
+    </Col>
+
+    <!-- 提示信息 -->
+    <Col :span="24" class="mt-2">
+      <Tag color="warning">
+        提示：赠送积分为 0 时不赠送；未选择优惠券时不赠送。
+      </Tag>
+    </Col>
+  </Row>
+</template>