javascript
复制代码
<template>
<!-- 推荐商品弹窗 -->
<u-popup :show="haibaoShow" mode="center" round='26rpx' z-index='10076' bgColor='transparent' safeAreaInsetTop @close="goodsclose">
<image v-if="picture2" :src="picture2" mode="widthFix" show-menu-by-longpress></image>
<l-painter
v-else
@done='successFun'
isCanvasToTempFilePath
path-type="url"
ref="painter"
css="width: 600rpx; padding-bottom: 50rpx; background: #FFFFFF;padding:30rpx;border-radius: 20rpx; box-sizing: border-box;">
<l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
css="width: 540rpx;height:540rpx;border-radius: 10rpx;object-fit: cover;"/>
<l-painter-view css="background: #fff; display:flex;align-item:center;justify-content: space-between; padding-top:25rpx;">
<l-painter-view css="width:335rpx" >
<l-painter-text
css="font-size: 24rpx;font-weight: 500;color: #CA273D; display: block;" text="￥12.00" />
<l-painter-text css="font-size: 26rpx;font-weight: 500;color: #333333;margin-top:18rpx;display: block;" text="米菲兔超薄尿不湿"/>
<l-painter-text css="font-size: 24rpx;color: #666666;margin-top:15rpx; display: block;" text='菲兔超薄尿不湿米菲兔超薄尿不湿简介米菲兔超 薄尿不湿简介米菲兔超薄尿 '/>
</l-painter-view>
<l-painter-view css="width:155rpx" >
<l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
css="width: 146rpx; height: 143rpx; object-fit: cover;padding:10rpx 8rpx; border:2rpx solid #eee;border-radius:10rpx;"/>
<l-painter-text css="font-size: 24rpx;color: #666666;margin-top:15rpx; display: block;" text='长按图片分享微信好友 '/>
</l-painter-view>
</l-painter-view>
</l-painter>
<view class="btnbox u-flex-around">
<!-- <view class="btn btn1">长按图片分享微信好友</view> -->
<view class="btn btn2" @click="saveFun">保存到本地</view>
</view>
</u-popup>
</template>
<script>
// import {
// apigoods,
// cartlist,
// addcart
// } from "@/api/index/index.js"
export default {
components: {},
props: {
// list: {
// type: Array,
// default: null
// }
},
data() {
return {
picture2: '',
haibaoShow: false,
img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
list: [
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', name: '春日写真春日写真春日写真春日写真春日写真春日写真春日写真春日写真春日写真',price: '123.00',id: 11},
],
}
},
mounted() {
// this.getlist();
},
methods:{
open(){
this.haibaoShow = true;
},
getlist(){
let data = {
page:1,
limit:9999
}
apigoods(data).then(res => {
this.list = res.data;
});
},
goodsclose(){
this.haibaoShow = false;
},
// 绘制完成后，生成图片
successFun(){
console.log('绘制完成-=-=-=-')
this.$refs.painter.canvasToTempFilePathSync({
fileType: "jpg",
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
pathType: 'url',
quality: 1,
success: (res) => {
this.picture2 = res.tempFilePath;
},
});
},
// 保存到本地
saveFun(){
let that = this;
uni.saveImageToPhotosAlbum({
filePath: that.picture2,
success: function () {
console.log('save success');
uni.$u.toast('海报已保存到相册')
}
});
}
},
}
</script>
<style lang='scss' scoped>
.btnbox{
width: 570rpx;
margin: 64rpx auto 0;
.btn{
width: 250px;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border-radius: 35rpx;
font-size: 30rpx;
color: #ffffff;
}
.btn1{
background: linear-gradient(88deg, #FFB72C, #F98517);
margin-right:30rpx;
}
.btn2{
background: linear-gradient(177deg, #F2582F, #E1200B);
}
}
</style>
