6 changed files with 474 additions and 45 deletions
@ -0,0 +1,414 @@ |
|||||
|
<template> |
||||
|
<!-- --> |
||||
|
<view class="aiPaintDetail_M"> |
||||
|
<view class="paint"> |
||||
|
<!-- 绘制好的图替换默认图展示 --> |
||||
|
<view class="successCover" v-if="transImg"> |
||||
|
<image :src="transImg" mode="widthFix" class="img"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="complete"> |
||||
|
<!-- prompt关键词 --> |
||||
|
<view class="keywords"> |
||||
|
<view> |
||||
|
<view class="promptTitle">关键词</view> |
||||
|
</view> |
||||
|
<view class="content"> |
||||
|
<text>{{prompt}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 图画详细参数 --> |
||||
|
<view class="label"> |
||||
|
<!-- <view class="style"> |
||||
|
<view class="i">关键词</view> |
||||
|
<view class="text">{{ prompt }}</view> |
||||
|
</view> --> |
||||
|
<view class="style"> |
||||
|
<view class="i">画布:</view> |
||||
|
<view class="text">{{ imgWidth }}x{{ imgHeight }}</view> |
||||
|
</view> |
||||
|
<view class="style"> |
||||
|
<view class="i">创作风格:</view> |
||||
|
<view class="text">{{styleName}}</view> |
||||
|
</view> |
||||
|
<view class="style"> |
||||
|
<view class="i">作品编号:</view> |
||||
|
<view class="text">{{paintId}}</view> |
||||
|
</view> |
||||
|
<view class="style"> |
||||
|
<view class="i">创作时间:</view> |
||||
|
<view class="text">{{paintTime}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部操作栏(绘制成功替换，告知图片保存在用户画册里) --> |
||||
|
<view class="action" > |
||||
|
<view class="action-group"> |
||||
|
<view class="actionBtn"> |
||||
|
<view class="grid" @click="onCopyPrompt"> |
||||
|
<view><uni-icons type="link" size="24"></uni-icons></view> |
||||
|
<text class="grid-text">复制关键词</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="actionBtn"> |
||||
|
<view class="grid" @click="onSaveImage(transImg)"> |
||||
|
<view><uni-icons type="cloud-download" size="24"></uni-icons></view> |
||||
|
<text class="grid-text">保存作品</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<button open-type="share" size="mini" class="actionBtn" plain="true" type="default"> |
||||
|
<view class="grid" > |
||||
|
<view><uni-icons type="paperplane" size="24"></uni-icons></view> |
||||
|
<text class="grid-text">分享好友</text> |
||||
|
</view> |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: "aiPaintDetail", |
||||
|
//import引入的组件需要注入到对象中才能使用 |
||||
|
components: {}, |
||||
|
//混合封装的属性和方法 |
||||
|
mixins: [], |
||||
|
//组件传入的属性 |
||||
|
props: {}, |
||||
|
data() { |
||||
|
//这里存放数据 |
||||
|
return { |
||||
|
transImg: undefined, |
||||
|
imgHeight: undefined, |
||||
|
imgWidth: undefined, |
||||
|
prompt: undefined, |
||||
|
successFlag: false, |
||||
|
paintId: undefined, |
||||
|
paintTime: undefined, |
||||
|
styleName: undefined, |
||||
|
batchSize: undefined, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
//接收上一个页面传来的绘画参数 |
||||
|
const paintData = JSON.parse(options.data); |
||||
|
this.imgHeight = paintData.height; |
||||
|
this.imgWidth = paintData.width; |
||||
|
this.prompt = paintData['prompt']; |
||||
|
this.styleName = paintData.styleName; |
||||
|
this.batchSize = paintData.batchSize; |
||||
|
this.paintTime = paintData.createTime; |
||||
|
this.transImg = paintData.imgUrl; |
||||
|
this.paintId = paintData.id; |
||||
|
}, |
||||
|
//计算属性 类似于data概念 |
||||
|
computed: {}, |
||||
|
//监控data中的数据变化 |
||||
|
watch: {}, |
||||
|
//方法集合 |
||||
|
methods: { |
||||
|
|
||||
|
//保存图片 |
||||
|
onSaveImage(url){ |
||||
|
let that = this; |
||||
|
that.download(url) |
||||
|
}, |
||||
|
|
||||
|
// 下载 |
||||
|
download(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) => {}, |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//复制关键词 |
||||
|
onCopyPrompt(){ |
||||
|
let that = this; |
||||
|
//console.log('点击复制关键词事件') |
||||
|
uni.setClipboardData({ |
||||
|
data: that.prompt, |
||||
|
success() { |
||||
|
uni.showToast({ |
||||
|
title: '复制关键词成功!' |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
}, //生命周期 - 创建完成（可以访问当前this实例） |
||||
|
mounted() { |
||||
|
}, //生命周期 - 挂载完成（可以访问DOM元素） |
||||
|
beforeCreate() { |
||||
|
}, //生命周期 - 创建之前 |
||||
|
beforeMount() { |
||||
|
}, //生命周期 - 挂载之前 |
||||
|
beforeUpdate() { |
||||
|
}, //生命周期 - 更新之前 |
||||
|
updated() { |
||||
|
}, //生命周期 - 更新之后 |
||||
|
beforeDestroy() { |
||||
|
}, //生命周期 - 销毁之前 |
||||
|
destroyed() { |
||||
|
}, //生命周期 - 销毁完成 |
||||
|
activated() { |
||||
|
} //如果页面有keep-alive缓存功能，这个函数会触发 |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.aiPaintDetail_M { |
||||
|
|
||||
|
.complete { |
||||
|
padding-bottom: 200rpx; |
||||
|
|
||||
|
.Multi-sheet-tips { |
||||
|
width: 92%; |
||||
|
margin: 0 auto; |
||||
|
font-size: 24rpx; |
||||
|
line-height: 38rpx; |
||||
|
color: $uni-base-color; |
||||
|
border-bottom: 1rpx solid $uni-border-2; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
width: 92%; |
||||
|
margin: 0 auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: left; |
||||
|
align-items: flex-start; |
||||
|
margin-top: 15rpx; |
||||
|
|
||||
|
|
||||
|
.style { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: flex-start; |
||||
|
margin-top: 30rpx; |
||||
|
font-weight: bolder; |
||||
|
|
||||
|
.i { |
||||
|
font-size: 28rpx; |
||||
|
color: $uni-primary; |
||||
|
border-radius: 5rpx; |
||||
|
margin-right: 15rpx; |
||||
|
line-height: 38rpx; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 26rpx; |
||||
|
line-height: 38rpx; |
||||
|
font-weight: bolder; |
||||
|
color: $uni-base-color; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.promptTitle{ |
||||
|
text-align: center; |
||||
|
font-weight: bolder; |
||||
|
font-size: 28rpx; |
||||
|
color: $uni-primary; |
||||
|
} |
||||
|
|
||||
|
.keywords { |
||||
|
width: 90%; |
||||
|
margin: 0 auto; |
||||
|
//background-color: #1A94BC1A; |
||||
|
//padding: 15rpx; |
||||
|
border-radius: 10rpx; |
||||
|
margin-top: 15rpx; |
||||
|
font-weight: bolder; |
||||
|
|
||||
|
.content { |
||||
|
margin-top: 20rpx; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
/*这里设置几行*/ |
||||
|
overflow: hidden; |
||||
|
color: $uni-base-color; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.paint { |
||||
|
|
||||
|
.successCover { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
border-radius: 10 rpx; |
||||
|
|
||||
|
.img { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
border-radius: 10 rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.action { |
||||
|
width: 100%; |
||||
|
position: fixed; |
||||
|
bottom: 0rpx; |
||||
|
left: 0rpx; |
||||
|
background-color: #fff; |
||||
|
padding: 20rpx 10rpx; |
||||
|
|
||||
|
.action-group { |
||||
|
width: 90%; |
||||
|
margin: 0 auto; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
button { |
||||
|
background-color: transparent; |
||||
|
border: 0; |
||||
|
outline: 0; |
||||
|
font-size: 28rpx; |
||||
|
padding: 0; |
||||
|
line-height: inherit; |
||||
|
} |
||||
|
|
||||
|
button::after{ |
||||
|
border: none; |
||||
|
outline: 0; |
||||
|
} |
||||
|
|
||||
|
.actionBtn{ |
||||
|
width: 50%; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
//margin:0rpx 25rpx 0rpx 25rpx; |
||||
|
|
||||
|
.grid { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
.grid-text { |
||||
|
font-size: 28rpx; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue