151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<template>
|
||
<view class="forward-page">
|
||
<!-- 名片预览 -->
|
||
<view class="fp-card">
|
||
<image v-if="avatar" class="fp-avatar" :src="avatar" mode="aspectFill" />
|
||
<view v-else class="fp-avatar fp-avatar-ph">{{ (title || '?').slice(0, 1) }}</view>
|
||
<view class="fp-name">{{ title || '数字名片' }}</view>
|
||
</view>
|
||
|
||
<view class="fp-tip">点击下方按钮，把这张名片直接发给微信好友</view>
|
||
|
||
<!-- 转发: 微信小程序必须用原生 button open-type=share 才能拉起转发面板,
|
||
纯 @tap 无法唤起; 内容取本页 onShareAppMessage -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="fp-btn" open-type="share">发送给朋友</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 || APP-PLUS || MP-HARMONY -->
|
||
<view class="fp-btn" @tap="fallbackShare">发送给朋友</view>
|
||
<!-- #endif -->
|
||
|
||
<view class="fp-sub" v-if="cardUrl">对方点开即可查看名片并保存联系方式</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 名片转发中转页(原生)
|
||
*
|
||
* 背景: 分享出去的 wap 名片页在 web-view 内, 其「分享」按钮无法拉起微信转发面板
|
||
* (web-view 里的 H5 无此能力, 只能复制链接)。由 wap 页在小程序环境下把「分享」
|
||
* 跳到本页, 本页用原生 button(open-type=share) 直接唤起「发送给朋友」。
|
||
*
|
||
* 入参(query, 均需 encodeURIComponent):
|
||
* url wap 名片页地址(转发出去仍落地 card/share 的 web-view 页)
|
||
* title 名片姓名(转发卡片标题)
|
||
* avatar 头像(转发卡片封面, 可空)
|
||
*/
|
||
export default {
|
||
data() {
|
||
return {
|
||
cardUrl: '',
|
||
title: '',
|
||
avatar: ''
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.cardUrl = options && options.url ? decodeURIComponent(options.url) : '';
|
||
this.title = options && options.title ? decodeURIComponent(options.title) : '';
|
||
this.avatar = options && options.avatar ? decodeURIComponent(options.avatar) : '';
|
||
uni.setNavigationBarTitle({ title: '分享名片' });
|
||
},
|
||
onReady() {
|
||
uni.setNavigationBarTitle({ title: '分享名片' });
|
||
},
|
||
// 右上角菜单转发与按钮转发同参
|
||
onShareAppMessage() {
|
||
return {
|
||
title: this.title ? this.title + ' - 数字名片' : '名片分享',
|
||
path: '/pages_tool/card/share' + (this.cardUrl ? '?url=' + encodeURIComponent(this.cardUrl) : ''),
|
||
imageUrl: this.avatar || ''
|
||
};
|
||
},
|
||
methods: {
|
||
fallbackShare() {
|
||
// 非微信小程序端无转发面板, 退化为复制链接
|
||
if (this.cardUrl) {
|
||
uni.setClipboardData({
|
||
data: this.cardUrl,
|
||
success: () => uni.showToast({ title: '链接已复制', icon: 'none' })
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.forward-page {
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
padding: 48rpx 40rpx;
|
||
background: linear-gradient(160deg, #29a3ff 0%, #1f8fef 34%, #f5f7fa 34.2%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.fp-card {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 56rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-shadow: 0 8rpx 30rpx rgba(31, 143, 239, 0.12);
|
||
|
||
.fp-avatar {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 50%;
|
||
background: #eef4fb;
|
||
|
||
&.fp-avatar-ph {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #1f8fef;
|
||
font-size: 60rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.fp-name {
|
||
margin-top: 24rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #222;
|
||
}
|
||
}
|
||
|
||
.fp-tip {
|
||
margin-top: 56rpx;
|
||
font-size: 28rpx;
|
||
color: #555;
|
||
}
|
||
|
||
.fp-btn {
|
||
margin-top: 40rpx;
|
||
width: 100%;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
border-radius: 46rpx;
|
||
background: linear-gradient(150deg, #29a3ff, #1f8fef);
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
border: none;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.fp-sub {
|
||
margin-top: 24rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|