优化跟进会员页面展示信息

src/api/his/doctorTask.js

@@ -105,3 +105,11 @@ export function userHistoryOrderList(query) {
     params: query
   })
 }
+
+// 根据用户Id查询用户采集详情
+export function getCollectionByUserId(userId) {
+  return request({
+    url: '/app/collection/getCollectionByUserId/' + userId,
+    method: 'get'
+  })
+}

src/views/task/unprocessed.vue

@@ -4,19 +4,25 @@
       <el-card>
         <!-- 第一行 -->
         <el-row :gutter="20">
-          <el-col :span="8">
+          <el-col :span="6">
             <div class="info-item">
               <span class="info-label">会员名称：</span>
-              <span class="info-value">{{ userName || '-' }}</span>
+              <span class="info-value">{{ formData.userName || '-' }}</span>
             </div>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="6">
+            <div class="info-item">
+              <span class="info-label">性别：</span>
+              <span class="info-value">{{ displaySex }}</span>
+            </div>
+          </el-col>
+          <el-col :span="6">
             <div class="info-item">
               <span class="info-label">会员电话：</span>
               <span class="info-value">{{ phone || '-' }}</span>
             </div>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="6">
             <div class="info-item">
               <span class="info-label">推送销售：</span>
               <span class="info-value">{{ companyUserName || '-' }}</span>
@@ -26,73 +32,61 @@
 
         <!-- 第二行 -->
         <el-row :gutter="20" style="margin-top: 10px;">
-          <el-col :span="8">
-            <div class="info-item">
-              <span class="info-label">性别：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.sex) || '-' }}</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="info-item">
-              <span class="info-label">年龄：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.age) || '-' }}</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
+          <el-col :span="24">
             <div class="info-item">
-              <span class="info-label">地区：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.address) || '-' }}</span>
+              <span class="info-label">过敏情况：</span>
+              <span class="info-value">{{ formData.allergy || '-' }}</span>
             </div>
           </el-col>
         </el-row>
 
         <!-- 第三行 -->
         <el-row :gutter="20" style="margin-top: 10px;">
-          <el-col :span="8">
+          <el-col :span="24">
             <div class="info-item">
-              <span class="info-label">行为习惯：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.habits) || '-' }}</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="info-item">
-              <span class="info-label">患病时间：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.illnessTime) || '-' }}</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="info-item">
-              <span class="info-label">身体状态：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.body) || '-' }}</span>
+              <span class="info-label">备注：</span>
+              <span class="info-value">{{ formData.remark || '-' }}</span>
             </div>
           </el-col>
         </el-row>
 
-        <!-- 第四行 -->
+
+        <!-- 第四行 - 采集信息 -->
         <el-row :gutter="20" style="margin-top: 10px;">
-          <el-col :span="8">
-            <div class="info-item">
-              <span class="info-label">现在使用的药品：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.medicine) || '-' }}</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="info-item">
-              <span class="info-label">已经购买的产品：</span>
-              <span class="info-value">{{ (baseInfo && baseInfo.buyProduct) || '-' }}</span>
+          <el-col :span="24">
+            <h4>采集信息:</h4>
+            <div v-if="formData.answers && formData.answers.length > 0">
+              <!-- 外层循环，每次处理3个问题 -->
+              <el-row :gutter="20" style="margin-top: 10px;" v-for="(answerGroup, groupIndex) in chunkedAnswers" :key="groupIndex">
+                <!-- 内层循环，处理当前组里的每一个问题 -->
+                <el-col :span="8" v-for="(answer, answerIndex) in answerGroup" :key="answerIndex" style="margin-bottom: 15px;">
+                  <!-- 使用 info-item 样式保持一致性 -->
+                  <div class="info-item">
+                    <span class="info-label">{{ answer.title }}</span>
+                    <span class="info-value">
+                       {{
+                        answer.value && answer.value.length > 0
+                          ? answer.value.map(v => {
+                            const opt = answer.options.find(o => o.value === v);
+                            return opt ? opt.name : '';
+                          }).join(', ')
+                          : '未选择'
+                      }}
+                     </span>
+                  </div>
+                </el-col>
+              </el-row>
             </div>
