Skip to content

客户卡片微信绑定状态优化说明.md

Latest commit

 

History

History
94 lines (75 loc) · 2.87 KB

客户卡片微信绑定状态优化说明.md

File metadata and controls

94 lines (75 loc) · 2.87 KB
Raw

客户卡片微信绑定状态优化说明

修改内容

1. 卡片头部状态显示

将原来的"活跃/非活跃"状态改为显示"已绑定/未绑定"微信状态。

修改前：

<div class="customer-status" v-if="customer.isActive !== null && customer.isActive !== undefined">
  <span class="status-dot" :class="{ 'status-active': customer.isActive }"></span>
  <span class="status-text">{{ customer.isActive ? '活跃' : '非活跃' }}</span>
</div>

修改后：

<div class="customer-status">
  <span class="status-dot" :class="{ 'status-active': getWechatBinding(customer.id) }"></span>
  <span class="status-text">{{ getWechatBinding(customer.id) ? '已绑定' : '未绑定' }}</span>
</div>

变化：

  • 移除了 v-if 条件，始终显示状态
  • 状态判断从 customer.isActive 改为 getWechatBinding(customer.id)
  • 文字从"活跃/非活跃"改为"已绑定/未绑定"

2. 移除卡片详情中的微信绑定状态

卡片详情区域不再显示微信绑定状态标签，因为头部已经显示了。

移除的代码：

<div class="detail-item wechat-binding-item">
  <el-icon class="detail-icon" :style="{ color: getWechatBinding(customer.id) ? '#07c160' : '#909399' }">
    <ChatDotRound />
  </el-icon>
  <span class="detail-label">微信绑定</span>
  <el-tag 
    :type="getWechatBinding(customer.id) ? 'success' : 'info'" 
    size="small"
  >
    {{ getWechatBinding(customer.id) ? '已绑定' : '未绑定' }}
  </el-tag>
</div>

3. 状态点颜色优化

将已绑定状态的颜色从蓝色改为微信绿色。

修改前：

.status-dot.status-active {
  background-color: #409eff; // 蓝色
}

修改后：

.status-dot.status-active {
  background-color: #07c160; // 微信绿色
}

4. 移除不需要的样式

移除了 .wechat-binding-item 样式定义，因为不再使用。

视觉效果

卡片头部

  • 已绑定微信：显示微信头像 + 绿色状态点 + "已绑定"文字
  • 未绑定微信：显示姓名首字母头像 + 灰色状态点 + "未绑定"文字

卡片详情

只显示：

  • 手机号
  • 地址（如果有）
  • 关联项目数

详情对话框

保持不变，仍然显示完整的微信绑定信息卡片（包括微信昵称、头像、绑定时间等）。

优势

  1. 信息更集中：微信绑定状态在卡片头部一目了然
  2. 避免重复：不在卡片详情中重复显示绑定状态
  3. 视觉统一：使用微信绿色作为已绑定状态的标识色
  4. 简洁明了：卡片详情区域更简洁，只显示核心信息

用户体验

  • 用户可以快速扫描卡片列表，通过头部的绿色/灰色状态点识别哪些客户已绑定微信
  • 已绑定微信的客户会显示微信头像，更容易识别
  • 点击"查看"按钮后，详情对话框中仍然可以看到完整的微信绑定信息