feat: 增强组件功能与样式优化

- 在多个组件中添加了新的属性和方法以提升功能性，如在卡片组件中引入 _ActiveTab 属性以管理活动标签。 - 优化了商品详情和商户页面的收藏逻辑，确保在未登录状态下引导用户登录。 - 更新了轮播组件的路由解析逻辑，增强了用户体验。 - 改进了投诉列表和收藏列表的样式，提升了响应式布局和可读性。 - 在全局配置中添加了对开发环境的错误处理，提升了调试体验。
2026-11-13 04:18:55 +08:00 · 2026-06-25 16:52:46 +08:00
parent 1b2e980fb6
commit ec948b5496
86 changed files with 1741 additions and 1050 deletions
--- a/manager/src/views/promotions/coupon/coupon-receive.vue
+++ b/manager/src/views/promotions/coupon/coupon-receive.vue
@@ -3,7 +3,7 @@
    <el-button style="margin-bottom: 10px" @click="back()">返回</el-button>

    <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="75px" class="search-form mb_10">
+      <el-form ref="searchForm" :model="searchForm" inline label-width="90px" class="search-form mb_10">
        <el-form-item label="优惠券名称" prop="couponName">
          <el-input
            v-model="searchForm.couponName"
@@ -121,7 +121,7 @@
            </template>
          </template>
        </el-table-column>
-        <el-table-column label="有效时间" width="150">
+        <el-table-column label="有效时间" width="200">
          <template #default="{ row }">
            <template v-if="row">
              <span v-if="row.getType === 'ACTIVITY' && row.rangeDayType === 'DYNAMICTIME'">长期有效</span>
--- a/manager/src/views/promotions/coupon/coupon.vue
+++ b/manager/src/views/promotions/coupon/coupon.vue
@@ -56,7 +56,7 @@
      <div class="operation padding-row" v-if="getType !== 'ACTIVITY'">
        <el-button type="primary" @click="add">添加优惠券</el-button>
        <el-button @click="delAll">批量关闭</el-button>
