chore:前端名片样式和后台名片样式更改同步

This commit is contained in:
2026-10-17 11:15:47 +08:00
parent 4439df7c9b
commit f2997f5401
2 changed files with 65 additions and 11 deletions

View File

@@ -44,6 +44,11 @@
<text class="ca-icon iconfont icon-shuaxin"></text>
<text>切换名片</text>
</view>
<view class="ca-divider"></view>
<!-- 预览名片: 打开本卡公开页(后端 wap 模板完整渲染画布, 永远跟后台一致) -->
<view class="ca-item" @tap="previewCard" v-if="shareUrl">
<text>预览名片</text>
</view>
</view>
<!-- 发名片: 微信小程序端必须用原生 <button open-type="share"> ——
@@ -494,6 +499,11 @@ export default {
}
});
},
// 预览名片: 打开本卡公开页(后端 wap 模板, 完整渲染画布设计, 永远跟后台最新保存一致)。
// 小/App 经 share.vue 的 web-view 中转; H5 直接 location。附 back_url 便于公开页返回本页。
previewCard() {
this.gotoPublic(this.withBackUrl(this.shareUrl));
},
/**
* 按平台打开公开页: H5 直接 location; 小程序/鸿蒙/App 经 share.vue 的 web-view 中转。
* 拿不到地址(老后端/网络异常)时降级报错, 禁止本地拼 URL。
@@ -904,7 +914,7 @@ export default {
}
}
// 卡下操作条: 三项等分, 无白底无边框, 项与项之间不加分隔线(对齐参考图)
// 卡下操作条: 多项等分, 无白底无边框, 项与项之间浅灰竖线分隔(对齐参考图)
.card-actions {
display: flex;
align-items: center;

View File

@@ -18,20 +18,25 @@
<!-- 客户列表 -->
<view class="lead-list">
<view v-for="(item, index) in list" :key="item.id || index" class="lead-item">
<view class="lead-top" @tap="callPhone(item.mobile)">
<!-- 点「别人的名片」= 打开对方名片; 拨号/按钮一律 .stop, 避免误触成打电话 -->
<view v-for="(item, index) in list" :key="item.id || index" class="lead-item" @tap="viewCard(item)">
<view class="lead-top">
<view class="lead-name">{{ item.name || '未留姓名' }}</view>
<view class="lead-status" :class="'st-' + item.status">{{ item.status_text || '新客户' }}</view>
</view>
<view class="lead-mobile" v-if="item.mobile" @tap="callPhone(item.mobile)">📱 {{ item.mobile }}</view>
<!-- 手机号是唯一拨号入口(H5 下调 tel: 浏览器会报 ERR_UNKNOWN_URL_SCHEME, 属正常) -->
<view class="lead-mobile" v-if="item.mobile" @tap.stop="callPhone(item.mobile)">📱 {{ item.mobile }}</view>
<view class="lead-note" v-if="item.note">「{{ item.note }}」</view>
<view class="lead-meta">
<text class="meta-card">来自名片:{{ item.card_name }}</text>
<view class="meta-card" :class="{ tappable: !!cardIdOf(item) }">
<text class="meta-card-name">来自名片:{{ item.card_name || '—' }}</text>
<text class="meta-card-arrow" v-if="cardIdOf(item)">查看名片 ›</text>
</view>
<text class="meta-time">{{ item.create_time_txt }}</text>
</view>
<view class="lead-actions">
<view class="action-btn copy" v-if="item.wechat" @tap="copyText(item.wechat)">复制微信</view>
<view class="action-btn primary" @tap="changeStatus(item, index)">更新状态</view>
<view class="action-btn copy" v-if="item.wechat" @tap.stop="copyText(item.wechat)">复制微信</view>
<view class="action-btn primary" @tap.stop="changeStatus(item, index)">更新状态</view>
</view>
</view>
@@ -159,6 +164,28 @@ export default {
data: text,
success: () => uni.showToast({ title: '已复制', icon: 'success' })
});
},
// 该线索关联的名片编号(后端 lead/lists 行下发; 兼容常见字段名)
cardIdOf(item) {
if (!item) return '';
return item.card_id || item.from_card_id || item.source_card_id || '';
},
// 点整条客户卡片 → 打开对方名片
// 与交换名片(exchange.vue)同款写法: detail 接收 card_id(卡片编号字符串);
// 本人名下的卡 → 正常详情页; 非本人名下 → detail 兜底跳公开名片页(后端返回的 wap_url)
viewCard(item) {
const cardId = this.cardIdOf(item);
if (!cardId) {
// 后端 lead/lists 目前只下发 card_name(展示名), 没有名片编号 → 无法跳转。
// 这里把该行真实字段打到控制台, 便于确认后端是否用了别的字段名(如 relation_id)
console.warn('[card/leads] 该行缺少名片编号(card_id/from_card_id/source_card_id), 无法打开对方名片; 可用字段:',
item ? Object.keys(item) : item, item);
uni.showToast({ title: '该客户未关联名片,无法查看', icon: 'none' });
return;
}
uni.navigateTo({
url: '/pages_tool/card/detail?card_id=' + encodeURIComponent(cardId)
});
}
}
};
@@ -289,15 +316,32 @@ export default {
.lead-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 22rpx;
color: #999;
margin-top: 14rpx;
.meta-card {
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
max-width: 64%;
// 有名片编号时才高亮/可点, 否则退化为普通文字
&.tappable .meta-card-name {
color: var(--main-color, #0054a5);
}
.meta-card-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.meta-card-arrow {
flex-shrink: 0;
margin-left: 8rpx;
color: var(--main-color, #0054a5);
}
}
}