uniapp-好友功能

im-platform/src/main/java/com/bx/implatform/controller/UserController.java

@@ -36,7 +36,7 @@ public class UserController {
 
     @GetMapping("/self")
     @ApiOperation(value = "获取当前用户信息",notes="获取当前用户信息")
-    public Result findSelfInfo(){
+    public Result<UserVO> findSelfInfo(){
         UserSession session = SessionContext.getSession();
         User user = userService.getById(session.getUserId());
         UserVO userVO = BeanUtils.copyProperties(user,UserVO.class);

im-uniapp/App.vue

@@ -12,6 +12,5 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
-	/*每个页面公共css */
 </style>

im-uniapp/common/request.js

@@ -1,4 +1,4 @@
-const BASE_URL = "http://127.0.0.1:8888"
+const BASE_URL = "http://192.168.43.6:8888"
 const request =  (options) => {
 	
 	const header = options.header||{};
@@ -31,7 +31,7 @@ const request =  (options) => {
 					const data = await request({
 						method: 'PUT',
 						url: '/refreshToken',
-						headers: {
+						header: {
 							refreshToken: refreshToken
 						}
 					})

im-uniapp/components/friend-item/friend-item.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="friend-item" @click="showFriendInfo()">
+		<view class="avatar">
+			<image class="head-image" :src="friend.headImage" lazy-load="true"  mode="aspectFill"></image>
+		</view>
+		<view class="text">
+			<view>{{ friend.nickName}}</view>
+			<view :class="online ? 'online-status  online':'online-status'">{{ online?"[在线]":"[离线]"}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "frinedItem",
+		data() {
+			return {}
+		},
+		methods:{
+			showFriendInfo(id){
+				console.log(id);
+				uni.navigateTo({
+					url: "/pages/common/user-info?id="+this.friend.id
+				})
+			},
+		},
+		props: {
+			friend: {
+				type: Object
+			},
+			index: {
+				type: Number
+			}
+		},
+		computed: {
+			online() {
+				return this.$store.state.friendStore.friends[this.index].online;
+			}
+		}
+	}
+</script>
+
+<style scope lang="scss">
+	.friend-item {
+		height: 100rpx;
+		display: flex;
+		margin-bottom: 1rpx;
+		position: relative;
+		padding-left: 30rpx;
+		align-items: center;
+		padding-right: 10rpx;
+		background-color: #fafafa;
+		white-space: nowrap;
+		&:hover {
+			background-color: #eeeeee;
+		}
+
+		.avatar {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 80rpx;
+			height: 80rpx;
+			
+			.head-image{
+				width: 100%;
+				height: 100%;
+				border-radius: 10%;
+			}
+		}
+
+		.text {
+			font-size: 30rpx;
+			margin-left: 30rpx;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			height: 100%;
+			flex-shrink: 0;
+			overflow: hidden;
+
+			&>view {
+				display: flex;
+				justify-content: flex-start;
+			}
+
+			.online-status {
+				font-size: 22rpx;
+				font-weight: 600;
+
+				&.online {
+					color: #5fb878;
+				}
+			}
+		}
+	}
+</style>

im-uniapp/main.js

@@ -1,23 +1,8 @@
 import App from './App'
 import request from './common/request';
 import store from './store';
-// #ifndef VUE3
-import Vue from 'vue'
-import './uni.promisify.adaptor'
-
-Vue.prototype.$http = request
-console.log(Vue.prototype.$http)
-Vue.config.productionTip = false
-App.mpType = 'app'
-const app = new Vue({
-  ...App,
-  store
-})
-app.$mount()
-// #endif
-
-// #ifdef VUE3
 import { createSSRApp } from 'vue'
+
 export function createApp() {
   const app = createSSRApp(App)
   app.use(store);
@@ -26,4 +11,3 @@ export function createApp() {
     app
   }
 }
-// #endif

im-uniapp/pages.json

@@ -1,17 +1,128 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [{
-		{
 		"path": "pages/login/login",
 		"style": {
 			"navigationBarTitleText": "盒子IM"
 		}
+	}, {
+		"path": "pages/chat/chat",
+		"style": {
+			"navigationBarTitleText": "聊天消息",
+
+			"app-plus": {
+				"titleNView": {
+					"buttons": [{
+							"text": "",
+							"fontSrc": "/static/iconfont/iconfont.ttf",
+							"fontSize": "40rpx"
+						},
+						{
+							"text": "",
+							"fontSrc": "/static/iconFont/iconfont.ttf",
+							"fontSize": "40rpx"
+						}
+					]
+				}
+			}
+		}
+	}, {
+		"path": "pages/friend/friend",
+		"style": {
+			"navigationBarTitleText": "好友列表",
+			"enablePullDownRefresh": false,
+			"app-plus": {
+				"titleNView": {
+					"buttons": [{
+							"text": "",
+							"fontSrc": "/static/iconfont/iconfont.ttf",
+							"fontSize": "40rpx",
+							"width": "50rpx"
+						},
+						{
+							"text": "",
+							"fontSrc": "/static/iconFont/iconfont.ttf",
+							"fontSize": "30rpx",
+							"width": "50rpx"
+						}
+					]
+				}
+			}
+		}
+
+	}, {
+		"path": "pages/group/group",
+		"style": {
+			"navigationBarTitleText": "群聊列表",
+			"enablePullDownRefresh": false
+		}
+
+	}, {
+		"path": "pages/mine/mine",
+		"style": {
+			"navigationBarTitleText": "",
+			"enablePullDownRefresh": false
+		}
+	}, {
+		"path": "pages/friend/friend-search",
+		"style": {
+			"app-plus": {
+				"navigationBarTitleText": "好友查找",
+				"titleNView": {
+					"buttons": [{
+							"text": "取消",
+							"fontSize": "20rpx",
+							"width": "80rpx"
 						}
+				
 					],
+					"searchInput": {
+						"autoFocus": true,
+						"placeholder": "输入好友昵称",
+						"borderRadius": "10rpx"
+					},
+					"autoBackButton": false
+				}
+				
+			}
+		}
+	},{
+		"path": "pages/common/user-info"
+	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F0F0F0",
-		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#fdfdfd"
-		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+		"color": "#999999",
+		"selectedColor": "#09C160",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [{
+				"pagePath": "pages/chat/chat",
+				"iconPath": "static/tarbar/chat.png",
+				"selectedIconPath": "static/tarbar/chat_active.png",
+				"text": "消息"
+			},
+			{
+				"pagePath": "pages/friend/friend",
+				"iconPath": "static/tarbar/friend.png",
+				"selectedIconPath": "static/tarbar/friend_active.png",
+				"text": "好友"
+			},
+			{
+				"pagePath": "pages/group/group",
+				"iconPath": "static/tarbar/group.png",
+				"selectedIconPath": "static/tarbar/group_active.png",
+				"text": "群聊"
+			},
+			{
+				"pagePath": "pages/mine/mine",
+				"iconPath": "static/tarbar/mine.png",
+				"selectedIconPath": "static/tarbar/mine_active.png",
+				"text": "我的"
+			}
+		]
 	},
 	"uniIdRouter": {}
 }

im-uniapp/pages/chat/chat.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		消息
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

im-uniapp/pages/common/user-info.vue

@@ -0,0 +1,108 @@
+<template>
+	<view class="user-info">
+		<view class="content">
+			<view class="avatar">
+				<image class="head-image" :src="userInfo.headImage" lazy-load="true"  mode="aspectFill"></image>
+			</view>
+			<view class="info-item">
+				<view class="info-primary">
+					<text class="info-username">
+						{{userInfo.userName}}
+					</text>
+					<uni-icons v-show="userInfo.sex==0" class="sex-boy" type="person-filled" size="20" color="darkblue"  ></uni-icons>
+					<uni-icons v-show="userInfo.sex==1" class="sex-girl" type="person-filled" size="20" color="darkred"  ></uni-icons>
+				</view>
+				<text >
+					昵称 ：{{userInfo.nickName}}
+				</text>
+				<text class="person-wx-name">
+					签名 ：{{userInfo.signature}}
+				</text>
+			</view>
+		</view>
+		<view class="line"></view>
+		<view class="btn-group">
+			<button  v-show="isFriend" type="primary">发消息</button>
+			<button  v-show="!isFriend" type="primary">加为好友</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return {
+				userInfo:{}
+			}
+		},
+		computed: {
+			isFriend(){
+				let friends = this.$store.state.friendStore.friends;
+				let friend = friends.find((f) => f.id == this.userInfo.id);
+				return friend != undefined;
+			}
+		},
+		onLoad(options) {
+			// 查询好友信息
+			console.log(options.id)
+			const id = options.id;
+			this.$http({
+				url:"/user/find/"+id
+			}).then((userInfo)=>{
+				this.userInfo = userInfo;
+			})
+		}
+	}
+	
+	
+</script>
+
+<style lang="scss" scoped>
+	.user-info{
+		.content{
+			height: 200rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 20rpx;
+			.avatar{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 160rpx;
+				height: 160rpx;
+				
+				.head-image{
+					width: 100%;
+					height: 100%;
+					border-radius: 10%;
+				}
+			}
+			
+			.info-item{
+				display: flex;
+				align-items: flex-start;
+				flex-direction: column;
+				padding-left: 40rpx;
+				flex: 1;
+				.info-primary{
+					
+					display: flex;
+					.info-username{
+						font-size: 40rpx;
+						font-weight: 600;
+					}
+				}
+				
+			}
+		}
+		
+		.line{
+			margin: 20rpx;
+			border-bottom: 1px	solid #aaaaaa;
+		}
+		.btn-group{
+			margin: 100rpx;
+		}
+	}
+</style>

im-uniapp/pages/friend/friend-search.vue

@@ -0,0 +1,41 @@
+<template>
+	<view>
+		<view>
+		  	<uni-search-bar  v-model="searchText"  :focus="true"  @cancel="onCancel()" placeholder="输入好友昵称搜索"></uni-search-bar>
+		</view>
+		<scroll-view  class="scroll-bar" scroll-with-animation="true" scroll-y="true">
+			<view v-for="(friend,index) in $store.state.friendStore.friends" v-show="searchText && friend.nickName.startsWith(searchText)"  :key="index">
+				<friend-item :friend="friend" :index="index"></friend-item>
+			</view>
+		</scroll-view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				searchText:""
+			}
+		},
+		methods: {
+			onCancel(){
+				uni.navigateBack();
+			}
+			
+		},
+		onNavigationBarButtonTap(e) {
+			if(e.index==0){
+				uni.navigateBack();
+			}
+		},
+		onNavigationBarSearchInputChanged(e){
+			this.searchText = e.text;
+		}
+	}
+</script>
+
+<style>
+
+</style>

im-uniapp/pages/friend/friend.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="page friend">
+		<view class="nav-bar">
+			<view class="nav-search">
+				<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友" ></uni-search-bar>
+			</view>
+			<view  class="nav-add">
+				<uni-icons type="personadd" size="30"></uni-icons>
+			</view>
+		</view>
+		<view class="items">
+			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
+				<view v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
+					<friend-item :friend="friend" :index="index"></friend-item>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			onFocusSearch() {
+				uni.navigateTo({
+					url: "/pages/friend/friend-search"
+				})
+			}
+		},
+		onNavigationBarButtonTap(e) {
+			if (e.index == 1) {
+				uni.navigateTo({
+					url: "/pages/friend/friend-search"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.friend {
+		.nav-bar {
+			margin: 5rpx;
+			display: flex;
+			align-items: center;
+			
+			.nav-search{
+				flex:1;
+			}
+			
+			.nav-add {
+				line-height: 56px;
+				cursor: pointer;
+			}
+		}
+
+		.items {
+			.scroll-bar {
+				height: 1200rpx;
+			}
+		}
+	}
+</style>

im-uniapp/pages/group/group.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

im-uniapp/pages/index/index.vue

@@ -1,52 +0,0 @@
-<template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
-</style>

im-uniapp/pages/login/login.vue

@@ -54,7 +54,10 @@
 					uni.setStorageSync("accessToken", data.accessToken);
 					uni.setStorageSync("refreshToken", data.refreshToken);
 					this.$store.dispatch("initStore").then(()=>{
-						console.log("成功")
+						console.log("登录成功，准备跳转...")
+						uni.switchTab({
+							url:"/pages/chat/chat"
+						})
 					})
 					
 				})

im-uniapp/pages/mine/mine.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

im-uniapp/store/groupStore.js

@@ -45,7 +45,6 @@ export default {
 				}).then((groups) => {
 					context.commit("setGroups", groups);
 					resolve();
-					console.log("groupstore")
 				}).catch(() => {
 					reject();
 				})

im-uniapp/store/index.js

@@ -1,25 +1,20 @@
-
 import chatStore from './chatStore.js';
 import friendStore from './friendStore.js';
 import userStore from './userStore.js';
 import groupStore from './groupStore.js';
 import uiStore from './uiStore.js';
-
+import {createStore} from 'vuex';
-// #ifndef VUE3
+const store = createStore({
-import Vue from 'vue'
+	modules: {
-import Vuex from 'vuex'
+		chatStore,
-Vue.use(Vuex)
+		friendStore,
-const store = new Vuex.Store({
+		userStore,
-// #endif
+		groupStore,
-
+		uiStore
-// #ifdef VUE3
+	},
-import { createStore } from 'vuex';
-  const store = createStore({
-// #endif
-	modules: {chatStore,friendStore,userStore,groupStore,uiStore},
 	state: {},
 	actions: {
-		initStore(context){
+		initStore(context) {
 			const promises = [];
 			promises.push(this.dispatch("initUserStore"));
 			promises.push(this.dispatch("initFriendStore"));
@@ -28,6 +23,6 @@ import { createStore } from 'vuex';
 		}
 	},
 	strict: true
-});
+})
 
 export default store;