Browse Source

feat: 更新优惠券API参数,新增优惠券详情页面,优化编辑和查看功能

laiqi 11 months ago
parent
commit
53cd978614

+ 2 - 2
apps/web-ele/src/api/coupon/coupon2.ts

@@ -15,7 +15,7 @@ interface Coupon2QueryParams extends Coupon2PartialEntity, PageConfig {}
  * 我的优惠券信息_列表
  */
 export async function getCoupon2ListApi(data: Coupon2QueryParams) {
-  return requestClient.post<any>('/api/query/list?pagevalue=38', {
+  return requestClient.post<any>('/api/query/list?pagevalue=101', {
     pageindex: data.pageindex,
     rows: data.rows,
     ...parseQueryValues(data),
@@ -27,7 +27,7 @@ export async function getCoupon2ListApi(data: Coupon2QueryParams) {
  */
 export async function getCoupon2DetailApi(data: { coupon2sid: string }) {
   return requestClient.post<any>(
-    '/api/query/view?pagevalue=39',
+    '/api/query/view?pagevalue=102',
     {
       ...parseQueryValues(data),
     },

+ 1 - 1
apps/web-ele/src/views/coupon-manage/index.vue

@@ -78,7 +78,7 @@ const gridOptions: VxeGridProps<any> = {
     },
     { title: '创建时间', field: 'couponcreatedate', sortable: true },
     { title: '创建人', field: 'couponcreateuser', sortable: true },
-    { title: '更新时间', field: 'couponupdate', sortable: true },
+    // { title: '更新时间', field: 'couponupdate', sortable: true },
     // { title: '优惠券更新人', field: 'couponupuser' },
     {
       title: '操作',

+ 253 - 0
apps/web-ele/src/views/examine-manage/examine-coupon/detail.vue

@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElTag } from 'element-plus';
+
+import { getCoupon2DetailApi } from '#/api/coupon/coupon2';
+
+const data = ref<any>(null);
+const loading = ref(false);
+
+// 申请人信息
+const applicantInfo = computed(() => {
+  if (!data.value) return [];
+  return [
+    { label: '姓名', value: data.value.usersname },
+    { label: '手机号', value: data.value.usersphone },
+    { label: '身份证号', value: data.value.usersidcardnumber },
+    { label: '用户类型', value: data.value.userstype },
+    { label: '用户性质', value: data.value.usersnature },
+    { label: '邮箱', value: data.value.usersemail },
+    { label: '地址', value: data.value.usersaddress },
+    { label: '注册时间', value: data.value.usersdate },
+    { label: '银行名称', value: data.value.usersbankname },
+    { label: '银行账号', value: data.value.usersbanknumber },
+    { label: '社会统一信用代码', value: data.value.usersshtyxydm },
+  ];
+});
+
+// 产品信息
+const productInfo = computed(() => {
+  if (!data.value) return [];
+  return [
+    { label: '产品名称', value: data.value.productsname },
+    { label: '产品型号', value: data.value.productsmodel },
+    { label: '产品类别', value: data.value.productscategory },
+    { label: '机具类型', value: data.value.productsjjlx },
+    {
+      label: '产品价格',
+      value: data.value.productsprice ? `¥${data.value.productsprice}` : '',
+    },
+    {
+      label: '推广补贴',
+      value: data.value.productstsxzybt ? `¥${data.value.productstsxzybt}` : '',
+    },
+    {
+      label: '中央补贴',
+      value: data.value.productszybt ? `¥${data.value.productszybt}` : '',
+    },
+    { label: '产品序列号', value: data.value.productssn },
+    { label: '发动机编号', value: data.value.productsfdbh },
+    { label: '发动机名称', value: data.value.productsfdmc },
+    { label: '生产企业', value: data.value.scqyinfomc },
+    { label: '企业地址', value: data.value.scqyinfoaddress },
+    { label: '法人姓名', value: data.value.scqyinfofrmc },
+    { label: '销售姓名', value: data.value.scqyinfoxsmc },
+    { label: '销售电话', value: data.value.scqyinfoxsphone },
+    { label: '统一社会信用代码', value: data.value.scqyinfoshtydm },
+    {
+      label: '注册资本',
+      value: data.value.scqyinfozczb ? `¥${data.value.scqyinfozczb}` : '',
+    },
+  ];
+});
+
+// 优惠券状态映射
+const getCouponStatusTag = (status: number) => {
+  const statusMap = {
+    0: { text: '申请中', type: 'info' },
+    1: { text: '审核通过', type: 'success' },
+    2: { text: '审核不通过', type: 'danger' },
+  } as const;
+  return (
+    statusMap[status as keyof typeof statusMap] || {
+      text: '未知',
+      type: 'warning',
+    }
+  );
+};
+
+// 使用状态映射
+const getUsedStatusTag = (status: number) => {
+  const statusMap = {
+    0: { text: '未使用', type: 'info' },
+    1: { text: '已使用', type: 'success' },
+  } as const;
+  return (
+    statusMap[status as keyof typeof statusMap] || {
+      text: '未知',
+      type: 'warning',
+    }
+  );
+};
+
+// 优惠券信息
+const couponInfo = computed(() => {
+  if (!data.value) return [];
+
+  return [
+    { label: '优惠券ID', value: data.value.coupon2sid },
+    { label: '优惠券代码', value: data.value.coupon2code },
+    { label: '优惠券名称', value: data.value.coupon2mc },
+    { label: '申请时间', value: data.value.coupon2adddatetime },
+    { label: '审核时间', value: data.value.coupon2reviewdatetime || '未审核' },
+    {
+      label: '优惠券状态',
+      value: data.value.coupon2sype,
+      isTag: true,
+      tagType: 'couponStatus',
+    },
+    {
+      label: '使用状态',
+      value: data.value.coupon2isused,
+      isTag: true,
+      tagType: 'usedStatus',
+    },
+    // { label: '可用产品ID', value: data.value.coupon2productids },
+    // { label: '关联主券ID', value: data.value.coupon2coupon1id },
+    { label: '订单编号', value: data.value.ordersnumber },
+    {
+      label: '订单总价',
+      value: data.value.orderstotalprice
+        ? `¥${data.value.orderstotalprice}`
+        : '',
+    },
+    {
+      label: '优惠价格',
+      value: data.value.ordersyhprice ? `¥${data.value.ordersyhprice}` : '',
+    },
+    {
+      label: '折扣价格',
+      value: data.value.ordersdiscountprice
+        ? `¥${data.value.ordersdiscountprice}`
+        : '',
+    },
+    { label: '下单时间', value: data.value.ordersorderdate },
+    { label: '经销商名称', value: data.value.jxsname },
+  ];
+});
+
+const [Modal, modalApi] = useVbenModal({
+  title: '优惠券详情',
+  class: 'w-10/12 max-w-8xl',
+  showCancelButton: false,
+  confirmText: '关闭',
+  onConfirm() {
+    modalApi.close();
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const modalData = modalApi.getData();
+
+      if (modalData?.row?.coupon2sid) {
+        try {
+          loading.value = true;
+          const detailData = await getCoupon2DetailApi({
+            coupon2sid: modalData.row.coupon2sid,
+          });
+          data.value = detailData;
+        } catch (error) {
+          console.error('获取优惠券详情失败:', error);
+        } finally {
+          loading.value = false;
+        }
+      }
+    } else {
+      data.value = null;
+    }
+  },
+});
+
+function openDetailModal(rowData: any) {
+  modalApi.setData({ row: rowData });
+  modalApi.open();
+}
+
+defineExpose({
+  openDetailModal,
+});
+</script>
+
+<template>
+  <Modal>
+    <div v-loading="loading" class="space-y-6 p-4">
+      <!-- 申请人信息 -->
+      <div>
+        <el-divider content-position="left">
+          <span class="text-lg font-semibold text-gray-800">申请人信息</span>
+        </el-divider>
+        <el-descriptions :column="3" border class="mb-4" label-width="120px">
+          <el-descriptions-item
+            v-for="item in applicantInfo"
+            :key="item.label"
+            :label="item.label"
+            width="20%"
+          >
+            {{ item.value || '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 产品信息 -->
+      <div>
+        <el-divider content-position="left">
+          <span class="text-lg font-semibold text-gray-800">产品信息</span>
+        </el-divider>
+        <el-descriptions :column="3" border class="mb-4" label-width="120px">
+          <el-descriptions-item
+            v-for="item in productInfo"
+            :key="item.label"
+            :label="item.label"
+            width="20%"
+          >
+            {{ item.value || '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 优惠券信息 -->
+      <div>
+        <el-divider content-position="left">
+          <span class="text-lg font-semibold text-gray-800">优惠券信息</span>
+        </el-divider>
+        <el-descriptions :column="3" border class="mb-4" label-width="120px">
+          <el-descriptions-item
+            v-for="item in couponInfo"
+            :key="item.label"
+            :label="item.label"
+            width="20%"
+          >
+            <!-- 优惠券状态标签 -->
+            <ElTag
+              v-if="item.isTag && item.tagType === 'couponStatus'"
+              :type="getCouponStatusTag(item.value).type"
+            >
+              {{ getCouponStatusTag(item.value).text }}
+            </ElTag>
+            <!-- 使用状态标签 -->
+            <ElTag
+              v-else-if="item.isTag && item.tagType === 'usedStatus'"
+              :type="getUsedStatusTag(item.value).type"
+            >
+              {{ getUsedStatusTag(item.value).text }}
+            </ElTag>
+            <!-- 普通文本 -->
+            <span v-else>{{ item.value || '-' }}</span>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </div>
+  </Modal>
+</template>

+ 14 - 27
apps/web-ele/src/views/examine-manage/examine-coupon/form.vue

@@ -18,11 +18,10 @@ import { $t } from '#/locales';
 
 const emit = defineEmits(['finish']);
 const data = ref();
-const formType = ref<'create' | 'detail' | 'edit'>('create');
+const formType = ref<'create' | 'edit'>('create');
 
 const titleMap = {
   create: '新增优惠券',
-  detail: '优惠券详情',
   edit: '编辑优惠券',
 } as const;
 
@@ -40,12 +39,6 @@ const [BaseForm, baseFormApi] = useVbenForm({
   },
   wrapperClass: 'grid-cols-1 lg:grid-cols-2',
   schema: [
-    // { title: '优惠券代码', field: 'coupon2code' },
-    // { title: '审核时间', field: 'coupon2reviewdatetime' },
-    // { title: '优惠券状态', field: 'coupon2sype' },
-    // { title: '使用状态', field: 'coupon2isused' },
-    // { title: '可用产品', field: 'coupon2productids' },
-    // { title: '关联主券ID', field: 'coupon2coupon1id' },
     {
       component: 'Input',
       fieldName: 'coupon2code',
@@ -145,11 +138,6 @@ const [Modal, modalApi] = useVbenModal({
           } as any),
       };
 
-      if (formType.value === 'detail') {
-        modalApi.close();
-        return;
-      }
-
       await apiMap[formType.value]();
       ElMessage.success('操作成功');
 
@@ -163,10 +151,6 @@ const [Modal, modalApi] = useVbenModal({
 
       formType.value = data.value.formType;
 
-      baseFormApi.setState({
-        commonConfig: { disabled: formType.value === 'detail' },
-      });
-
       if (data.value.formType === 'create') {
         baseFormApi.setValues({
           coupon2reviewdatetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
@@ -174,18 +158,21 @@ const [Modal, modalApi] = useVbenModal({
         return;
       }
 
-      try {
-        modalApi.setState({ loading: true });
-        const detailData = await getCoupon2DetailApi({
-          coupon2sid: data.value.row.coupon2sid,
-        });
+      // 编辑模式,加载详情数据
+      if (data.value.formType === 'edit') {
+        try {
+          modalApi.setState({ loading: true });
+          const detailData = await getCoupon2DetailApi({
+            coupon2sid: data.value.row.coupon2sid,
+          });
 
-        baseFormApi.setValues(detailData);
-      } catch {
-        // console.log(error);
-      }
+          baseFormApi.setValues(detailData);
+        } catch {
+          // console.log(error);
+        }
 
-      modalApi.setState({ loading: false });
+        modalApi.setState({ loading: false });
+      }
     }
   },
 });

+ 27 - 17
apps/web-ele/src/views/examine-manage/examine-coupon/index.vue

@@ -6,7 +6,7 @@ import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
 import { h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { MdiCheckboxMultipleMarked, MdiDetail } from '@vben/icons';
+import { MdiCheckboxMultipleMarked, MdiDetail, MdiEdit } from '@vben/icons';
 
 import { ElTag } from 'element-plus';
 
@@ -15,6 +15,7 @@ import { getCoupon2ListApi } from '#/api/coupon/coupon2';
 import { $t } from '#/locales';
 
 import AuditForm from './audit-form.vue';
+import DetailForm from './detail.vue';
 import Coupon1Form from './form.vue';
 
 const formOptions: VbenFormProps = {
@@ -88,9 +89,10 @@ const gridOptions: VxeGridProps<any> = {
   columns: [
     { title: '优惠券ID', field: 'coupon2sid', sortable: true },
     { title: '优惠券代码', field: 'coupon2code', sortable: true },
-    { title: '申请时间', field: 'coupon2adddatetime', sortable: true },
-    { title: '审核时间', field: 'coupon2reviewdatetime', sortable: true },
-    { title: '申请人ID', field: 'coupon2userid', sortable: true },
+    { title: '优惠券名称', field: 'coupon2mc', sortable: true },
+    { title: '可用产品', field: 'productsname', sortable: true },
+    { title: '购机者', field: 'usersname', sortable: true },
+    // { title: '申请人ID', field: 'coupon2userid', sortable: true },
     {
       title: '优惠券状态',
       field: 'coupon2sype',
@@ -130,8 +132,9 @@ const gridOptions: VxeGridProps<any> = {
         },
       },
     },
-    { title: '可用产品', field: 'coupon2productids', sortable: true },
-    { title: '关联主券ID', field: 'coupon2coupon1id', sortable: true },
+    // { title: '关联主券ID', field: 'coupon2coupon1id', sortable: true },
+    { title: '申请时间', field: 'coupon2adddatetime', sortable: true },
+    { title: '审核时间', field: 'coupon2reviewdatetime', sortable: true },
     {
       title: '操作',
       field: 'action',
@@ -163,17 +166,18 @@ const [Modal, modalApi] = useVbenModal({
 
 // Add ref for audit-form.vue
 const auditFormRef = ref<any>(null);
+// Add ref for detail-form.vue
+const detailFormRef = ref<any>(null);
 
 /* 编辑 */
-// function handleEdit(row: any) {
-//   modalApi.setState({ showCancelButton: true });
-//   modalApi.setData({ formType: 'edit', row }).open();
-// }
+function handleEdit(row: any) {
+  modalApi.setState({ showCancelButton: true });
+  modalApi.setData({ formType: 'edit', row }).open();
+}
 
 /* 详情 */
 function handleDetail(row: any) {
-  modalApi.setState({ showCancelButton: false });
-  modalApi.setData({ formType: 'detail', row }).open();
+  detailFormRef.value?.openDetailModal(row);
 }
 
 /* 审核 */
@@ -184,14 +188,19 @@ function handleAudit(row: any) {
 function handleFinish() {
   gridApi.reload();
 }
+
+// 领取优惠劵
+function handleCreate() {
+  console.log('领取优惠劵');
+}
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid table-title="优惠券列表">
-      <!-- <template #toolbar-tools>
-        <el-button type="primary" @click="handleCreate"> 新增 </el-button>
-      </template> -->
+      <template #toolbar-tools>
+        <el-button type="primary" @click="handleCreate"> 领取优惠劵 </el-button>
+      </template>
       <template #action="{ row }">
         <el-tooltip
           class="box-item"
@@ -206,7 +215,7 @@ function handleFinish() {
             class="!p-2"
           />
         </el-tooltip>
-        <!-- <el-tooltip
+        <el-tooltip
           class="box-item"
           effect="dark"
           content="编辑"
@@ -218,7 +227,7 @@ function handleFinish() {
             :icon="MdiEdit"
             class="!p-2"
           />
-        </el-tooltip> -->
+        </el-tooltip>
         <el-tooltip
           class="box-item"
           effect="dark"
@@ -237,5 +246,6 @@ function handleFinish() {
     </Grid>
     <Modal @finish="handleFinish" />
     <AuditForm ref="auditFormRef" @finish="handleFinish" />
+    <DetailForm ref="detailFormRef" />
   </Page>
 </template>