admin_web/apps/web-antd/src/views/operation/activity/activity-add.vue

<script lang="ts" setup>
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import { Image } from "ant-design-vue";
import { Tag } from 'ant-design-vue';
import { ref } from "vue";
import { addActivityApi } from '#/api/core/activity';
import type { EditActivityParam } from '#/api/core/activity';
import { getUnixTime } from '#/store/util';
interface MailItem {
  Id: string | number;
  Num: number;
  url?: string;
}
let items = ref<MailItem[]>([]);
defineOptions({
  name: 'DetailMailModal',
});
const [Form, FormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full h-full',
    },
  },
  // 使用 tailwindcss grid布局
  // 提交函数
  // 垂直布局，label和input在不同行，值为vertical
  layout: 'horizontal',
  showDefaultActions: false,
  // 水平布局，label和input在同一行
  schema: [
    {
      component: 'Select',
      fieldName: 'type',
      label: '活动类型',
      componentProps: {
        options: [
          {
            label: '挖矿活动',
            value: 1,
          },
          {
            label: '猜颜色',
            value: 2,
          },
          {
            label: '赛跑活动',
            value: 3,
          },
          {
            label: '限时特惠礼包',
            value: 4,
          },
          {
            label: '买一赠一礼包',
            value: 5,
          },
          {
            label: '超值加购礼包',
            value: 6,
          },
          {
            label: '好友合作活动',
            value: 7,
          },
        ],
      },
    },
    {
      component: 'Input',
      fieldName: 'level',
      label: '解锁等级',
      componentProps: {
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'start_time',
      label: '开始时间',
      componentProps: {
        showTime: true,
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'end_time',
      label: '结束时间',
      componentProps: {
        showTime: true,
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
    {
      component: 'Input',
      fieldName: 'title',
      label: '活动标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'mail_title',
      label: '回收邮件标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'mail_content',
      label: '回收邮件内容',
    },
    {
      component: 'Textarea',
      fieldName: 'cfg',
      label: '配置',
      defaultValue: '{}',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
    },
    {
      component: 'Textarea',
      defaultValue: '{}',
      fieldName: 'extra',
      label: '额外配置',
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  confirmText: '提交',
  onConfirm: async () => {
    const values = await FormApi.getValues();
    const mMdata = modalApi.getData();
    const cfgjson = JSON.parse(values.cfg);
    const params: EditActivityParam = {
      AppId: mMdata.AppId,
      Cfg: {
        id: 0,
        type: values.type,
        start_time: values.start_time ? getUnixTime(values.start_time) : 0,
        end_time: values.end_time ? getUnixTime(values.end_time) : 0,
        title: values.title,
        level: values.level,
        mail_title: values.mail_title,
        mail_content: values.mail_content,
        cfg: JSON.stringify(cfgjson),
        extra: values.extra,
      },
    };
    await addActivityApi(params);
    modalApi.close();
  },
});
</script>
<template>
  <Modal :width="800" title="邮件详情">
    <Form>
      <template #items>
        <div class="flex flex-wrap items-center justify-center">
          <div v-for="item in items" :key="item.Id" class="flex items-center gap-1">
            <template v-if="item.url">
              <Image :src="item.url" width="30px" />
            </template>
            <template v-else>
              <Tag class="w-[45px] h-[30px] flex items-center justify-center text-xs">
                {{ item.Id }}
              </Tag>
            </template>
            <span>x{{ item.Num }}</span>
          </div>
        </div>
      </template>
    </Form>
  </Modal>
</template>