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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 211
      pages/ai/paint/paint.vue

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

@ -1,10 +1,13 @@
<template>
<view class="container">
<uni-forms :modelValue="formData">
<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"></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>
@ -43,12 +46,15 @@
<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)">
<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">
@ -62,7 +68,10 @@
</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">{{ 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>
@ -82,12 +91,18 @@
data() {
return {
formData:{
size_height: undefined,
size_width: undefined,
height: undefined,
width: undefined,
modelName: undefined,
styleName: undefined,
promptText: undefined
},
checkData:{
checkPrompt: undefined, //true填了内容;false未填内容
checkStyleBox: undefined, //true选了创作风格;false未选创作风格
checkSize: undefined, //true选了画布大小;false未选画布大小
},
userInfo: {},
noClick:true, //防止重复提交
promptList: [],
paintStyle:[],
@ -114,45 +129,74 @@
width: 1280
}
],
rules:{
prompt:{
rules:[{
required: true,
errorMessage: '请输入关键词',
}]
}
}
}
},
// onReady() {
// //设置校验规则
// this.$refs.form.setRules(this.rules);
// },
created() {
//this.base64ToPath();
},
onLoad() {
this.checkLogin();
this.getPaintStyleList();
this.getPrompt();
},
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(){
//判断必填项是否都填了
let that = this;
// console.log('创作prompt为：',that.formData.promptText)
// console.log('创作尺寸高度为：',that.formData.size_height)
// console.log('创作尺寸宽度为：',that.formData.size_width)
// console.log('创作风格为：',that.formData.style_model_name)
//判断是否登录
const userInfo = uni.getStorageSync('userInfo');
console.log('userInfo：',userInfo)
const token = uni.getStorageSync('token');
if((Object.keys(userInfo).length!=0) && (Object.keys(token).length!=0)){
const that = this;
//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){
console.log('test1111')
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: '温馨提示',
@ -160,13 +204,13 @@
success(res) {
if(res.confirm){
const data = {
width: that.formData.size_width,
height: that.formData.size_height,
width: that.formData.width,
height: that.formData.height,
prompt: that.formData.promptText,
modelName: that.formData.modelName,
styleName: that.formData.styleName,
painterId: userInfo.id,
painterName: userInfo.username
painterId: that.userInfo.id,
painterName: that.userInfo.username
}
uni.navigateTo({
url: './paintDetail?data='+JSON.stringify(data)
@ -174,49 +218,80 @@
}
}
});
}else{
uni.showModal({
title:'提示',
content:'您还没有登录!点击确定跳转登录界面以体验服务',
success(res) {
if (res.confirm) {
//跳转登录界面
uni.switchTab({
url: '/pages/userInfo/userInfo'
});
}else if(res.cancel){
uni.showToast({
title:'登录获取更好的服务体验哟!',
duration: 2000
});
}
},
//检查是否输入提示词
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)
this.formData.size_height = height
//console.log('所选尺寸高度为：',this.formData.size_height)
this.formData.size_width = width
//console.log('所选尺寸宽度为：',this.formData.size_width)
//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
//console.log('所选风格id为',this.style_active)
this.formData.modelName = modelName
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() {
@ -273,7 +348,7 @@
<style lang="scss">
.size {
width: 100%;
width: 92%;
margin: 15rpx auto;
.lists {
@ -284,7 +359,7 @@
.item {
background-color: #fff;
padding: 10rpx 30rpx;
padding: 10rpx 20rpx;
border-radius: 10rpx;
color: #666;
border: 1rpx solid #666;
@ -604,4 +679,22 @@
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>

Write Preview
Loading…
Cancel
Save