You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
yanzong_qianduan/components/share-sheet/index.vue

373 lines
10 KiB

4 months ago
<template>
<view class="sharesheet" :class="{ show: modelValue }">
<view class="mask-class sharesheet__mask" @click="onMaskClick"></view>
<view class="sharesheet__container">
<!-- 分享选项列表 -->
<view class="sharesheet__list">
<!-- 选项按钮: 发送给朋友(仅支持小程序) -->
<!-- #ifdef MP -->
<button class="share-item btn-normal" open-type="share" @click="handleCancel()">
<view class="item-image" :style="{ backgroundColor: '#44DB74' }">
<text class="iconfont icon-weixin"></text>
</view>
<view class="item-name">
<text>发送给朋友</text>
</view>
</button>
<!-- #endif -->
<!-- 选项按钮: APP端分享给微信好友 -->
<!-- #ifdef APP-PLUS -->
<view v-if="enabledAppShareWeixin" class="share-item" @click="handleShareWechat()">
<view class="item-image" :style="{ backgroundColor: '#44DB74' }">
<text class="iconfont icon-weixin"></text>
</view>
<view class="item-name">
<text>微信好友</text>
</view>
</view>
<!-- #endif -->
<!-- 选项按钮: APP端分享到微信朋友圈 -->
<!-- #ifdef APP-PLUS -->
<view v-if="enabledAppShareWeixin" class="share-item" @click="handleShareWechatTimeline()">
<view class="item-image" :style="{ backgroundColor: '#69D416' }">
<text class="iconfont icon-timeline"></text>
</view>
<view class="item-name">
<text>微信朋友圈</text>
</view>
</view>
<!-- #endif -->
<view class="share-item" @click="handlePoster()">
<view class="item-image" :style="{ backgroundColor: '#38beec' }">
<text class="iconfont icon-poster"></text>
</view>
<view class="item-name">
<text>生成海报</text>
</view>
</view>
<view class="share-item" @click="handleCopyLink()">
<view class="item-image" :style="{ backgroundColor: '#38beec' }">
<text class="iconfont icon-link"></text>
</view>
<view class="item-name">
<text>复制链接</text>
</view>
</view>
<!-- <view class="share-item">
<view class="item-image" :style="{ backgroundColor: '#FE8A4F' }">
<text class="iconfont icon-weibo"></text>
</view>
<view class="item-name">
<text>新浪微博</text>
</view>
</view> -->
<!-- <view class="share-item">
<view class="item-image" :style="{ backgroundColor: '#56C0F2' }">
<text class="iconfont icon-qq"></text>
</view>
<view class="item-name">
<text>QQ好友</text>
</view>
</view> -->
<!-- <view class="share-item">
<view class="item-image" :style="{ backgroundColor: '#FFBB0D' }">
<text class="iconfont icon-qzone"></text>
</view>
<view class="item-name">
<text>QQ空间</text>
</view>
</view> -->
</view>
<!-- 取消按钮 -->
<view v-if="cancelText" class="sharesheet__footer" @click="handleCancel()">
<view class="btn-cancel">{{ cancelText }}</view>
</view>
</view>
<!-- 海报图弹层 -->
<goods-poster-popup v-model="showGoodsPosterPopup" :apiCall="posterApiCall" :apiParam="posterApiParam" />
</view>
</template>
<!-- 参考的uniapp文档 -->
<!-- https://uniapp.dcloud.io/component/button?id=button -->
<!-- https://uniapp.dcloud.io/api/plugins/share -->
<script>
import Config from '@/core/config'
import { getCurrentPage, buildUrL } from '@/core/app'
import { inArray } from '@/utils/util'
import GoodsPosterPopup from '@/components/goods-poster-popup'
import StoreModel from '@/common/model/Store'
export default {
name: 'ShareSheet',
components: {
GoodsPosterPopup
},
emits: ['update:modelValue'],
props: {
// 控制组件显示隐藏
modelValue: {
Type: Boolean,
default: false
},
// 点击遮罩层取消
cancelWithMask: {
type: Boolean,
default: true
},
// 分享链接的标题
shareTitle: {
type: String,
default: '商品分享'
},
// 分享链接的封面图
shareImageUrl: {
type: String,
default: ''
},
// 取消按钮文字
cancelText: {
type: String,
default: '关闭'
},
// 获取海报图的api方法
posterApiCall: {
type: Function,
default: () => {}
},
// 获取海报图的api参数
posterApiParam: {
type: Object,
default: () => {}
},
},
data() {
return {
// 是否启用分享到微信聊天 (仅APP端支持)
enabledAppShareWeixin: Config.get('enabledAppShareWeixin'),
// 是否显示商品海报图弹层
showGoodsPosterPopup: false,
}
},
// 初始化方法
created() {
this.initSharesheet()
},
methods: {
// 初始化选择项
initSharesheet() {
const app = this
// 获取支持的服务商 (仅APP端支持)
uni.getProvider({
service: 'share',
success({ provider }) {
if (!inArray('weixin', provider)) {
app.enabledAppShareWeixin = false
}
}
})
},
// 点击遮罩层(关闭菜单)
onMaskClick() {
if (this.cancelWithMask) {
this.handleCancel()
}
},
// 获取分享链接 (H5外链)
getShareUrl() {
const { path, query } = getCurrentPage()
return new Promise((resolve, reject) => {
// 获取h5站点地址
StoreModel.h5Url().then(baseUrl => {
// 生成完整的分享链接
const shareUrl = buildUrL(baseUrl, path, query)
resolve(shareUrl)
})
})
},
// 复制商品链接
handleCopyLink() {
const app = this
app.getShareUrl().then(shareUrl => {
// 复制到剪贴板
uni.setClipboardData({
data: shareUrl,
success: () => app.$toast('链接复制成功,快去发送给朋友吧~'),
fail: ({ errMsg }) => app.$toast('复制失败 ' + errMsg),
complete: () => app.handleCancel()
})
})
},
// APP发送给微信好友
// #ifdef APP-PLUS
handleShareWechat() {
const app = this
app.getShareUrl().then(shareUrl => {
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 0,
href: shareUrl,
title: app.shareTitle,
summary: '我发现了一个很不错的商品,赶快来看看吧!',
imageUrl: app.shareImageUrl,
success(res) {
console.log("success:" + JSON.stringify(res));
},
fail({ errCode }) {
if (errCode === -8) {
app.$toast('很抱歉,您的手机没有安装微信~')
}
},
complete: () => app.handleCancel()
})
})
},
// #endif
// APP分享到微信朋友圈
// #ifdef APP-PLUS
handleShareWechatTimeline() {
const app = this
app.getShareUrl().then(shareUrl => {
uni.share({
provider: 'weixin',
scene: 'WXSenceTimeline',
type: 0,
href: shareUrl,
title: app.shareTitle,
summary: '我发现了一个很不错的商品,赶快来看看吧!',
imageUrl: app.shareImageUrl,
success(res) {
console.log("success:" + JSON.stringify(res));
},
fail({ errCode }) {
if (errCode === -8) {
app.$toast('很抱歉,您的手机没有安装微信~')
}
},
complete: () => app.handleCancel()
})
})
},
// #endif
// 关闭菜单
handleCancel() {
this.$emit('update:modelValue', false)
},
// 生成二维码海报
handlePoster() {
this.showGoodsPosterPopup = true
this.handleCancel()
}
}
}
</script>
<style lang="scss" scoped>
.sharesheet {
background-color: #f8f8f8;
font-size: 28rpx;
}
.sharesheet__mask {
position: fixed;
top: 0;
left: var(--window-left);
right: var(--window-right);
bottom: var(--window-bottom);
z-index: 12;
background: rgba(0, 0, 0, 0.7);
display: none;
}
.sharesheet__container {
position: fixed;
left: var(--window-left);
right: var(--window-right);
bottom: var(--window-bottom);
background: #ffffff;
transform: translate3d(0, 50%, 0);
transform-origin: center;
transition: all 0.2s ease;
z-index: 13;
opacity: 0;
visibility: hidden;
border-top-left-radius: 26rpx;
border-top-right-radius: 26rpx;
padding: 50rpx 30rpx 0 30rpx;
// 设置ios刘海屏底部横线安全区域
padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}
.sharesheet__list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: -35rpx;
.share-item {
flex: 0 0 25%;
margin-bottom: 40rpx;
.item-name,
.item-image {
width: 140rpx;
margin: 0 auto;
}
.item-image {
display: flex;
justify-content: center;
align-items: center;
width: 86rpx;
height: 86rpx;
border-radius: 50%;
color: #fff;
font-size: 38rpx;
}
.item-name {
margin-top: 12rpx;
text-align: center;
font-size: 26rpx;
}
}
}
.sharesheet__footer {
background: #fff;
margin-top: 40rpx;
.btn-cancel {
font-size: 28rpx;
text-align: center;
}
}
// 显示状态
.show {
.sharesheet__mask {
display: block;
}
.sharesheet__container {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
</style>