bnyer
/
bnyer-cloud-tiktok
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

feature:新增AI绘画相关内容

feature-1.0
Penny 3 years ago
parent
c52893603c
commit
1f62eb5f3d
1 changed files with 155 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 217
      pages/ai/paint/paint.vue

217
pages/ai/paint/paint.vue
View File

@ -1,10 +1,13 @@
<template> <template>
<view class="container"> <view class="container">
<uni-forms :modelValue="formData"> <uni-forms :modelValue="formData" ref="form" validate-trigger='blur'>
<!-- 提示词 --> <!-- 提示词 -->
<view class="head"> <view class="head">
<view> <view>
<uni-easyinput type="textarea" autoHeight v-model="formData.promptText" placeholder="请输入想生成画的提示词" class="promptInput"></uni-easyinput> <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> </view>
@ -43,12 +46,15 @@
<scroll-view scroll-x="true" class="styleBox"> <scroll-view scroll-x="true" class="styleBox">
<block v-for="(item,index) in paintStyle" :key="index"> <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)"> <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> <image :src="item.imgUrl" class="styleCover" mode="aspectFill"></image>
<text class="styleName">{{item.name}}</text> <text class="styleName">{{item.name}}</text>
</view> </view>
</block> </block>
</scroll-view> </scroll-view>
<view class="checkStyleBox" v-if="checkData.checkStyleBox == false">
<text>请选择创作风格!</text>
</view>
<!-- 尺寸 --> <!-- 尺寸 -->
<view class="size"> <view class="size">
@ -62,7 +68,10 @@
</view> </view>
<view class="lists"> <view class="lists">
<view :class="size_active==item.id?'item active':'item'" @click="onClickSize(item.id,item.height,item.width)" <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">{{ item.text }}</view> 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> </view>
@ -82,12 +91,18 @@
data() { data() {
return { return {
formData:{ formData:{
size_height: undefined, height: undefined,
size_width: undefined, width: undefined,
modelName: undefined, modelName: undefined,
styleName: undefined, styleName: undefined,
promptText: undefined promptText: undefined
}, },
checkData:{
checkPrompt: undefined, //true填了内容;false未填内容
checkStyleBox: undefined, //true选了创作风格;false未选创作风格
checkSize: undefined, //true选了画布大小;false未选画布大小
},
userInfo: {},
noClick:true, //防止重复提交 noClick:true, //防止重复提交
promptList: [], promptList: [],
paintStyle:[], paintStyle:[],
@ -114,45 +129,74 @@
width: 1280 width: 1280
} }
], ],
rules:{
prompt:{
rules:[{
required: true,
errorMessage: '请输入关键词',
}]
}
}
} }
}, },
// onReady() {
// //设置校验规则
// this.$refs.form.setRules(this.rules);
// },
created() { created() {
//this.base64ToPath(); //this.base64ToPath();
}, },
onLoad() { onLoad() {
this.checkLogin();
this.getPaintStyleList(); this.getPaintStyleList();
this.getPrompt(); this.getPrompt();
}, },
methods: { 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)){
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(){ startPaint(){
//判断必填项是否都填了 //判断必填项是否都填了
let that = this; const that = this;
// console.log('创作prompt为：',that.formData.promptText) //console.log('创作prompt为：',that.formData.promptText)
// console.log('创作尺寸高度为：',that.formData.size_height) // console.log('创作尺寸高度为：',that.formData.height)
// console.log('创作尺寸宽度为：',that.formData.size_width) // console.log('创作尺寸宽度为：',that.formData.width)
// console.log('创作风格为：',that.formData.style_model_name) //console.log('创作风格为：',that.formData.styleName)
//判断是否登录 if(that.formData.promptText == undefined){
const userInfo = uni.getStorageSync('userInfo'); console.log('test1111')
console.log('userInfo：',userInfo) uni.showToast({
const token = uni.getStorageSync('token'); title: '请输入提示词!',
if((Object.keys(userInfo).length!=0) && (Object.keys(token).length!=0)){ 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({ uni.showModal({
title: '温馨提示', title: '温馨提示',
@ -160,13 +204,13 @@
success(res) { success(res) {
if(res.confirm){ if(res.confirm){
const data = { const data = {
width: that.formData.size_width, width: that.formData.width,
height: that.formData.size_height, height: that.formData.height,
prompt: that.formData.promptText, prompt: that.formData.promptText,
modelName: that.formData.modelName, modelName: that.formData.modelName,
styleName: that.formData.styleName, styleName: that.formData.styleName,
painterId: userInfo.id, painterId: that.userInfo.id,
painterName: userInfo.username painterName: that.userInfo.username
} }
uni.navigateTo({ uni.navigateTo({
url: './paintDetail?data='+JSON.stringify(data) url: './paintDetail?data='+JSON.stringify(data)
@ -174,49 +218,80 @@
} }
} }
}); });
}
},
//检查是否输入提示词
checkPrompt(value){
//console.log('校验提示词',value);
if(value == "" || value == null || value == undefined){
this.checkData.checkPrompt = false;
}else{ }else{
uni.showModal({ this.checkData.checkPrompt = true;
title:'提示', }
content:'您还没有登录!点击确定跳转登录界面以体验服务', //console.log('this.checkData.checkPrompt',this.checkData.checkPrompt)
success(res) { },
if (res.confirm) {
//跳转登录界面 //检查是否选择创作风格
uni.switchTab({ checkStyle(){
url: '/pages/userInfo/userInfo' //console.log('校验创作风格');
}); //console.log('滑动后选泽风格为',this.formData.styleName)
}else if(res.cancel){ if(this.formData.styleName == "" || this.formData.styleName == null || this.formData.styleName == undefined){
uni.showToast({ this.checkData.checkStyleBox = false;
title:'登录获取更好的服务体验哟!', }else{
duration: 2000 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) { onClickSize(id,height,width) {
this.size_active = id 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('所选尺寸id为：',this.size_active)
this.formData.size_height = height //console.log('所选尺寸高度为：',this.formData.height)
//console.log('所选尺寸高度为：',this.formData.size_height) //console.log('所选尺寸宽度为：',this.formData.width)
this.formData.size_width = width
//console.log('所选尺寸宽度为：',this.formData.size_width)
}, },
//提示词 //提示词
onClickPrompt(index) { onClickPrompt(index) {
this.prompt_active = index this.prompt_active = index
this.formData.promptText = this.promptList[index].text this.formData.promptText = this.promptList[index].text
//拖底消除校验状态
if(this.checkData.checkPrompt === false){
this.checkData.checkPrompt = true;
}
//console.log('this.prompt_active',this.prompt_active) //console.log('this.prompt_active',this.prompt_active)
}, },
//创作风格 //创作风格
onClickStyle(id,modelName,styleName) { onClickStyle(id,modelName,styleName) {
this.style_active = id this.style_active = id
//console.log('所选风格id为',this.style_active)
this.formData.modelName = modelName this.formData.modelName = modelName
this.formData.styleName = styleName this.formData.styleName = styleName
//console.log('所选风格为',this.formData.style_model_name) //拖底消除校验状态
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() { getRandPrompt() {
@ -273,7 +348,7 @@
<style lang="scss"> <style lang="scss">
.size { .size {
width: 100%; width: 92%;
margin: 15rpx auto; margin: 15rpx auto;
.lists { .lists {
@ -284,7 +359,7 @@
.item { .item {
background-color: #fff; background-color: #fff;
padding: 10rpx 30rpx; padding: 10rpx 20rpx;
border-radius: 10rpx; border-radius: 10rpx;
color: #666; color: #666;
border: 1rpx solid #666; border: 1rpx solid #666;
@ -304,7 +379,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 30rpx; margin-bottom: 30rpx;
.left { .left {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -604,4 +679,22 @@
border: 1px solid #F22E38; border: 1px solid #F22E38;
border-radius: 10rpx; 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> </style>

Write Preview
Loading…
Cancel
Save