AI画图更改上传图片发送方式

pages/AI-draw/AI-draw.vue

@@ -63,23 +63,25 @@
 					</view>
 			</scroll-view>
 			
-			<view style="display: flex;width: 70vw;height: 90upx;position: absolute;bottom:500upx;">
-					<view style="display: flex;width: 90%;  border-radius: 25px 25px 25px 25px;opacity: 1;border: 1px solid #32B3AA;width: 100%;" class="textarea-box">
-					
-						<view style="width: 90%; height: 100%; display: flex;align-items: center;justify-content: center" >
-							<textarea  v-model="inputValue" :cursor-spacing="15" class="textarea" auto-height="true"
-								@keydown.enter="onKeydown('enter')" :disabled="disabled"
-								@input="onKeyInput"
-								placeholder="请输入消息内容(使用 Enter 发送)" :maxlength="-1" 
-								placeholder-class="input-placeholder"></textarea>
-						</view>
-						<view v-if="recvStatus==false" style="width: 10%; height: 100%; display: flex; color: aliceblue;align-items: center;justify-content: center" @click="sendMsg">
-							<image src="../../static/img_send.png" style="width: 29.57upx;height: 37.67upx;" ></image>
-						</view>
+			<view class="inputbox" style="display: flex;width: 70vw;height: 90upx;position: absolute;bottom:500upx;">
+				<view style="display: flex;align-items: center;justify-content: center;width: 5%;position: relative;">
+					<image @click="onclickchooseImg()" src="../../static/img_upload.png" style="width: 65upx;height: 65upx;"></image>
+				</view>
+				<view style="display: flex;width: 90%; margin-left: 5px; border-radius: 25px 25px 25px 25px;opacity: 1;border: 1px solid #32B3AA;" class="textarea-box">
+					<view style="width: 90%; height: 100%; display: flex;align-items: center;justify-content: center" >
+						<textarea  v-model="inputValue" :cursor-spacing="15" class="textarea" auto-height="true"
+							@keydown.enter="onKeydown('enter')" :disabled="disabled"
+							@input="onKeyInput"
+							placeholder="请输入消息内容(使用 Enter 发送)" :maxlength="-1" 
+							placeholder-class="input-placeholder"></textarea>
 					</view>
-					<view style=" display: flex;align-items: center;justify-content: center;width: 5%;position: relative;">
-						<image @click="onclickdelete()" src="../../static/img_delete.png" style="width: 50upx;height: 70upx;"></image>
+					<view v-if="recvStatus==false" style="width: 10%; height: 100%; display: flex; color: aliceblue;align-items: center;justify-content: center" @click="sendMsg">
+						<image src="../../static/img_send.png" style="width: 29.57upx;height: 37.67upx;" ></image>
 					</view>
+				</view>
+				<view style=" display: flex;align-items: center;justify-content: center;width: 5%;position: relative;">
+					<image @click="onclickdelete()" src="../../static/img_delete.png" style="width: 50upx;height: 70upx;"></image>
+				</view>
 			</view>
 		</view>
 					<view style="position: absolute;top: 10%;right: 5%;width: 200upx;display: flex;align-items: center;justify-content: center;">
@@ -125,10 +127,19 @@
 						</view>
 				
 					</view>
+					
+					<view v-if="choose_img_tempFilePath != ''" style="position: fixed; top: 500px; left: 20%; width: 130px; height: 90px;">
+						<view style="position: absolute; top: 10px; width: 120px; height: 80px; background-color: #111111;">
+							<image style="width: 100%; height: 100%;" :src="choose_img_tempFilePath" mode="aspectFill"></image>
+						</view>
+						<view style="position: absolute; right: 0; width: 30px; height: 30px;" @click="onclickDeleteChooseImg">
+							<image style="margin-left: 10px; width: 20px; height: 20px;" src="../../static/img_jian.png" mode="aspectFit"></image>
+						</view>
+					</view>
+					
 					<view v-if="is_up_img_file" style="align-items: center;justify-content: center;display: flex; color: aliceblue; position: absolute; width: 100vw;height:100vh;background-color: black;opacity: 70%;">
