<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="分享" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
|
<view class="coreshop-flex coreshop-justify-center coreshop-padding-10">
|
<image :src="path" mode="widthFix" style="width: 100%;"></image>
|
|
<l-painter ref="painter" custom-style="position: fixed; left: 200%" css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
|
<l-painter-image :src="userInfo.avatarImage" css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; height: 84rpx; border-radius: 50%;" />
|
<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
|
<l-painter-text :text="userInfo.nickName" css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
|
<l-painter-text :text="showModel.describe" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
|
</l-painter-view>
|
<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
|
<l-painter-image :src="showModel.image" css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
|
<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;" v-if="showPrice">
|
<l-painter-text text="￥" css="vertical-align: bottom" />
|
<l-painter-text :text="showModel.price" css="vertical-align: bottom; font-size: 58rpx" />
|
<l-painter-text text="元" css="vertical-align: bottom" />
|
<l-painter-text v-if="showModel.mktprice>0" :text="'￥'+ showModel.mktprice" css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
|
</l-painter-view>
|
<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;" v-if="showStore">
|
<l-painter-text :text="showModel.storeDesc" css="vertical-align: bottom; font-size: 48rpx" />
|
</l-painter-view>
|
<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400" v-if="showPinTuanArguments">
|
<l-painter-text :text="'截止：'+showModel.pinTuan.endTime" css="color: #212121; background: #ffb400;" />
|
<l-painter-text :text="showModel.pinTuan.peopleNumber+'人团'" css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;" />
|
<!--<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />-->
|
</l-painter-view>
|
<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400" v-if="showGroupPurchaseSeckillArguments">
|
<l-painter-text :text="'截止：'+showModel.groupPurchaseSeckill.endTime" css="color: #212121; background: #ffb400;" />
|
<!--<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />-->
|
</l-painter-view>
|
<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
|
<l-painter-text :text="showModel.brief" css="margin-left: 16rpx; background: #fff4d9" />
|
</l-painter-view>
|
<l-painter-view css="margin-top: 30rpx">
|
<l-painter-text css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
|
:text="showModel.name"></l-painter-text>
|
<l-painter-image :src="poster" css="width: 128rpx; height: 128rpx;" />
|
<!--<l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>-->
|
</l-painter-view>
|
</l-painter-view>
|
</l-painter>
|
|
</view>
|
|
<view class="share-bot flex flex-direction coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10 coreshop-flex-direction-row coreshop-justify-between">
|
<view>
|
<u-button shape="square" type="primary" @click="savePoster()">
|
<u-icon name="download" :margin-right="20" label="保存到本地" color="#fff" labelColor="#fff"></u-icon>
|
</u-button>
|
</view>
|
<view>
|
<u-button shape="square" type="primary" @click="goBack()">
|
<u-icon name="arrow-leftward" :margin-right="20" label="返回上一页" color="#fff" labelColor="#fff"></u-icon>
|
</u-button>
|
</view>
|
</view>
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
</template>
|
<script>
|
var _this;
|
export default {
|
data() {
|
return {
|
poster: '',
|
path: '',
|
userInfo: {},
|
priceSection: '',
|
showModel: {
|
describe: '为您挑选了一个好物',
|
price: 0.00,
|
mktprice: 0.00,
|
brief: '',
|
image: '',
|
name: '',
|
pinTuan: {
|
endTime: '',
|
peopleNumber: 0,
|
},
|
groupPurchaseSeckill: {
|
endTime: '',
|
},
|
storeDesc: ''
|
},
|
showPinTuanArguments: false,
|
showGroupPurchaseSeckillArguments: false,
|
showPrice: true,
|
showStore: true
|
};
|
},
|
onLoad(options) {
|
console.log("接收传输数据：", options);
|
_this = this;
|
_this.poster = decodeURIComponent(options.posterUrl);
|
_this.userInfo = this.$store.state.userInfo;
|
|
uni.showLoading({
|
title: '加载中'
|
});
|
if (options.shareType == _this.$globalConstVars.shareType.goods) {
|
let data = {
|
id: parseInt(options.goodsId)
|
}
|
_this.$u.api.goodsDetail(data).then(res => {
|
if (res.status == true) {
|
console.log(res.data);
|
_this.showModel.image = res.data.image;
|
_this.showModel.brief = res.data.brief;
|
_this.showModel.name = res.data.name;
|
_this.showModel.price = res.data.product.price;
|
_this.showModel.mktprice = res.data.product.mktprice;
|
|
setTimeout(function () {
|
_this.canvasToTempFilePath();
|
uni.hideLoading();
|
}, 1000);
|
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
}
|
else if (options.shareType == _this.$globalConstVars.shareType.pinTuan || options.shareType == _this.$globalConstVars.shareType.addPinTuan) {
|
let data = {
|
id: parseInt(options.groupId),
|
data: false,
|
}
|
_this.$u.api.pinTuanGoodsInfo(data).then(res => {
|
if (res.status == true) {
|
console.log(res.data);
|
_this.showModel.describe = "为您推荐了一个拼团活动";
|
_this.showModel.image = res.data.image;
|
_this.showModel.brief = res.data.name;
|
_this.showModel.name = res.data.pinTuanRule.name;
|
_this.showModel.price = res.data.pinTuanPrice;
|
_this.showModel.mktprice = res.data.mktprice;
|
|
_this.showPinTuanArguments = true;
|
_this.showModel.pinTuan.endTime = res.data.pinTuanRule.endTime;
|
_this.showModel.pinTuan.peopleNumber = res.data.pinTuanRule.peopleNumber;
|
|
setTimeout(function () {
|
_this.canvasToTempFilePath();
|
uni.hideLoading();
|
}, 1000);
|
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
}
|
else if (options.shareType == _this.$globalConstVars.shareType.serviceGoods) {
|
let data = {
|
id: parseInt(options.serviceGoodsId),
|
data: false,
|
}
|
_this.$u.api.getServiceDetail(data).then(res => {
|
if (res.status == true) {
|
console.log(res.data);
|
_this.showModel.describe = "为您推荐了一个服务商品";
|
_this.showModel.image = res.data.thumbnail;
|
_this.showModel.brief = res.data.description;
|
_this.showModel.name = res.data.title;
|
_this.showModel.price = res.data.money;
|
_this.showModel.mktprice = res.data.mktprice;
|
|
setTimeout(function () {
|
_this.canvasToTempFilePath();
|
uni.hideLoading();
|
}, 1000);
|
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
|
}
|
else if (options.shareType == _this.$globalConstVars.shareType.seckill) {
|
let data = {
|
id: parseInt(options.groupId),
|
type: _this.$globalConstVars.shareType.seckill,
|
needSku: true
|
}
|
let userToken = this.$db.get('userToken');
|
if (userToken) {
|
data.token = userToken
|
}
|
_this.$u.api.groupInfo(data).then(res => {
|
if (res.status == true) {
|
console.log(res.data);
|
_this.showModel.describe = "为您推荐了一个秒杀";
|
_this.showModel.image = res.data.image;
|
_this.showModel.brief = res.data.brief;
|
_this.showModel.name = res.data.name;
|
_this.showModel.price = res.data.price;
|
_this.showModel.mktprice = res.data.mktprice;
|
|
_this.showGroupPurchaseSeckillArguments = true;
|
_this.showModel.groupPurchaseSeckill.endTime = res.data.groupEndTime;
|
|
setTimeout(function () {
|
_this.canvasToTempFilePath();
|
uni.hideLoading();
|
}, 1000);
|
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
}
|
else if (options.shareType == _this.$globalConstVars.shareType.group) {
|
let data = {
|
id: parseInt(options.groupId),
|
type: _this.$globalConstVars.shareType.seckill,
|
needSku: true
|
}
|
let userToken = this.$db.get('userToken');
|
if (userToken) {
|
data.token = userToken
|
}
|
_this.$u.api.groupInfo(data).then(res => {
|
if (res.status == true) {
|
console.log(res.data);
|
_this.showModel.describe = "为您推荐了一个团购";
|
_this.showModel.image = res.data.image;
|
_this.showModel.brief = res.data.brief;
|
_this.showModel.name = res.data.name;
|
_this.showModel.price = res.data.price;
|
_this.showModel.mktprice = res.data.mktprice;
|
|
_this.showGroupPurchaseSeckillArguments = true;
|
_this.showModel.groupPurchaseSeckill.endTime = res.data.groupEndTime;
|
|
setTimeout(function () {
|
_this.canvasToTempFilePath();
|
uni.hideLoading();
|
}, 1000);
|
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
}
|
else if (options.shareType == _this.$globalConstVars.shareType.inv) {
|
_this.$u.api.getDistributionStoreInfo({
|
id: options.store
|
}).then(res => {
|
if (res.status) {
|
_this.showModel.describe = '共有' + res.data.totalGoods + '件商品供您选择';
|
_this.showModel.name = res.data.storeDesc ? res.data.storeDesc : "欢迎您访问我的店铺";
|
_this.showModel.storeDesc = res.data.storeName ? res.data.storeName : "我的店铺";
|
_this.showModel.image = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';
|
|
_this.showPrice = false;
|
setTimeout(function () {
|
_this.canvasToTempFilePath();
|
uni.hideLoading();
|
}, 1000);
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
});
|
}
|
else if (options.shareType == _this.$globalConstVars.shareType.agent) {
|
_this.$u.api.getAgentInfo({
|
id: options.store
|
}).then(res => {
|
if (res.status) {
|
_this.showModel.describe = '共有' + res.data.totalGoods + '件商品供您选择';
|
_this.showModel.name = res.data.storeDesc ? res.data.storeDesc : "欢迎您访问我的店铺";
|
_this.showModel.storeDesc = res.data.storeName ? res.data.storeName : "我的店铺";
|
_this.showModel.image = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';
|
|
_this.showPrice = false;
|
setTimeout(function () {
|
_this.canvasToTempFilePath();
|
uni.hideLoading();
|
}, 1000);
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
});
|
}
|
},
|
computed: {
|
},
|
methods: {
|
canvasToTempFilePath() {
|
var _this = this;
|
// 渲染
|
this.$refs.painter.render();
|
// 生成图片
|
this.$refs.painter.canvasToTempFilePathSync({
|
fileType: "jpg",
|
quality: 1,
|
success: (res) => {
|
_this.path = res.tempFilePath;
|
},
|
});
|
},
|
goBack() {
|
uni.navigateBack({
|
delta: 1
|
});
|
},
|
// 保存海报到本地
|
savePoster() {
|
let _this = this;
|
// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
|
_this.downloadImageOfMp(_this.path)
|
// #endif
|
},
|
//下载图片地址和图片名
|
downloadIamge(imgsrc, name) {
|
var image = new Image();
|
// 解决跨域 Canvas 污染问题
|
image.setAttribute('crossorigin', 'anonymous');
|
image.onload = () => {
|
var canvas = document.createElement('canvas');
|
canvas.width = image.width;
|
canvas.height = image.height;
|
var context = canvas.getContext('2d');
|
context.drawImage(image, 0, 0, image.width, image.height);
|
var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
|
var a = document.createElement('a'); // 生成一个a元素
|
var event = new MouseEvent('click'); // 创建一个单击事件
|
a.download = name || 'photo'; // 设置图片名称
|
a.href = url; // 将生成的URL设置为a.href属性
|
a.dispatchEvent(event); // 触发a的单击事件
|
};
|
image.src = imgsrc;
|
},
|
downloadImageOfMp(image) {
|
let _this = this
|
|
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
uni.downloadFile({
|
url: image,
|
success(res) {
|
uni.saveImageToPhotosAlbum({
|
filePath: res.tempFilePath,
|
success() {
|
_this.$refs.uToast.show({ message: '操作成功', type: 'success' })
|
},
|
fail() {
|
_this.$u.toast('图片保存失败')
|
}
|
});
|
},
|
fail() {
|
_this.$u.toast('下载失败')
|
}
|
})
|
// #endif
|
|
// #ifdef MP
|
uni.authorize({
|
scope: 'scope.writePhotosAlbum',
|
success() {
|
console.log(image);
|
uni.saveImageToPhotosAlbum({
|
filePath: image,
|
success() {
|
_this.$refs.uToast.show({ message: '保存成功', type: 'success' })
|
},
|
fail() {
|
_this.$u.toast('图片保存失败')
|
}
|
});
|
},
|
fail() {
|
console.log('scope.writePhotosAlbum授权失败')
|
}
|
})
|
// #endif
|
}
|
}
|
};
|
</script>
|
<style scoped lang="scss">
|
@import "shareNewPoster.scss";
|
</style>
|