-        <el-button type="info" @click="receivePage()">优惠券领取记录</el-button>
+        <el-button type="warning" @click="receivePage()">优惠券领取记录</el-button>
      </div>

      <el-table
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
@@ -225,7 +225,10 @@ export default {
          this.form.stockTotal =
            d.stockTotal !== null && d.stockTotal !== undefined ? d.stockTotal : null;
          this.form.validityType = d.validityType || "LONG_TERM";
-          this.form.validEndTime = this.parseDetailDate(d.validEndTime);
+          const endDate = this.parseDetailDate(d.validEndTime);
+          this.form.validEndTime = endDate
+            ? this.$filters.unixToDate(endDate.getTime() / 1000)
+            : null;
          this.form.validMonthsAfterActivate =
            d.validMonthsAfterActivate !== null &&
            d.validMonthsAfterActivate !== undefined &&
@@ -271,7 +274,10 @@ export default {
        stockTotal: this.form.stockTotal,
      };
      if (payload.validityType === "FIXED_UNTIL") {
-        payload.validEndTime = this.form.validEndTime;
+        const endDate = new Date(this.form.validEndTime);
+        payload.validEndTime = Number.isNaN(endDate.getTime())
+          ? this.form.validEndTime
+          : endDate.getTime();
      }
      if (payload.validityType === "AFTER_ACTIVATE_MONTHS") {
        payload.validMonthsAfterActivate = this.form.validMonthsAfterActivate;
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
@@ -5,7 +5,7 @@
        ref="searchForm"
        :model="searchForm"
        inline
-        label-width="80px"
+        label-width="100px"
        class="search-form mb_10"
        @keyup.enter="handleSearch"
      >
--- a/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
@@ -13,67 +13,72 @@
            <el-form-item style="width: 100%">
              <el-table
                border
+                class="kanjia-goods-table"
                :data="form.promotionGoodsList"
                style="width: 100%"
                @selection-change="changeSelect"
              >
                <el-table-column type="selection" width="60" align="center" />
                <el-table-column prop="goodsName" label="商品名称" min-width="100" show-overflow-tooltip />
-                <el-table-column label="商品价格" width="120">
+                <el-table-column label="商品价格" width="150">
                  <template #default="{ row }">
                    <span v-if="row" :style="{ color: $mainColor }">
                      {{ $filters.unitPrice(row.price, "￥") }}</span>
                  </template>
                </el-table-column>
-                <el-table-column label="库存" width="100">
+                <el-table-column label="库存" width="120">
                  <template #default="{ row }">
                    <span v-if="row">{{ row.quantity }}</span>
                  </template>
                </el-table-column>
-                <el-table-column label="结算价格" width="130">
+                <el-table-column label="结算价格" width="160">
                  <template #default="{ $index }">
                    <el-input-number
                      :min="0"
                      v-model="form.promotionGoodsList[$index].settlementPrice"
-                      style="width: 110px"
+                      controls-position="right"
+                      class="kanjia-goods-input"
                    />
                  </template>
                </el-table-column>
-                <el-table-column label="最低砍" width="130">
+                <el-table-column label="最低砍" width="160">
                  <template #default="{ $index }">
                    <el-input-number
                      :min="0"
                      v-model="form.promotionGoodsList[$index].lowestPrice"
-                      style="width: 110px"
+                      controls-position="right"
+                      class="kanjia-goods-input"
                    />
                  </template>
                </el-table-column>
-                <el-table-column label="最高砍" width="130">
+                <el-table-column label="最高砍" width="160">
                  <template #default="{ $index }">
                    <el-input-number
                      :min="0"
                      v-model="form.promotionGoodsList[$index].highestPrice"
-                      style="width: 110px"
+                      controls-position="right"
+                      class="kanjia-goods-input"
                    />
                  </template>
                </el-table-column>
-                <el-table-column label="活动库存" width="130">
+                <el-table-column label="活动库存" width="160">
                  <template #default="{ $index }">
                    <el-input-number
                      :min="0"
                      v-model="form.promotionGoodsList[$index].stock"
-                      style="width: 110px"
+                      controls-position="right"
+                      class="kanjia-goods-input"
                    />
                  </template>
                </el-table-column>
-                <el-table-column label="操作" width="100" align="center">
+                <el-table-column label="操作" width="120" align="center">
                  <template #default="{ $index }">
                    <el-button type="danger" size="small" plain @click="delGoods($index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
-            <el-form-item label="活动时间" prop="rangeTime">
+            <el-form-item label="活动时间" prop="rangeTime" class="kanjia-activity-time-form-item">
              <el-date-picker
                type="datetimerange"
                v-model="form.rangeTime"
@@ -82,7 +87,6 @@
                end-placeholder="结束时间"
                placeholder="请选择"
                :disabled-date="options.disabledDate"
-                style="width: 260px"
              />
            </el-form-item>
            <div>
@@ -253,7 +257,27 @@ export default {
 };
 </script>

-<style lang="scss" scpoed>
+<style lang="scss" scoped>
+.kanjia-goods-table {
+  :deep(.el-table__body .el-table__cell .cell) {
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+  }
+}
+
+.kanjia-goods-input {
+  width: 100%;
+}
+
+.kanjia-activity-time-form-item {
+  :deep(.el-date-editor) {
+    width: 360px !important;
+    max-width: 360px;
+    flex-grow: 0;
+  }
+}
+
 h4 {
  margin-bottom: 10px;
  padding: 0 10px;
--- a/manager/src/views/promotions/points-goods-category/points-goods-category.vue
+++ b/manager/src/views/promotions/points-goods-category/points-goods-category.vue
@@ -73,6 +73,14 @@ import {
  deletePointsGoodsCategoryById,
 } from "@/api/promotion";

+const buildDefaultFormAdd = () => ({
+  parentId: 0,
+  name: "",
+  deleteFlag: 0,
+  level: 0,
+  sortOrder: 1,
+});
+
 export default {
  name: "pointsGoodsCategory",
  data() {
@@ -88,13 +96,7 @@ export default {
        sort: "sortOrder",
        order: "asc",
      },
-      formAdd: {
-        parentId: 0,
-        name: "",
-        deleteFlag: 0,
-        level: 0,
-        sortOrder: 1,
-      },
+      formAdd: buildDefaultFormAdd(),
      formValidate: {
        name: [{ required: true, message: "商品分类名称不能为空", trigger: "blur" }],
      },
@@ -109,18 +111,22 @@ export default {
    edit(v) {
      this.modalType = 1;
      this.modalTitle = "编辑";
-      this.formAdd.id = v.id;
-      this.formAdd.name = v.name;
-      this.formAdd.sortOrder = v.sortOrder;
+      this.formAdd = {
+        ...buildDefaultFormAdd(),
+        id: v.id,
+        name: v.name,
+        sortOrder: v.sortOrder,
+      };
      this.modalVisible = true;
    },
    addParent() {
      this.modalType = 0;
      this.modalTitle = "添加积分商品分类";
-      this.$refs.form?.resetFields();
-      delete this.formAdd.id;
-      this.formAdd.parentId = 0;
+      this.formAdd = buildDefaultFormAdd();
      this.modalVisible = true;
+      this.$nextTick(() => {
+        this.$refs.form?.clearValidate();
+      });
    },
    Submit() {
      this.$refs.form.validate((valid) => {
@@ -134,7 +140,7 @@ export default {
              this.$Message.success("添加成功");
              this.getAllList();
              this.modalVisible = false;
-              this.$refs.form.resetFields();
+              this.formAdd = buildDefaultFormAdd();
            }
          });
        } else {
@@ -144,7 +150,7 @@ export default {
              this.$Message.success("修改成功");
              this.getAllList();
              this.modalVisible = false;
-              this.$refs.form.resetFields();
+              this.formAdd = buildDefaultFormAdd();
            }
          });
        }
--- a/manager/src/views/promotions/points-goods/points-goods-add.vue
+++ b/manager/src/views/promotions/points-goods/points-goods-add.vue
@@ -91,7 +91,7 @@
              </el-table>
            </el-form-item>

-            <el-form-item label="活动时间" prop="rangeTime">
+            <el-form-item label="活动时间" prop="rangeTime" class="points-goods-time-form-item">
              <el-date-picker
                type="datetimerange"
                v-model="form.rangeTime"
@@ -100,7 +100,6 @@
                end-placeholder="结束时间"
                placeholder="请选择"
                :disabled-date="options.disabledDate"
-                style="width: 260px"
              />
            </el-form-item>
            <div>
@@ -127,7 +126,7 @@ export default {
  data() {
    return {
      form: {
-        rangeTime: ["", ""],
+        rangeTime: null,
        promotionGoodsList: [],
      },
      showTable: true,
@@ -136,7 +135,19 @@ export default {
      submitLoading: false,
      selectedGoods: [],
      formRule: {
-        rangeTime: [{ required: true, message: "请选择活动时间" }],
+        rangeTime: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!value || !Array.isArray(value) || value.length < 2 || !value[0] || !value[1]) {
+                callback(new Error("请选择活动时间"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change",
+          },
+        ],
      },
      options: {
        disabledDate(date) {
@@ -154,33 +165,31 @@ export default {
      this.categoryList = res.result.records;
    },
    handleSubmit() {
-      this.form.startTime = this.form.rangeTime[0];
-      this.form.endTime = this.form.rangeTime[1];
      this.$refs.form.validate((valid) => {
-        if (valid) {
-          let params = this.promotionGoodsList;
-          const start = this.$filters.unixToDate(this.form.startTime / 1000);
-          const end = this.$filters.unixToDate(this.form.endTime / 1000);
-
-          if (!params || params.length === 0) {
-            this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
-            return;
-          }
-
-          this.submitLoading = true;
-          params = params.map((j) => {
-            j.startTime = start;
-            j.endTime = end;
-            return j;
-          });
-          addPointsGoods(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("积分商品创建成功");
-              this.closeCurrentPage();
-            }
-          });
+        if (!valid) return;
+        let params = this.promotionGoodsList;
+        if (!params || params.length === 0) {
+          this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
+          return;
        }
+        this.form.startTime = this.form.rangeTime[0];
+        this.form.endTime = this.form.rangeTime[1];
+        const start = this.$filters.unixToDate(this.form.startTime / 1000);
+        const end = this.$filters.unixToDate(this.form.endTime / 1000);
+
+        this.submitLoading = true;
+        params = params.map((j) => {
+          j.startTime = start;
+          j.endTime = end;
+          return j;
+        });
+        addPointsGoods(params).then((res) => {
+          this.submitLoading = false;
+          if (res.success) {
+            this.$Message.success("积分商品创建成功");
+            this.closeCurrentPage();
+          }
+        });
      });
    },
    closeCurrentPage() {
@@ -251,7 +260,7 @@ export default {
 };
 </script>

-<style lang="scss" scpoed>
+<style lang="scss" scoped>
 h4 {
  margin-bottom: 10px;
  padding: 0 10px;
@@ -273,4 +282,13 @@ h4 {
 .wrapper {
  min-height: 800px;
 }
+
+.points-goods-time-form-item {
+  :deep(.el-date-editor.el-date-editor--datetimerange) {
+    width: 420px !important;
+    min-width: 420px;
+    max-width: 420px;
+    flex-shrink: 0;
+  }
+}
 </style>