-          </el-col>
-          <!-- 第三个占位，保持对齐（如果不需要可以移除 el-col，但保留 style） -->
-          <el-col :span="8" style="visibility: hidden;">
-            <div class="info-item">
-              <span class="info-label">占位：</span>
-              <span class="info-value">-</span>
+            <div v-else>
+              <p>暂无采集信息</p>
             </div>
           </el-col>
         </el-row>
 
       </el-card>
     </div>
+
+    <!-- 原有的列表和弹窗部分保持不变 -->
     <el-table border v-loading="loading" :data="unprocessedList" @selection-change="handleSelectionChange">
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="创建时间" align="center" prop="createTime" />
@@ -231,18 +225,30 @@ import {
   taskList,
   submitDoctorTask,
   getNoReceiveOrderList,
+  getCollectionByUserId as getCollectionInfo
 } from "@/api/his/doctorTask";
 
 export default {
   name: "unprocessed",
   data() {
     return {
-      globalVarDoctorMemberSalesId:null,//全局跟进会员变量名
+      globalVarDoctorMemberSalesId: null,
       userName: null,
       companyUserName: null,
       baseInfo: null,
       phone: null,
       fsUserId: null, // 保存用户ID
+      // 用于存储从 collection API 获取的数据
+      formData: {
+        id: null,
+        answers: [],
+        userName: '',
+        userPhoneFour: '',
+        sex: null,
+        allergy: '',
+        remark: ''
+      },
+
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -298,6 +304,47 @@ export default {
       }
     };
   },
+  computed: {
+    // 将 answers 数组按指定大小（这里是3）进行分块
+    chunkedAnswers() {
+      const answers = this.formData.answers;
+      if (!answers || !Array.isArray(answers)) {
+        return [];
+      }
+      const chunkSize = 3;
+      const chunks = [];
+      for (let i = 0; i < answers.length; i += chunkSize) {
+        chunks.push(answers.slice(i, i + chunkSize));
+      }
+      return chunks;
+    },
+    // 新增计算属性，用于处理性别显示，优先取 formData.sex，否则取 formData.userPhoneFour
+    displaySex() {
+      // 优先检查 formData.sex
+      if (this.formData.sex !== undefined && this.formData.sex !== null) {
+        if (this.formData.sex === 0) {
+          return '女';
+        } else if (this.formData.sex === 1) {
+          return '男';
+        }
+        // 如果 sex 不是 0 或 1，则可能是错误数据，继续检查 userPhoneFour
+      }
+
+      // 如果 formData.sex 无效，再检查 formData.userPhoneFour
+      const phoneFourValue = this.formData.userPhoneFour;
+      if (phoneFourValue !== undefined && phoneFourValue !== null) {
+        if (phoneFourValue === 0) {
+          return '女';
+        } else if (phoneFourValue === 1) {
+          return '男';
+        }
+        // 如果 userPhoneFour 也不是 0 或 1，则也是无效数据
+      }
+
+      // 两者都无效，返回 '-'
+      return '-';
+    }
+  },
   created() {
     this.queryParams.status = this.$route.query.status;
     this.queryParams.doctorMemberSalesId = this.$route.query.id;
@@ -307,9 +354,30 @@ export default {
     this.fsUserId = this.$route.query.fsUserId;
     this.companyUserName = this.$route.query.companyUserName;
     this.baseInfo = this.$route.query.baseInfo;
+    this.fetchCollectionInfo();
+
     this.getList();
   },
   methods: {
+    fetchCollectionInfo() {
+      if (!this.fsUserId) {
+        console.warn('fsUserId 未提供，无法获取采集信息');
+        this.loading = false; // 如果没有 ID，也停止加载
+        return;
+      }
+      getCollectionInfo(this.fsUserId).then(response => {
+        console.log('获取采集信息成功:', response.data);
+        if (response.data) {
+          this.formData = response.data;
+        } else {
+          console.info('未找到该用户的采集信息');
+        }
+      }).catch(error => {
+        console.error('获取采集信息失败:', error);
+      }).finally(() => {
+      });
+    },
+
     /** 查询医生会员搭销列表 */
     getList() {
       this.loading = true;
@@ -514,7 +582,7 @@ export default {
 .info-item {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .info-label {
@@ -523,12 +591,14 @@ export default {
   color: #606266;
   margin-right: 8px;
   flex-shrink: 0;
+  line-height: 1.5;
 }
 
 .info-value {
   font-size: 14px;
   color: #303133;
   flex-grow: 1;
+  line-height: 1.5;
 }
 
 /*隐藏单选框的文本 */