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

- 在多个组件中添加了新的属性和方法以提升功能性，如在卡片组件中引入 _ActiveTab 属性以管理活动标签。
- 优化了商品详情和商户页面的收藏逻辑，确保在未登录状态下引导用户登录。
- 更新了轮播组件的路由解析逻辑，增强了用户体验。
- 改进了投诉列表和收藏列表的样式，提升了响应式布局和可读性。
- 在全局配置中添加了对开发环境的错误处理，提升了调试体验。

manager/src/views/member/list/index.vue

@@ -154,13 +154,30 @@
       </div>
     </el-card>
 
-    <el-dialog v-model="addFlag" title="添加会员" width="500px" destroy-on-close>
-      <el-form ref="addMemberForm" :model="addMemberForm" :rules="addRule" label-width="100px">
+    <el-dialog v-model="addFlag" title="添加会员" width="500px" destroy-on-close class="add-member-dialog">
+      <el-form
+        ref="addMemberForm"
+        :model="addMemberForm"
+        :rules="addRule"
+        label-width="100px"
+        autocomplete="off"
+      >
         <el-form-item label="手机号码" prop="mobile" style="width: 90%">
-          <el-input v-model="addMemberForm.mobile" maxlength="11" placeholder="请输入手机号码" />
+          <el-input
+            v-model="addMemberForm.mobile"
+            maxlength="11"
+            placeholder="请输入手机号码"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="会员名称" prop="username" style="width: 90%">
-          <el-input v-model="addMemberForm.username" maxlength="15" placeholder="请输入会员名称" />
+          <el-input
+            v-model="addMemberForm.username"
+            maxlength="15"
+            placeholder="请输入会员名称"
+            autocomplete="off"
+            name="member-username"
+          />
         </el-form-item>
         <el-form-item label="会员密码" prop="password" style="width: 90%">
           <el-input
@@ -169,6 +186,8 @@
             show-password
             maxlength="20"
             placeholder="请输入会员密码"
+            autocomplete="new-password"
+            name="member-password"
           />
         </el-form-item>
       </el-form>
@@ -509,8 +528,15 @@ export default {
       this.getMemberInfo(val.id);
     },
     addMember() {
+      this.addMemberForm = {
+        mobile: "",
+        username: "",
+        password: "",
+      };
       this.addFlag = true;
-      this.$refs.addMemberForm?.resetFields();
+      this.$nextTick(() => {
+        this.$refs.addMemberForm?.clearValidate();
+      });
     },
     getMemberInfo(id) {
       API_Member.getMemberInfoData(id).then((res) => {
@@ -705,4 +731,30 @@ export default {
   margin: 0 8px;
   color: #dcdee2;
 }
+
+.add-member-dialog {
+  :deep(.el-input__wrapper) {
+    background-color: #fff !important;
+    box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
+
+    &.is-focus {
+      box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
+    }
+  }
+
+  :deep(.el-input__inner) {
+    background-color: transparent !important;
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
+      box-shadow: 0 0 0 1000px #fff inset !important;
+      -webkit-text-fill-color: #606266 !important;
+      caret-color: #606266;
+      transition: background-color 99999s ease-out;
+    }
+  }
+}
 </style>

manager/src/views/member/list/memberDetail.scss

@@ -119,3 +119,14 @@
     line-height: 16px;
   }
 }
+
+.member-tab-panel {
+  min-height: 200px;
+}
+
+.address-table {
+  :deep(table) {
+    table-layout: fixed;
+    width: 100%;
+  }
+}

manager/src/views/member/list/memberDetail.vue

@@ -237,8 +237,9 @@
           </div>
         </el-tab-pane>
 
-        <el-tab-pane label="TA收货地址" name="address">
-          <el-table v-loading="loading" border :data="addressData" class="mt_10" style="width: 100%">
+        <el-tab-pane label="TA收货地址" name="address" lazy>
+          <div v-loading="addressLoading" class="member-tab-panel">
+            <el-table border :data="addressData" class="mt_10 address-table" style="width: 100%">
             <el-table-column prop="alias" label="地址别名" min-width="80" show-overflow-tooltip />
             <el-table-column prop="name" label="收货人姓名" min-width="90" show-overflow-tooltip />
             <el-table-column prop="mobile" label="收货人电话" width="125" />
@@ -263,6 +264,7 @@
               @size-change="addressChangePageSize"
             />
           </div>
+          </div>
         </el-tab-pane>
 
         <el-tab-pane label="TA的余额" name="wallet">
@@ -428,6 +430,7 @@ export default {
       id: "",
       activeTab: "point",
       loading: true,
+      addressLoading: false,
       memberInfo: {},
       memberWalletInfo: {},
       addressModalTitle: "",
@@ -565,7 +568,9 @@ export default {
         this.getPointData();
       }
       if (v == "address") {
-        this.getAddressData();
+        this.$nextTick(() => {
+          this.getAddressData();
+        });
       }
       if (v == "order") {
         this.getOrderData();
@@ -723,15 +728,17 @@ export default {
       });
     },
     getAddressData() {
-      this.loading = true;
-      API_Member.getMemberAddressData(this.id, this.addressSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.addressData = res.result.records;
-          this.addressTotal = res.result.total;
-        }
-      });
-      this.loading = false;
+      this.addressLoading = true;
+      API_Member.getMemberAddressData(this.id, this.addressSearchForm)
+        .then((res) => {
+          if (res.success) {
+            this.addressData = res.result.records;
+            this.addressTotal = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.addressLoading = false;
+        });
     },
     pointChangePage(v) {
       this.pointSearchForm.pageNumber = v;
@@ -749,7 +756,7 @@ export default {
     addressChangePageSize(v) {
       this.addressSearchForm.pageNumber = 1;
       this.addressSearchForm.pageSize = v;
-      this.getPointData();
+      this.getAddressData();
     },
     walletChangePage(v) {
       this.walletSearchForm.pageNumber = v;
@@ -770,9 +777,12 @@ export default {
       this.getOrderData();
     },
     selectDateRange(v) {
-      if (v) {
+      if (v && v.length === 2) {
         this.orderSearchForm.startDate = v[0];
         this.orderSearchForm.endDate = v[1];
+      } else {
+        delete this.orderSearchForm.startDate;
+        delete this.orderSearchForm.endDate;
       }
     },
   },