赠品配置

src/views/group/product/giveaway-configuration/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-card class="box-card">
+    <byTable
+      :source="sourceList.data"
+      :pagination="sourceList.pagination"
+      :config="config"
+      :loading="loading"
+      :searchConfig="searchConfig"
+      highlight-current-row
+      :action-list="[
+        {
+          text: '新增赠品',
+          action: () => clickModal(),
+        },
+      ]"
+      @get-list="getList"
+      @clickReset="clickReset">
+      <template #specImgUrl="{ item }">
+        <div>
+          <el-image
+            style="cursor: pointer; border-radius: 5px; width: 60px"
+            v-if="item.specImgUrl"
+            :src="item.specImgUrl"
+            fit="scale-down"
+            @click="openFile(item.specImgUrl)"
+            lazy>
+          </el-image>
+        </div>
+      </template>
+    </byTable>
+
+    <el-dialog title="选择赠品" v-if="openGiveaway" v-model="openGiveaway" width="90%">
+      <SelectProduct :selectStatus="true" :type="'null'" @selectProduct="selectGiveaway"></SelectProduct>
+      <template #footer>
+        <el-button @click="openGiveaway = false" size="large">关 闭</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script setup>
+import byTable from "/src/components/byTable/index";
+import { ElMessage, ElMessageBox } from "element-plus";
+import SelectProduct from "/src/views/group/product/management/index";
+
+const { proxy } = getCurrentInstance();
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    code: "",
+    name: "",
+  },
+});
+const loading = ref(false);
+const searchConfig = computed(() => {
+  return [
+    {
+      type: "input",
+      prop: "code",
+      label: "品号",
+    },
+    {
+      type: "input",
+      prop: "name",
+      label: "品名",
+    },
+  ];
+});
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "规格图",
+        slot: "specImgUrl",
+        width: 100,
+      },
+    },
+    {
+      attrs: {
+        label: "品号",
+        prop: "code",
+        width: 200,
+      },
+    },
+    {
+      attrs: {
+        label: "品名",
+        prop: "name",
+      },
+    },
+    {
+      attrs: {
+        label: "操作",
+        width: 80,
+        align: "center",
+        fixed: "right",
+      },
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "删除",
+              type: "danger",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickDelete(row);
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
+const getList = (req, status) => {
+  if (status) {
+    sourceList.value.pagination = {
+      pageNum: sourceList.value.pagination.pageNum,
+      pageSize: sourceList.value.pagination.pageSize,
+    };
+  } else {
+    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  }
+  loading.value = true;
+  proxy.post("/skuSpec/giftPage", sourceList.value.pagination).then((res) => {
+    sourceList.value.data = res.rows;
+    sourceList.value.pagination.total = res.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+getList();
+const clickReset = () => {
+  getList("", true);
+};
+const clickDelete = (row) => {
+  ElMessageBox.confirm("你是否确认此操作", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      proxy.post("/skuSpec/giftDelete", { id: row.id }).then(() => {
+        ElMessage({ message: "删除成功", type: "success" });
+        getList();
+      });
+    })
+    .catch(() => {});
+};
+const openFile = (path) => {
+  window.open(path, "_blank");
+};
+const openGiveaway = ref(false);
+const clickModal = () => {
+  openGiveaway.value = true;
+};
+const selectGiveaway = (item) => {
+  proxy.post("/skuSpec/giftAdd", { id: item.id }).then(() => {
+    openGiveaway.value = false;
+    ElMessage({ message: "添加成功", type: "success" });
+    getList();
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+</style>