|
|
|
@ -1,31 +1,65 @@ |
|
|
|
<template> |
|
|
|
<view class="wrap"> |
|
|
|
11111 |
|
|
|
<view class="top-box"> |
|
|
|
<view class="love-title"> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="top-img-box"> |
|
|
|
<view v-if="!finishDraw" class="loading"> |
|
|
|
<view class="loading-icon"> |
|
|
|
<uni-icons type="spinner-cycle" size="40"></uni-icons> |
|
|
|
</view> |
|
|
|
<view class="loading-tips"> |
|
|
|
Ai正在拼命绘制中..... |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="finishDraw" class="img-item-box"> |
|
|
|
<img class="img-item" :src="`data:image/png;base64,${resultImg[0]}`" > |
|
|
|
<img class="img-item" :src="`data:image/png;base64,${resultImg[1]}`" > |
|
|
|
<view class="heart-icon"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="finishDraw" class="button-box"> |
|
|
|
<view class="save-button" @click="clickSave(resultImg[0])"></view> |
|
|
|
<view class="save-button" @click="clickSave(resultImg[1])"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { textToImg} from '@/api/paint.js'; |
|
|
|
import base64ToImg from '@/utils/base64Utils'; |
|
|
|
import { textToImgLove} from '@/api/paint.js'; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
resultImg: [], |
|
|
|
finishDraw: false |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
//接收上一个页面传来的绘画参数 |
|
|
|
const paintData = JSON.parse(options.data); |
|
|
|
console.log('paintData',paintData); |
|
|
|
// this.imgHeight = paintData.height; |
|
|
|
// this.imgWidth = paintData.width; |
|
|
|
// this.prompt = paintData.prompt; |
|
|
|
// this.styleName = paintData.styleName; |
|
|
|
textToImg(paintData).then(res =>{ |
|
|
|
// console.log('paintData',paintData); |
|
|
|
|
|
|
|
// let paintData = { |
|
|
|
// appType: 0, |
|
|
|
// painterId: 1657690826066698200, |
|
|
|
// painterName: "LangZ", |
|
|
|
// platform: 1, |
|
|
|
// prompt: "白色衣服", |
|
|
|
// scenePrompt: "咖啡馆" |
|
|
|
// } |
|
|
|
const that = this |
|
|
|
textToImgLove(paintData).then(res =>{ |
|
|
|
if(res.data.code === 200){ |
|
|
|
uni.hideLoading(); |
|
|
|
console.log('res',res); |
|
|
|
// this.base64ToPath(res.data.data.images); |
|
|
|
// this.successFlag = true; |
|
|
|
// this.paintTime = res.data.data.paintTime; |
|
|
|
// this.paintId = res.data.data.paintId; |
|
|
|
that.resultImg = res.data.data |
|
|
|
that.finishDraw = true |
|
|
|
console.log(that.resultImg); |
|
|
|
}else{ |
|
|
|
uni.switchTab({ |
|
|
|
url: '/pages/ai/paint/paint', |
|
|
|
uni.navigateBack({ |
|
|
|
success() { |
|
|
|
uni.showToast({ |
|
|
|
title: res.data.msg, |
|
|
|
@ -34,17 +68,209 @@ |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
//加载广告 |
|
|
|
//initReward(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//转义base64图片 |
|
|
|
clickSave(url){ |
|
|
|
let str = "data:image/png;base64,"+url; |
|
|
|
base64ToImg(str,res =>{ |
|
|
|
console.log('解析出的图片路径为:',res) |
|
|
|
// this.saveUrl = res; |
|
|
|
this.download(res) |
|
|
|
//将complate的css底图改成此 |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 下载 |
|
|
|
download(url) { |
|
|
|
// url = this.base64ToPath(url) |
|
|
|
let that = this; |
|
|
|
//console.log('即将下载的图片为',that.transImg) |
|
|
|
uni.showLoading({ |
|
|
|
title: '正在保存图片...', |
|
|
|
success() { |
|
|
|
//获取用户的当前设置。获取相册权限 |
|
|
|
uni.getSetting({ |
|
|
|
success: (res) => { |
|
|
|
//如果没有相册权限 |
|
|
|
if (!res.authSetting["scope.album"]) { |
|
|
|
//向用户发起授权请求 |
|
|
|
uni.authorize({ |
|
|
|
scope: "scope.album", |
|
|
|
success: () => { |
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
//图片路径，不支持网络图片路径 |
|
|
|
filePath: url, |
|
|
|
success: (res) => { |
|
|
|
|
|
|
|
}, |
|
|
|
fail: (res) => { |
|
|
|
return uni.showToast({ |
|
|
|
title: res.errMsg, |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
}, |
|
|
|
complete: (res) => { |
|
|
|
uni.hideLoading(); |
|
|
|
if (res.errMsg !== "saveImageToPhotosAlbum:ok") { |
|
|
|
return uni.showToast({ |
|
|
|
title: "下载失败！", |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
} else { |
|
|
|
return uni.showToast({ |
|
|
|
title: "保存成功！", |
|
|
|
icon: 'none', |
|
|
|
success() { |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
//授权失败 |
|
|
|
fail: () => { |
|
|
|
uni.hideLoading(); |
|
|
|
uni.showModal({ |
|
|
|
title: "您已拒绝获取相册权限", |
|
|
|
content: "是否进入权限管理，调整授权？", |
|
|
|
success: (res) => { |
|
|
|
if (res.confirm) { |
|
|
|
//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权） |
|
|
|
uni.openSetting({ |
|
|
|
success: (res) => { |
|
|
|
|
|
|
|
}, |
|
|
|
}); |
|
|
|
} else if (res.cancel) { |
|
|
|
return uni.showToast({ |
|
|
|
title: "已取消！", |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
//如果已有相册权限，直接保存图片到系统相册 |
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
filePath: url, |
|
|
|
success: (res) => { |
|
|
|
console.log('有权限下载图片结果为',res) |
|
|
|
console.log('333333') |
|
|
|
|
|
|
|
}, |
|
|
|
fail: (res) => { |
|
|
|
return uni.showToast({ |
|
|
|
title: res.errMsg, |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
}, |
|
|
|
//无论成功失败都走的回调 |
|
|
|
complete: (res) => { |
|
|
|
uni.hideLoading(); |
|
|
|
if (res.errMsg !== "saveImageToPhotosAlbum:ok") { |
|
|
|
return uni.showToast({ |
|
|
|
title: "下载失败！", |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
}else{ |
|
|
|
return uni.showToast({ |
|
|
|
title: "保存成功！", |
|
|
|
duration: 2000, |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
fail: (res) => {}, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.wrap { |
|
|
|
padding: 20px 0px; |
|
|
|
width: 100%; |
|
|
|
min-height: 100vh; |
|
|
|
background-color: #faf0f3; |
|
|
|
.top-box { |
|
|
|
.love-title { |
|
|
|
margin-top: 30rpx; |
|
|
|
margin-left: 40rpx; |
|
|
|
width: 677rpx; |
|
|
|
height: 245rpx; |
|
|
|
// border: 1px solid black; |
|
|
|
background-image: url('https://vediocnd.corpring.com/520love/520_title.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
// z-index: 10; |
|
|
|
margin-bottom: -10px; |
|
|
|
} |
|
|
|
.top-img-box { |
|
|
|
// margin-top: -10px; |
|
|
|
width: 100%; |
|
|
|
height: 750rpx; |
|
|
|
background-image: url('https://vediocnd.corpring.com/520love/love_bg_1.gif'); |
|
|
|
background-size: 110% 110%; |
|
|
|
background-position: center; |
|
|
|
padding: 200rpx 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
.loading { |
|
|
|
margin-top: 40rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
color: #fc1f8d; |
|
|
|
} |
|
|
|
.img-item-box { |
|
|
|
// margin-top: 100rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
position: relative; |
|
|
|
.heart-icon { |
|
|
|
position: absolute; |
|
|
|
width: 70px; |
|
|
|
height: 60px; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
background-image: url('https://vediocnd.corpring.com/520love/heart_icon_1.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.img-item { |
|
|
|
box-sizing: border-box; |
|
|
|
border: 3px solid #faf0f3; |
|
|
|
width: 300rpx; |
|
|
|
height: 300rpx; |
|
|
|
// background-color: #fff; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.button-box { |
|
|
|
padding: 0rpx 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
.save-button { |
|
|
|
width: 250rpx; |
|
|
|
height: 75rpx; |
|
|
|
background-image: url('https://vediocnd.corpring.com/520love/save_button.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