-						正在上传
+						正在上传图片...
 					</view>
-				
 	</view>
 </template>
 
@@ -179,24 +190,26 @@
 				imageUrl:'',
 				fileData:null,
 				cur_select_img:'../../static/import-img.png',
+				
+				choose_img_tempFilePath: '',
 			}	
 		},
 		mounted(){
-			    this.user_mobile = this.tools.get_user_info().mobile
-				marked.setOptions({
-				          renderer: new marked.Renderer(),
-				          gfm: true,
-				          tables: true,
-				          breaks: false,
-				          pedantic: false,
-				          sanitize: false,
-				          smartLists: true,
-				          smartypants: false,
-						  highlight: function (code) {
-						  					return hljs.highlightAuto(code).value;
-						 },
-						 langPrefix:"hljs language-"
-				});
+			this.user_mobile = this.tools.get_user_info().mobile
+			marked.setOptions({
+			          renderer: new marked.Renderer(),
+			          gfm: true,
+			          tables: true,
+			          breaks: false,
+			          pedantic: false,
+			          sanitize: false,
+			          smartLists: true,
+			          smartypants: false,
+					  highlight: function (code) {
+					  					return hljs.highlightAuto(code).value;
+					 },
+					 langPrefix:"hljs language-"
+			});
 		},
 		props: {
 			viewTop: {
@@ -500,6 +513,11 @@
 				self.recvMsgQueue[self.recvMsgQueue.length-1].isFinish = true;
 			},
 			async sendMsg(){
+				if(this.choose_img_tempFilePath != '') {
+					this.sendImageAndTextOperation()
+					return
+				}
+				
 				// 如果内容为空
 				if (!this.inputValue) {
 					// 弹出提示框
@@ -580,7 +598,112 @@
 					}
 				})
 			},
-			
+			onclickDeleteChooseImg() {
+				let self = this
+				uni.showModal({
+					showCancel:true,
+					content:"是否删除",
+					success:(res)=>{
+						if(res.confirm){
+							self.choose_img_tempFilePath = ''							
+						}
+					}
+				})
+			},
+			onclickchooseImg(event){
+				let self = this;
+				uni.chooseImage({
+					success: (chooseImageRes) => {
+						const tempFilePaths = chooseImageRes.tempFilePaths;
+						this.choose_img_tempFilePath = tempFilePaths[0]
+						if(tempFilePaths.length > 0) {
+							self.choose_img_tempFilePath = tempFilePaths[0]
+						} else {
+							uni.showToast({
+								icon:'error',
+								title:'图片选择失败,请重新选择',
+								duration:2000
+							})
+						}
+					}
+				});
+			},
+			sendImageAndTextOperation() {
+				if (this.inputValue.length == 0) {
+					return uni.showToast({
+						title: '请添加描述哦,只支持英文',
+						icon: 'none'
+					});
+				}
+				
+				let self = this
+				self.is_up_img_file = true
+				// 上传图片+发送图片链接和文本
+				// 上传图片
+				uni.uploadFile({
+					url: 'https://mlapi.hainanmlwl.com/file/upload_aiimg',
+					filePath: self.choose_img_tempFilePath,
+					name: 'aiimg_url',
+					formData: {
+						// 'aiimg_url': self.cur_select_img
+					},
+					success: (uploadFileRes) => {
+						console.log("uploadFile",obj);
+						self.is_up_img_file = false;
+						let obj = JSON.parse(uploadFileRes.data)
+						uni.showToast({
+							title:obj.message,
+							duration:1500
+						})
+						
+						if(obj.code == 10000) {
+							let img_url = obj.content.surl
+							if(img_url == '') {
+								uni.showModal({
+									content:"图片链接为空",
+									showCancel:false
+								})
+								return
+							} 
+							
+							// 发送
+							self.sendSocketMessage(self.inputValue, img_url+" "+self.inputValue ,img_url)
+							
+						} else {
+							uni.showModal({
+								showCancel:false,
+								content:obj.msg
+							})
+						}
+					},
+					fail(err) {
+						console.log('上传失败err=',err)
+						uni.showModal({
+							content:"上传失败",
+							showCancel:false
+						})
+						self.is_up_img_file = false;
+					}
+				});
+				
+				
+				// if(this.cur_select_img==="../../static/import-img.png"){
+				// 	uni.showToast({
+				// 		title:"请选择图片"
+				// 	})
+				// 	return
+				// }
+				// if(this.diy_inputValue.length>0){
+				// 	this.is_show_import_img_view = false;
+				// 	let des_img = this.cur_select_img;
+				// 	this.sendSocketMessage(this.diy_inputValue,this.cur_select_img+" "+this.diy_inputValue,des_img)
+				// 	this.diy_inputValue = '';
+				// }else{
+				// 	uni.showToast({
+				// 		title:"请添加描述，只支持英文哦"
+				// 	})
+				// }
+			}
 		
 		}
 	}

