From 5eb33d4f7e7ebeebed3466774ddd61f6db27c15a Mon Sep 17 00:00:00 2001
From: lcc <benwuzhijing@nuzanyun.com>
Date: Fri, 16 May 2025 00:59:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BD=A6=E5=9E=8B=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/api/car/product/index.js            |  62 ++++
 .../src/components/RegionsSelect/load-data.js |   5 +-
 admin/src/components/UploadImg/index.vue      | 108 +++++++
 admin/src/layout/components/header-tools.vue  |   8 +-
 .../src/views/car/product/components/edit.vue | 248 ++++++++++++++++
 admin/src/views/car/product/index.vue         | 266 ++++++++++++++++++
 6 files changed, 693 insertions(+), 4 deletions(-)
 create mode 100644 admin/src/api/car/product/index.js
 create mode 100644 admin/src/components/UploadImg/index.vue
 create mode 100644 admin/src/views/car/product/components/edit.vue
 create mode 100644 admin/src/views/car/product/index.vue

diff --git a/admin/src/api/car/product/index.js b/admin/src/api/car/product/index.js
new file mode 100644
index 0000000..6c365dc
--- /dev/null
+++ b/admin/src/api/car/product/index.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request';
+
+/**
+ * 分页查询专题
+ * @param params 查询条件
+ */
+export async function pageProduct(params) {
+  const res = await request.get('/car/product/page', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * @param data
+ */
+export async function addProduct(data) {
+  const res = await request.post('/car/product', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * @param data
+ */
+export async function updateProduct(data) {
+  const res = await request.put('/car/product', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function updateProductStatus(id, status) {
+  const res = await request.put('/car/product/status', {
+    id,
+    status
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除
+ * @param ids id集合
+ */
+export async function removeProduct(ids) {
+  const res = await request.delete('/car/product/delete', {
+    data: { ids }
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/admin/src/components/RegionsSelect/load-data.js b/admin/src/components/RegionsSelect/load-data.js
index 3e89e9a..2412469 100644
--- a/admin/src/components/RegionsSelect/load-data.js
+++ b/admin/src/components/RegionsSelect/load-data.js
@@ -1,5 +1,6 @@
 import request from '@/utils/request';
-const BASE_URL = process.env.BASE_URL;
+import { API_BASE_URL } from '@/config/setting';
+const BASE_URL = API_BASE_URL;
 let reqPromise;
 
 /**
@@ -9,7 +10,7 @@ export function getRegionsData() {
   if (!reqPromise) {
     reqPromise = new Promise((resolve, reject) => {
       request
-        .get(BASE_URL + 'json/regions-data.json', {
+        .get(BASE_URL + '/common/regionsData', {
           baseURL: ''
         })
         .then((res) => {
diff --git a/admin/src/components/UploadImg/index.vue b/admin/src/components/UploadImg/index.vue
new file mode 100644
index 0000000..62bd53d
--- /dev/null
+++ b/admin/src/components/UploadImg/index.vue
@@ -0,0 +1,108 @@
+<!-- 上传图片组件 -->
+<template>
+  <ele-image-upload
+    v-model="imgs"
+    :limit="limit"
+    :drag="true"
+    :multiple="multiple"
+    :upload-handler="onHandler"
+    @upload="onUpload"
+  />
+</template>
+
+<script>
+  import EleImageUpload from 'ele-admin/es/ele-image-upload';
+  import request from '@/utils/request';
+  export default {
+    components: {
+      EleImageUpload
+    },
+    name: 'UploadImg',
+    props: {
+      limit: {
+        type: Number,
+        default: 1
+      },
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      images: {
+        default: null,
+        type: Array
+      }
+    },
+    data() {
+      return {
+        imgs: []
+      };
+    },
+    mounted() {
+      if (this.images && this.images.length > 0) {
+        this.imgs = this.images;
+      }
+    },
+    methods: {
+      emitInput() {
+        this.$emit('input', this.imgs);
+      },
+      onHandler(file) {
+        const item = {
+          file,
+          uid: file.uid,
+          name: file.name,
+          progress: 0,
+          status: null
+        };
+        if (!file.type.startsWith('image')) {
+          this.$message.error('只能选择图片');
+          return;
+        }
+        if (file.size / 1024 / 1024 > 2) {
+          this.$message.error('大小不能超过 2MB');
+          return;
+        }
+        item.url = window.URL.createObjectURL(file);
+        // 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
+        this.imgs.push(item);
+        this.onUpload(item);
+      },
+      /* 上传 item */
+      onUpload(item) {
+        let that = this;
+        item.status = 'uploading';
+        const formData = new FormData();
+        formData.append('file', item.file);
+        request({
+          url: '/upload',
+          method: 'post',
+          data: formData,
+          onUploadProgress: (e) => {
+            if (e.lengthComputable) {
+              item.progress = (e.loaded / e.total) * 100;
+            }
+          }
+        })
+          .then((res) => {
+            if (res.data.code === 0) {
+              item.status = 'done';
+              item.url = res.data.data.full_url;
+              item.fileUrl = res.data.data.url;
+              that.emitInput();
+            }
+          })
+          .catch(() => {
+            item.status = 'exception';
+          });
+      }
+    },
+    watch: {
+      imgs: function () {
+        this.emitInput();
+      },
+      images: function () {
+        this.imgs = this.images;
+      }
+    }
+  };
+</script>
diff --git a/admin/src/layout/components/header-tools.vue b/admin/src/layout/components/header-tools.vue
index 1857305..e338ba4 100644
--- a/admin/src/layout/components/header-tools.vue
+++ b/admin/src/layout/components/header-tools.vue
@@ -10,13 +10,17 @@
       <i v-else class="el-icon-_screen-full"></i>
     </div>
     <!-- 语言切换 -->
+    <!--
     <div class="ele-admin-header-tool-item">
       <i18n-icon />
     </div>
+    -->
     <!-- 消息通知 -->
+    <!--
     <div class="ele-admin-header-tool-item">
       <header-notice />
     </div>
+    -->
     <!-- 用户信息 -->
     <div class="ele-admin-header-tool-item">
       <el-dropdown @command="onUserDropClick">
@@ -59,12 +63,12 @@
   // import HeaderNotice from './header-notice.vue';
   import PasswordModal from './password-modal.vue';
   import SettingDrawer from './setting-drawer.vue';
-  import I18nIcon from './i18n-icon.vue';
+  // import I18nIcon from './i18n-icon.vue';
   import { logout } from '@/utils/page-tab-util';
 
   export default {
     // components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
-    components: { PasswordModal, SettingDrawer, I18nIcon },
+    components: { PasswordModal, SettingDrawer },
     props: {
       // 是否是全屏
       fullscreen: Boolean
diff --git a/admin/src/views/car/product/components/edit.vue b/admin/src/views/car/product/components/edit.vue
new file mode 100644
index 0000000..db27517
--- /dev/null
+++ b/admin/src/views/car/product/components/edit.vue
@@ -0,0 +1,248 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="800px"
+    :visible="visible"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    :title="isUpdate ? '修改产品' : '添加产品'"
+    @update:visible="updateVisible"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="产品标题:" prop="title">
+        <el-input
+          clearable
+          :maxlength="60"
+          v-model="form.title"
+          placeholder="请输入产品标题"
+        />
+      </el-form-item>
+      <el-form-item label="推广图片:" prop="imgs">
+        <upload-img
+          v-model="form.imgs"
+          :images="form.imgs"
+          :limit="10"
+          :multiple="true"
+        />
+        <!--
+        <div class="ele-text-secondary">
+          尺寸宽度750
+        </div>
+        -->
+      </el-form-item>
+      <el-form-item label="推广范围:" prop="">
+        <regions-select
+          v-model="form.provinceCity"
+          placeholder="全国"
+          type="provinceCity"
+          class="ele-fluid"
+        />
+      </el-form-item>
+      <el-form-item label="有效期:" prop="dateRange">
+        <el-date-picker
+          v-model="form.dateRange"
+          type="datetimerange"
+          unlink-panels
+          range-separator="~"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          class="ele-fluid"
+        />
+      </el-form-item>
+      <el-form-item label="一级线索佣金:">
+        <el-input
+          clearable
+          :maxlength="60"
+          placeholder=""
+          v-model="form.firstLevelClues"
+        />
+      </el-form-item>
+      <el-form-item label="一级成交佣金:">
+        <el-input
+          clearable
+          :maxlength="60"
+          placeholder=""
+          v-model="form.firstLevelDeal"
+        />
+      </el-form-item>
+      <el-form-item label="二级线索佣金:">
+        <el-input
+          clearable
+          :maxlength="60"
+          placeholder=""
+          v-model="form.secondLevelClues"
+        />
+      </el-form-item>
+      <el-form-item label="二级成交佣金:">
+        <el-input
+          clearable
+          :maxlength="60"
+          placeholder=""
+          v-model="form.secondLevelDeal"
+        />
+      </el-form-item>
+      <el-form-item label="人群画像:">
+        <el-checkbox-group v-model="form.crowdProfiling">
+          <el-checkbox
+            v-for="value in crowdProfiling"
+            :label="value.dictDataId"
+            :key="value.dictDataId"
+            >{{ value.dictDataName }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { addProduct, updateProduct } from '@/api/car/product';
+  import { listDictionaryData } from '@/api/system/dictionary-data';
+  import UploadImg from '@/components/UploadImg/index.vue';
+  import RegionsSelect from '@/components/RegionsSelect/index.vue';
+
+  export default {
+    components: {
+      UploadImg,
+      RegionsSelect
+    },
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 全部机构
+      organizationList: Array,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      const defaultForm = {
+        id: null,
+        title: '',
+        dateRange: '',
+        imgs: [],
+        provinceCity: [],
+        firstLevelClues: '',
+        secondLevelClues: '',
+        firstLevelDeal: '',
+        secondLevelDeal: '',
+        crowdProfiling: []
+      };
+      return {
+        editVersion: false,
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        rules: {
+          title: [
+            {
+              required: true,
+              message: '请输入活动标题',
+              trigger: 'blur'
+            }
+          ],
+          imgs: [
+            {
+              required: true,
+              message: '请上传推广图',
+              trigger: 'blur'
+            }
+          ],
+          dateRange: [
+            {
+              required: true,
+              message: '请选择有效时间',
+              trigger: 'blur'
+            }
+          ]
+        },
+        // 提交状态
+        loading: false,
+        // 是否是修改
+        isUpdate: false,
+        crowdProfiling: []
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created() {
+      console.log('333');
+      listDictionaryData({ dictCode: 'crowdProfiling' }).then((data) => {
+        this.crowdProfiling = data;
+        console.log(this.crowdProfiling);
+      });
+    },
+    methods: {
+      /* 添加海报描述 */
+      addShareTitle() {
+        this.form.shareTitle.push('');
+      },
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          const data = {
+            ...this.form
+          };
+          const saveOrUpdate = this.isUpdate ? updateProduct : addProduct;
+          saveOrUpdate(data)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              this.$message.error(e.message);
+            });
+        });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    },
+    watch: {
+      visible(visible) {
+        this.editVersion = false;
+        if (visible) {
+          this.editVersion = true;
+          if (this.data) {
+            this.$util.assignObject(this.form, {
+              ...this.data
+            });
+            this.isUpdate = true;
+          } else {
+            this.form.imgs = [];
+            this.isUpdate = false;
+          }
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+        }
+      }
+    }
+  };
+</script>
+<style>
+  .ele-image-upload-list .ele-image-upload-item {
+    margin-top: 2px;
+    margin-bottom: 2px;
+  }
+</style>
diff --git a/admin/src/views/car/product/index.vue b/admin/src/views/car/product/index.vue
new file mode 100644
index 0000000..836fb80
--- /dev/null
+++ b/admin/src/views/car/product/index.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 搜索表单 -->
+      <el-form label-width="77px" class="ele-form-search">
+        <el-row :gutter="15">
+          <el-col :md="6" :sm="12">
+            <el-form-item label="名称:">
+              <el-input
+                placeholder="请输入名称"
+                clearable
+                v-model="where.title"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :md="6" :sm="12">
+            <div class="ele-form-actions">
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                class="ele-btn-icon"
+                @click="reload"
+              >
+                查询
+              </el-button>
+              <el-button @click="reset">重置</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        :selection.sync="selection"
+        cache-key="syliveActivityTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            @click="edit()"
+          >
+            新建
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            icon="el-icon-delete"
+            class="ele-btn-icon"
+            @click="removeBatch"
+          >
+            删除
+          </el-button>
+        </template>
+        <!-- 状态列 -->
+        <template v-slot:status="{ row }">
+          <el-switch
+            :active-value="1"
+            :inactive-value="0"
+            v-model="row.status"
+            @change="editStatus(row)"
+          />
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            @click="edit(row)"
+            icon="el-icon-edit"
+          >
+            修改
+          </el-link>
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此数据吗？"
+            @confirm="remove(row)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!-- 编辑弹窗 -->
+    <edit
+      :data="current"
+      :visible.sync="showEdit"
+      :organization-list="organizationList"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script>
+  import {
+    pageProduct,
+    removeProduct,
+    updateProductStatus
+  } from '@/api/car/product';
+  import edit from './components/edit.vue';
+
+  export default {
+    name: 'carProduct',
+    components: { edit },
+    data() {
+      return {
+        where: {
+          title: ''
+        },
+        // 门店数据
+        organizationList: [],
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'selection',
+            type: 'selection',
+            width: 45,
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            prop: 'id',
+            label: 'ID',
+            minWidth: 40,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'title',
+            label: '产品信息',
+            showOverflowTooltip: true,
+            minWidth: 200
+          },
+          {
+            prop: 'cityName',
+            label: '推广范围',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'timeLaunch',
+            label: '上架时间',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'status',
+            label: '上架状态',
+            align: 'center',
+            width: 80,
+            resizable: false,
+            slot: 'status',
+            showOverflowTooltip: true
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 380,
+            align: 'center',
+            resizable: false,
+            slot: 'action'
+          }
+        ],
+        // 表格选中数据
+        selection: [],
+        // 当前编辑数据
+        current: null,
+        // 是否显示编辑弹窗
+        showEdit: false,
+        // 是否显示编辑商品弹窗
+        showEditItem: false,
+        // 是否显示编辑券弹窗
+        showEditCoupon: false,
+        // 是否显示编辑券弹窗
+        showEditDraw: false,
+        showEditVisitTag: false,
+        // 是否显示二维码弹窗
+        showCode: false
+      };
+    },
+    created() {
+      //this.organizationQuery();
+    },
+    methods: {
+      edit(row) {
+        this.current = row;
+        this.showEdit = true;
+      },
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return pageProduct({ ...where, ...order, page, limit });
+      },
+      /* 刷新表格 */
+      reload() {
+        this.$refs.table.reload({ page: 1, where: this.where });
+      },
+      /* 删除 */
+      remove(row) {
+        const loading = this.$loading({ lock: true });
+        removeProduct(row.id)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+            this.reload();
+          })
+          .catch((e) => {
+            loading.close();
+            this.$message.error(e.message);
+          });
+      },
+      /* 批量删除 */
+      removeBatch() {
+        if (!this.selection.length) {
+          this.$message.error('请至少选择一条数据');
+          return;
+        }
+        this.$confirm('确定要删除选中数据吗?', '提示', {
+          type: 'warning'
+        })
+          .then(() => {
+            const loading = this.$loading({ lock: true });
+            removeProduct(this.selection.map((d) => d.id))
+              .then((msg) => {
+                loading.close();
+                this.$message.success(msg);
+                this.reload();
+              })
+              .catch((e) => {
+                loading.close();
+                this.$message.error(e.message);
+              });
+          })
+          .catch(() => {});
+      },
+      /* 更改状态 */
+      editStatus(row) {
+        const loading = this.$loading({ lock: true });
+        updateProductStatus(row.id, row.status)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+            this.reload();
+          })
+          .catch((e) => {
+            loading.close();
+            this.$message.error(e.message);
+          });
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+      }
+    }
+  };
+</script>