334 lines
9.1 KiB
Plaintext
334 lines
9.1 KiB
Plaintext
<template>
|
|
<view :class="{'~show': !hide}" class="~cu-modal cu-modal">
|
|
<view class="~cu-dialog" style="background-color: white;width: 600rpx;border-radius: 24rpx;">
|
|
<view class="~bg-white ~justify-end">
|
|
<view bindtap="hideModel" class="~action ~f-fec">
|
|
<text class="~cuIcon-close ~font_40 ~color999" style="line-height: 40rpx;margin: 30rpx 30rpx 0 0;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="~text-center m_sha">
|
|
<view class="~text-center ~font_32 ~bold ~color333" style="margin-bottom: 42rpx;line-height: 32rpx;margin-top: -22rpx">分享至</view>
|
|
<view class="~text-center ~inline-block" style="width: 50%" @tap.stop="hideModel">
|
|
<button class="~btn ~text-center ~font_28" open-type="share" style="line-height: 1.6;padding: 6rpx">
|
|
<image class="share-image" mode="aspectFit"
|
|
src="https://images.ufutx.com/202106/16/d14663aeb3a6663ed926e8e3949ca8fb.png"></image>
|
|
<view class="font_24 ~black_6">微信好友</view>
|
|
</button>
|
|
</view>
|
|
<view class="~text-center ~inline-block ~color666" style="width: 50%">
|
|
<button class="~btn ~text-center ~font_28" style="line-height: 1.6;padding: 6rpx" @tap="showPic">
|
|
<block v-if="poster == 'custom'">
|
|
<image class="share-image" mode="aspectFit"
|
|
src="https://image.fulllinkai.com/202112/03/4e3908cc9b20b9af0c35908eb7b2fa7b.png"></image>
|
|
<view class="~font_24 black_6">生成海报</view>
|
|
</block>
|
|
<block v-else>
|
|
<image class="share-image" mode="aspectFit"
|
|
src="https://images.ufutx.com/202106/16/114c3bcabf2fdabc555923d61a3b790d.png"></image>
|
|
<view class="~font_24 ~black_6">朋友圈</view>
|
|
</block>
|
|
</button>
|
|
</view>
|
|
<view class="clearfloat"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 海报预览-->
|
|
<view :class="{'~show':modalName=='Image'}" class="~cu-modal cu-modal">
|
|
<view class="~cu-dialog" style="width: 600rpx; background: none;border-radius: 0;">
|
|
<view class="~f-fec cu-close" bindtap="listenerCancel">
|
|
<image class="_icon" mode="aspectFit"
|
|
src="https://image.fulllinkai.com/202205/20/6bd2707c19476eb7dc42910ed4f9014c.png"></image>
|
|
</view>
|
|
<image class="share_Pic" mode="widthFix" src="{{shareImage}}"></image>
|
|
<image class="saveBtn" mode="widthFix" @tap="saveImage('save')"
|
|
src="https://image.fulllinkai.com/202205/20/104374082c9e2bd160ee963b4f29c98f.png"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 授权弹框-->
|
|
<view :class="{'~show':modalName=='DialogModal'}" class="~cu-modal cu-modal">
|
|
<view class="cu-dialog d_set">
|
|
<view class="set_text color333 bold font_32">温馨提示</view>
|
|
<view class="set_subT color333 font_28">需要你授权才能保存到相册哦</view>
|
|
<view class="set_btn f-fcc">
|
|
<button class="_btn close_btn font_30 color-666" @tap="hideOpenSet">取消</button>
|
|
<button class="_btn font_30 white" open-type="openSetting" @opensetting="openSetting_image">打开设置
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import base from '../mixins/base'
|
|
import https from '../mixins/https'
|
|
|
|
wepy.component({
|
|
mixins: [base, https],
|
|
props: {
|
|
shareImage: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
party_id: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
hide: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
library_id: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
poster: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
data: {
|
|
showImage: true,
|
|
showOpenSet: true,
|
|
formID: [],
|
|
modalName: ''
|
|
},
|
|
|
|
methods: {
|
|
saveImageToPhotosAlbum(img) {
|
|
let vm = this
|
|
wepy.saveImageToPhotosAlbum({
|
|
filePath: img,
|
|
success: (res) => {
|
|
console.log(res, '成功')
|
|
vm.modalName = ''
|
|
vm.hide = true
|
|
vm.$emit('hideShare', vm.hide)
|
|
wx.hideLoading()
|
|
wx.showModal({
|
|
title: '已保存在相册了！',
|
|
content: '赶紧分享给你的朋友吧！'
|
|
})
|
|
},
|
|
fail: (Error) => {
|
|
console.log(Error, '失败')
|
|
wx.hideLoading()
|
|
wx.getSetting({
|
|
success(res) {
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
vm.modalName = 'DialogModal'
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
hideModel() {
|
|
this.hide = true
|
|
this.$emit('hideShare', this.hide)
|
|
},
|
|
showPic() {
|
|
if (this.poster == 'custom') {
|
|
if (this.party_id && this.party_id == '1596') {
|
|
this.$goto('pages/party/activitiyPoster?party_id=1596&is_mp_show=1')
|
|
} else {
|
|
this.hide = true
|
|
this.$emit('hideShare', this.hide)
|
|
this.$emit('shareShow')
|
|
}
|
|
} else {
|
|
if (this.shareImage) {
|
|
if (this.party_id && this.party_id == '1596') {
|
|
this.$goto('/pages/party/activitiyPoster?party_id=1596&is_mp_show=1&pic=' + this.shareImage)
|
|
} else {
|
|
this.showImage = false
|
|
this.hide = true
|
|
this.modalName = 'Image'
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '海报生成失败，请重试！'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
listenerCancel() {
|
|
this.modalName = ''
|
|
this.hide = true
|
|
this.$emit('hideShare', this.hide)
|
|
},
|
|
hideOpenSet() {
|
|
this.modalName = ''
|
|
this.hide = true
|
|
this.$emit('hideShare', this.hide)
|
|
this.$showToast('已取消')
|
|
},
|
|
// 授权访问image
|
|
openSetting_image(e) {
|
|
let vm = this
|
|
wx.showLoading({
|
|
title: '保存中...',
|
|
mask: true
|
|
})
|
|
if (e.$wx.detail.authSetting['scope.writePhotosAlbum']) {
|
|
vm.modalName = ''
|
|
vm.hide = true
|
|
vm.$emit('hideShare', vm.hide)
|
|
if (vm.shareImage.includes('com')) {
|
|
console.log('带com的网络路径')
|
|
wepy.downloadFile({
|
|
url: vm.shareImage,
|
|
success: (res) => {
|
|
wepy.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: (res) => {
|
|
wx.hideLoading()
|
|
vm.$showToast('保存成功')
|
|
},
|
|
fail: () => {
|
|
wx.hideLoading()
|
|
vm.$showToast('已取消')
|
|
}
|
|
})
|
|
},
|
|
fail: () => {
|
|
console.log('fail')
|
|
}
|
|
})
|
|
} else {
|
|
console.log('不带com的本地路径')
|
|
wepy.saveImageToPhotosAlbum({
|
|
filePath: vm.shareImage,
|
|
success: (res) => {
|
|
wx.hideLoading()
|
|
vm.$showToast('保存成功')
|
|
},
|
|
fail: () => {
|
|
wx.hideLoading()
|
|
vm.$showToast('已取消')
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
vm.$showToast('已取消')
|
|
wx.hideLoading()
|
|
}
|
|
},
|
|
saveImage(type) {
|
|
let vm = this
|
|
wx.showLoading({
|
|
title: '保存中...',
|
|
mask: true
|
|
})
|
|
if (vm.shareImage.includes('com')) {
|
|
console.log('带com的网络路径')
|
|
wepy.downloadFile({
|
|
url: vm.shareImage,
|
|
success: (res) => {
|
|
vm.saveImageToPhotosAlbum(res.tempFilePath)
|
|
},
|
|
fail: () => {
|
|
console.log('fail')
|
|
}
|
|
})
|
|
} else {
|
|
console.log('不带com的本地路径')
|
|
vm.saveImageToPhotosAlbum(vm.shareImage)
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
console.log(this.shareImage)
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
.share-image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.m_sha {
|
|
background-color: white;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.cu-modal {
|
|
.d_set{
|
|
padding: 22rpx;
|
|
width: 600rpx;
|
|
border-radius: 24rpx;
|
|
.set_text{
|
|
margin: 25rpx ;
|
|
}
|
|
.set_subT{ font-weight: 400;margin-bottom: 50rpx}
|
|
.set_btn{
|
|
._btn{
|
|
width: 220rpx;
|
|
height: 80rpx;
|
|
background: linear-gradient(270deg, #FF85A5 0%, #FF5380 100%);
|
|
border-radius: 50rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
.close_btn{
|
|
border: 2rpx solid #C2C2C2;
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cu-close {
|
|
position: absolute;
|
|
right: 22rpx;
|
|
top: 22rpx;
|
|
z-index: 999;
|
|
|
|
._icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
padding: 16rpx;
|
|
}
|
|
|
|
}
|
|
|
|
._title {
|
|
letter-spacing: 2rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.share_Pic {
|
|
width: 600rpx;
|
|
height: auto;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.saveBtn {
|
|
width: 600rpx;
|
|
height: auto;
|
|
margin-top: 14rpx;
|
|
}
|
|
|
|
.cu_container {
|
|
margin-top: 42rpx;
|
|
padding: 0 32rpx;
|
|
padding-bottom: 40rpx;
|
|
|
|
.share_icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
}
|
|
button:after{
|
|
border: none;
|
|
}
|
|
}
|
|
</style>
|