2025-04-30 14:42:40 +08:00

229 lines
5.7 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 遮罩层 -->
<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>
</template>
<script>
import { h5Copy } from "@/js_sdk/h5-copy/h5-copy.js";
import configs from "@/config/config";
import mpShare from "uview-ui/libs/mixin/mpShare.js";
export default {
mixins: [mpShare],
data() {
return {
configs,
show: true,
list: [
{
color: "#FE3C3C",
title: "微信好友",
icon: "weixin-fill",
type: 0,
},
{
color: "#FE3C3C",
title: "朋友圈",
icon: "weixin-circle-fill",
type: 1,
},
{
color: "#FE3C3C",
title: "消息",
icon: "man-add-fill",
type: 2,
},
],
};
},
// 图片缩略图、 商品名称 、 typegoods,shop,pintuan) 拼团商品分享以及店铺分享
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
shareTitle() {
let shareTitle;
let noSpaces = this.goodsName.split(" ").join("");
if (this.type == "goods") {
shareTitle =`我发现了一个${noSpaces}商品快来跟我一起看看吧`;
} else if (this.type == "shops") {
shareTitle =`我发现了一个${noSpaces}店铺快来跟我一起看看吧`;
} else if (this.type == "pintuan") {
shareTitle =`我拼了一个${noSpaces}快来跟我一起抢购吧!`;
} else if (this.type == "kanjia") {
shareTitle =`请快来帮我砍一刀${noSpaces}`;
}
return shareTitle;
},
// #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.schemeLink + this.link+'&info='+this.shareTitle(),
imageUrl: this.imgfun(this.thumbnail),
type:1,
// summary: configs.schemeLink + this.link+'&info='+this.shareTitle(),
summary: '请复制到无终街APP'+ configs.shareLink + this.link,
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) {
const mofn =
this.goodsName +
"," +
this.price +
"," +
this.thumbnail.split("?")[0].split("com")[1] +
"," +
this.link.split("?")[1];
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
},
};
</script>
<style lang="scss" scoped>
@import "./mp-share.scss";
.share-title {
position: relative;
height: 90rpx;
font-size: 32rpx;
line-height: 90rpx;
text-align: center;
> .share-close {
position: absolute;
right: 0;
right: 20rpx;
top: 30rpx;
}
}
button:after {
border: none;
}
.share-list {
padding: 0 32rpx;
display: flex;
text-align: center;
align-items: center;
> .share-item {
width: 25%;
font-size: 24rpx;
color: #666;
> * {
margin: 8rpx 0;
}
}
}
</style>