Browse Source

1.修改发送按钮动态展示
2.修改聊天内容框样式细节

306132416@qq.com 6 years ago
parent
commit
89fe4abe72
1 changed files with 56 additions and 14 deletions
  1. 56 14
      pages/index/index.vue

+ 56 - 14
pages/index/index.vue

@@ -3,23 +3,23 @@
 		<!-- <navigation-custom :config="config" :scrollTop="scrollTopNav" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" /> -->
 		<scroll-view id="scrollview" class='chat-box' :style="{height: style.contentViewHeight + 'px'}" scroll-y="true"
 		 :scroll-with-animation="false" :scroll-top="scrollTop" @scrolltoupper="lower()">
-			<view class="tips-box">
+			<!-- <view class="tips-box">
 				{{nowTime}}
-			</view>
-			<view class="tips-box tips-title">
+			</view> -->
+		<!-- 	<view class="tips-box tips-title">
 				您好,智能投顾很高兴为您服务!
-			</view>
-
+			</view> -->
+<!-- 
 			<view class="talk-box">
 				<view class="talk-head-box">
 					<image src="../../static/rabotHead.png" mode="" class="talk-head"></image> 
 				</view>
 				<view class="talk-content">您好,智能顾投很高兴为您服务!</view>
-			</view>
+			</view> -->
 
 			<view v-for="chat in talkList" :key="chat.talkType"  class="m-item">
 				<view class="talk-box talk-box-end" v-show="chat.content">
-					<view class="talk-content">{{chat.content}}</view>
+					<view class="talk-reply">{{chat.content}}</view>
 					<view class="talk-head-box">
 						<image :src='userHeadUrl' mode="" class="talk-head"></image>
 					</view>
@@ -35,10 +35,10 @@
 
 		</scroll-view>
 		<view class="send-box" :style="{ 'padding-bottom' : isShowKeyBoard + 'px'}">
-			<input type="text" class="enter-box" v-model="inputInfo" :adjust-position="true"
-		    @confirm='sendInputInfo' />
-			<!-- <button type="primary" class="submit-message" @click="sendInputInfo()">发送</button> -->
-			<image src="/static/setIcon.png"  @click.stop='openModal()' ></image>
+			<input type="text" class="enter-box" v-model="inputInfo" :adjust-position="true" @input='isInputing'
+		    @confirm='sendInputInfo' :style="{'width':inputWidth}" />
+			<button type="primary" class="submit-message" @click="sendInputInfo()" v-if='isShowSend'>发送</button>
+			<image src="/static/setIcon.png"  @click.stop='openModal()' v-if='isShowSetCenter'></image>
 		</view>
 		 <!-- <drag-button :isDock="true" :existTabBar="true"  @btnClick="goUserSelf" /> -->
 		<uni-popup ref="popup" type="bottom">
@@ -50,7 +50,15 @@
 		 				</view>
 		 			<view class="uni-share-content-text">个人中心</view>
 		 	      </view>
+				  
+				  <view  class="uni-share-content-box" @click.stop='goRecharge' >
+				  			<view class="uni-share-content-image">
+				  				 <image src="/static/icon/recharge.png" class="image" />
+				  			</view>
+				  		<view class="uni-share-content-text">去充值</view>
+				  </view>
 		 		 </view>
+				
 				 <view class="uni-share-btn" @click="cancelModal()">取消</view>
 		 	  </view>
 		 </uni-popup>
@@ -64,7 +72,10 @@
 	export default {
 		data() {
 			return {
+				isShowSend:false,
 				isShowSetModal:false,
+				isShowSetCenter:true,
+				inputWidth:'80%',
 				title: 'RABOT',
 				nowTime: '',
 				nowHeight: '622px',
@@ -212,6 +223,12 @@
 							url: '../selfInfo/selfInfo'
 						})
 					},
+			goRecharge() {
+						this.$refs.popup.close()
+						uni.navigateTo({
+							url: '../selfInfo/payList/payList'
+						})
+					},
 			sendMsgRequest(msg) {
 						let that = this;
 						uni.request({
@@ -234,6 +251,9 @@
 						});
 					},
 			sendInputInfo() {
+						this.inputWidth = '80%';
+						this.isShowSend = false;
+						this.isShowSetCenter = true;
 						if (!this.inputInfo) {
 							uni.showToast({
 								title: '请输入股票代码',
@@ -244,6 +264,17 @@
 							this.sendMsgRequest(this.inputInfo)
 						}
 					},
+			isInputing(){
+				if (this.inputInfo) {
+					this.inputWidth = '72%';
+					this.isShowSend = true;
+					this.isShowSetCenter = false;
+				} else {
+					this.inputWidth = '80%';
+					this.isShowSend = false;
+					this.isShowSetCenter = true;
+				}
+			},		
 			// 滚动至底部触发的事件
 			lower() {
 				if (this.scrollRequestEnable) {
@@ -343,8 +374,6 @@
 	.talk-content {
 		padding: 2%;
 		background: #fff;
-		/* 	height:50rpx;
-		line-height: 50rpx; */
 		font-size: 28rpx;
 		border-top-right-radius: 20rpx;
 		border-bottom-left-radius: 20rpx;
@@ -352,22 +381,35 @@
 		text-align: left;
 		max-width: 70%;
 	}
+	.talk-reply{
+		padding: 2%;
+		background: #fff;
+		font-size: 28rpx;
+		border-top-left-radius: 20rpx;
+		border-bottom-left-radius: 20rpx;
+		border-bottom-right-radius: 20rpx;
+		text-align: left;
+		max-width: 70%;
+	}
 
 	.enter-box {
-		width: 85%;
 		height: 70rpx;
 		background: #fff;
 		border-radius: 1%;
 		text-align: left;
 		margin: 8px;
+		margin-bottom: 10px;
 		padding-left:8px;
 	}
     .send-box image {
 		width: 60rpx;
 		height: 60rpx;
+		margin-right: 10upx;
+		margin-left: 10upx;
 	}
 	.submit-message {
 		width: 18%;
+		margin-right: 20upx;
 		height: 70rpx;
 		font-size: 28rpx;
 		line-height: 70rpx;