test/src/pages/result/index.vue
2019-11-29 13:55:14 +08:00

91 lines
2.1 KiB
Vue

<template>
<div class="p-result">
<div class="title">{{result.title}}</div>
<div class="desc">{{result.desc}}</div>
<div @click="saveImg">点击生成图片</div>
<painter :palette="template" @imgOK="onImgOk" />
<button data-id="shareBtn" open-type="share">点击分享</button>
</div>
</template>
<script>
export default {
data() {
return {
result: {},
template: {
background: '#eee',
width: '654rpx',
height: '400rpx',
borderRadius: '20rpx',
views: [
{
type: 'image',
url:
'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
css: {
top: '48rpx',
right: '48rpx',
width: '192rpx',
height: '192rpx'
}
},
{
type: 'text',
text: 'borderWidth',
css: {
bottom: '40rpx',
right: '200rpx',
color: 'green',
borderWidth: '2rpx'
}
}
],
imgPath: ''
}
}
},
onShow() {
const result = wx.getStorageSync('tempResult')
this.result = result
},
onShareAppMessage(res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
},
methods: {
onImgOk(e) {
// console.log(e.details.path)
console.log(e.mp.detail.path)
this.imgPath = e.mp.detail.path
},
saveImg() {
wx.saveImageToPhotosAlbum({
filePath: this.imgPath,
success: function() {
console.log('成功保存')
wx.showToast({
title: '保存成功', //提示的内容,
icon: 'success', //图标,
duration: 2000, //延迟时间,
mask: true //显示透明蒙层,防止触摸穿透,
})
},
fail: function(err) {
console.log(err)
}
})
}
}
}
</script>
<style>
</style>