366 lines
9.3 KiB
Vue
366 lines
9.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop
|
||
:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
|
||
<view class="poster-main">
|
||
<image class="poster-main-img" src="https://oss.jimeigroup.cn/static/haoyou-bg.png"
|
||
mode="widthFix"></image>
|
||
<!-- <view class="user-info">
|
||
<image class="avatar" :src="userInfo.avatar" mode="widthFix"></image>
|
||
<view class="info">
|
||
<view class="nickname">
|
||
{{userInfo.nickname}}
|
||
</view>
|
||
<view class="phone">
|
||
{{userInfo.phone}}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<image class="qrcode" :src="QrcodeUrl">
|
||
</view>
|
||
|
||
<view class="poster-footer">
|
||
<!-- <view class="poster-footer-title">
|
||
— 立即分享 —
|
||
</view> -->
|
||
<view class="poster-footer-btns">
|
||
<button open-type="share" class="poster-footer-btn u-reset-button">
|
||
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-share.png" mode="aspectFill">
|
||
</image>
|
||
<view class="poster-footer-btn-text">分享微信好友</view>
|
||
</button>
|
||
<view @click="drawPoster" class="poster-footer-btn">
|
||
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-save.png" mode="aspectFill"></image>
|
||
<view class="poster-footer-btn-text">保存相册分享</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 海报绘制 -->
|
||
<l-painter custom-style="position: fixed;left: 200%;" ref="painter" @success="drawSuccess"
|
||
css="height: 1067px; width: 750px;" file-type="jpg">
|
||
<template>
|
||
<l-painter-view
|
||
css="background-image: url(https://oss.jimeigroup.cn/static/post-bg3.jpg); width: 750px;height: 1067px;">
|
||
<l-painter-view
|
||
css="background-image: url(https://oss.jimeigroup.cn/static/haoyou-bg.png); width: 750px;height: 1067px;position:relative;">
|
||
<!-- 用户头像、昵称 -->
|
||
<!-- <l-painter-view style="display: flex;" css="display: flex;align-items: center;position: absolute;left: 150px; bottom: 150px;">
|
||
<l-painter-image
|
||
css="width: 75px;height: 75px;border-radius: 50%"
|
||
:src="userInfo.avatar"></l-painter-image>
|
||
<l-painter-view css="margin-left: 20px;">
|
||
<l-painter-view css="height: 40px;line-height: 40px;"><l-painter-text :text="userInfo.nickname" css="font-size: 28px" style=";"></l-painter-text></l-painter-view>
|
||
<l-painter-view css="height: 40px;line-height: 40px;"> <l-painter-text :text="userInfo.phone" css="font-size: 24px"></l-painter-text></l-painter-view>
|
||
</l-painter-view>
|
||
</l-painter-view> -->
|
||
<!-- 二维码 -->
|
||
<l-painter-image
|
||
css="position: absolute;right: 150px;bottom: 150px;width: 160px;height: 160px;"
|
||
:src="QrcodeUrl"></l-painter-image>
|
||
|
||
</l-painter-view>
|
||
</l-painter-view>
|
||
</template>
|
||
</l-painter>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as WxLoginApi from '@/api/wx-login.js'
|
||
import store from '@/store/index.js'
|
||
import storage from '@/utils/storage'
|
||
|
||
const userId = uni.getStorageSync('userId')
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userId,
|
||
userInfo,
|
||
form: {},
|
||
showQrcode: false,
|
||
QrcodeUrl: '',
|
||
ranking: [{
|
||
avatar: '',
|
||
nickname: '别来无恙',
|
||
value: '共奖励5012.00元'
|
||
}],
|
||
posterUrl: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getQrCode()
|
||
},
|
||
onShareTimeline(res) {
|
||
if (res.from === 'button') { // 来自页面内分享按钮
|
||
console.log(res.target)
|
||
}
|
||
return {
|
||
title: '爱尚客',
|
||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '高端婚恋交友平台',
|
||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
|
||
imageUrl: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/mp-share.png'
|
||
}
|
||
},
|
||
methods: {
|
||
drawPoster() {
|
||
this.$refs.painter.canvasToTempFilePath({
|
||
// x: 0,
|
||
// y: 170,
|
||
// with: 750,
|
||
// height: 1067,
|
||
fileType: "jpg",
|
||
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
||
pathType: 'url',
|
||
quality: 1,
|
||
success: (res) => {
|
||
// console.log(res.tempFilePath);
|
||
// uni.previewImage({
|
||
// urls: [res.tempFilePath]
|
||
// })
|
||
// 非H5 保存到相册
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success: function () {
|
||
uni.showToast({
|
||
title: '已保存相册'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
});
|
||
},
|
||
drawSuccess(e) {
|
||
this.posterUrl = e
|
||
// uni.previewImage({
|
||
// urls: [e]
|
||
// })
|
||
},
|
||
onShowQrcode() {
|
||
this.showQrcode = true
|
||
this.getQrCode()
|
||
},
|
||
// 获取微信小程序码
|
||
getQrCode() {
|
||
const app = this
|
||
|
||
WxLoginApi.getWxQrCodeFile().then(res => {
|
||
app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
|
||
// app.showQrcode = true
|
||
storage.set('QrcodeUrl', res.message)
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
onShareQuan() {
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneTimeline",
|
||
type: 2,
|
||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
},
|
||
onShareWeixin() {
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 5,
|
||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||
title: '爱尚客',
|
||
miniProgram: {
|
||
id: 'gh_39f1f8019c3f',
|
||
path: 'pages/index/index',
|
||
type: 0,
|
||
webUrl: 'http://uniapp.dcloud.io'
|
||
},
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
},
|
||
onShareAlbum() {
|
||
// uni.saveImageToPhotosAlbum({
|
||
// filePath: res.tempFilePaths[0],
|
||
// success: function () {
|
||
// console.log('save success');
|
||
// }
|
||
// });
|
||
uni.getSetting({ //获取用户的当前设置
|
||
success: (res) => {
|
||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||
this.saveImageToPhotosAlbum();
|
||
} else {
|
||
uni.authorize({ //如果没有授权，向用户发起请求
|
||
scope: 'scope.writePhotosAlbum',
|
||
success: () => {
|
||
this.saveImageToPhotosAlbum();
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: "请打开保存相册权限，再点击保存相册分享",
|
||
icon: "none",
|
||
duration: 3000
|
||
});
|
||
setTimeout(() => {
|
||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||
success: (res2) => {
|
||
// console.log(res2.authSetting)
|
||
}
|
||
});
|
||
}, 3000);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
saveImageToPhotosAlbum() {
|
||
|
||
let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
uni.getFileSystemManager().writeFile({
|
||
filePath: filePath, //创建一个临时文件名
|
||
data: base64, //写入的文本或二进制数据
|
||
encoding: 'base64', //写入当前文件的字符编码
|
||
success: res => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: filePath,
|
||
success: function(res2) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '保存成功，请从相册选择再分享',
|
||
icon: "none",
|
||
duration: 5000
|
||
})
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
// console.log(err.errMsg);
|
||
}
|
||
})
|
||
},
|
||
fail: err => {
|
||
uni.hideLoading();
|
||
//console.log(err)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #730070;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
|
||
.container {
|
||
background-image: url(https://oss.jimeigroup.cn/static/login-bg01.png);
|
||
background-repeat: no-repeat;
|
||
min-height: 100vh;
|
||
width: 750rpx;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.poster-main {
|
||
margin: 170rpx auto 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.qrcode {
|
||
position: absolute;
|
||
right: 150rpx;
|
||
bottom: 150rpx;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
|
||
}
|
||
|
||
.poster-main-img {
|
||
width: 750rpx;
|
||
}
|
||
}
|
||
|
||
.poster-footer {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.poster-footer-title {
|
||
// height: 80rpx;
|
||
font-size: 32rpx;
|
||
// font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
// line-height: 80rpx;
|
||
}
|
||
|
||
.poster-footer-btns {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 600rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.poster-footer-btn {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
&-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
&-text {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.user-info{
|
||
position: absolute;
|
||
left: 150rpx;
|
||
bottom: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.avatar{
|
||
width: 75rpx;
|
||
height: 75rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.info {
|
||
margin-left: 20rpx;
|
||
}
|
||
.nickname{
|
||
font-size: 28rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
.phone {
|
||
font-size: 24rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
</style> |