385 lines
9.6 KiB
Vue
385 lines
9.6 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :autoBack="true" bgColor="#a7c8e1" safeAreaInsetTop placeholder>
|
|
</u-navbar>
|
|
<!-- 轮播图 -->
|
|
<view class="page-section-spacing">
|
|
<swiper class="swiper" @change="change" circular previousMargin='70rpx' nextMargin="70rpx"
|
|
:indicator-dots="false" :autoplay="false" interval="4000" duration="500">
|
|
<swiper-item v-for="(item,index) in userInfo.posterList" :key="index">
|
|
<view id="showimage1" class="swiper-item" style="transition:all 1000ms ease;"
|
|
:style="index!= current ? 'transform: scale(0.9,0.9)':'transform: scale(1,1)'">
|
|
<image :src="item.image" mode=""></image>
|
|
<view class="swiper-item-user flex align-center justify-between">
|
|
<view class="flex justify-center">
|
|
<image class="swiper-item-header" :src="userInfo.avatar" mode=""></image>
|
|
<view class="ml-2">
|
|
<view class="c111 f-30">{{userInfo.nickname}}</view>
|
|
<view class="c999 f-24">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<image class="swiper-item-qr-code" :src="verificationImage" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- 轮播图指示点 -->
|
|
<view class="swiper-dot flex justify-center">
|
|
<view :class="[current==index?'end-swiper-dot':'']" v-for="(item,index) in userInfo.posterList"
|
|
:key="index">
|
|
</view>
|
|
</view>
|
|
<!-- 分享 -->
|
|
<view class="share-type flex justify-around">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="share-type-cont" style="position:relative;">
|
|
<image :src="`${config.aliyunOssUrl}/static/images/app/config/weixin.png`" mode=""></image>
|
|
<view>微信好友</view>
|
|
<button id="shareBtn" open-type="share" @click="shareBtnInfo(1)"></button>
|
|
</view>
|
|
<!-- @click="shareBtnInfo" -->
|
|
<view class="share-type-cont" style="position:relative;" @click="shareBtnInfo(2)">
|
|
<image :src="`${config.aliyunOssUrl}/static/images/app/config/pengyouquan.png`" mode=""></image>
|
|
<view>朋友圈</view>
|
|
<!-- <button id="shareBtn" open-type="share" @click="shareBtnInfo(2)"></button> -->
|
|
</view>
|
|
<view class="share-type-cont" @click="savePoster">
|
|
<image :src="`${config.aliyunOssUrl}/static/images/app/config/save.png`" mode=""></image>
|
|
<view>保存海报</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP -->
|
|
<view class="share-type-cont" @click="shareFn('WXSceneSession')">
|
|
<image src="@/static/images/app/config/weixin.png" mode=""></image>
|
|
<view>微信好友</view>
|
|
</view>
|
|
<view class="share-type-cont" @click="shareFn('WXSceneTimeline')">
|
|
<image src="@/static/images/app/config/pengyouquan.png" mode=""></image>
|
|
<view>朋友圈</view>
|
|
</view>
|
|
<view class="share-type-cont" @click="savePoster">
|
|
<image src="@/static/images/app/config/save.png" mode=""></image>
|
|
<view>保存海报</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<!-- 画布 -->
|
|
<canvas class="canvas-cont" style="width: 590rpx; height: 1126rpx" canvas-id="myCanvas" id="myCanvas"></canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
urlToBase64
|
|
} from "@/utils/index.js"
|
|
import {
|
|
getInviteInfo
|
|
} from "@/api/welfare/welfare.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
config: getApp().globalData.config,
|
|
userInfo: {},
|
|
list3: [
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
],
|
|
// 海报列表
|
|
posterList: [],
|
|
current: 0,
|
|
verificationImage: ''
|
|
}
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') {
|
|
// 来自页面内分享按钮
|
|
}
|
|
return {
|
|
title: '海报', //分享的名称
|
|
path: '/pages/index/index',
|
|
imageUrl: this.imageBg,
|
|
};
|
|
},
|
|
onShareTimeline(res) {
|
|
return {
|
|
title: '海报',
|
|
path: '/pages/index/index',
|
|
imageUrl: this.imageBg,
|
|
// channel:''
|
|
};
|
|
},
|
|
methods: {
|
|
shareBtnInfo(num) {
|
|
if (num == 2) {
|
|
uni.showToast({
|
|
title: '请点击右上角胶囊中的三个点进行朋友圈分享',
|
|
duration: 3000,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
//分享
|
|
shareFn(type) {
|
|
this.drawPoster(this.imageBg, false, type)
|
|
},
|
|
|
|
// 轮播图切换
|
|
change(e) {
|
|
this.current = e.detail.current;
|
|
this.imageBg = this.userInfo.posterList[e.detail.current].image
|
|
},
|
|
//轮播图监听
|
|
changeFn(e) {
|
|
let url = this.userInfo.posterList[e.current].image
|
|
this.drawPoster(url)
|
|
uni.canvasToTempFilePath({
|
|
canvasId: 'myCanvas',
|
|
success: res => {
|
|
this.userInfo.posterList[e.current].image = res.tempFilePath
|
|
},
|
|
})
|
|
},
|
|
//保存分享图
|
|
savePoster() {
|
|
this.drawPoster(this.imageBg, true)
|
|
},
|
|
//绘制海报
|
|
drawPoster(url, flag) {
|
|
let thas = this
|
|
const ctx = uni.createCanvasContext('myCanvas')
|
|
let imageUrl = url
|
|
//绘制白色矩形
|
|
ctx.beginPath()
|
|
ctx.setFillStyle('#eee'); // 设置填充颜色为白色
|
|
ctx.fillRect(0, uni.upx2px(942), uni.upx2px(590), uni.upx2px(184));
|
|
ctx.stroke()
|
|
//添加用户姓名...
|
|
ctx.beginPath()
|
|
ctx.setFontSize(uni.upx2px(30))
|
|
ctx.setTextAlign('left');
|
|
ctx.setTextBaseline('middle');
|
|
ctx.setFillStyle('#111'); // 设置
|
|
ctx.fillText(thas.userInfo.nickname, uni.upx2px(120), uni.upx2px(1015))
|
|
ctx.setFontSize(uni.upx2px(24))
|
|
ctx.setFillStyle('#999'); // 设置
|
|
ctx.fillText(thas.userInfo.nickname, uni.upx2px(120), uni.upx2px(1055))
|
|
ctx.stroke()
|
|
//二维码获取位置
|
|
let width2 = uni.upx2px(590) - uni.upx2px(112) - uni.upx2px(36)
|
|
let height2 = uni.upx2px(942) + uni.upx2px(36)
|
|
//获取头像位置
|
|
let width3 = uni.upx2px(40)
|
|
let height3 = uni.upx2px(942) + uni.upx2px(60)
|
|
//绘制头像
|
|
ctx.save()
|
|
let radius = uni.upx2px(32); // 圆形图片的半径
|
|
ctx.arc(radius + width3, radius + height3, radius, 0, 2 * Math.PI);
|
|
ctx.clip()
|
|
ctx.drawImage(thas.userInfo.avatar, width3, height3, uni.upx2px(64), uni.upx2px(64))
|
|
ctx.restore()
|
|
// 绘制第一张图片 imageUrl
|
|
// ctx.drawImage(res1.path, 0, 0, uni.upx2px(590), uni.upx2px(942))
|
|
ctx.drawImage(imageUrl, 0, 0, uni.upx2px(590), uni.upx2px(942))
|
|
|
|
// 绘制二维码
|
|
ctx.drawImage(thas.verificationImage, width2, height2, uni.upx2px(112), uni.upx2px(112))
|
|
//完成绘画
|
|
ctx.draw()
|
|
uni.showLoading({
|
|
title: '保存中'
|
|
});
|
|
setTimeout(() => {
|
|
uni.canvasToTempFilePath({
|
|
canvasId: 'myCanvas',
|
|
success: canvasToTempRes => {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: canvasToTempRes.tempFilePath,
|
|
success() {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '保存成功！'
|
|
})
|
|
},
|
|
fail() {
|
|
uni.showToast({
|
|
title: '保存失败！'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail() {
|
|
uni.showToast({
|
|
title: '生成海报失败！'
|
|
})
|
|
}
|
|
})
|
|
}, 2000);
|
|
}
|
|
},
|
|
mounted() {
|
|
getInviteInfo().then(res => {
|
|
// console.log(res, '海报');
|
|
this.userInfo = res.data
|
|
this.imageBg = this.userInfo.posterList[0].image
|
|
let url = `https://cms.diyouzhijia.com/car_h5/#/pages/index?uId=${this.userInfo.id}`
|
|
|
|
// const encodedUrl = encodeURIComponent(url);
|
|
// console.log(unescape(encodeURIComponent(url)));
|
|
// const base64 = uni.arrayBufferToBase64(encodedUrl);
|
|
|
|
// this.verificationImage =
|
|
// `https://wxapp.nianxiang-tech.com/prod-api/ums/login/qrcode/base64?content=${base64}`
|
|
|
|
// console.log(this.verificationImage);
|
|
|
|
let base64Data = urlToBase64(url)
|
|
this.verificationImage =
|
|
`https://wxapp.nianxiang-tech.com/prod-api/ums/login/qrcode/base64?content=${base64Data}`
|
|
console.log('base', this.verificationImage); // 打印出Base64字符串
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#shareBtn {
|
|
// border: 1px solid ;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
page {
|
|
background: linear-gradient(180deg, #98C2E1 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
|
|
.swiper-box {
|
|
width: 750rpx;
|
|
height: 1126rpx;
|
|
|
|
}
|
|
|
|
.canvas-cont {
|
|
position: fixed;
|
|
left: 755rpx;
|
|
}
|
|
|
|
.share-type {
|
|
.share-type-cont {
|
|
// border: 1px solid red;
|
|
text-align: center;
|
|
}
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-dot {
|
|
width: 100%;
|
|
margin: 20rpx 0 62rpx 0;
|
|
|
|
.end-swiper-dot {
|
|
width: 48rpx;
|
|
height: 4rpx;
|
|
background: #111;
|
|
}
|
|
|
|
view {
|
|
width: 24rpx;
|
|
height: 4rpx;
|
|
background: #ccc;
|
|
margin: 0 4rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-item {
|
|
margin: 0 auto;
|
|
width: 590rpx;
|
|
height: 1126rpx;
|
|
background: #fff;
|
|
border-radius: 8rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.page-section-spacing {
|
|
width: 750rpx;
|
|
|
|
// height: 1000rpx;
|
|
.swiper {
|
|
width: 750rpx;
|
|
height: 1126rpx;
|
|
|
|
.swiper-item {
|
|
position: relative;
|
|
|
|
.swiper-item-user {
|
|
width: 590rpx;
|
|
height: 184rpx;
|
|
background: #fff;
|
|
padding: 0 48rpx 0 40rpx;
|
|
|
|
.swiper-item-header {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.swiper-item-qr-code {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 590rpx;
|
|
height: 942rpx;
|
|
}
|
|
|
|
|
|
|
|
.qrcode-bg {
|
|
position: absolute;
|
|
bottom: 185rpx;
|
|
left: 40rpx;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
.qrcode {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
margin: 5rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.qrtext {
|
|
width: 215rpx;
|
|
height: 69rpx;
|
|
border-top: 1px solid #ccc;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |