chore：名片新增交换名片
This commit is contained in:
@@ -30,7 +30,7 @@
|
||||
<text class="ca-icon iconfont icon-bianji"></text>
|
||||
<text>编辑资料</text>
|
||||
</view>
|
||||
<view class="ca-item" @tap="openShare">
|
||||
<view class="ca-item" @tap="onStyleTap">
|
||||
<text class="ca-icon iconfont icon-erweima"></text>
|
||||
<text>名片样式</text>
|
||||
</view>
|
||||
@@ -78,6 +78,42 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 交换名片请求提醒条(参考图: 宫格下方出现对方要交换的名片) -->
|
||||
<!-- 数据先用假数据占位(exchangeRequest), 接口就绪后替换数据源即可 -->
|
||||
<view class="exchange-bar" v-if="relation && exchangeRequest" @tap="goExchangeReq">
|
||||
<view class="eb-head">
|
||||
<view class="eb-dot"></view>
|
||||
<text class="eb-head-text">有 {{ exchangeRequest.count }} 人请求与您交换名片</text>
|
||||
<text class="eb-arrow iconfont icon-right"></text>
|
||||
</view>
|
||||
<view class="eb-card" @tap.stop="viewExchangeCard">
|
||||
<image v-if="exchangeRequest.avatar" class="eb-avatar" :src="exchangeRequest.avatar" mode="aspectFill" />
|
||||
<view v-else class="eb-avatar eb-avatar-ph">{{ exchangeRequest.name.charAt(0) }}</view>
|
||||
<view class="eb-info">
|
||||
<view class="eb-name-row">
|
||||
<text class="eb-name">{{ exchangeRequest.name }}</text>
|
||||
<text class="eb-badge iconfont icon-dui"></text>
|
||||
</view>
|
||||
<text class="eb-job">{{ exchangeRequest.job_title }}{{ exchangeRequest.company ? ' · ' + exchangeRequest.company : '' }}</text>
|
||||
<text class="eb-time">{{ exchangeRequest.time }} 向您发起名片交换</text>
|
||||
</view>
|
||||
<view class="eb-actions">
|
||||
<view class="eb-act-item" @tap.stop="onIgnoreExchange">
|
||||
<view class="eb-act eb-act-ignore">
|
||||
<text class="iconfont icon-guanbi"></text>
|
||||
</view>
|
||||
<text class="eb-act-text">忽略</text>
|
||||
</view>
|
||||
<view class="eb-act-item" @tap.stop="onAgreeExchange">
|
||||
<view class="eb-act eb-act-agree">
|
||||
<text class="iconfont icon-dui"></text>
|
||||
</view>
|
||||
<text class="eb-act-text">同意</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view class="detail-loading" v-if="isLoading">加载中…</view>
|
||||
|
||||
@@ -135,7 +171,16 @@ export default {
|
||||
errorMsg: '',
|
||||
showShare: false,
|
||||
shareUrl: '',
|
||||
qrUrl: ''
|
||||
qrUrl: '',
|
||||
// 交换名片请求(静态占位数据, 接口就绪后替换为后端返回)
|
||||
exchangeRequest: {
|
||||
count: 1,
|
||||
name: '名片君',
|
||||
job_title: '销售经理',
|
||||
company: '示例科技有限公司',
|
||||
avatar: '',
|
||||
time: '今天 14:17'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -306,6 +351,24 @@ export default {
|
||||
this.buildShareInfo();
|
||||
this.showShare = true;
|
||||
},
|
||||
// 「名片样式」: 与分享二维码无关, 不再打开分享抽屉。
|
||||
// 样式选择页尚未开发, 先给占位提示; 后续实现后把这里换成跳转/弹层即可。
|
||||
onStyleTap() {
|
||||
uni.showToast({ title: '名片样式功能开发中', icon: 'none' });
|
||||
},
|
||||
// 「交换名片」提醒条: 静态占位, 接口就绪后替换数据源并接真实请求
|
||||
goExchangeReq() {
|
||||
uni.showToast({ title: '交换名片功能开发中', icon: 'none' });
|
||||
},
|
||||
viewExchangeCard() {
|
||||
uni.showToast({ title: '查看对方名片（接口待接入）', icon: 'none' });
|
||||
},
|
||||
onIgnoreExchange() {
|
||||
uni.showToast({ title: '已忽略（接口待接入）', icon: 'none' });
|
||||
},
|
||||
onAgreeExchange() {
|
||||
uni.showToast({ title: '已同意（接口待接入）', icon: 'none' });
|
||||
},
|
||||
closeShare() {
|
||||
this.showShare = false;
|
||||
},
|
||||
@@ -522,6 +585,162 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 交换名片请求提醒条(参考图: 宫格下方出现对方要交换的名片)
|
||||
// 数据先用假数据占位(exchangeRequest), 接口就绪后替换数据源即可
|
||||
.exchange-bar {
|
||||
margin: 24rpx 24rpx 0;
|
||||
// 参考图: 整条外框为蓝色描边, 内层名片区白底, 顶部提醒行为浅蓝底
|
||||
background-color: #ffffff;
|
||||
border: 2rpx solid #2aa5ff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
.eb-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #eef5ff;
|
||||
}
|
||||
|
||||
.eb-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #2aa5ff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.eb-head-text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #2aa5ff;
|
||||
}
|
||||
|
||||
.eb-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #9fb4cc;
|
||||
}
|
||||
|
||||
.eb-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 名片区独立白底, 与浅蓝提醒行分块(参考图)
|
||||
padding: 24rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.eb-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background-color: #2aa5ff;
|
||||
}
|
||||
|
||||
.eb-avatar-ph {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.eb-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.eb-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eb-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.eb-badge {
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #2aa5ff;
|
||||
}
|
||||
|
||||
.eb-job {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #7b8794;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.eb-time {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: #a9b4c0;
|
||||
}
|
||||
|
||||
.eb-actions {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
// 参考图: 上方图标圆 + 下方文字(忽略/同意)
|
||||
.eb-act-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.eb-act {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
// 忽略: 白底细描边圆 + 灰色 ✕
|
||||
&.eb-act-ignore {
|
||||
background-color: #ffffff;
|
||||
border: 2rpx solid #bcccdc;
|
||||
color: #7b8794;
|
||||
}
|
||||
|
||||
// 同意: 蓝底实心圆 + 白色 ✓
|
||||
&.eb-act-agree {
|
||||
background-color: #2aa5ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.eb-act-text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.2;
|
||||
color: #8a94a6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 分享面板(微信式底部抽屉, 与 wap 留资抽屉同风格) */
|
||||
.share-mask {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user