forked from zhongyuanhaiju/uniapp
457 lines
11 KiB
Vue
457 lines
11 KiB
Vue
<template>
|
||
<page-meta :page-style="themeColor"></page-meta>
|
||
<view class="page">
|
||
<view class="detail-box">
|
||
<view class="title">文字祝福<text>(自定义)</text></view>
|
||
<view class="textarea">
|
||
<textarea maxlength="15" placeholder="赠你一份好礼，祝你每天都开心快乐！" v-model="message" placeholder-style="font-size:28rpx;color:#999999"></textarea>
|
||
</view>
|
||
|
||
<view class="bottom-btn">
|
||
<button type="primary" @click="openSharePopup">送给朋友</button>
|
||
<button @click="$util.redirectTo('/pages_promotion/giftcard/list')">放入卡包</button>
|
||
</view>
|
||
</view>
|
||
<ns-login ref="login"></ns-login>
|
||
|
||
<!-- 分享弹窗 -->
|
||
<view @touchmove.prevent.stop>
|
||
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
|
||
<view>
|
||
<view class="share-title">分享</view>
|
||
<view class="share-content">
|
||
<!-- #ifdef MP -->
|
||
<view class="share-box">
|
||
<button class="share-btn" :plain="true" open-type="share">
|
||
<view class="iconfont icon-share-friend"></view>
|
||
<text>分享给好友</text>
|
||
</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<view class="share-box" v-if="$util.isWeiXin()">
|
||
<button class="share-btn" @click="maskShow()" :plain="true">
|
||
<view class="iconfont icon-share-friend"></view>
|
||
<text>分享给好友</text>
|
||
</button>
|
||
</view>
|
||
|
||
<view class="share-box" @click="copyUrl">
|
||
<button class="share-btn" :plain="true">
|
||
<view class="iconfont icon-fuzhilianjie"></view>
|
||
<text>复制链接</text>
|
||
</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="share-box" @click="openPosterPopup">
|
||
<button class="share-btn" :plain="true">
|
||
<view class="iconfont icon-pengyouquan"></view>
|
||
<text>生成分享海报</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<!-- 海报 -->
|
||
<view @touchmove.prevent.stop>
|
||
<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
|
||
<template v-if="poster != '-1'">
|
||
<view>
|
||
<view class="image-wrap"><image :src="$util.img(poster)" :show-menu-by-longpress="true" /></view>
|
||
<!-- #ifdef MP || APP-PLUS -->
|
||
<view class="save" @click="saveGoodsPoster()">保存图片</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<view class="save">长按保存图片</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
|
||
</template>
|
||
<view v-else class="msg">{{ posterMsg }}</view>
|
||
</uni-popup>
|
||
|
||
<!-- 分享指示弹出 -->
|
||
<view class="wechat-share" v-if="shareMask" @click="shareMask = false">
|
||
|
||
<image :src="$util.img('public/uniapp/giftcard/wechat_share.png')" mode="widthFix"></image>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
components: {
|
||
},
|
||
data() {
|
||
return {
|
||
memberCardId:0,
|
||
cardInfo:null,
|
||
message:'',
|
||
memberId:0,
|
||
token: null,
|
||
poster: "-1", //海报
|
||
posterMsg: "", //海报错误信息
|
||
posterHeight: 0,
|
||
no:'',
|
||
shareMask:false,
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
if(option.member_card_id) this.memberCardId = option.member_card_id;
|
||
// 小程序扫码进入，接收source_member
|
||
if (option.scene) {
|
||
var sceneParams = decodeURIComponent(option.scene);
|
||
sceneParams = sceneParams.split('&');
|
||
if (sceneParams.length) {
|
||
sceneParams.forEach(item => {
|
||
if (item.indexOf('member_card_id') != -1) this.memberCardId = item.split('-')[1];
|
||
});
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync('token')) {
|
||
this.$util.getMemberId().then(resolve => {
|
||
this.memberId = resolve;
|
||
this.token = uni.getStorageSync('token');
|
||
});
|
||
}
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.$api.sendRequest({
|
||
url: '/giftcard/api/membercard/detail',
|
||
data:{'member_card_id' : this.memberCardId},
|
||
success: res => {
|
||
if(res.code >= 0){
|
||
this.cardInfo = res.data;
|
||
|
||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||
}else{
|
||
this.$util.showToast({
|
||
title: res.message,
|
||
mask: true,
|
||
duration: 2000
|
||
});
|
||
setTimeout(() => {
|
||
this.$util.redirectTo('/pages_promotion/giftcard/member');
|
||
}, 1500)
|
||
}
|
||
},
|
||
fail: res => {
|
||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||
}
|
||
});
|
||
},
|
||
maskShow(){
|
||
this.shareMask = true
|
||
this.closeSharePopup();
|
||
},
|
||
// 打开分享弹出层
|
||
openSharePopup() {
|
||
let that = this;
|
||
this.$api.sendRequest({
|
||
url: '/giftcard/api/membercard/blessing',
|
||
data: {
|
||
'member_card_id': that.memberCardId,
|
||
'blessing' : that.message ? that.message : '赠你一份好礼，祝你每天都开心快乐！',
|
||
},
|
||
success: res => {
|
||
if(res.code >= 0){
|
||
that.no = res.data;
|
||
that.$refs.sharePopup.open();
|
||
that.setPublicShare();
|
||
}else{
|
||
that.$util.showToast({
|
||
title: res.message,
|
||
});
|
||
}
|
||
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
}
|
||
});
|
||
|
||
},
|
||
// 关闭分享弹出层
|
||
closeSharePopup() {
|
||
this.$refs.sharePopup.close();
|
||
},
|
||
copyUrl() {
|
||
let text = '嘿！朋友送你一张礼品卡，快来领取吧~' + this.$config.h5Domain + '/pages_promotion/giftcard/give_info?no=' + this.no;
|
||
if (this.memberId) text += '&source_member=' + this.memberId;
|
||
this.$util.copy(text, () => {
|
||
this.closeSharePopup();
|
||
});
|
||
},
|
||
//-------------------------------------海报-------------------------------------
|
||
// 打开海报弹出层
|
||
openPosterPopup() {
|
||
this.getGoodsPoster();
|
||
this.$refs.sharePopup.close();
|
||
this.$refs.posterPopup.open();
|
||
if (this.poster != '-1') {
|
||
setTimeout(() => {
|
||
let view = uni.createSelectorQuery().in(this).select(".poster-layer .image-wrap");
|
||
view.fields({
|
||
size: true,
|
||
}, data => {
|
||
let posterWhith = data.width;
|
||
let ratio = parseFloat((740 / posterWhith).toFixed(2));
|
||
if (this.token != '') {
|
||
this.posterHeight = parseInt(1240 / ratio);
|
||
} else {
|
||
this.posterHeight = parseInt(1100 / ratio);
|
||
}
|
||
}).exec();
|
||
}, 100);
|
||
}
|
||
},
|
||
// 关闭海报弹出层
|
||
closePosterPopup() {
|
||
this.$refs.posterPopup.close();
|
||
},
|
||
/**
|
||
* 获取海报
|
||
*/
|
||
getGoodsPoster() {
|
||
uni.showLoading({
|
||
'title' : '海报生成中...'
|
||
})
|
||
//活动海报信息
|
||
let posterParams = {
|
||
no : this.no
|
||
};
|
||
|
||
if (this.memberId) posterParams.source_member = this.memberId;
|
||
|
||
this.$api.sendRequest({
|
||
url: '/giftcard/api/membercard/poster',
|
||
data: {
|
||
page: '/pages_promotion/giftcard/give_info',
|
||
qrcode_param: JSON.stringify(posterParams)
|
||
},
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
this.poster = res.data.path + "?time=" + new Date().getTime();
|
||
} else {
|
||
this.posterMsg = res.message;
|
||
}
|
||
uni.hideLoading();
|
||
},
|
||
fail: err => {
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 设置公众号分享
|
||
*/
|
||
setPublicShare(){
|
||
let shareUrl = this.$config.h5Domain + '/pages_promotion/giftcard/give_info?no=' + this.no;
|
||
if (this.memberId) shareUrl += '&source_member=' + this.memberId;
|
||
|
||
this.$util.setPublicShare({
|
||
title: this.cardInfo.card_name,
|
||
desc: this.message ? this.message : '赠你一份好礼，祝你每天都开心快乐！',
|
||
link: shareUrl,
|
||
imgUrl: this.$util.img(this.cardInfo.card_cover.split(',')[0])
|
||
}, res => {
|
||
// console.log('公众号分享成功');
|
||
// this.share();
|
||
})
|
||
},
|
||
},
|
||
/**
|
||
* 自定义分享内容
|
||
*/
|
||
onShareAppMessage() {
|
||
let that = this;
|
||
var path = '/pages_promotion/giftcard/give_info?no=' + this.no;
|
||
if (this.memberId) path += '&source_member=' + this.memberId;
|
||
return {
|
||
title: '朋友送你一张礼品卡，快来领取吧~',
|
||
imageUrl:this.$util.img(this.cardInfo.card_cover.split(',')[0]),
|
||
path: path,
|
||
success: res => {
|
||
},
|
||
fail: res => {
|
||
},
|
||
complete: res => {
|
||
}
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page{
|
||
background: #ffffff;
|
||
min-height: 100vh;
|
||
}
|
||
.detail-box{
|
||
padding: 30rpx 24rpx;
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: $font-size-toolbar;
|
||
text{
|
||
font-size: $font-size-sub;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.textarea{
|
||
height: 180rpx;
|
||
background: #F5F6F9;
|
||
border-radius: 8rpx;
|
||
padding: 24rpx;
|
||
font-size: 24rpx;
|
||
margin-top: 20rpx;
|
||
overflow: hidden;
|
||
textarea{
|
||
font-size: 28rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.bottom-btn{
|
||
margin-top: 120rpx;
|
||
button{
|
||
margin-bottom: 20rpx;
|
||
border: 2rpx solid var(--main-color);
|
||
&:last-child{
|
||
color: var(--main-color);
|
||
border: 2rpx solid var(--main-color);
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.share-popup,
|
||
.uni-popup__wrapper-box {
|
||
.share-title {
|
||
line-height: 60rpx;
|
||
font-size: $font-size-toolbar;
|
||
padding: 15rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.share-content {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
-webkit-flex-wrap: wrap;
|
||
-moz-flex-wrap: wrap;
|
||
-ms-flex-wrap: wrap;
|
||
-o-flex-wrap: wrap;
|
||
flex-wrap: wrap;
|
||
padding: 15rpx;
|
||
|
||
.share-box {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.share-btn {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
line-height: 1;
|
||
height: auto;
|
||
|
||
text {
|
||
margin-top: 20rpx;
|
||
font-size: $font-size-tag;
|
||
display: block;
|
||
color: $color-title;
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 80rpx;
|
||
line-height: initial;
|
||
}
|
||
|
||
.icon-fuzhilianjie,
|
||
.icon-pengyouquan,
|
||
.icon-haowuquan,
|
||
.icon-share-friend {
|
||
color: #07c160;
|
||
}
|
||
}
|
||
}
|
||
|
||
.share-footer {
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-top: 2rpx #f5f5f5 solid;
|
||
text-align: center;
|
||
color: #666;
|
||
}
|
||
}
|
||
.poster-layer {
|
||
.generate-poster {
|
||
padding: 40rpx 0;
|
||
.iconfont {
|
||
font-size: 80rpx;
|
||
color: #07c160;
|
||
line-height: initial;
|
||
}
|
||
> view {
|
||
text-align: center;
|
||
&:last-child {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.image-wrap {
|
||
width: 64%;
|
||
height: 854rpx;
|
||
margin: 60rpx auto 40rpx auto;
|
||
box-shadow: 0 0 32rpx rgba(100, 100, 100, 0.3);
|
||
image {
|
||
width: 480rpx;
|
||
height: 854rpx;
|
||
}
|
||
}
|
||
.msg {
|
||
padding: 40rpx;
|
||
}
|
||
.save {
|
||
text-align: center;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
.close {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 20rpx;
|
||
width: 40rpx;
|
||
height: 80rpx;
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
.goods-details img{
|
||
max-width: 100%;
|
||
}
|
||
|
||
.wechat-share{
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: rgba(0,0,0,.6);
|
||
image{
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|