2023-10-20

src/component/HomePage/PrintboardUpload.vue

@@ -99,9 +99,10 @@
 				</div>
 			</div>
 			<div v-show="openClick == 3" class="modal_accomplish">
-				<div class="input_box">
-					<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
+				<div class="input_box" :class="{active:inputShow}">
+					<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
 					<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
+					<span>The entered content exceeds the maximum length.</span>
 				</div>
 				<div class="modal_img">
 					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
@@ -151,10 +152,10 @@ export default defineComponent({
             moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
         let openClick: any = ref(1);
 		let generateCheckbox:any = ref()
-		let generateList:any = ref([
-		
-		])
+		let generateList:any = ref([])
 		let loadingShow = ref(false)
+		let inputShow = ref(false)
+		let inputTime = ref()
         return {
             fileList,
             printImgList,
@@ -163,6 +164,8 @@ export default defineComponent({
 			generateCheckbox,
 			generateList,
 			loadingShow,
+			inputShow,
+			inputTime,
         }
     },
     computed:{
@@ -572,6 +575,16 @@ export default defineComponent({
 		getgenerateCheckbox(value:any){
 			this.generateCheckbox = value
 		},
+		ifMaximumLength(){
+			clearTimeout(this.inputTime)
+			this.inputTime = setTimeout(()=>{
+				if(this.captionGeneration.split(/\s+/).length > 75){
+					this.inputShow = true
+				}else{
+					this.inputShow = false
+				}
+			},500)
+		},
 		getgenerate(){
 			let generage:any = this.$refs.Generate
 			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
@@ -583,10 +596,12 @@ export default defineComponent({
 				level2Type:'',
 				text:this.captionGeneration,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				version:2,//为1就是Print
+				version:generage.printModel.num,//为1就是Print
+				gender:'',
 			}
 			if(generateType == 'image'||generateType == 'text-image'){
 				if(generage.collectionElementid){
+					
 				}else{
 					message.warning(
 						"Please select a picture"
@@ -598,6 +613,14 @@ export default defineComponent({
 				data.level2Type = ''
 				// this.beforeUpload(false)
 				if(this.captionGeneration){
+					let arr = this.captionGeneration.split(/\s+/).length
+					if(arr > 75){
+						message.warning(
+							"The entered content exceeds the maximum length."
+						);
+					return
+
+					}
 				}else{
 					message.warning(
 						"Please enter content"
@@ -732,12 +755,17 @@ export default defineComponent({
 				border: 1px solid #f5f5f5;
 				vertical-align: top;
 				position: relative;
+				text-align: center;
 				img{
-					width: 100%;
+					width: auto;
+					object-fit: cover;
 					height: 100%;
+					max-width: 100%;
 				}
 
-              
+              .upload_file_img_block{
+				height: 100%;
+			  }
 
                 &.upload_component{
                     border: none;
@@ -779,7 +807,9 @@ export default defineComponent({
 					.upload_img{
 						display: block;
 						max-height: 100%;
+						width: auto;
 						max-width: 100%;
+						object-fit: cover;
 					}
 					&:hover .delete_like_file_block{
 						display: block;
@@ -847,9 +877,12 @@ export default defineComponent({
 					margin: 0 1rem 1rem 0;
 					position: relative;
 					cursor: pointer;
+					text-align: center;
 					img{
-						width: 100%;
+						width: auto;
 						height: 100%;
+						object-fit: cover;
+						max-width: 100%;
 					}
 					.checked{
 						position: absolute;
@@ -875,7 +908,7 @@ export default defineComponent({
 			display: flex;
 			flex-direction: column;
 			flex: 1;
-            overflow-x: hidden;
+            // overflow-x: hidden;
 			&.modal_accomplish::-webkit-scrollbar {
                 display: none;
             }
@@ -904,8 +937,9 @@ export default defineComponent({
 					cursor: pointer;
 					img{
 						object-fit: cover;
-						width: 100%;
 						height: 100%;
+						max-width: 100%;
+						width: auto;
 					}
 					&:hover .delete_like_file_block{
 						display: block;