490 lines
12 KiB
Vue
490 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view style="height:100vh;">
|
|||
|
|
<view class="wanl-share" style="padding-top: 0px;background:#F5F5FA">
|
|||
|
|
<view class="wanl-poster__poster" v-if="posterShow">
|
|||
|
|
<wanlPoster
|
|||
|
|
ref="wanlPoster"
|
|||
|
|
:img="image"
|
|||
|
|
:title="shareTitle"
|
|||
|
|
:price="price"
|
|||
|
|
:marketPrice="marketPrice"
|
|||
|
|
:page="page"
|
|||
|
|
:scene="scene"
|
|||
|
|
@success="posterSuccess"
|
|||
|
|
@close="closeShare"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="wanl-share__share" style="position: fixed;bottom: 0;width: 100%;background: unset;z-index: 999;">
|
|||
|
|
<!-- <view class="head">
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="text-lg">分享到 </view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <scroll-view class="scroll-x solid-bottom" scroll-x="true" show-scrollbar="false"
|
|||
|
|
:scroll-left="scrollAnimation" scroll-with-animation> -->
|
|||
|
|
<view class="scroll-x solid-bottom">
|
|||
|
|
<!-- #ifdef MP -->
|
|||
|
|
<!-- <view class="scroll-item">
|
|||
|
|
<button open-type="share">
|
|||
|
|
<view class="icons bg-green"><text class="wlIcon-31fenxiang"></text></view>
|
|||
|
|
<view class="project text-sm"><text>分享</text></view>
|
|||
|
|
</button>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="scroll-item" v-for="(value, index) in providerList" :key="index" v-if="value"
|
|||
|
|
@tap="share(value)">
|
|||
|
|
<!-- <view class="icons" :class="value.background"><text :class="value.icon"></text></view> -->
|
|||
|
|
<view class="project text-sm">
|
|||
|
|
<text>{{ value.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- </scroll-view> -->
|
|||
|
|
<view class="footer" @tap="closeShare"><text>取消</text></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* WanlShare 分享
|
|||
|
|
* @description 分享组件 深圳前海万联科技有限公司 https://www.wanlshop.com（除万联官方内嵌系统，未经授权严禁使用）
|
|||
|
|
* @著作权：WanlShop 登记号：2020SR0255711 版本：V1.0.0
|
|||
|
|
* @property {Number} scrollAnimation 滚动位置
|
|||
|
|
* @property {Number} shareType 分享类型 0.图文 1.纯文字 2.纯图片 5.小程序
|
|||
|
|
* @property {String} shareTitle 分享标题
|
|||
|
|
* @property {String} shareText 分享详情
|
|||
|
|
* @property {String} image 分享图片 如果是图文分享，且是ios平台，20kb
|
|||
|
|
* @property {String} page 分享链接
|
|||
|
|
* @event {Function} change 关闭弹窗
|
|||
|
|
*/
|
|||
|
|
// import {mapState} from 'vuex';
|
|||
|
|
import wanlPoster from './wanl-poster.vue';
|
|||
|
|
export default {
|
|||
|
|
name: 'WanlShare',
|
|||
|
|
props: {
|
|||
|
|
scrollAnimation: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 300
|
|||
|
|
},
|
|||
|
|
shareType: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 5
|
|||
|
|
},
|
|||
|
|
modalName: {
|
|||
|
|
type: String,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
shareTitle: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
shareText: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
image: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
price: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
marketPrice: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
page: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
scene: {
|
|||
|
|
type: Object,
|
|||
|
|
default () {
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
isReport: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
providerList: [],
|
|||
|
|
providerListBak: [],
|
|||
|
|
posterShow: true,
|
|||
|
|
posterFilePath: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
wanlPoster
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// ...mapState(['common'])
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
let user = uni.getStorageSync('wanlshop:user');
|
|||
|
|
if(user.isLogin){
|
|||
|
|
this.scene.u = user.id;
|
|||
|
|
}
|
|||
|
|
uni.getProvider({
|
|||
|
|
service: 'share',
|
|||
|
|
success: e => {
|
|||
|
|
let data = [];
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
for (let i = 0; i < e.provider.length; i++) {
|
|||
|
|
switch (e.provider[i]) {
|
|||
|
|
case 'weixin':
|
|||
|
|
// data.push({
|
|||
|
|
// name: '微信好友',
|
|||
|
|
// id: 'weixin',
|
|||
|
|
// icon: 'wlIcon-WeChat',
|
|||
|
|
// background: 'bg-green',
|
|||
|
|
// sort: 0
|
|||
|
|
// });
|
|||
|
|
break;
|
|||
|
|
case 'sinaweibo':
|
|||
|
|
// data.push({
|
|||
|
|
// name: '新浪微博',
|
|||
|
|
// id: 'sinaweibo',
|
|||
|
|
// icon: 'wlIcon-WeiBo',
|
|||
|
|
// background: 'red',
|
|||
|
|
// sort: 2
|
|||
|
|
// });
|
|||
|
|
break;
|
|||
|
|
case 'qq':
|
|||
|
|
// data.push({
|
|||
|
|
// name: 'QQ',
|
|||
|
|
// id: 'qq',
|
|||
|
|
// icon: 'wlIcon-QQ',
|
|||
|
|
// background: 'blue',
|
|||
|
|
// sort: 3
|
|||
|
|
// });
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// data.push(
|
|||
|
|
// {
|
|||
|
|
// name: '生成海报',
|
|||
|
|
// id: 'poster',
|
|||
|
|
// icon: 'wlIcon-classify',
|
|||
|
|
// background: 'gray',
|
|||
|
|
// sort: 4
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: '链接',
|
|||
|
|
// id: 'link',
|
|||
|
|
// icon: 'wlIcon-lianjie',
|
|||
|
|
// background: 'gray',
|
|||
|
|
// sort: 5
|
|||
|
|
// });
|
|||
|
|
// if (this.isReport) {
|
|||
|
|
// data.push({
|
|||
|
|
// name: '举报',
|
|||
|
|
// id: 'report',
|
|||
|
|
// icon: 'wlIcon-jubao',
|
|||
|
|
// background: 'gray',
|
|||
|
|
// sort: 6
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
this.providerList = data.sort((x, y) => {
|
|||
|
|
return x.sort - y.sort;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: e => {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '获取分享通道失败',
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async share(e) {
|
|||
|
|
this.toSave();
|
|||
|
|
return
|
|||
|
|
|
|||
|
|
let url = this.common.appConfig.domain + this.page + '?' + this.$wanlshop.parseParams(JSON.parse(JSON.stringify(this.scene).replace('"gr"','"groups_id"')));
|
|||
|
|
// let url1 = this.page + '?' + this.$wanlshop.parseParams(JSON.parse(JSON.stringify(this.scene).replace('"gr"','"groups_id"')));
|
|||
|
|
let params = JSON.parse(JSON.stringify(this.scene).replace('"gr"','"groups_id"'))
|
|||
|
|
params.shareId = uni.getStorageSync('shareId')?uni.getStorageSync('shareId'):null;
|
|||
|
|
console.log(params,"9999",uni.getStorageSync('shareId'))
|
|||
|
|
let url1 = this.page + '?' + this.$wanlshop.parseParams(params);
|
|||
|
|
console.log(url1,"8888888")
|
|||
|
|
if (e.id == 'poster') {
|
|||
|
|
this.openPoster();
|
|||
|
|
} else if (e.id == 'close') {
|
|||
|
|
this.closePoster();
|
|||
|
|
} else if (e.id == 'save') {
|
|||
|
|
this.toSave();
|
|||
|
|
} else if (e.id == 'link') {
|
|||
|
|
this.$wanlshop.copy(url);
|
|||
|
|
} else if (e.id == 'report') {
|
|||
|
|
this.closePoster();
|
|||
|
|
this.complaint();
|
|||
|
|
} else {
|
|||
|
|
if (!this.shareTitle && (this.shareType === 1 || this.shareType === 0)) {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '分享内容不能为空',
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '分享图片不能为空',
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始分享
|
|||
|
|
let shareOPtions = {
|
|||
|
|
provider: e.id,
|
|||
|
|
scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' :
|
|||
|
|
'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏
|
|||
|
|
type: this.shareType,
|
|||
|
|
success: (e) => {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '已分享',
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: (e) => {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: e.errMsg,
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
switch (this.shareType) {
|
|||
|
|
case 0:
|
|||
|
|
shareOPtions.summary = this.shareText ? this.shareText : this.common.appConfig.poster_details;
|
|||
|
|
shareOPtions.imageUrl = this.$wanlshop.oss(this.image, 50, 50);
|
|||
|
|
shareOPtions.title = this.shareTitle;
|
|||
|
|
shareOPtions.href = url;
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
shareOPtions.summary = this.shareText ? this.shareText : this.common.appConfig.poster_details;
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
shareOPtions.imageUrl = this.$wanlshop.oss(this.image, 50, 50);
|
|||
|
|
break;
|
|||
|
|
case 5:
|
|||
|
|
var pages = getCurrentPages();
|
|||
|
|
var page = (pages[pages.length - 1]).route;
|
|||
|
|
// shareOPtions.imageUrl = this.image ? this.$wanlshop.oss(this.image, 50, 50) : this.$wanlshop.oss(this.common.appConfig.guide_logo, 100, 125);
|
|||
|
|
shareOPtions.imageUrl = this.image ? this.$wanlshop.oss(this.image, 50, 50) : this.common.uploaddata.cdnurl+this.common.appConfig.guide_logo;
|
|||
|
|
shareOPtions.title = this.shareTitle;
|
|||
|
|
shareOPtions.miniProgram = {
|
|||
|
|
// id: this.common.appConfig.mp_weixin_id,
|
|||
|
|
id:"gh_504737f2fcee",
|
|||
|
|
// path: page, //微信小程序ID
|
|||
|
|
path: url1, //微信小程序ID
|
|||
|
|
webUrl: url,
|
|||
|
|
type: 0
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
// if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片
|
|||
|
|
// shareOPtions.imageUrl = await this.compress();
|
|||
|
|
// }
|
|||
|
|
if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') { //如果是分享文字到qq，则必须加上href和title
|
|||
|
|
shareOPtions.href = url;
|
|||
|
|
shareOPtions.title = this.shareTitle;
|
|||
|
|
}
|
|||
|
|
console.log(shareOPtions,"shareOPtions")
|
|||
|
|
uni.share(shareOPtions);
|
|||
|
|
}
|
|||
|
|
if (!this.posterShow) {
|
|||
|
|
this.closeShare();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 举报商品
|
|||
|
|
complaint() {
|
|||
|
|
this.$emit('change', 'complaint');
|
|||
|
|
},
|
|||
|
|
// 关闭模态框
|
|||
|
|
closeShare() {
|
|||
|
|
this.closePoster();
|
|||
|
|
this.$emit('change');
|
|||
|
|
},
|
|||
|
|
closePoster(){
|
|||
|
|
if(this.posterShow){
|
|||
|
|
this.providerList = JSON.parse(JSON.stringify(this.providerListBak));
|
|||
|
|
}
|
|||
|
|
this.posterShow = false;
|
|||
|
|
this.$emit('closePoster')
|
|||
|
|
},
|
|||
|
|
openPoster(){
|
|||
|
|
// 深度复制
|
|||
|
|
this.providerListBak = JSON.parse(JSON.stringify(this.providerList));
|
|||
|
|
this.posterShow = true;
|
|||
|
|
},
|
|||
|
|
// 生成海报成功
|
|||
|
|
posterSuccess(e){
|
|||
|
|
this.posterFilePath = e.tempFilePath;
|
|||
|
|
// for(var i = 0; i < this.providerList.length; i++) {
|
|||
|
|
// if(this.providerList[i].id == 'poster'){
|
|||
|
|
// this.providerList[i] = {
|
|||
|
|
// name: '保存海报',
|
|||
|
|
// id: 'save',
|
|||
|
|
// icon: 'wlIcon-xiazai',
|
|||
|
|
// background: 'bg-orange',
|
|||
|
|
// sort: 6
|
|||
|
|
// };
|
|||
|
|
// }
|
|||
|
|
// };
|
|||
|
|
this.providerList.unshift({
|
|||
|
|
name: '保存海报',
|
|||
|
|
id: 'save',
|
|||
|
|
icon: 'wlIcon-xiazai',
|
|||
|
|
background: 'bg-orange',
|
|||
|
|
sort: 6
|
|||
|
|
})
|
|||
|
|
this.providerList.push({
|
|||
|
|
name: '链接',
|
|||
|
|
id: 'link',
|
|||
|
|
icon: 'wlIcon-lianjie',
|
|||
|
|
background: 'gray',
|
|||
|
|
sort: 5
|
|||
|
|
}, {
|
|||
|
|
name: '关闭海报',
|
|||
|
|
id: 'close',
|
|||
|
|
icon: 'wlIcon-31guanbi',
|
|||
|
|
background: 'gray',
|
|||
|
|
sort: 6
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 手动保存
|
|||
|
|
toSave(url) {
|
|||
|
|
console.log('ddddddddd',this.posterFilePath)
|
|||
|
|
// #ifdef H5
|
|||
|
|
// this.$wanlshop.msg('暂不支持H5保存，请长按图片保存');
|
|||
|
|
// #endif
|
|||
|
|
//#ifndef H5
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: this.posterFilePath,
|
|||
|
|
success: (image)=> {
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: image.path,
|
|||
|
|
success: ()=> {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '海报已保存相册',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
this.closeShare();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//#endif
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
page{
|
|||
|
|
height: calc(100vh - 44px);
|
|||
|
|
}
|
|||
|
|
.wanl-share{
|
|||
|
|
height: 100%;
|
|||
|
|
// 海报
|
|||
|
|
&__poster{}
|
|||
|
|
/* 分享 */
|
|||
|
|
&__share {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 11px 11px 0 0;
|
|||
|
|
min-height: 50rpx;
|
|||
|
|
padding-bottom: 0px;
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
.head {
|
|||
|
|
padding: 25rpx 25rpx 10rpx 25rpx;
|
|||
|
|
.content {
|
|||
|
|
justify-content: left;
|
|||
|
|
margin-left: 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.scroll-x {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 24rpx 0;
|
|||
|
|
text-align: left;
|
|||
|
|
// height: 242rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
.scroll-item {
|
|||
|
|
background: #fff;
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
// margin-left: 36rpx;
|
|||
|
|
margin: 0 10rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
&:last-child {
|
|||
|
|
// margin-right: 36rpx;
|
|||
|
|
}
|
|||
|
|
.icons {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
border-radius: 9999rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
display: block;
|
|||
|
|
&.gray {
|
|||
|
|
color: #606060;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
&.red {
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #e6162c;
|
|||
|
|
}
|
|||
|
|
&.blue {
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #3e92e8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
line-height: 1;
|
|||
|
|
background-color: rgba(0, 0, 0, 0);
|
|||
|
|
border: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
&:after {
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.project {
|
|||
|
|
// margin-top: 25rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer {
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .uni-scroll-view-content{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
</style>
|