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

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

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

@@ -102,6 +102,8 @@
       direction="rtl"
       :z-index="950"
       :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
       class="benefit-form-drawer"
     >
       <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="110px">
@@ -218,6 +220,8 @@
       direction="rtl"
       :z-index="950"
       :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
       class="benefit-form-drawer"
     >
       <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="110px">
@@ -807,7 +811,7 @@ export default {
       const text = checked ? "开启" : "关闭";
       this.$Modal.confirm({
         title: "提示",
-        content: `<p>确定${text}该客户权益？</p>`,
+        content: `确定${text}该客户权益？`,
         onOk: () => {
           row._benefitStateLoading = true;
           return API_Member.updateMemberBenefitState(row.id, nextState)
@@ -829,7 +833,7 @@ export default {
     remove(row) {
       this.$Modal.confirm({
         title: "提示",
-        content: "<p>确定删除该客户权益？</p>",
+        content: "确定删除该客户权益？",
         onOk: () => {
           API_Member.deleteMemberBenefit(row.id).then((res) => {
             if (res && res.success) {

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;
       }
     },
   },

manager/src/views/member/point/point.vue

@@ -81,33 +81,34 @@
             </template>
             <el-table
               v-loading="memberLoading"
+              border
               :data="memberData"
               class="member-table"
               style="width: 100%"
             >
-              <el-table-column label="客户名称" width="180" show-overflow-tooltip>
+              <el-table-column label="客户名称" min-width="160" show-overflow-tooltip>
                 <template #default="{ row }">
                   <span v-if="row">{{ row.nickName || "-" }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="客户账号" width="180" show-overflow-tooltip>
+              <el-table-column label="客户账号" min-width="260" show-overflow-tooltip>
                 <template #default="{ row }">
                   <span v-if="row">{{ row.username || "-" }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="账号状态" width="180">
+              <el-table-column label="账号状态" min-width="120" align="center">
                 <template #default="{ row }">
                   <el-tag v-if="row" :type="row.disabled === true ? 'success' : 'info'">
                     {{ row.disabled === true ? "启用" : "禁用" }}
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column label="积分余额" width="180">
+              <el-table-column label="积分余额" min-width="120" align="center">
                 <template #default="{ row }">
                   <span v-if="row">{{ row.point == null ? 0 : row.point }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="操作" width="100" align="center">
+              <el-table-column label="操作" width="120" align="center" fixed="right">
                 <template #default="{ row }">
                   <a v-if="row" class="link-text" @click="detail(row)">详情</a>
                 </template>
@@ -409,8 +410,27 @@ export default {
 }
 
 .member-table {
-  :deep(.el-table__header th) {
+  width: 100%;
+
+  :deep(.el-table__header th.el-table__cell) {
     background: #fafafa;
+    padding: 14px 0;
+    font-size: 14px;
+    color: #17233d;
+  }
+
+  :deep(.el-table__header .cell) {
+    padding: 0 16px;
+    line-height: 22px;
+  }
+
+  :deep(.el-table__body td.el-table__cell) {
+    padding: 12px 0;
+  }
+
+  :deep(.el-table__body .cell) {
+    padding: 0 16px;
+    line-height: 22px;
   }
 }