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.
325 lines
10 KiB
325 lines
10 KiB
<template>
|
|
<view>
|
|
<view class="topdaohang" @click="fanhui">
|
|
<uni-icons type="left" size="18" color="white"></uni-icons>
|
|
<text>邀请返佣</text>
|
|
</view>
|
|
<view class="hbbox">
|
|
<image :src="url" class="hbimg" mode=""></image>
|
|
<liu-poster ref="liuPoster" :width="750" :height="1200" @change="change"></liu-poster>
|
|
</view>
|
|
<view class="fxbox">
|
|
<view class="" @click="savePosterPath">
|
|
<image class="iamg" src="@/static/img/保存海报.png" mode=""></image>
|
|
<view class="colorhui1">保存海报</view>
|
|
</view>
|
|
<button class="" @click="fxwx" open-type="share" style="background: radial-gradient(black, transparent);">
|
|
<image class="iamg" src="@/static/img/微信好友.png" mode=""></image>
|
|
<view class="colorhui1">微信好友</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
routineCode,
|
|
spreadMsg
|
|
} from '@/api/user.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
posterImage:'',
|
|
codeimage:{},
|
|
canvasList: [
|
|
{
|
|
type: 'color', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
width: 760, //宽度(rpx)
|
|
height: 1200, //高度(rpx)
|
|
x: 0, //x轴位置(离左边的距离rpx)
|
|
y: 0, //y轴位置(离上边的距离rpx)
|
|
radius: 10, //圆角(rpx)
|
|
colorObj: {
|
|
colorList: ['#1F1E21'], //传入1个值为纯色，2个值为渐变色
|
|
direction: 2 //渐变色绘制方向(1:从左到右;2:从上到下;3:左上角到右下角;4:右上角到左下角)
|
|
}, //type为color时必填
|
|
childs:[
|
|
{
|
|
type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
width: 660, //宽度(rpx)
|
|
height: 800, //高度(rpx)
|
|
x: 50, //x轴位置(离左边的距离rpx)
|
|
y: 50, //y轴位置(离上边的距离rpx)
|
|
path: '', //图片地址(type为image时必填)//type为color时必填
|
|
childs: [
|
|
{
|
|
type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
width: 200, //宽度(rpx)
|
|
height: 200, //高度(rpx)
|
|
x: 500, //x轴位置(离左边的距离rpx)
|
|
y: 900, //y轴位置(离上边的距离rpx)
|
|
radius: 20, //圆角(rpx)
|
|
lineWidth: 12, //边框宽度(rpx)
|
|
lineColor: '#FFFFFF', //边框颜色
|
|
path: '', //图片地址(type为image时必填)
|
|
},
|
|
{
|
|
type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
width: 120, //宽度(rpx)
|
|
height: 100, //高度(rpx)
|
|
x: 50, //x轴位置(离左边的距离rpx)
|
|
y: 900, //y轴位置(离上边的距离rpx)
|
|
radius: 55, //圆角(rpx)
|
|
lineWidth: 12, //边框宽度(rpx)
|
|
lineColor: '#FFFFFF', //边框颜色
|
|
path: '', //图片地址(type为image时必填)
|
|
},
|
|
{
|
|
type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
width: 400, //文本宽度(rpx)
|
|
height: 40, //文本高度(rpx)
|
|
x: 200, //x轴位置(离左边的距离rpx)
|
|
y: 950, //y轴位置(离上边的距离rpx)
|
|
color: '#FFFFFF', //文本颜色
|
|
fontSize: 36, //文字大小(rpx)
|
|
lineHeight: 36, //文字行高(rpx)
|
|
bold: true, //文字是否加粗
|
|
content: '', //文本内容(type为text时必填)
|
|
},
|
|
{
|
|
type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
width: 400, //文本宽度(rpx)
|
|
height: 40, //文本高度(rpx)
|
|
x: 50, //x轴位置(离左边的距离rpx)
|
|
y: 1050, //y轴位置(离上边的距离rpx)
|
|
color: '#7B7A7F', //文本颜色
|
|
fontSize: 36, //文字大小(rpx)
|
|
lineHeight: 36, //文字行高(rpx)
|
|
bold: true, //文字是否加粗
|
|
content: '', //文本内容(type为text时必填)
|
|
}
|
|
]
|
|
}
|
|
],//在背景色上绘制的内容放在childs里面即可
|
|
},
|
|
// {
|
|
// type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
// width: 750, //宽度(rpx)
|
|
// height: 1000, //高度(rpx)
|
|
// x: 0, //x轴位置(离左边的距离rpx)
|
|
// y: 0, //y轴位置(离上边的距离rpx)
|
|
// path: '', //图片地址(type为image时必填)//type为color时必填
|
|
// lineWidth: 30, //边框宽度(rpx)
|
|
// lineColor: '#1F1E21', //边框颜色
|
|
// childs: [
|
|
// {
|
|
// type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
// width: 200, //宽度(rpx)
|
|
// height: 200, //高度(rpx)
|
|
// x: 500, //x轴位置(离左边的距离rpx)
|
|
// y: 700, //y轴位置(离上边的距离rpx)
|
|
// radius: 20, //圆角(rpx)
|
|
// lineWidth: 12, //边框宽度(rpx)
|
|
// lineColor: '#FFFFFF', //边框颜色
|
|
// path: '', //图片地址(type为image时必填)
|
|
// },
|
|
// {
|
|
// type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
// width: 120, //宽度(rpx)
|
|
// height: 100, //高度(rpx)
|
|
// x: 50, //x轴位置(离左边的距离rpx)
|
|
// y: 700, //y轴位置(离上边的距离rpx)
|
|
// radius: 55, //圆角(rpx)
|
|
// lineWidth: 12, //边框宽度(rpx)
|
|
// lineColor: '#FFFFFF', //边框颜色
|
|
// path: '', //图片地址(type为image时必填)
|
|
// },
|
|
// {
|
|
// type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
// width: 400, //文本宽度(rpx)
|
|
// height: 40, //文本高度(rpx)
|
|
// x: 200, //x轴位置(离左边的距离rpx)
|
|
// y: 750, //y轴位置(离上边的距离rpx)
|
|
// color: '#FFFFFF', //文本颜色
|
|
// fontSize: 36, //文字大小(rpx)
|
|
// lineHeight: 36, //文字行高(rpx)
|
|
// bold: true, //文字是否加粗
|
|
// content: '', //文本内容(type为text时必填)
|
|
// },
|
|
// {
|
|
// type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
|
|
// width: 400, //文本宽度(rpx)
|
|
// height: 40, //文本高度(rpx)
|
|
// x: 50, //x轴位置(离左边的距离rpx)
|
|
// y: 850, //y轴位置(离上边的距离rpx)
|
|
// color: '#7B7A7F', //文本颜色
|
|
// fontSize: 36, //文字大小(rpx)
|
|
// lineHeight: 36, //文字行高(rpx)
|
|
// bold: true, //文字是否加粗
|
|
// content: '', //文本内容(type为text时必填)
|
|
// }
|
|
// ]
|
|
// },
|
|
|
|
],
|
|
url:''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// 检查是否有分享进入
|
|
console.log('检查是否有分享进入',options);
|
|
if (options.scene === 1007) { // 1007 是小程序分享进入的场景值
|
|
// 进行页面跳转
|
|
uni.redirectTo({
|
|
url: 'pages/index/index' // 替换为你想要跳转的页面路径
|
|
});
|
|
}
|
|
},
|
|
onShow(){
|
|
this.codedata()
|
|
//
|
|
},
|
|
methods: {
|
|
open() {
|
|
|
|
// console.log('this.canvasList[0]',this.canvasList);
|
|
this.$nextTick(() => {
|
|
this.$refs.liuPoster.init(this.canvasList)
|
|
})
|
|
},
|
|
//绘制成功返回生成的海报图片地址
|
|
change(e) {
|
|
this.url = e
|
|
},
|
|
//预览生成的海报图片
|
|
previewImg(url) {
|
|
if (!url) return
|
|
uni.previewImage({
|
|
urls: [url]
|
|
})
|
|
},
|
|
codedata(){
|
|
|
|
spreadMsg().then(res=>{
|
|
this.codeimage=res.data
|
|
routineCode().then(res=>{
|
|
this.posterImage=res.data.url
|
|
if(this.posterImage!=''&&this.codeimage!={}){
|
|
this.canvasList[0].childs[0].path=this.codeimage.spread[0].pic
|
|
this.canvasList[0].childs[0].childs[0].path=this.posterImage
|
|
this.canvasList[0].childs[0].childs[1].path=this.codeimage.avatar
|
|
this.canvasList[0].childs[0].childs[2].content=this.codeimage.nickname
|
|
this.canvasList[0].childs[0].childs[3].content='邀你加入'+this.codeimage.site_name
|
|
this.open()
|
|
}
|
|
console.log(8987,this.codeimage);
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
/*
|
|
* 保存到手机相册
|
|
*/
|
|
// #ifdef MP
|
|
savePosterPath: function() {
|
|
let that = this;
|
|
uni.getSetting({
|
|
success(res) {
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
uni.authorize({
|
|
scope: 'scope.writePhotosAlbum',
|
|
success() {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: that.url,
|
|
success: function(res) {
|
|
that.$util.Tips({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
});
|
|
},
|
|
fail: function(res) {
|
|
that.$util.Tips({
|
|
title: '保存失败'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: that.url,
|
|
success: function(res) {
|
|
that.$util.Tips({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
});
|
|
},
|
|
fail: function(res) {
|
|
that.$util.Tips({
|
|
title: '保存失败'
|
|
});
|
|
},
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// #endif
|
|
|
|
fxwx() {
|
|
var that=this
|
|
uni.share({
|
|
provider: "weixin",
|
|
scene: "WXSceneSession",
|
|
type: 2,
|
|
title: "分享",
|
|
summary: "赶紧跟我一起来体验！",
|
|
imageUrl:that.url,
|
|
success: function(res) {
|
|
console.log("success:" + JSON.stringify(res));
|
|
},
|
|
fail: function(err) {
|
|
console.log("fail:" + JSON.stringify(err));
|
|
}
|
|
});
|
|
},
|
|
fanhui() {
|
|
let pages = getCurrentPages(); // 获取当前打开过的页面路由数，
|
|
let prevPage = pages[pages.length - 2];
|
|
if (pages.length > 1) {
|
|
uni.navigateBack()
|
|
} else {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fxbox {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 128rpx;
|
|
}
|
|
|
|
.iamg {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
}
|
|
|
|
.hbbox {
|
|
text-align: center;
|
|
margin-top: 200rpx;
|
|
}
|
|
|
|
.hbimg {
|
|
width: 660rpx;
|
|
height: 830rpx;
|
|
}
|
|
</style> |