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.
750 lines
17 KiB
750 lines
17 KiB
<template>
|
|
<view class="container">
|
|
<uni-forms :modelValue="formData" ref="form" validate-trigger='blur'>
|
|
<!-- 提示词 -->
|
|
<view class="head">
|
|
<view>
|
|
<uni-easyinput type="textarea" autoHeight v-model="formData.promptText" placeholder="请输入想生成画的提示词" class="promptInput" @blur="checkPrompt(formData.promptText)"></uni-easyinput>
|
|
</view>
|
|
<view class="checkPromptText" v-if="checkData.checkPrompt == false">
|
|
<text>请输入提示词!</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="keywords">
|
|
<view class="head">
|
|
<view class="left">
|
|
<view class="icon">
|
|
<uni-icons type="fire-filled" size="20"></uni-icons>
|
|
</view>
|
|
<view class="title">提示词示例</view>
|
|
</view>
|
|
<view class="right" @click="getRandPrompt">
|
|
<view class="title">换一批</view>
|
|
<view class="icon">
|
|
<uni-icons type="refreshempty" size="20"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lists">
|
|
<view @click="onClickPrompt(index)" :class="index == prompt_active?'item active':'item'"
|
|
v-for="(item,index) in promptList" :key="index">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 创作风格 -->
|
|
<view class="style">
|
|
<view class="head">
|
|
<view class="left">
|
|
<view class="icon">
|
|
<uni-icons type="star-filled" size="20"></uni-icons>
|
|
</view>
|
|
<view class="title">选择创作风格</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-x="true" class="styleBox">
|
|
<block v-for="(item,index) in paintStyle" :key="index">
|
|
<view class="styleItem" :class="style_active == item.id?'styleItem styleActive':'styleItem'" @click="onClickStyle(item.id,item.modelName,item.name)" @touchend="checkStyle()">
|
|
<image :src="item.imgUrl" class="styleCover" mode="aspectFill"></image>
|
|
<text class="styleName">{{item.name}}</text>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
<view class="checkStyleBox" v-if="checkData.checkStyleBox == false">
|
|
<text>请选择创作风格!</text>
|
|
</view>
|
|
|
|
<!-- 尺寸 -->
|
|
<view class="size">
|
|
<view class="head">
|
|
<view class="left">
|
|
<view class="icon">
|
|
<uni-icons type="map-filled" size="20"></uni-icons>
|
|
</view>
|
|
<view class="title">选择画布大小</view>
|
|
</view>
|
|
</view>
|
|
<view class="lists">
|
|
<view :class="size_active==item.id?'item active':'item'" @click="onClickSize(item.id,item.height,item.width)"
|
|
v-for="(item,index) in size" :key="index" @touchend="checkSize()">{{ item.text }}</view>
|
|
</view>
|
|
<view class="checkSize" v-if="checkData.checkSize == false">
|
|
<text>请选择画布大小!</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom">
|
|
<view>
|
|
<button type="default" @click="$noMultipleClicks(startPaint)" class="startPaint">开始创作</button>
|
|
</view>
|
|
</view>
|
|
</uni-forms>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import base64ToImg from '@/utils/base64Utils';
|
|
import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint} from '@/api/paint.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData:{
|
|
height: undefined,
|
|
width: undefined,
|
|
modelName: undefined,
|
|
styleName: undefined,
|
|
promptText: undefined,
|
|
},
|
|
checkData:{
|
|
checkPrompt: undefined, //true填了内容;false未填内容
|
|
checkStyleBox: undefined, //true选了创作风格;false未选创作风格
|
|
checkSize: undefined, //true选了画布大小;false未选画布大小
|
|
//checkCanPaint: false, //true已达到最大绘画上限;false未达最高上限
|
|
},
|
|
userInfo: {},
|
|
noClick:true, //防止重复提交
|
|
promptList: [],
|
|
paintStyle:[],
|
|
size_active: 0,
|
|
prompt_active: 0,
|
|
style_active: 0,
|
|
size: [
|
|
{
|
|
id: 1,
|
|
text: '正方形',
|
|
height: 512,
|
|
width: 512
|
|
},
|
|
{
|
|
id: 2,
|
|
text: '宽屏',
|
|
height: 512,
|
|
width: 1024
|
|
},
|
|
{
|
|
id: 3,
|
|
text: '竖屏',
|
|
height: 1024,
|
|
width: 512
|
|
}
|
|
],
|
|
}
|
|
},
|
|
created() {
|
|
//this.base64ToPath();
|
|
|
|
},
|
|
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: {
|
|
|
|
//翻译
|
|
|
|
//判断是否登录
|
|
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
|
|
// });
|
|
// }
|
|
// }
|
|
// });
|
|
}
|
|
},
|
|
//传递参数到下个界面开始绘图
|
|
startPaint(){
|
|
const that = this;
|
|
//console.log('that.checkData.checkCanPaint',that.checkData.checkCanPaint)
|
|
//判断是否可进行ai绘画 TODO 暂时关闭校验
|
|
// if(that.checkData.checkCanPaint === true){
|
|
// return uni.showToast({
|
|
// title: '当日绘画次数已用完,请明日再来!',
|
|
// icon: 'none'
|
|
// })
|
|
// }
|
|
|
|
//判断必填项是否都填了
|
|
//console.log('创作prompt为：',that.formData.promptText)
|
|
// console.log('创作尺寸高度为：',that.formData.height)
|
|
// console.log('创作尺寸宽度为：',that.formData.width)
|
|
//console.log('创作风格为：',that.formData.styleName)
|
|
|
|
if(that.formData.promptText == undefined){
|
|
uni.showToast({
|
|
title: '请输入提示词!',
|
|
duration: 1000,
|
|
icon: 'fail'
|
|
});
|
|
}else if(that.formData.styleName == undefined){
|
|
uni.showToast({
|
|
title: '请选择创作风格!',
|
|
duration: 1000,
|
|
icon: 'fail'
|
|
});
|
|
}else if(that.formData.height == undefined || that.formData.width == undefined){
|
|
uni.showToast({
|
|
title: '请选择画布大小!',
|
|
duration: 1000,
|
|
icon: 'fail'
|
|
});
|
|
}else{
|
|
//跳转详情页生成图片
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '任务创建完成,点击跳转生成内容！',
|
|
success(res) {
|
|
if(res.confirm){
|
|
const data = {
|
|
width: that.formData.width,
|
|
height: that.formData.height,
|
|
prompt: that.formData.promptText,
|
|
modelName: that.formData.modelName,
|
|
styleName: that.formData.styleName,
|
|
painterId: that.userInfo.id,
|
|
painterName: that.userInfo.username,
|
|
appType: 0,
|
|
platform: 0
|
|
}
|
|
uni.navigateTo({
|
|
url: './paintDetail?data='+JSON.stringify(data)
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
//检查是否输入提示词
|
|
checkPrompt(value){
|
|
//console.log('校验提示词',value);
|
|
if(value == "" || value == null || value == undefined){
|
|
this.checkData.checkPrompt = false;
|
|
}else{
|
|
this.checkData.checkPrompt = true;
|
|
}
|
|
//console.log('this.checkData.checkPrompt',this.checkData.checkPrompt)
|
|
},
|
|
|
|
//检查是否选择创作风格
|
|
checkStyle(){
|
|
//console.log('校验创作风格');
|
|
//console.log('滑动后选泽风格为',this.formData.styleName)
|
|
if(this.formData.styleName == "" || this.formData.styleName == null || this.formData.styleName == undefined){
|
|
this.checkData.checkStyleBox = false;
|
|
}else{
|
|
this.checkData.checkStyleBox = true;
|
|
}
|
|
//console.log('this.checkData.checkStyleBox',this.checkData.checkStyleBox)
|
|
},
|
|
|
|
//检查是否选择画布大小
|
|
checkSize(){
|
|
//console.log('校验画布大小');
|
|
if(this.formData.height == "" || this.formData.height == null || this.formData.height == undefined ||
|
|
this.formData.width == "" || this.formData.width == null || this.formData.width == undefined){
|
|
this.checkData.checkSize = false;
|
|
}else{
|
|
this.checkData.checkSize = true;
|
|
}
|
|
//console.log('this.checkData.checkSize',this.checkData.checkSize)
|
|
},
|
|
|
|
//画布大小
|
|
onClickSize(id,height,width) {
|
|
this.size_active = id
|
|
this.formData.height = height
|
|
this.formData.width = width
|
|
//拖底消除校验状态
|
|
if(this.checkData.checkSize === false){
|
|
this.checkData.checkSize = true;
|
|
}
|
|
//console.log('所选尺寸id为：',this.size_active)
|
|
//console.log('所选尺寸高度为：',this.formData.height)
|
|
//console.log('所选尺寸宽度为：',this.formData.width)
|
|
|
|
},
|
|
//提示词
|
|
onClickPrompt(index) {
|
|
this.prompt_active = index
|
|
this.formData.promptText = this.promptList[index].text
|
|
//拖底消除校验状态
|
|
if(this.checkData.checkPrompt === false){
|
|
this.checkData.checkPrompt = true;
|
|
}
|
|
//console.log('this.prompt_active',this.prompt_active)
|
|
},
|
|
//创作风格
|
|
onClickStyle(id,modelName,styleName) {
|
|
this.style_active = id
|
|
this.formData.modelName = modelName
|
|
this.formData.styleName = styleName
|
|
//拖底消除校验状态
|
|
if(this.checkData.checkStyleBox === false){
|
|
this.checkData.checkStyleBox = true;
|
|
}
|
|
//console.log('所选风格id为',this.style_active)
|
|
//console.log('所选模型为',this.formData.modelName)
|
|
//console.log('所选风格为',this.formData.styleName)
|
|
},
|
|
//随机选取提示词
|
|
getRandPrompt() {
|
|
this.promptList = this.getRandomArrayElements(this.promptList, 10)
|
|
this.promptText = this.promptList[this.prompt_active].text
|
|
},
|
|
|
|
//判断是否达到免费AI绘画次数上限
|
|
// async checkUserCanAiPaint(){
|
|
// let that = this;
|
|
// const data = {
|
|
// userId: that.userInfo.id,
|
|
// platform: 0,
|
|
// 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
|
|
// });
|
|
// }
|
|
// },
|
|
|
|
//获取绘画风格
|
|
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
|
|
});
|
|
}
|
|
},
|
|
|
|
//获取提示词列表
|
|
async getPrompt() {
|
|
const res = await getPrompt();
|
|
if (res.data.code === 200) {
|
|
this.promptList = res.data.data
|
|
//console.log('this.promptList',this.promptList)
|
|
}else {
|
|
uni.showModal({
|
|
content: '提示词列表加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
|
|
|
|
|
|
getRandomArrayElements(arr, count) {
|
|
var shuffled = arr.slice(0),
|
|
i = arr.length,
|
|
min = i - count,
|
|
temp, index;
|
|
while (i-- > min) {
|
|
index = Math.floor((i + 1) * Math.random());
|
|
temp = shuffled[index];
|
|
shuffled[index] = shuffled[i];
|
|
shuffled[i] = temp;
|
|
}
|
|
return shuffled.slice(min);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.size {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
background-color: #fff;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
color: #666;
|
|
border: 1rpx solid #666;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #060101;
|
|
border: 1rpx solid #F22E38;
|
|
background-color: #FFDEE0; //# FFDEE0
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.play {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.item {
|
|
background-color: #FFDEE0;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
height: 30rpx;
|
|
color: #F22E38;
|
|
border: 1rpx solid #F22E38;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.style {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.title {
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.active {
|
|
position: relative;
|
|
|
|
color: #F22E38;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.keywords {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
background-color: #fff;
|
|
padding: 10rpx 15rpx;
|
|
border-radius: 10rpx;
|
|
color: #666;
|
|
border: 1rpx solid #666;
|
|
max-width: 128rpx;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.active {
|
|
color: #060101;
|
|
border: 1rpx solid #F22E38;
|
|
background-color: #FFDEE0;
|
|
}
|
|
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
page {
|
|
background-color: #fff;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.btn-action {
|
|
width: 90%;
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
left: 4%;
|
|
height: 120rpx;
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
.rand {
|
|
width: 40%;
|
|
|
|
.u-button {
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
|
|
.start {
|
|
width: 55%;
|
|
|
|
.btn-normal {
|
|
height: 100rpx;
|
|
line-height: normal;
|
|
font-size: 28rpx;
|
|
border-radius: 50rpx;
|
|
background-color: #f22e38;
|
|
border: none;
|
|
color: #f4f4f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
box-shadow: 3rpx 3rpx 10rpx #dd6161;
|
|
|
|
.title {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.small {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.btn-normal::after {
|
|
border: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.styleBox{
|
|
white-space: nowrap; // 滚动必须加的属性
|
|
width: 700rpx;
|
|
margin-left: 30rpx;
|
|
//padding-right: 20rpx;
|
|
|
|
.styleItem{
|
|
width: 166rpx;
|
|
height: 170rpx;
|
|
margin-right: 20rpx;
|
|
display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border: 5rpx solid #fff;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.styleActive {
|
|
color: #060101;
|
|
border: 1rpx solid #F22E38;
|
|
background-color: #FFDEE0;
|
|
opacity: 0.9;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.styleCover{
|
|
width: 165rpx;
|
|
height: 165rpx;
|
|
}
|
|
|
|
.styleName{
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
line-height: 42rpx;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
background-color: #FFF;
|
|
opacity: 0.5;
|
|
top: 125rpx;
|
|
}
|
|
}
|
|
|
|
.startPaint{
|
|
background-color: #1A96DB;
|
|
border: 1px solid #F22E38;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.checkPromptText{
|
|
font-size: 30rpx;
|
|
color: #F22E38;
|
|
margin-left: 36rpx;
|
|
}
|
|
|
|
.checkStyleBox{
|
|
font-size: 30rpx;
|
|
color: #F22E38;
|
|
margin-left: 36rpx;
|
|
}
|
|
|
|
.checkSize{
|
|
font-size: 30rpx;
|
|
color: #F22E38;
|
|
margin-left: 36rpx;
|
|
}
|
|
</style>
|
|
|