You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
7.3 KiB
310 lines
7.3 KiB
<!-- @closeShareShow 打开底部弹出框 -->
|
|
<!-- @shareImgShow 分享图片弹出框遮罩层点击事件 -->
|
|
<!-- @clickmask 关闭底部弹出框-->
|
|
|
|
<template>
|
|
<view class="shareBottom">
|
|
<PopManager :show="shareBottomShow" :type="type" @clickmask="closeShareBottom">
|
|
<view class="viewMain">
|
|
<view class="mainTitle">
|
|
<!-- #ifdef H5||APP-PLUS -->
|
|
<view class="titleButton" @click="shareImgShow" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}">
|
|
<view class="buttonImage">
|
|
<image :src="imgfixUrls+ 'merchant/shareWx.png'"></image>
|
|
</view>
|
|
<view class="buttonText"><text>微信好友</text></view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="titleButton" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}">
|
|
<button open-type="share" class="shareButton"></button>
|
|
<view class="wxShareView">
|
|
<view class="buttonImage">
|
|
<image :src="imgfixUrls+ 'merchant/shareWx.png'"></image>
|
|
</view>
|
|
<view class="buttonText"><text>微信好友</text></view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="titleButton" @click="goHb" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}">
|
|
<view class="buttonImage">
|
|
<image :src="imgfixUrls+ 'merchant/shareHb.png'"></image>
|
|
</view>
|
|
<view class="buttonText"><text>生成海报</text></view>
|
|
</view>
|
|
<view class="titleButton" @click="goTg" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}"
|
|
v-if="postType==3||postType==4||postType==6||postType==7">
|
|
<view class="buttonImage">
|
|
<image :src="imgfixUrls+ 'merchant/tgsc.png'"></image>
|
|
</view>
|
|
<view class="buttonText"><text>推广素材</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="closeButton" @click="closeShareBottom"><text>关闭</text></view>
|
|
</view>
|
|
</PopManager>
|
|
<!-- #ifdef H5 -->
|
|
<PopManager :show="shareShow" :type="'top'" @clickmask="closeShareShow">
|
|
<cover-view>
|
|
<cover-image :src="imageRoot + 'share.png'" class="coverImg"></cover-image>
|
|
</cover-view>
|
|
</PopManager>
|
|
<!-- #endif -->
|
|
<PopManager :show="iscardPost" :type="'center'" @clickmask="iscardPost = false">
|
|
<view class="iconfont icon-roundclose col-f card-postImageClose f-28" @click="closeCardPost"></view>
|
|
<view class="card-postImage-box">
|
|
<image :src="cardPostImage" mode="" v-if="postType !== '13'"></image>
|
|
<image :src="cardPostImage" mode="" style="width: 90vw;height: 80vh;" v-else></image>
|
|
</view>
|
|
<view class="f-28 saveCrad t-c col-6 b-f" @click="saveCardImage(cardPostImage)">保存名片</view>
|
|
</PopManager>
|
|
<PopManager :show="showCommunity" type="center" @clickmask="showCommunity = false">
|
|
<view v-if="showCommunity" style="width: 90vw;height: 80vh;padding: 30upx;overflow: hidden;background-color: #323332;border-radius: 20upx;">
|
|
<posterlate :postId="postId" :postType="postType"></posterlate>
|
|
</view>
|
|
</PopManager>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
// #ifdef H5
|
|
import wxApi from '@/common/js/wxApi.js';
|
|
// #endif
|
|
import PopManager from '@/components/template/PopManager.vue';
|
|
import posterlate from '@/components/template/posterlate';
|
|
export default {
|
|
data() {
|
|
return {
|
|
shareType: 'top',
|
|
type: 'bottom',
|
|
// shareShow:false
|
|
cardPostImage: null,
|
|
iscardPost: false,
|
|
img:'',
|
|
showCommunity:false
|
|
};
|
|
},
|
|
components: {
|
|
PopManager,
|
|
posterlate
|
|
},
|
|
props:{
|
|
// 分享图片显示
|
|
shareShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 分享弹出框显示
|
|
shareBottomShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 海报类型 详情见海报接口
|
|
postType: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 商户或商品id
|
|
postId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isCard: {
|
|
type: Boolean,
|
|
default: function() {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.img = this.imgfixUrl;
|
|
},
|
|
methods: {
|
|
closeShareShow() {
|
|
this.$emit('closeShareShow');
|
|
},
|
|
shareImgShow() {
|
|
this.$emit('shareImgShow', 'imageShow');
|
|
},
|
|
saveCardImage(cardImageUrl) {
|
|
let _this = this;
|
|
uni.downloadFile({
|
|
url: cardImageUrl,
|
|
success: (result) => {
|
|
if (result.statusCode === 200) {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: result.tempFilePath,
|
|
success: function(res) {
|
|
App.showSuccess('保存成功')
|
|
},
|
|
complete: function() {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
goHb() {
|
|
let _this = this,
|
|
isCard = this.isCard;
|
|
console.log(_this.postId,_this.postType);
|
|
// debugger
|
|
if (isCard) {
|
|
uni.showLoading({})
|
|
if(_this.postType == 12 || _this.postType == 13 || _this.postType == 14){
|
|
App._post_form('&do=Poster', {
|
|
type: _this.postType,
|
|
id: _this.postId
|
|
}, res => {
|
|
_this.setData({
|
|
cardPostImage: res.data.url,
|
|
iscardPost: true
|
|
})
|
|
}, false, () => {
|
|
uni.hideLoading()
|
|
});
|
|
}else{
|
|
App._post_form('&do=Poster', {
|
|
type: '11',
|
|
id: _this.postId
|
|
}, res => {
|
|
_this.setData({
|
|
cardPostImage: res.data.url,
|
|
iscardPost: true
|
|
})
|
|
}, false, () => {
|
|
uni.hideLoading()
|
|
});
|
|
}
|
|
|
|
_this.$emit('gohb', 'showPost')
|
|
} else {
|
|
if(_this.postType == 12 || _this.postType == 13){
|
|
_this.showCommunity = true;
|
|
_this.closeShareBottom();
|
|
}else{
|
|
App.navigationTo({
|
|
url: 'pages/mainPages/poster/poster?id=' + _this.postId + '&type=' + _this.postType
|
|
});
|
|
}
|
|
}
|
|
// _this.shareImgShow();
|
|
},
|
|
goTg() {
|
|
let _this = this
|
|
App.navigationTo({
|
|
url: 'pages/subPages/shareMaterials/index?id=' + _this.postId + '&type=' + _this.postType
|
|
});
|
|
},
|
|
closeShareBottom() {
|
|
this.$emit('clickmask');
|
|
},
|
|
closeCardPost() {
|
|
this.iscardPost = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.coverImg {
|
|
width: 750upx;
|
|
}
|
|
|
|
.closeButton {
|
|
height: 88upx;
|
|
width: 750upx;
|
|
text-align: center;
|
|
|
|
>text {
|
|
line-height: 88upx;
|
|
font-size: 28upx;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
|
|
.buttonText {
|
|
text-align: center;
|
|
|
|
>text {
|
|
font-size: 24upx;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
|
|
.buttonImage {
|
|
margin: auto;
|
|
width: 120upx;
|
|
height: 120upx;
|
|
|
|
>image {
|
|
width: 120upx;
|
|
height: 120upx;
|
|
}
|
|
}
|
|
|
|
.titleButton {
|
|
position: relative;
|
|
margin: 47upx 0 0 0;
|
|
display: inline-block;
|
|
width: 50%;
|
|
}
|
|
|
|
.mainTitle {
|
|
width: 750upx;
|
|
height: 255upx;
|
|
border-bottom: 1upx solid rgba(238, 238, 238, 1);
|
|
}
|
|
|
|
.shareBottom {
|
|
font-size: 0;
|
|
}
|
|
|
|
.viewMain {
|
|
width: 750upx;
|
|
height: 344upx;
|
|
padding-bottom: 140upx;
|
|
background: rgba(255, 255, 255, 1);
|
|
border-radius: 20upx 20upx 0upx 0upx;
|
|
}
|
|
|
|
.shareButton {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.wxShareView {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-postImage-box {
|
|
width: 700upx;
|
|
}
|
|
|
|
.card-postImage-box>image {
|
|
width: 100%;
|
|
height: 700upx;
|
|
border-radius: 10upx;
|
|
}
|
|
|
|
.card-postImageClose {
|
|
text-align: right;
|
|
margin-bottom: 40upx;
|
|
font-size: 48upx;
|
|
}
|
|
|
|
.saveCrad {
|
|
width: 300upx;
|
|
height: 80upx;
|
|
line-height: 80upx;
|
|
border-radius: 40upx;
|
|
margin: 40upx auto 0 auto;
|
|
}
|
|
</style>
|
|
|