app/components/m-share/index.vue

243 lines
5.4 KiB
Vue
Raw Normal View History

2025-03-14 16:27:50 +08:00
<template>
2025-04-25 18:10:54 +08:00
<!-- 遮罩层 -->
<u-popup
@close="close"
v-model="show"
mode="bottom"
border-radius="30"
height="260rpx"
>
<view class="share-title">
<span>分享至</span>
</view>
<view class="share-list">
<!-- #ifdef MP-WEIXIN -->
<view class="share-item">
<button
class="share-btn"
open-type="share"
>
<u-icon
color="#04BE02"
size="80"
name="weixin-fill"
></u-icon>
微信好友
</button>
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view
class="share-item"
@click="handleShare(item)"
v-for="(item, index) in list"
:key="index"
>
<u-icon
:color="item.color"
size="80"
:name="item.icon"
></u-icon>
<view>{{ item.title }}</view>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view
class="share-item"
@click="copyLink()"
>
<u-icon
color="#b4aee8"
size="80"
name="share-fill"
></u-icon>
<view>{{ '复制链接' }}</view>
</view>
<!-- #endif -->
</view>
</u-popup>
2025-03-14 16:27:50 +08:00
</template>
<script>
2025-04-25 18:10:54 +08:00
import { h5Copy } from '@/js_sdk/h5-copy/h5-copy.js';
import configs from '@/config/config';
import mpShare from 'uview-ui/libs/mixin/mpShare.js';
2025-03-14 16:27:50 +08:00
export default {
2025-04-25 18:10:54 +08:00
mixins: [mpShare],
data() {
return {
configs,
show: true,
list: [
{
color: '#04BE02',
title: '微信好友',
icon: 'weixin-fill',
type: 0
},
{
color: '#04BE02',
title: '朋友圈',
icon: 'weixin-circle-fill',
type: 1
},
{
color: '#04BE02',
title: '消息',
icon: 'weixin-circle-fill',
type: 2
}
]
};
},
// 图片缩略图、 商品名称 、 typegoods,shop,pintuan) 拼团商品分享以及店铺分享
2025-03-14 16:27:50 +08:00
2025-04-25 18:10:54 +08:00
props: ['thumbnail', 'goodsName', 'type', 'goodsId', 'link', 'price'],
methods: {
close() {
this.$emit('close');
},
// h5复制链接
// #ifdef H5
copyLink() {
let content;
if (this.link) {
content = this.configs.shareLink + this.link;
} else {
content = this.configs.shareLink + getCurrentPages()[getCurrentPages().length - 1].__page__.fullPath;
}
if (content === null || content === undefined) {
content = '';
} else content = content + '';
const result = h5Copy(content);
if (result === false) {
uni.showToast({
title: '不支持'
});
} else {
uni.showToast({
title: '复制成功',
icon: 'none'
});
}
},
// #endif
2025-03-14 16:27:50 +08:00
2025-04-25 18:10:54 +08:00
shareTitle() {
let shareTitle;
if (this.type == 'goods') {
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
} else if (this.type == 'shops') {
shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`;
} else if (this.type == 'pintuan') {
shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`;
} else if (this.type == 'kanjia') {
shareTitle = `请快来帮我砍一刀${this.goodsName}`;
}
return shareTitle;
},
2025-03-14 16:27:50 +08:00
2025-04-25 18:10:54 +08:00
// #ifdef APP-PLUS
handleShare(val) {
if (val.type <= 1) {
let scene; // "WXSenceTimeline 朋友圈 WXSceneSession 微信好友"
val.type == 1 ? (scene = 'WXSenceTimeline') : (scene = 'WXSceneSession');
uni.share({
provider: 'weixin',
scene: scene,
href: configs.shareLink + this.link,
imageUrl: this.thumbnail,
type: 0,
summary: this.goodsName,
title: this.shareTitle(),
success: function (res) {
uni.showToast({
title: '分享成功!',
duration: 2000,
icon: 'none'
});
this.$emit('close');
},
fail: function (err) {
uni.showToast({
title: '分享失败!',
duration: 2000,
icon: 'none'
});
this.$emit('close');
}
});
}
if (val.type == 2) {
// 优化复制逻辑,确保内容存在
// props: ["thumbnail", "goodsName", "type", "goodsId", "link","price"],
// console.log(this.link,'===')
// const mofn=JSON.stringify('名字:'+this.goodsName+',价格:'+this.price+','+this.link)
2025-04-21 17:39:41 +08:00
2025-04-25 18:10:54 +08:00
const mofn = this.goodsName + ',' + this.price + ',' + this.thumbnail.split('?')[0].split('com')[1] + ',' + this.link.split('?')[1];
// const mofn={nage:this.goodsName,price:this.price,img:this.thumbnail.split('?')[0],link:this.link}
console.log('===+++', mofn.split(',')[1]);
console.log('===+++', this.thumbnail);
console.log('===+++', mofn.split(',')[3]);
// uni.setClipboardData({
// data: mofn,
// success: () => {
// uni.showToast({
// title: "复制成功",
// icon: "none",
// });
// uni.switchTab({
// url: "/pages/tabbar/im/index",
// fail: (err) => {
// console.error("跳转失败--:", err); // 查看具体错误
// },
// });
// },
// fail: () => {
// uni.showToast({
// title: "不支持",
// });
// },
// });
}
}
// #endif
}
2025-03-14 16:27:50 +08:00
};
</script>
<style lang="scss" scoped>
2025-04-25 18:10:54 +08:00
@import './mp-share.scss';
2025-03-14 16:27:50 +08:00
.share-title {
2025-04-25 18:10:54 +08:00
position: relative;
height: 90rpx;
font-size: 32rpx;
line-height: 90rpx;
text-align: center;
> .share-close {
position: absolute;
right: 0;
right: 20rpx;
top: 30rpx;
}
2025-03-14 16:27:50 +08:00
}
button:after {
2025-04-25 18:10:54 +08:00
border: none;
2025-03-14 16:27:50 +08:00
}
.share-list {
2025-04-25 18:10:54 +08:00
padding: 0 32rpx;
display: flex;
text-align: center;
align-items: center;
> .share-item {
width: 25%;
font-size: 24rpx;
color: #666;
> * {
margin: 8rpx 0;
}
}
2025-03-14 16:27:50 +08:00
}
2025-04-21 17:39:41 +08:00
</style>