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.
276 lines
7.3 KiB
276 lines
7.3 KiB
<template>
|
|
<view class="wrap">
|
|
<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 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);
|
|
|
|
// 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);
|
|
that.resultImg = res.data.data
|
|
that.finishDraw = true
|
|
console.log(that.resultImg);
|
|
}else{
|
|
uni.navigateBack({
|
|
success() {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
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 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>
|