pages/enter/enter-navigator.vue

@@ -6,10 +6,11 @@
 		<view class="titleText">SmartAssistant</view>
 		<view class="navigatorContent">
 			<view class="navigator_box" v-for="(item, index) in dataList" :key="index" @click="clickToItem(item, index)">
-				<view v-if="currenIndex == index" class="navigator_box_selected">
-					<image :src="item.s_icon" mode="aspectFit"></image>
-				</view>
-				<view v-else class="navigator_box_normal">{{ item.t }}</view>
+				<text class="navigator_box_selected" v-if="currenIndex == index" >
+				    {{ item.t }}
+				</text>
+				<view class="navigator_box_selected_line" v-if="currenIndex == index"></view>
+				<text class="navigator_box_normal" v-else>{{ item.t }}</text>
 			</view>
 		</view>
 		<view class="userState_login" v-if="is_login == false">
@@ -25,9 +26,7 @@ import { nextTick } from "vue"
 	export default {
 		data() {
 			return {
-				dataList: [{'t': '首页', 's_icon': '/static/navigator/navigator_home.png'},
-				           {'t': 'AI聊天', 's_icon': '/static/navigator/navigator_chat.png'},
-						   {'t': 'AI画图', 's_icon': '/static/navigator/navigator_draw.png'}],
+				dataList: [{'t': '首页'},{'t': 'AI聊天'},{'t': 'AI画图'}],
 				currenIndex: this.selectedIndex,
 				is_login: false
 			}
@@ -116,6 +115,7 @@ import { nextTick } from "vue"
 		display: flex;
 		box-sizing: border-box;
 		align-items: center;
+		
 		.robot{
 			flex-shrink: 0;
 			width: 48px;
@@ -141,6 +141,7 @@ import { nextTick } from "vue"
 			align-items: center;
 			
 			.navigator_box{
+				position: relative;
 				display: flex;
 				margin-left: 30px;
 				width: 80px;
@@ -148,17 +149,22 @@ import { nextTick } from "vue"
 				justify-content: center;
 				align-items: center;
 				
+				font-size: 20px;
 				.navigator_box_normal{
-					font-size: 20px;
 					color: #ffffff;
 				}
 				.navigator_box_selected{
-					width: 55px;
-					height: 40px;
-					image{
-						width: 100%;
-						height: 100%;
-					}
+					color: #B34FFF;
+					background: linear-gradient(90deg, #24BF74 10%, #FAEE07 90%); 
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+				}
+				.navigator_box_selected_line {
+					position: absolute;
+					top: 75%;
+					width: 50%;
+					height: 1.5px;
+					background: linear-gradient(90deg, #24BF74 10%, #FAEE07 90%);
 				}
 			}
 		}

unpackage/dist/build/h5/index.html

@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>chatgpd</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.63b34199.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.091ebf81.js></script><script src=/static/js/index.3ea427b4.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.63b34199.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.091ebf81.js></script><script src=/static/js/index.8d4c40f3.js></script></body></html>