助力订单数据列表

src/views/marketing/ipMrakup/datalist/components/page-search.vue

@@ -12,43 +12,41 @@
 </template>
 
 <script setup>
-  import { reactive, ref, defineEmits, getCurrentInstance } from 'vue';
+  import { reactive, ref, defineEmits } from 'vue';
   import ProSearch from '@/components/CommonPage/ProSearch2.vue';
 
-  let { proxy } = getCurrentInstance();
-  const emit = defineEmits(['search', 'exportExcel']);
+  const emit = defineEmits(['search']);
 
   const formItems = reactive([
     {
       type: 'input',
-      label: '活动名称',
-      prop: 'activityName',
-      placeholder: '请输入活动名称'
+      label: '活动省份',
+      prop: 'provinceName',
+      placeholder: '请输入活动省份'
     },
     {
       type: 'input',
       label: '活动地区',
-      prop: 'activityRegion',
+      prop: 'cityName',
       placeholder: '请输入活动地区'
     },
     {
-      type: 'date',
-      label: '开始时间',
-      prop: 'startTime',
-      props: {
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        format: 'YYYY-MM-DD HH:mm:ss',
-        placeholder: '开始时间',
-      }
-    },
-    {
-      type: 'date',
-      label: '结束时间',
-      prop: 'endTime',
-      props: {
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        format: 'YYYY-MM-DD HH:mm:ss',
-        placeholder: '结束时间',
+        type: 'daterange',
+        label: '申请时间',
+        prop: 'timeRange',
+        style: {
+          minWidth: '300px'
+        },
+        props: {
+          valueFormat: 'YYYY-MM-DD',
+          format: 'YYYY-MM-DD',
+          startPlaceholder: '开始日期',
+          endPlaceholder: '结束日期',
+          onChange: (value) => {
+            initKeys.startTime = value ? value[0] : '';
+            initKeys.endTime = value ? value[1] : '';
+            searchRef.value?.setData(initKeys);
+          }
       }
     },
     {
@@ -60,18 +58,18 @@
     {
       type: 'input',
       label: '订单编号',
-      prop: 'orderNo',
+      prop: 'orderId',
       placeholder: '请输入订单编号'
     }
   ]);
 
   const initKeys = reactive({
-    activityName: '',
-    activityRegion: '',
+    provinceName: '',
+    cityName: '',
     startTime: '',
     endTime: '',
     userId: '',
-    orderNo: ''
+    orderId: ''
   });
 
   const searchRef = ref(null);

src/views/marketing/ipMrakup/datalist/components/share-info.vue

@@ -1,175 +1,62 @@
-<!-- 分享信息弹窗 -->
+<!-- 编辑弹窗 -->
 <template>
-  <el-dialog
-    v-model="visible"
-    title="分享IP信息"
-    width="600px"
-    :close-on-click-modal="false"
-    :append-to-body="true"
-  >
-    <el-form ref="formRef" :model="form" label-width="100px" :rules="rules">
-      <el-form-item label="IP标题" prop="name">
-        <el-input v-model="form.name" :disabled="true" />
-      </el-form-item>
-      <el-form-item label="分享方式" prop="shareType">
-        <el-select v-model="form.shareType" placeholder="请选择分享方式" style="width: 100%">
-          <el-option label="微信" value="wechat" />
-          <el-option label="QQ" value="qq" />
-          <el-option label="微博" value="weibo" />
-          <el-option label="链接" value="link" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="分享标题" prop="shareTitle">
-        <el-input v-model="form.shareTitle" placeholder="请输入分享标题" />
-      </el-form-item>
-      <el-form-item label="分享描述" prop="shareDesc">
-        <el-input v-model="form.shareDesc" type="textarea" rows="3" placeholder="请输入分享描述" />
-      </el-form-item>
-      <el-form-item label="分享图片" prop="shareImg">
-        <el-upload
-          class="share-upload"
-          action="#"
-          :http-request="handleUpload"
-          :show-file-list="false"
-          :before-upload="beforeUpload"
-        >
-          <img v-if="form.shareImg" :src="form.shareImg" class="share-image" />
-          <el-icon v-else class="share-upload-icon"><Plus /></el-icon>
-        </el-upload>
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <el-row justify="center">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确认分享</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
+    <ele-modal form :width="800" v-model="visible" title="分享助力信息">
+        <ele-data-table
+            ref="tableRef"
+            class="flex-1"
+            row-key="id"
+            :columns="columns"
+            :data="dataList"
+        ></ele-data-table>
+
+        <template #footer>
+            <el-button @click="handleCancel">关闭</el-button>
+        </template>
+    </ele-modal>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-import { getCurrentInstance } from 'vue';
-import { Plus } from '@element-plus/icons-vue';
-
-const { proxy } = getCurrentInstance();
-
-// 弹窗可见性
-const visible = ref(false);
-
-// 表单引用
-const formRef = ref(null);
-
-// 表单数据
-const form = reactive({
-  id: '',
-  name: '',
-  shareType: 'wechat',
-  shareTitle: '',
-  shareDesc: '',
-  shareImg: ''
-});
-
-// 表单验证规则
-const rules = {
-  shareType: [
-    { required: true, message: '请选择分享方式', trigger: 'change' }
-  ],
-  shareTitle: [
-    { required: true, message: '请输入分享标题', trigger: 'blur' },
-    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
-  ],
-  shareDesc: [
-    { required: true, message: '请输入分享描述', trigger: 'blur' },
-    { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
-  ]
-};
-
-// 打开弹窗
-const openDialog = (row) => {
-  visible.value = true;
-  form.id = row.id;
-  form.name = row.name;
-  form.shareTitle = row.name;
-  form.shareDesc = row.description || '';
-  form.shareImg = row.image || '';
-};
-
-// 上传前检查
-const beforeUpload = (file) => {
-  const isJPG = file.type === 'image/jpeg';
-  const isPNG = file.type === 'image/png';
-  const isLt2M = file.size / 1024 / 1024 < 2;
-
-  if (!isJPG && !isPNG) {
-    proxy.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-    return false;
-  }
-  if (!isLt2M) {
-    proxy.$message.error('上传图片大小不能超过 2MB!');
-    return false;
-  }
-  return true;
-};
-
-// 处理上传
-const handleUpload = (options) => {
-  const { file } = options;
-  // 这里应该替换为实际的上传API
-  const formData = new FormData();
-  formData.append('file', file);
-
-  // 模拟上传
-  setTimeout(() => {
-    // 模拟一个图片URL
-    form.shareImg = URL.createObjectURL(file);
-  }, 300);
-};
-
-// 提交分享
-const handleSubmit = () => {
-  formRef.value.validate((valid) => {
-    if (valid) {
-      // 这里应该替换为实际的分享API调用
-      proxy.$message.success('分享成功');
-      visible.value = false;
+    import { ref, reactive, nextTick } from 'vue';
+    import request from '@/utils/request';
+
+    /** 弹窗是否打开 */
+    const visible = defineModel({ type: Boolean });
+
+    /** 关闭弹窗 */
+    const handleCancel = () => {
+        visible.value = false;
+    };
+
+    /** 弹窗打开事件 */
+    let dataList = ref([]);
+    const tableRef = ref();
+    const handleOpen = (row) => {
+        visible.value = true;
+        nextTick(() => {
+            fetchPage(row.orderId);
+        });
+    };
+
+    function fetchPage(orderId) {
+        request.get(`/activity/activityUpsellInfo/orderHelpList/${orderId}`).then((res) => {
+            if (res.data && res.data.code == 200) {
+                dataList.value = res.data.data;
+            } else {
+                dataList.value = [];
+            }
+        });
     }
-  });
-};
 
-// 向外暴露方法
-defineExpose({
-  openDialog
-});
+    // 表格数据
+    const columns = reactive([
+        { label: '用户UID', prop: 'userId' },
+        { label: '是否下单', prop: 'orderStatus', formatter: (row) => row.orderStatus === 1 ? '是' : '否' },
+        { label: '订单总本数', prop: 'orderTotalNum' },
+        { label: '订单总金额', prop: 'orderTotalMoney' },
+        { label: '加价金额', prop: 'orderTotalUpsellMoney' }
+    ]);
+
+    defineExpose({
+        handleOpen
+    });
 </script>
-
-<style lang="scss" scoped>
-.share-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  width: 148px;
-  height: 148px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    border-color: #409eff;
-  }
-
-  .share-upload-icon {
-    font-size: 28px;
-    color: #8c939d;
-  }
-
-  .share-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-</style>

src/views/marketing/ipMrakup/datalist/components/view-detail.vue

@@ -1,84 +0,0 @@
-<!-- 查看详情弹窗 -->
-<template>
-  <el-dialog
-    v-model="visible"
-    title="IP详情"
-    width="800px"
-    :close-on-click-modal="false"
-    :append-to-body="true"
-  >
-    <el-descriptions :column="2" border>
-      <el-descriptions-item label="IP序号">{{ detail.id }}</el-descriptions-item>
-      <el-descriptions-item label="IP标题">{{ detail.name }}</el-descriptions-item>
-      <el-descriptions-item label="发布时间">{{ detail.time }}</el-descriptions-item>
-      <el-descriptions-item label="类型">{{ detail.type }}</el-descriptions-item>
-      <el-descriptions-item label="来源">{{ detail.source }}</el-descriptions-item>
-      <el-descriptions-item label="状态">
-        <el-tag type="success" v-if="detail.status === 1">已启用</el-tag>
-        <el-tag type="danger" v-else>已禁用</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="浏览量">{{ detail.views }}</el-descriptions-item>
-      <el-descriptions-item label="点赞数">{{ detail.likes }}</el-descriptions-item>
-      <el-descriptions-item label="分享次数">{{ detail.shares }}</el-descriptions-item>
-      <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
-      <el-descriptions-item label="IP简介" :span="2">
-        {{ detail.description || '暂无简介' }}
-      </el-descriptions-item>
-    </el-descriptions>
-
-    <template #footer>
-      <el-row justify="center">
-        <el-button @click="visible = false">关闭</el-button>
-        <el-button type="primary" @click="handleShare">分享</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue';
-
-const emit = defineEmits(['share']);
-
-// 弹窗可见性
-const visible = ref(false);
-
-// 详情数据
-const detail = reactive({
-  id: '',
-  name: '',
-  time: '',
-  type: '',
-  source: '',
-  status: 0,
-  views: 0,
-  likes: 0,
-  shares: 0,
-  createTime: '',
-  description: ''
-});
-
-// 打开弹窗
-const openDialog = (row) => {
-  visible.value = true;
-  // 复制行数据到详情对象
-  Object.assign(detail, row);
-};
-
-// 处理分享
-const handleShare = () => {
-  emit('share', detail);
-  visible.value = false;
-};
-
-// 向外暴露方法
-defineExpose({
-  openDialog
-});
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-dialog__body) {
-  padding: 20px;
-}
-</style>

src/views/marketing/ipMrakup/datalist/index.vue

@@ -1,126 +1,107 @@
 <!-- IP营销数据列表 -->
 <template>
-  <ele-page flex-table>
-    <!-- 搜索表单 -->
-    <page-search ref="searchRef" @search="handleSearch" />
+    <ele-page flex-table>
+        <!-- 搜索表单 -->
+        <page-search ref="searchRef" @search="handleSearch" />
 
-    <!-- 表格 -->
-    <ele-card flex-table :bodyStyle="{ padding: 0 }">
-      <CommonTable
-        ref="tableRef"
-        :pageConfig="pageConfig"
-        :columns="columns"
-        :bodyStyle="{ padding: 0 }"
-      >
-        <!-- 操作列 -->
-        <template #action="{ row }">
-          <div class="action-buttons">
-            <el-button
-              type="primary"
-              link
-              v-permission="'ipMarkup:datalist:detail'"
-              @click="handleViewDetail(row)"
+        <!-- 表格 -->
+        <ele-card flex-table :bodyStyle="{ padding: 0 }">
+            <CommonTable
+                ref="tableRef"
+                :pageConfig="pageConfig"
+                :columns="columns"
+                :bodyStyle="{ padding: 0 }"
             >
-              [查看详情]
-            </el-button>
-
-            <el-button
-              type="success"
-              link
-              v-permission="'ipMarkup:datalist:share'"
-              @click="handleShare(row)"
-            >
-              [分享信息]
-            </el-button>
-          </div>
-        </template>
-      </CommonTable>
-    </ele-card>
-
-    <!-- 查看详情弹窗 -->
-    <view-detail ref="detailRef" />
-
-    <!-- 分享信息弹窗 -->
-    <share-info ref="shareRef" />
-  </ele-page>
+                <!-- 操作列 -->
+                <template #action="{ row }">
+                    <div class="action-buttons">
+                        <el-button
+                            type="success"
+                            link
+                            v-permission="'ipMarkup:datalist:share'"
+                            @click="handleShare(row)"
+                        >
+                            [分享信息]
+                        </el-button>
+                    </div>
+                </template>
+            </CommonTable>
+        </ele-card>
+        <!-- 分享信息弹窗 -->
+        <share-info ref="shareRef" />
+    </ele-page>
 </template>
 
 <script setup>
-  import { ref, reactive } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import CommonTable from '@/components/CommonPage/CommonTable.vue';
-  import PageSearch from './components/page-search.vue';
-  import ViewDetail from './components/view-detail.vue';
-  import ShareInfo from './components/share-info.vue';
+    import { ref, reactive } from 'vue';
+    import { ElMessage } from 'element-plus';
+    import CommonTable from '@/components/CommonPage/CommonTable.vue';
+    import PageSearch from './components/page-search.vue';
+    import ShareInfo from './components/share-info.vue';
 
-  // 表格实例
-  const tableRef = ref(null);
-  const searchRef = ref(null);
-  const detailRef = ref(null);
-  const shareRef = ref(null);
+    // 表格实例
+    const tableRef = ref(null);
+    const searchRef = ref(null);
+    const detailRef = ref(null);
+    const shareRef = ref(null);
 
-  // 页面配置
-  const pageConfig = reactive({
-    pageUrl: '/activity/activityUpsellInfo/pagelist',
-    exportUrl: '/activity/activityUpsellInfo/export',
-    fileName: 'IP营销数据列表',
-    cacheKey: 'ipMarketingDataList',
-    rowKey: 'id'
-  });
+    // 页面配置
+    const pageConfig = reactive({
+        pageUrl: '/activity/activityUpsellInfo/upsellOrderList',
+        exportUrl: '/activity/activityUpsellInfo/export',
+        fileName: 'IP营销数据列表',
+        cacheKey: 'ipMarketingDataList',
+        rowKey: 'id'
+    });
 
-  // 表格列配置
-  const columns = ref([
-    { label: '用户UID', prop: 'uid' },
-    { label: '订单编号', prop: 'orderNo' },
-    { label: '参与时间', prop: 'participateTime' },
-    { label: '省份', prop: 'province' },
-    { label: '地区', prop: 'city' },
-    { label: '订单总本数', prop: 'totalBooks' },
-    { label: '加价本数', prop: 'markupBooks' },
-    { label: '订单总金额', prop: 'totalAmount' },
-    { label: '实际加价金额', prop: 'actualMarkupAmount' },
-    {
-      columnKey: 'action',
-      label: '操作',
-      width: 200,
-      align: 'center',
-      slot: 'action',
-      fixed: 'right'
-    }
-  ]);
-
-  // 搜索
-  const handleSearch = (where) => {
-    let data = JSON.parse(JSON.stringify(where));
-    tableRef.value?.reload(data);
-  };
+    // 表格列配置
+    const columns = ref([
+        { label: '用户UID', prop: 'userId' },
+        { label: '订单编号', prop: 'orderId' },
+        { label: '参与时间', prop: 'orderTime', width: 160 },
+        { label: '省份', prop: 'provinceName', formatter: (row) => row.provinceName || '--' },
+        { label: '地区', prop: 'cityName', formatter: (row) => row.cityName || '--' },
+        { label: '订单总本数', prop: 'totalNum' },
+        { label: '加价本数', prop: 'upsellNum' },
+        { label: '订单总金额', prop: 'expectMoney' },
+        { label: '实际加价金额', prop: 'upsellFinalMoney', formatter: (row) => row.upsellFinalMoney || '--' },
+        {
+            columnKey: 'action',
+            label: '操作',
+            width: 120,
+            align: 'center',
+            slot: 'action',
+            fixed: 'right'
+        }
+    ]);
 
-  // 导出Excel
-  const handleExportExcel = () => {
-    tableRef.value?.exportData();
-  };
+    // 搜索
+    const handleSearch = (where) => {
+        let data = JSON.parse(JSON.stringify(where));
+        tableRef.value?.reload(data);
+    };
 
-  // 查看详情
-  const handleViewDetail = (row) => {
-    detailRef.value.openDialog(row);
-  };
+    // 导出Excel
+    const handleExportExcel = () => {
+        tableRef.value?.exportData();
+    };
 
-  // 分享处理
-  const handleShare = (row) => {
-    shareRef.value.openDialog(row);
-  };
-  // 刷新表格
-  const reload = () => {
-    tableRef.value?.reload();
-  };
+    // 分享处理
+    const handleShare = (row) => {
+        shareRef.value?.handleOpen(row);
+    };
+    // 刷新表格
+    const reload = () => {
+        tableRef.value?.reload();
+    };
 
-  defineExpose({
-    reload
-  });
+    defineExpose({
+        reload
+    });
 </script>
 
 <style lang="scss" scoped>
-  .app-container {
-    padding: 15px;
-  }
+    .app-container {
+        padding: 15px;
+    }
 </style>