From 1f62eb5f3d012c3c0500e72a65deb9e57a52cc24 Mon Sep 17 00:00:00 2001
From: Penny <2500338766@qq.com>
Date: Sun, 16 Apr 2023 19:40:12 +0800
Subject: [PATCH] =?UTF-8?q?feature:=E6=96=B0=E5=A2=9EAI=E7=BB=98=E7=94=BB?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/ai/paint/paint.vue | 217 ++++++++++++++++++++++++++++-----------
 1 file changed, 155 insertions(+), 62 deletions(-)

diff --git a/pages/ai/paint/paint.vue b/pages/ai/paint/paint.vue
index a918f07..3ae7256 100644
--- a/pages/ai/paint/paint.vue
+++ b/pages/ai/paint/paint.vue
@@ -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 @@
 							}
 						}
 					});
+				}
+			},
+			
+			//检查是否输入提示词
+			checkPrompt(value){
+				//console.log('校验提示词',value);
+				if(value == "" || value == null || value == undefined){
+					this.checkData.checkPrompt = false;
 				}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
-								});
-							} 
-						}
-					});
+					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;
@@ -304,7 +379,7 @@
 			flex-direction: row;
 			justify-content: space-between;
 			margin-bottom: 30rpx;
-
+			
 			.left {
 				display: flex;
 				flex-direction: row;
@@ -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>