bnyer-cloud-tiktok/pages/ai/paint/loverPainResult.vue

<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>