|
|
@@ -336,6 +336,133 @@ async function preOrder() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 社交平台配置
|
|
|
+const socialPlatforms = ref([
|
|
|
+ {
|
|
|
+ name: 'copyLink',
|
|
|
+ label: 'Copy Link',
|
|
|
+ icon: '/static/icons/copy-link.png', // 占位图片路径
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'facebook',
|
|
|
+ label: 'Facebook',
|
|
|
+ icon: '/static/icons/facebook.png', // 占位图片路径
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'whatsapp',
|
|
|
+ label: 'Whatsapp',
|
|
|
+ icon: '/static/icons/whatsapp.png', // 占位图片路径
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'instagram',
|
|
|
+ label: 'Instagram',
|
|
|
+ icon: '/static/icons/instagram.png', // 占位图片路径
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'twitter',
|
|
|
+ label: 'Twitter',
|
|
|
+ icon: '/static/icons/twitter.png', // 占位图片路径
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+const showShare = ref<boolean>(false)
|
|
|
+
|
|
|
+// 生成商品分享链接
|
|
|
+function generateShareLink() {
|
|
|
+ // 基础域名 - 根据需求使用bandhubuy.shop.com
|
|
|
+ const baseUrl = 'https://bandhubuy.shop.com'
|
|
|
+ const productUrl = `${baseUrl}/abc123` // 示例链接格式，实际应该根据商品ID生成
|
|
|
+
|
|
|
+ // 分享文案格式：[BandhuBuy] + 商品链接 + 商品名称 + 邀请文案
|
|
|
+ const productName = detail.value.storeName || 'BOLON Classic Aviator Polarized Sunglasses, Exclusive Eyewear Brand'
|
|
|
+ const shareText = `[BandhuBuy] ${productUrl} ${productName}\nGet it on BandhuBuy now!`
|
|
|
+
|
|
|
+ return {
|
|
|
+ url: productUrl,
|
|
|
+ text: shareText,
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 复制链接到剪贴板
|
|
|
+function copyToClipboard() {
|
|
|
+ const { text } = generateShareLink()
|
|
|
+
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: text,
|
|
|
+ success: () => {},
|
|
|
+ fail: () => {
|
|
|
+ toast.error('复制失败，请重试')
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 检查APP是否安装
|
|
|
+function checkAppInstalled(platform: string): boolean {
|
|
|
+ const appSchemes = {
|
|
|
+ facebook: { pname: 'com.facebook.katana', scheme: 'fb://' },
|
|
|
+ whatsapp: { pname: 'com.whatsapp', scheme: 'whatsapp://' },
|
|
|
+ instagram: { pname: 'com.instagram.android', scheme: 'instagram://' },
|
|
|
+ twitter: { pname: 'com.twitter.android', scheme: 'twitter://' },
|
|
|
+ }
|
|
|
+
|
|
|
+ const appInfo = appSchemes[platform]
|
|
|
+ if (!appInfo)
|
|
|
+ return false
|
|
|
+
|
|
|
+ return plus.runtime.isApplicationExist({
|
|
|
+ pname: appInfo.pname,
|
|
|
+ action: appInfo.scheme,
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 打开社交媒体APP分享
|
|
|
+function openSocialApp(platform: string) {
|
|
|
+ const { url, text } = generateShareLink()
|
|
|
+
|
|
|
+ // 先复制分享内容到剪贴板
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: text,
|
|
|
+ success: () => {
|
|
|
+ console.log('分享内容已复制到剪贴板')
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ const shareUrls = {
|
|
|
+ facebook: `fb://facewebmodal/f?href=${encodeURIComponent(url)}`,
|
|
|
+ whatsapp: `whatsapp://send?text=${encodeURIComponent(text)}`,
|
|
|
+ instagram: 'instagram://camera', // Instagram不支持直接分享链接，打开相机
|
|
|
+ twitter: `twitter://post?message=${encodeURIComponent(text)}`,
|
|
|
+ }
|
|
|
+
|
|
|
+ const shareUrl = shareUrls[platform]
|
|
|
+ if (shareUrl) {
|
|
|
+ plus.runtime.openURL(shareUrl, (error) => {
|
|
|
+ console.error('打开APP失败:', error)
|
|
|
+ toast.info('APP未安装，请先安装对应的社交媒体应用')
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 统一分享处理方法
|
|
|
+function handleShare(platform: string) {
|
|
|
+ if (platform === 'copyLink') {
|
|
|
+ copyToClipboard()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查APP是否安装
|
|
|
+ if (!checkAppInstalled(platform)) {
|
|
|
+ toast.info('APP未安装，请先安装对应的社交媒体应用')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开对应的社交媒体APP
|
|
|
+ openSocialApp(platform)
|
|
|
+
|
|
|
+ // 关闭分享弹窗
|
|
|
+ showShare.value = false
|
|
|
+}
|
|
|
+
|
|
|
// 商品详情初始化
|
|
|
onLoad((options) => {
|
|
|
productId.value = options.productId || ''
|
|
|
@@ -354,12 +481,12 @@ onShow(async () => {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <z-paging ref="paging" :use-page-scroll="!showSku" refresher-only @on-refresh="queryDetail" @click="handlePageClick">
|
|
|
+ <z-paging ref="paging" :use-page-scroll="!showSku && !showShare" refresher-only @on-refresh="queryDetail" @click="handlePageClick">
|
|
|
<wd-navbar :bordered="false" safe-area-inset-top fixed :left-arrow="false" :custom-style="`background: ${navBgColor}; transition: background 0.3s;`" custom-class="h-auto!">
|
|
|
<template #title>
|
|
|
<view class="box-border h-full flex items-center justify-between p-24rpx">
|
|
|
<image :src="`/static/icons/left-icon${navBgColor === '#ffffff' ? '-tr' : ''}.png`" class="h-56rpx w-56rpx" @click="() => goBack()" />
|
|
|
- <image :src="`/static/icons/share-icon${navBgColor === '#ffffff' ? '-tr' : ''}.png`" class="h-56rpx w-56rpx" @click="() => goBack()" />
|
|
|
+ <image :src="`/static/icons/share-icon${navBgColor === '#ffffff' ? '-tr' : ''}.png`" class="h-56rpx w-56rpx" @click="showShare = true" />
|
|
|
</view>
|
|
|
</template>
|
|
|
</wd-navbar>
|
|
|
@@ -700,6 +827,27 @@ onShow(async () => {
|
|
|
</view>
|
|
|
</view>
|
|
|
</wd-action-sheet>
|
|
|
+ <wd-action-sheet v-model="showShare" title="Share with Friends and Family" :z-index="999" @close="showShare = false">
|
|
|
+ <view class="flex justify-between gap-24rpx px-24rpx py-32rpx">
|
|
|
+ <view
|
|
|
+ v-for="item in socialPlatforms"
|
|
|
+ :key="item.name"
|
|
|
+ class="flex flex-col items-center"
|
|
|
+ @click="handleShare(item.name)"
|
|
|
+ >
|
|
|
+ <view class="mb-20rpx">
|
|
|
+ <image
|
|
|
+ :src="item.icon"
|
|
|
+ class="h-80rpx w-80rpx"
|
|
|
+ mode="aspectFit"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <text class="text-24rpx text-#666 font-medium">
|
|
|
+ {{ item.label }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </wd-action-sheet>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
liangan
