Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：微信小程序 名片眼视光可以前端调节

Browse Source
This commit is contained in:
jing
2026-10-19 09:16:08 +08:00
parent 91ce0b582b
commit 8999dd3f25
2 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.local.config.js
View File

@@ -249,7 +249,7 @@ const localDevConfig = ({
// })['2811']; // 本地
// })['5g-317']; // 电磁兼容
// })['5g-351']; //
})['192.168.8.113-1']; // 本地
})['2811']; // 本地
// })['5g-248']; // 中瑞 工业称重系统垃圾吊电子秤，首页，图片链接部分的PDF文档打不开
// })['2881']; // 本地
// })['local-2']; // 本地

49
pages_tool/card/detail.vue
View File

@@ -1,5 +1,7 @@
<template>
<view class="card-detail" :style="designVars" :class="{ 'qs-square': ds.quickStyle === 'square' }">
<!-- 根节点: designVars 注入 CSS 变量(H5 生效); 但微信小程序会丢弃内联 style 里的
自定义属性, 故字体等必须再单独内联具体值(见各元素 :style 兜底)。 -->
<view class="card-detail" :style="[designVars, { fontFamily: ds.fontFamily }]" :class="{ 'qs-square': ds.quickStyle === 'square' }">
<view class="page-layer">
<!-- 名片区: 蓝色背景 + 白卡。蓝色自导航栏下沿一路向下延伸到卡片内部后渐隐 -->
<view class="card-wrap" v-if="relation">
@@ -7,22 +9,27 @@
<view class="card-wrap-bg" :style="cardWrapStyle"></view>
<!-- 名片卡: 对齐设计稿 —— 姓名/职位/公司与全部联系方式都收在同一张白卡内, 不再拆成上下两块 -->
<view class="detail-card" :class="['layout-' + ds.layout, ds.cover && ds.layout !== 'classic' ? 'has-cover' : '']">
<!-- 背景色/圆角内联具体值: 小程序端 var(--card-bg/--card-radius) 失效, 不内联会回退默认白/20rpx -->
<view class="detail-card" :style="{ backgroundColor: ds.bgColor, borderRadius: ds.cardRadius + 'px' }"
:class="['layout-' + ds.layout, ds.cover && ds.layout !== 'classic' ? 'has-cover' : '']">
<!-- 封面(hero/compact): 有 cover 时全幅主视觉, 身份信息压在其下沿; classic 不展示封面 -->
<view v-if="ds.cover && ds.layout !== 'classic'" class="dc-cover" :class="ds.layout === 'compact' ? 'dc-cover-compact' : 'dc-cover-hero'">
<view v-if="ds.cover && ds.layout !== 'classic'" class="dc-cover"
:style="{ borderTopLeftRadius: ds.cardRadius + 'px', borderTopRightRadius: ds.cardRadius + 'px' }"
:class="ds.layout === 'compact' ? 'dc-cover-compact' : 'dc-cover-hero'">
<image class="dc-cover-img" :src="$util.img(ds.cover)" mode="aspectFill"></image>
</view>
<view class="dc-name">{{ relation.name || '未命名名片' }}</view>
<view class="dc-job" v-if="relation.job_title">{{ relation.job_title }}</view>
<view class="dc-company" v-if="relation.company">{{ relation.company }}</view>
<!-- 文字色/字号内联: 小程序端 var(--card-text / --card-font-scale) 失效 -->
<view class="dc-name" :style="{ color: ds.textColor }">{{ relation.name || '未命名名片' }}</view>
<view class="dc-job" v-if="relation.job_title" :style="{ color: ds.textSoft, fontSize: (28 * ds.fontScaleNum) + 'rpx' }">{{ relation.job_title }}</view>
<view class="dc-company" v-if="relation.company" :style="{ color: ds.textSoft, fontSize: (26 * ds.fontScaleNum) + 'rpx' }">{{ relation.company }}</view>
<view class="dc-rows" v-if="fieldRows.length > 0">
<view v-for="(row, index) in fieldRows" :key="index" class="field-row"
:class="{ 'field-row-multi': row.multiline }" @tap="onRowTap(row)">
<text v-if="row.icon" class="field-icon iconfont" :class="row.icon"></text>
<text v-if="row.icon" class="field-icon iconfont" :class="row.icon" :style="{ color: ds.textSoft }"></text>
<!-- 没有对应图标字形的字段(邮箱/网站/社交/自定义)退化为文字标签, 保持与图标列同宽 -->
<text v-else class="field-tag">{{ row.label }}</text>
<view class="field-value" :class="{ 'field-value-multi': row.multiline }">{{ row.value }}</view>
<text v-else class="field-tag" :style="{ color: ds.textSoft, fontSize: (26 * ds.fontScaleNum) + 'rpx' }">{{ row.label }}</text>
<view class="field-value" :class="{ 'field-value-multi': row.multiline }" :style="{ color: ds.textColor, fontSize: (28 * ds.fontScaleNum) + 'rpx' }">{{ row.value }}</view>
</view>
</view>
</view>
@@ -68,19 +75,19 @@
<!-- 功能入口宫格(参考图: 发名片下方四等分图标入口) -->
<view class="entry-grid" v-if="relation">
<view class="eg-item" @tap="goList">
<text class="eg-icon iconfont icon-list"></text>
<text class="eg-icon iconfont icon-list" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">名片夹</text>
</view>
<view class="eg-item" @tap="goLeads">
<text class="eg-icon iconfont icon-yonghu3"></text>
<text class="eg-icon iconfont icon-yonghu3" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">潜在客户</text>
</view>
<view class="eg-item" @tap="goContacts">
<text class="eg-icon iconfont icon-pengyouquan"></text>
<text class="eg-icon iconfont icon-pengyouquan" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">我的人脉</text>
</view>
<view class="eg-item" @tap="openShare">
<text class="eg-icon iconfont icon-erweima"></text>
<text class="eg-icon iconfont icon-erweima" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">名片二维码</text>
</view>
</view>
@@ -88,20 +95,22 @@
<!-- 交换名片提醒条(参考图: 宫格下方出现对方要交换的名片) -->
<!-- 数据来源: exchange/lists 的待处理请求(只含 status=0, 已同意/已忽略不可见), 不做其它兜底 -->
<!-- 头部文案与忽略/同意按钮按参考图固定渲染, 不改动名片数据 -->
<view class="exchange-bar" v-if="relation && exchangeItem" @tap="onExchangeBarTap">
<view class="eb-head">
<view class="exchange-bar" v-if="relation && exchangeItem" @tap="onExchangeBarTap"
:style="{ borderColor: ds.themeBorder }">
<view class="eb-head" :style="{ backgroundColor: ds.themeSoft }">
<!-- 参考图: 蓝色喇叭图标 + 「有 N 人请求与您交换名片」, 数字更大更粗 -->
<text class="eb-head-icon iconfont icon-gonggao"></text>
<text class="eb-head-icon iconfont icon-gonggao" :style="{ color: ds.themeColor }"></text>
<view class="eb-head-text">
<text>有</text>
<text class="eb-num">{{ exchangeCount }}</text>
<text class="eb-num" :style="{ color: ds.themeColor }">{{ exchangeCount }}</text>
<text>人请求与您交换名片</text>
</view>
<text class="eb-arrow iconfont icon-right"></text>
<text class="eb-arrow iconfont icon-right" :style="{ color: ds.themeBorder }"></text>
</view>
<view class="eb-card" @tap.stop="viewExchangeCard(exchangeItem)">
<image v-if="exchangeItem.avatar" class="eb-avatar" :src="exchangeItem.avatar" mode="aspectFill" />
<view v-else class="eb-avatar eb-avatar-ph">{{ (exchangeItem.name || '?').charAt(0) }}</view>
<image v-if="exchangeItem.avatar" class="eb-avatar" :src="exchangeItem.avatar" mode="aspectFill"
:style="{ backgroundColor: ds.themeColor }" />
<view v-else class="eb-avatar eb-avatar-ph" :style="{ backgroundColor: ds.themeColor }">{{ (exchangeItem.name || '?').charAt(0) }}</view>
<view class="eb-info">
<view class="eb-name-row">
<text class="eb-name">{{ exchangeItem.name }}</text>