5 changed files with 331 additions and 538 deletions
@ -0,0 +1,50 @@ |
|||||
|
<template> |
||||
|
<view class="wrap"> |
||||
|
11111 |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { textToImg} from '@/api/paint.js'; |
||||
|
export default { |
||||
|
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 =>{ |
||||
|
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; |
||||
|
}else{ |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/ai/paint/paint', |
||||
|
success() { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
//加载广告 |
||||
|
//initReward(); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,253 @@ |
|||||
|
<template> |
||||
|
<view class="wrap"> |
||||
|
<view class="desc-box"> |
||||
|
<text class="title">内容描述</text> |
||||
|
<textarea class="desc-input" v-model="contentDesc" |
||||
|
placeholder="请输入内容描述" /> |
||||
|
<!-- <view class="bottom-box"> |
||||
|
<view class="keyTips" @click="clickRandomKey()"></view> |
||||
|
<view class="limit">{{drawDesc.length}}/50</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
<view class="desc-box"> |
||||
|
<text class="title">场景描述</text> |
||||
|
<textarea class="desc-input" v-model="sceneDesc" |
||||
|
placeholder="请输入场景描述" /> |
||||
|
<!-- <view class="bottom-box"> |
||||
|
<view class="keyTips" @click="clickRandomKey()"></view> |
||||
|
<view class="limit">{{drawDesc.length}}/50</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
|
||||
|
<view class="type-box"> |
||||
|
<text class="title">风格选择</text> |
||||
|
<view class="type-item-box"> |
||||
|
<view class="type-item" v-for="(item, index) in paintStyle" @click="selectType(index)" |
||||
|
:style="{ backgroundImage: `url(${item.imgUrl})` }" |
||||
|
:class="curType == index? 'active' : ''"> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="draw-button" @click="getDraw()"> |
||||
|
生成图片 |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint} from '@/api/paint.js'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
sceneDesc: '', |
||||
|
contentDesc: '', |
||||
|
paintStyle:[], |
||||
|
curType: 0, |
||||
|
userInfo: {}, |
||||
|
checkData:{ |
||||
|
checkCanPaint: false, //true已达到最大绘画上限;false未达最高上限 |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getPaintStyleList(); |
||||
|
// this.getPrompt(); |
||||
|
}, |
||||
|
onShow() { |
||||
|
//进入页面清空原始属性 |
||||
|
// this.formData.height = undefined; |
||||
|
// this.formData.width = undefined; |
||||
|
// this.formData.modelName = undefined; |
||||
|
// this.formData.styleName = undefined; |
||||
|
// this.formData.promptText = undefined; |
||||
|
// this.size_active = 0; |
||||
|
// this.style_active = 0; |
||||
|
// this.prompt_active = 0; |
||||
|
this.checkLogin(); |
||||
|
this.checkUserCanAiPaint(); |
||||
|
}, |
||||
|
methods: { |
||||
|
selectType(index) { |
||||
|
this.curType = index |
||||
|
}, |
||||
|
//获取绘画风格 |
||||
|
async getPaintStyleList() { |
||||
|
const res = await getPaintStyle(); |
||||
|
if (res.data.code === 200) { |
||||
|
this.paintStyle = res.data.data |
||||
|
//console.log('this.paintStyle',this.paintStyle) |
||||
|
}else { |
||||
|
uni.showModal({ |
||||
|
content: '绘画风格加载失败！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
//判断是否达到免费AI绘画次数上限 |
||||
|
async checkUserCanAiPaint(){ |
||||
|
let that = this; |
||||
|
const data = { |
||||
|
userId: that.userInfo.id, |
||||
|
platform: 1, |
||||
|
appType: 0 |
||||
|
} |
||||
|
const res = await checkUserCanAiPaint(data); |
||||
|
//console.log('res绘画',res) |
||||
|
if(res.data.code === 200){ |
||||
|
if(res.data.data === true){ |
||||
|
that.checkData.checkCanPaint = true; |
||||
|
}else{ |
||||
|
that.checkData.checkCanPaint = false; |
||||
|
} |
||||
|
}else{ |
||||
|
return uni.showModal({ |
||||
|
content: '检查绘画上限失败！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
//判断是否登录 |
||||
|
checkLogin(){ |
||||
|
let that = this; |
||||
|
that.userInfo = uni.getStorageSync('userInfo'); |
||||
|
console.log('userInfo：',that.userInfo) |
||||
|
let token = uni.getStorageSync('token'); |
||||
|
if((Object.keys(that.userInfo).length==0) && (Object.keys(token).length==0)){ |
||||
|
console.error('尚未登录!'); |
||||
|
uni.showModal({ |
||||
|
title:'提示', |
||||
|
content:'您还没有登录!点击确定跳转登录界面以体验服务', |
||||
|
success(res) { |
||||
|
if (res.confirm) { |
||||
|
//跳转登录界面 |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/userInfo/userInfo' |
||||
|
}); |
||||
|
}else if(res.cancel){ |
||||
|
uni.showToast({ |
||||
|
title:'登录获取更好的服务体验哟!', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
getDraw() { |
||||
|
// if(this.userInfo.isVip != 1) { |
||||
|
// uni.showModal({ |
||||
|
// title:'此功能仅限VIP使用', |
||||
|
// content: '开通VIP获得更多权益', |
||||
|
// }) |
||||
|
// return |
||||
|
// } |
||||
|
if(!this.contentDesc || !this.sceneDesc) { |
||||
|
uni.showToast({ |
||||
|
title: '请输入描述~', |
||||
|
duration: 2000, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
const that = this; |
||||
|
|
||||
|
//跳转详情页生成图片 |
||||
|
uni.showModal({ |
||||
|
title: '温馨提示', |
||||
|
content: '任务创建完成,点击跳转生成内容！', |
||||
|
success(res) { |
||||
|
if(res.confirm){ |
||||
|
const data = { |
||||
|
prompt: that.contentDesc, |
||||
|
scenePrompt: that.sceneDesc, |
||||
|
styleName: that.paintStyle[that.curType].styleName, |
||||
|
painterId: that.userInfo.id, |
||||
|
painterName: that.userInfo.username, |
||||
|
appType: 0, |
||||
|
platform: 1, |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url: './loverPainResult?data='+JSON.stringify(data) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
// const data = { |
||||
|
// msg: this.drawDesc, |
||||
|
// type: this.curType, |
||||
|
// size: this.curSize, |
||||
|
// mobile: getApp().globalData.userInfo.phoneNumber |
||||
|
// } |
||||
|
// uni.navigateTo({ |
||||
|
// url: '/pages/resultPgae/resultPage?data='+ encodeURIComponent(JSON.stringify(data)), |
||||
|
// }); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.wrap { |
||||
|
padding: 20px; |
||||
|
width: 100%; |
||||
|
min-height: 100vh; |
||||
|
background-color: #1d1d1d; |
||||
|
.draw-button { |
||||
|
position: fixed; |
||||
|
left: 50%; |
||||
|
bottom: 50rpx; |
||||
|
transform: translateX(-50%); |
||||
|
background: linear-gradient(#4090f6, #2150d2); |
||||
|
width: 400rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 50rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
color: #fff; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
} |
||||
|
.desc-box { |
||||
|
.title { |
||||
|
color: #fff; |
||||
|
font-size: 16px; |
||||
|
// margin-bottom: 20px; |
||||
|
} |
||||
|
.desc-input { |
||||
|
margin-top: 10px; |
||||
|
width: 100%; |
||||
|
height: 200rpx; |
||||
|
background-color: #373737; |
||||
|
border-radius: 8px; |
||||
|
padding: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.type-box { |
||||
|
.type-item-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
.type-item { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.active { |
||||
|
border: 5px solid #4090f6; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue