优化销售端sop任务列表用户详情

src/views/qw/companyUserTask/index.vue

@@ -54,17 +54,17 @@
     <el-table border v-loading="loading" :data="companyUserTaskList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="订单号" align="center" prop="orderCode"/>
-      <el-table-column label="套餐包" align="center" prop="packageName"/>
       <el-table-column label="医生" align="center" prop="doctorName"/>
       <el-table-column label="客户" align="center" prop="name"/>
-      <el-table-column label="客户头像" align="center" width="100px">
+      <el-table-column label="客户头像" align="center" prop="avatar" width="100px">
         <template slot-scope="scope">
-          <div v-if="scope.row.avatar">
-            <el-popover placement="right" trigger="hover">
-              <img slot="reference" :src="scope.row.avatar" width="60" style="object-fit: cover; border-radius: 4px;" />
-              <img :src="scope.row.avatar" style="max-width: 200px; object-fit: cover;" />
-            </el-popover>
-          </div>
+          <el-popover
+            placement="right"
+            title=""
+            trigger="hover">
+            <img slot="reference" :src="scope.row.avatar" width="60px">
+            <img :src="scope.row.avatar" style="max-width: 200px;">
+          </el-popover>
         </template>
       </el-table-column>
       <el-table-column label="处理状态" align="center" prop="status">
@@ -78,9 +78,9 @@
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-view"
-            @click="handleView(scope.row)"
-          >详情
+            icon="el-icon-user"
+            @click="handleMemberdetails(scope.row)"
+          >会员详情
           </el-button>
           <el-button
             size="mini"
@@ -107,14 +107,17 @@
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form :model="form" label-width="100px" size="small">
         <el-row :gutter="20">
-
+          <el-col :span="12">
+            <el-form-item label="医生：">
+              <span class="detail-value">{{ form.doctorName || '—' }}</span>
+            </el-form-item>
+          </el-col>
           <el-col :span="12">
             <el-form-item label="客户：">
               <span class="detail-value">{{ form.name || '—' }}</span>
             </el-form-item>
           </el-col>
 
-
           <el-col :span="12">
             <el-form-item label="客户电话：">
               <div style="display: flex; align-items: center; gap: 8px;">
@@ -135,27 +138,6 @@
             </el-form-item>
           </el-col>
 
-          <el-col :span="12">
-            <el-form-item label="医生：">
-              <span class="detail-value">{{ form.doctorName || '—' }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="订单号：">
-              <span class="detail-value">{{ form.orderCode || '—' }}</span>
-            </el-form-item>
-          </el-col>
-
-
-
-
-          <el-col :span="24">
-            <el-form-item label="套餐包：">
-              <span class="detail-value">{{ form.packageName || '—' }}</span>
-            </el-form-item>
-          </el-col>
-
-
           <el-col :span="12">
             <el-form-item label="处理状态：">
               <dict-tag :options="statusOptions" :value="form.status"/>
@@ -174,6 +156,18 @@
         <el-button @click="cancel">关 闭</el-button>
       </div>
     </el-dialog>
+
+    <!-- 会员详情抽屉 -->
+    <el-drawer
+      :title="show.title"
+      :visible.sync="show.open"
+      direction="rtl"
+      size="75%"
+      :before-close="handleCloseDrawer"
+      append-to-body
+    >
+      <userDetails ref="userDetails" @close="handleCloseDrawer" />
+    </el-drawer>
   </div>
 </template>
 
@@ -185,9 +179,13 @@ import {
   delCompanyUserTask,
   updateCompanyUserTask,
 } from "@/api/qw/companyUserTask";
+import userDetails from '@/views/store/components/userDetails.vue';
 
 export default {
   name: "CompanyUserTask",
+  components: {
+    userDetails
+  },
   data() {
     return {
       // 遮罩层
@@ -216,6 +214,11 @@ export default {
       decryptedPhone: '',
       // 电话加载状态
       phoneLoading: false,
+      // 会员详情抽屉
+      show: {
+        title: "会员详情",
+        open: false,
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -240,6 +243,10 @@ export default {
       this.statusOptions = response.data;
     });
   },
+  beforeDestroy() {
+    // 关闭抽屉
+    this.show.open = false;
+  },
   methods: {
     /** 查询销售处理sop任务列表 */
     getList() {
@@ -284,16 +291,31 @@ export default {
       this.multiple = !selection.length
     },
 
-    /** 详情按钮操作 */
-    handleView(row) {
-      const id = row.id || this.ids;
-      getCompanyUserTask(id).then(response => {
-        this.form = response.data || {}; // 安全兜底
-        this.decryptedPhone = '';        // 清空上次解密的电话
-        this.open = true;
-        this.title = "任务详情";
+    /** 会员详情按钮操作 */
+    handleMemberdetails(row) {
+      if (!row.userId) {
+        this.$message.warning("该客户未绑定会员");
+        return;
+      }
+
+      this.show.title = `会员详情 - ${row.name || '未知客户'}`;
+      this.show.open = true;
+
+      // 确保DOM更新后再调用子组件方法
+      this.$nextTick(() => {
+        if (this.$refs.userDetails) {
+          this.$refs.userDetails.getDetails(row.userId, row);
+        }
       });
     },
+    /** 关闭会员详情抽屉 */
+    handleCloseDrawer() {
+      this.show.open = false;
+      // 重置子组件状态
+      if (this.$refs.userDetails && this.$refs.userDetails.reset) {
+        this.$refs.userDetails.reset();
+      }
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -309,7 +331,6 @@ export default {
       });
     },
     /** 处理按钮操作 */
-    /** 处理按钮操作 */
     handleUpdate(row) {
       const id = row.id;
       if (!id) {
@@ -378,4 +399,16 @@ export default {
   font-weight: 500;
   color: #606266;
 }
+
+/* 抽屉样式优化 */
+.el-drawer__header {
+  margin-bottom: 0;
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.el-drawer__body {
+  padding: 15px 20px;
+  overflow-y: auto;
+}
 </style>