428 lines
9.6 KiB
Vue
428 lines
9.6 KiB
Vue
<template>
|
||
<view style="width: 100%;height: 300upx;background: #FFFFFF;position: absolute;left:0;bottom: 0;">
|
||
<!-- #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP-ALIPAY || MP-TOUTIAO -->
|
||
<view class="share-pop">
|
||
<view class="share-item"
|
||
v-for="(item, index) in providerList"
|
||
:key="index"
|
||
@click="clickHandler(item)">
|
||
<image :src="item.img" mode=""></image>
|
||
<view class="">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="button-bottom">
|
||
<button class="btn btn-w btn-square" @click="close()">关闭</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="share-pop">
|
||
<view class="share-item">
|
||
<button class="btn" open-type="share">
|
||
<image src="/static/image/share-f.png" mode=""></image>
|
||
<view class="">
|
||
分享微信好友
|
||
</view>
|
||
</button>
|
||
</view>
|
||
<view class="share-item" @click="createPoster()">
|
||
<image src="/static/image/poster.png" mode=""></image>
|
||
<view class="">生成海报</view>
|
||
</view>
|
||
</view>
|
||
<view class="button-bottom">
|
||
<button class="btn btn-w btn-square" @click="close()">关闭</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<view class="share-pop">
|
||
<view class="share-item">
|
||
<image src="/static/image/share-f.png" mode=""></image>
|
||
<button class="btn" open-type="share">分享给好友</button>
|
||
</view>
|
||
<view class="share-item" @click="createPoster()">
|
||
<image src="/static/image/poster.png" mode=""></image>
|
||
<view class="">生成海报</view>
|
||
</view>
|
||
</view>
|
||
<view class="button-bottom">
|
||
<button class="btn btn-w btn-square" @click="close()">关闭</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef MP-TOUTIAO -->
|
||
<view class="share-pop">
|
||
<view class="share-item" @click="createPoster()">
|
||
<image src="/static/image/poster.png" mode=""></image>
|
||
<view class="">生成海报</view>
|
||
</view>
|
||
</view>
|
||
<view class="button-bottom">
|
||
<button class="btn btn-w btn-square" @click="close()">关闭</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { h5Url } from '@/config/config.js'
|
||
// #ifdef MP-TOUTIAO
|
||
import {ttPlatform} from '@/config/config.js'
|
||
// #endif
|
||
export default {
|
||
props: {
|
||
// 商品id
|
||
goodsId: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 分享的图片
|
||
shareImg: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 分享标题
|
||
shareTitle: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 分享内容
|
||
shareContent: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 分享链接
|
||
shareHref: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
shareType: 0,
|
||
providerList: [] // 分享通道 包含生成海报
|
||
}
|
||
},
|
||
mounted () {
|
||
/**
|
||
*
|
||
* H5端分享两种 (微信浏览器内引导用户去分享, 其他浏览器)
|
||
*
|
||
*/
|
||
// #ifdef H5
|
||
if (this.$common.isWeiXinBrowser()) {
|
||
// 微信浏览器里面
|
||
} else {
|
||
// 其他浏览器里面
|
||
this.providerList = [
|
||
{
|
||
name: '分享给好友',
|
||
cate: 'share',
|
||
id: 'share',
|
||
img: '/static/image/share-f.png',
|
||
sort: 0
|
||
},
|
||
{
|
||
name: '生成海报',
|
||
cate: 'poster',
|
||
id: 'poster',
|
||
img: '/static/image/poster.png',
|
||
sort: 1
|
||
}
|
||
]
|
||
}
|
||
// #endif
|
||
|
||
|
||
/**
|
||
*
|
||
* 支付宝小程序中的分享
|
||
*
|
||
*/
|
||
// #ifdef MP-ALIPAY
|
||
this.providerList = [
|
||
{
|
||
name: '生成海报',
|
||
cate: 'poster',
|
||
id: 'poster',
|
||
img: '/static/image/ic-img.png',
|
||
sort: 1
|
||
}
|
||
]
|
||
// #endif
|
||
|
||
|
||
/**
|
||
*
|
||
* 头条系小程序分享
|
||
*
|
||
*/
|
||
// #ifdef MP-TOUTIAO
|
||
this.providerList = [
|
||
{
|
||
name: '生成海报',
|
||
cate: 'poster',
|
||
id: 'poster',
|
||
img: '/static/image/ic-img.png',
|
||
sort: 1
|
||
}
|
||
]
|
||
// #endif
|
||
|
||
|
||
/**
|
||
*
|
||
* H5+ 获取分享通道
|
||
*
|
||
*/
|
||
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
||
uni.getProvider({
|
||
service: 'share',
|
||
success: (e) => {
|
||
let data = []
|
||
for (let i = 0; i < e.provider.length; i++) {
|
||
switch (e.provider[i]) {
|
||
case 'weixin':
|
||
data.push({
|
||
name: '分享到微信好友',
|
||
cate: 'share',
|
||
id: 'weixin',
|
||
img: '/static/image/ic-wechat.png',
|
||
sort: 0
|
||
})
|
||
data.push({
|
||
name: '分享到微信朋友圈',
|
||
cate: 'share',
|
||
id: 'weixin',
|
||
type:'WXSenceTimeline',
|
||
img: '/static/image/circle-of-friends.png',
|
||
sort:1
|
||
})
|
||
break;
|
||
// case 'sinaweibo':
|
||
// data.push({
|
||
// name: '分享到新浪微博',
|
||
// cate: 'share',
|
||
// id: 'sinaweibo',
|
||
// img: '/static/image/sina-weibo.png',
|
||
// sort:2
|
||
// })
|
||
// break;
|
||
case 'qq':
|
||
data.push({
|
||
name: '分享到QQ',
|
||
cate: 'share',
|
||
id: 'qq',
|
||
img: '/static/image/qq.png',
|
||
sort:3
|
||
})
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
data.push({
|
||
name: '生成海报',
|
||
cate: 'poster',
|
||
id: 'poster',
|
||
img: '/static/image/poster.png',
|
||
sort: 5
|
||
})
|
||
this.providerList = data.sort((x,y) => {
|
||
return x.sort - y.sort
|
||
});
|
||
},
|
||
fail: (e) => {
|
||
// console.log('获取分享通道失败', e)
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
methods: {
|
||
// 关闭弹出层
|
||
close () {
|
||
this.$emit('close')
|
||
},
|
||
// 点击操作
|
||
clickHandler (e) {
|
||
if (e.cate === 'poster') {
|
||
this.createPoster()
|
||
} else {
|
||
// 去分享
|
||
this.share(e)
|
||
}
|
||
},
|
||
// 生成海报
|
||
createPoster () {
|
||
let data = {
|
||
id: this.goodsId,
|
||
type: 1
|
||
}
|
||
|
||
let pages = getCurrentPages()
|
||
let page = pages[pages.length - 1]
|
||
|
||
// #ifdef H5
|
||
data.source = 1;
|
||
data.return_url = h5Url + '../../pagesU/user/jump';
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
data.source = 2;
|
||
data.return_url = '../../pagesU/user/jump'; //page.route;
|
||
// #endif
|
||
|
||
// #ifdef MP-ALIPAY
|
||
data.source = 3;
|
||
data.return_url = '../../pagesU/user/jump';//page.__proto__.route;
|
||
// #endif
|
||
|
||
// #ifdef MP-TOUTIAO
|
||
data.source = 4;
|
||
data.return_url = '../../pagesU/user/jump';//page.__proto__.route;
|
||
data.tt_platform = ttPlatform;
|
||
// #endif
|
||
|
||
let userToken = this.$db.get('userToken')
|
||
|
||
if (userToken) {
|
||
data.user_id = userToken
|
||
}
|
||
|
||
this.$api.createPoster(data, res => {
|
||
if (res.status) {
|
||
this.close()
|
||
this.$common.navigateTo('../../pagesU/user/share?poster=' + encodeURIComponent(res.data))
|
||
} else {
|
||
this.$mHelper.toast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 分享操作
|
||
async share (e) {
|
||
// console.log('分享通道:'+ e.id +'； 分享类型:' + this.shareType);
|
||
// if(!this.shareContent){
|
||
// uni.showModal({
|
||
// content:'分享内容不能为空',
|
||
// showCancel:false
|
||
// })
|
||
// return;
|
||
// }
|
||
//
|
||
// if(!this.shareImg){
|
||
// uni.showModal({
|
||
// content:'分享图片不能为空',
|
||
// showCancel:false
|
||
// })
|
||
// return;
|
||
// }
|
||
|
||
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
||
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
|
||
})
|
||
},
|
||
complete:function(){
|
||
// console.log('分享操作结束!')
|
||
}
|
||
}
|
||
|
||
shareOPtions.summary = this.shareContent ? this.shareContent : ''
|
||
shareOPtions.imageUrl = this.shareImg ? this.shareImg : ''
|
||
shareOPtions.title = this.shareTitle ? this.shareTitle : ''
|
||
shareOPtions.href = this.shareHref ? this.shareHref : ''
|
||
|
||
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 = this.shareHref
|
||
shareOPtions.title = this.shareTitle
|
||
}
|
||
uni.share(shareOPtions);
|
||
// #endif
|
||
},
|
||
// 压缩图片 图文分享要求分享图片大小不能超过20Kb
|
||
compress () {
|
||
// console.log('开始压缩');
|
||
let img = this.shareImg;
|
||
return new Promise((res) => {
|
||
var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
|
||
// console.log('after' + localPath);
|
||
// 压缩size
|
||
plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
|
||
entry.file((file) => {// 可通过entry对象操作图片
|
||
// console.log('getFile:' + JSON.stringify(file));
|
||
if(file.size > 20480) {// 压缩后size 大于20Kb
|
||
plus.zip.compressImage({
|
||
src: img,
|
||
dst: img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'),
|
||
width: '10%',
|
||
height: '10%',
|
||
quality: 1,
|
||
overwrite: true
|
||
}, (event) => {
|
||
// console.log('success zip****' + event.size);
|
||
let newImg = img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG');
|
||
res(newImg);
|
||
}, function(error) {
|
||
uni.showModal({
|
||
content:'分享图片太大,需要请重新选择图片!',
|
||
showCancel:false
|
||
})
|
||
});
|
||
}
|
||
});
|
||
}, (e) => {
|
||
// console.log('Resolve file URL failed: ' + e.message);
|
||
uni.showModal({
|
||
content:'分享图片太大,需要请重新选择图片!',
|
||
showCancel:false
|
||
})
|
||
});
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.share-pop{
|
||
height: 300upx;
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
.share-item{
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 26upx;
|
||
color: #333;
|
||
padding: 20upx 0;
|
||
}
|
||
.share-item image{
|
||
width: 80upx;
|
||
height: 80upx;
|
||
margin: 20upx;
|
||
}
|
||
.share-item .btn{
|
||
line-height: 1;
|
||
display: block;
|
||
font-size: 26upx;
|
||
background-color: #fff;
|
||
}
|
||
</style>
|