修改聊天页面布局展示

添加底层弹窗插件

components/drag-button/drag-button.vue

@@ -65,7 +65,8 @@
 				this.offsetWidth = data.width / 2;
 				this.offsetHeight = data.height / 2;
 				this.left = this.windowWidth - this.width - this.edge;
-				this.top = this.windowHeight - this.height - this.edge;
+				// this.top = this.windowHeight - this.height - this.edge;
+				this.top = 0;
 			}).exec();
 		},
 		methods: {

components/uni-popup/uni-popup.vue

@@ -169,7 +169,7 @@ export default {
 
     &.uni-custom {
       & .uni-popup__wrapper-box {
-        padding: 30upx;
+        // padding: 30upx;
         background: #fff;
       }
 

pages/index/index.vue

@@ -36,16 +36,31 @@
 		</scroll-view>
 		<view class="send-box" :style="{ 'padding-bottom' : isShowKeyBoard + 'px'}">
 			<input type="text" class="enter-box" v-model="inputInfo" :adjust-position="true"
-		   @focus="getInputFocus" @blur="getInputBlur" />
-			<button type="primary" class="submit-message" @click="sendInputInfo()">发送</button>
+		    @confirm='sendInputInfo' />
+			<!-- <button type="primary" class="submit-message" @click="sendInputInfo()">发送</button> -->
+			<image src="/static/icon/setIcon.png"  @click.stop='open' ></image>
 		</view>
-		 <drag-button :isDock="true" :existTabBar="true"  @btnClick="goUserSelf" />
+		 <!-- <drag-button :isDock="true" :existTabBar="true"  @btnClick="goUserSelf" /> -->
+		<uni-popup ref="popup" type="bottom">
+		   <view class="uni-share">
+		 		<view class="uni-share-content">
+		 			<view  class="uni-share-content-box" @click.stop='goUserSelf' >
+		 				<view class="uni-share-content-image">
+		 					<image src="/static/icon/userSetIcon.png" class="image" />
+		 				</view>
+		 			<view class="uni-share-content-text">个人中心</view>
+		 	      </view>
+		 		 </view>
+				 <view class="uni-share-btn" @click="cancelModal()">取消</view>
+		 	  </view>
+		 </uni-popup>
 	</view>
 </template>
 
 <script>
 	// import navigationCustom from "../../components/struggler-navigationCustom/navigation-custom";
-	import dragButton from "../../components/drag-button/drag-button.vue";
+	//import dragButton from "../../components/drag-button/drag-button.vue";
+	import uniPopup from "@/components/uni-popup/uni-popup.vue"
 	var md5 = require("../../common/md5.js");
 	var page = 1;
 	export default {
@@ -85,7 +100,8 @@
 		},
 		components: {
 			//navigationCustom
-			dragButton
+			//dragButton
+			uniPopup
 		},
 		onPageScroll(e) {
 			this.scrollTopNav = e.scrollTop;
@@ -148,7 +164,7 @@
 				this.nowHeight = height + 'px';
 				getApp().globalData.glbalHeight = this.nowHeight;
 				this.style.pageHeight = height;
-				this.style.contentViewHeight = height - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
+				this.style.contentViewHeight = height - uni.getSystemInfoSync().screenWidth / 750 * (100) -5; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
 			},
 			scrollToBottom() {
 				let that = this;
@@ -205,6 +221,7 @@
 						});
 					},
 			goUserSelf() {
+				        this.$refs.popup.close()
 						uni.navigateTo({
 							url: '../selfInfo/selfInfo'
 						})
@@ -259,6 +276,14 @@
 			getInputBlur(){
 				//this.isShowKeyBoard = 0
 			},
+			open(){
+			        // 需要在 popup 组件，指定 ref 为 popup
+			         this.$refs.popup.open()
+			      },
+			cancelModal(){
+				          // 需要在 popup 组件，指定 ref 为 popup
+				           this.$refs.popup.close()
+			  }
 			},
 		}
 </script>
@@ -342,14 +367,18 @@
 	}
 
 	.enter-box {
-		width: 78%;
+		width: 85%;
 		height: 70rpx;
 		margin-left: 5px;
+		margin-right: 10px;
 		background: #fff;
 		border-radius: 1%;
 		text-align: left;
 	}
-
+    .send-box image {
+		width: 60rpx;
+		height: 60rpx;
+	}
 	.submit-message {
 		width: 18%;
 		height: 70rpx;
@@ -400,4 +429,50 @@
 		color:rgba(60,188,99,1);
 		text-shadow:0px 1px 2px rgba(12,39,20,0.2);
 	}
+	
+	.uni-share-content {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 15px;
+		/* justify-content: center */
+	}
+	
+	.uni-share-content-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 25%;
+		box-sizing: border-box;
+	}
+	
+	.uni-share-content-image {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 60upx;
+		height: 60upx;
+		overflow: hidden;
+		border-radius: 10upx;
+	}
+	
+	.uni-share-content-image .image {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.uni-share-content-text {
+		font-size: 26upx;
+		color: #333;
+		padding-top: 5px;
+		padding-bottom: 10px;
+	}
+	
+	.uni-share-btn {
+		height: 90upx;
+		line-height: 90upx;
+		border-top: 1px #f5f5f5 solid;
+		text-align: center;
+		color: #666;
+		font-size: 30rpx;
+	}
 </style>