jiuyiUniapp/shop/components/share/share.vue

428 lines
9.6 KiB
Vue
Raw 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>
<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>