11.8commit chat finished90%

fore-end/API/appraise.js

@@ -1,5 +1,6 @@
 // const { useParamsEaseFuncs } = require('XrFrame/xrFrameSystem');
 const { request } = require('../utils/request')
+const {ws} = require('../utils/util')
 
 const API = {
 	createCommentURL: '/appraise/create',
@@ -13,7 +14,9 @@ const API = {
 	getUserRelationUrl: '/relation/friend',
 	addUserRelationUrl: '/relation/create',
 	getUserInfoListUrl: '/user/list',
-	getGoodsInfoListUrl: '/goods/list'
+	getGoodsInfoListUrl: '/goods/list',
+	chatUrl: '/chat',
+	getChattingRecordUrl: '/chat/msg'
 	
     //放接口URL
 }
@@ -143,6 +146,21 @@ function getGoodsInfoList(params) {
 	)
 }
 
+function setWsConnect(params) {
+	return ws(
+		API.chatUrl,
+		{
+			
+		}
+	)
+}
+
+//获取两个用户之间的所有聊天记录
+function getChattingRecord(params) {
+	return request.get(
+		API.getChattingRecordUrl+'?uid='+params.uid+'&target='+params.target
+	)
+}
 module.exports = {
     createCommont,
 	getCommentList,
@@ -157,6 +175,7 @@ module.exports = {
 	addUserRelation,
 	getUserInfoList,
 	getGoodsInfoList,
+	getChattingRecord,
 	loginURl: API.loginURL,
 	registerURL: API.registerURL
 }

fore-end/app.json

@@ -2,68 +2,69 @@
 	"useExtendedLib": {
 		"weui": true
 	},
-    "usingComponents": {
-        "van-button": "@vant/weapp/button/index",
-        "van-cell": "@vant/weapp/cell/index",
-        "van-cell-group": "@vant/weapp/cell-group/index",
-        "van-image": "@vant/weapp/image/index",
-        "van-loading": "@vant/weapp/loading/index",
-        "van-icon": "@vant/weapp/icon/index",
-        "van-field": "@vant/weapp/field/index",
+	"usingComponents": {
+		"van-button": "@vant/weapp/button/index",
+		"van-cell": "@vant/weapp/cell/index",
+		"van-cell-group": "@vant/weapp/cell-group/index",
+		"van-image": "@vant/weapp/image/index",
+		"van-loading": "@vant/weapp/loading/index",
+		"van-icon": "@vant/weapp/icon/index",
+		"van-field": "@vant/weapp/field/index",
 		"van-toast": "@vant/weapp/toast/index",
 		"van-card": "@vant/weapp/card/index",
 		"van-swipe-cell": "@vant/weapp/swipe-cell/index",
 		"van-search": "@vant/weapp/search/index",
 		"van-notice-bar": "@vant/weapp/notice-bar/index"
-    },
-    "pages": [
-        "pages/home/home",
-        "pages/classify/classify",
-        "pages/append/append",
-        "pages/message/message",
-        "pages/user/user",
-        "pages/userchange/userchange",
-        "pages/myOrder/myOrder",
-        "pages/register/register",
-        "pages/details/details",
-        "pages/search/search",
-        "pages/classify_detail/classify_detail"
-    ],
-    "window": {
-        "backgroundTextStyle": "light",
-        "navigationBarBackgroundColor": "#fff",
-        "navigationBarTitleText": "WeChatTrading",
-        "navigationBarTextStyle": "black"
-    },
-    "tabBar": {
-        "list": [
-            {
-                "pagePath": "pages/home/home",
-                "iconPath": "/assets/tabBar_img/home.png",
-                "selectedIconPath": "/assets/tabBar_img/home-active.png"
-            },
-            {
-                "pagePath": "pages/classify/classify",
-                "iconPath": "/assets/tabBar_img/classify.png",
-                "selectedIconPath": "/assets/tabBar_img/classify-active.png"
-            },
-            {
-                "pagePath": "pages/append/append",
-                "iconPath": "/assets/tabBar_img/append.png",
-                "selectedIconPath": "/assets/tabBar_img/append-active.png"
-            },
-            {
-                "pagePath": "pages/message/message",
-                "iconPath": "/assets/tabBar_img/message.png",
-                "selectedIconPath": "/assets/tabBar_img/message-active.png"
-            },
-            {
-                "pagePath": "pages/user/user",
-                "iconPath": "/assets/tabBar_img/user.png",
-                "selectedIconPath": "/assets/tabBar_img/user-active.png"
-            }
-        ],
-        "borderStyle": "white"
-    },
-    "sitemapLocation": "sitemap.json"
+	},
+	"pages": [
+		"pages/home/home",
+		"pages/classify/classify",
+		"pages/append/append",
+		"pages/message/message",
+		"pages/user/user",
+		"pages/userchange/userchange",
+		"pages/myOrder/myOrder",
+		"pages/register/register",
+		"pages/details/details",
+		"pages/search/search",
+		"pages/classify_detail/classify_detail",
+		"pages/chat/chat"
+	],
+	"window": {
+		"backgroundTextStyle": "light",
+		"navigationBarBackgroundColor": "#fff",
+		"navigationBarTitleText": "WeChatTrading",
+		"navigationBarTextStyle": "black"
+	},
+	"tabBar": {
+		"list": [
+			{
+				"pagePath": "pages/home/home",
+				"iconPath": "/assets/tabBar_img/home.png",
+				"selectedIconPath": "/assets/tabBar_img/home-active.png"
+			},
+			{
+				"pagePath": "pages/classify/classify",
+				"iconPath": "/assets/tabBar_img/classify.png",
+				"selectedIconPath": "/assets/tabBar_img/classify-active.png"
+			},
+			{
+				"pagePath": "pages/append/append",
+				"iconPath": "/assets/tabBar_img/append.png",
+				"selectedIconPath": "/assets/tabBar_img/append-active.png"
+			},
+			{
+				"pagePath": "pages/message/message",
+				"iconPath": "/assets/tabBar_img/message.png",
+				"selectedIconPath": "/assets/tabBar_img/message-active.png"
+			},
+			{
+				"pagePath": "pages/user/user",
+				"iconPath": "/assets/tabBar_img/user.png",
+				"selectedIconPath": "/assets/tabBar_img/user-active.png"
+			}
+		],
+		"borderStyle": "white"
+	},
+	"sitemapLocation": "sitemap.json"
 }

fore-end/components/messageRecord/messageRecord.js

@@ -24,7 +24,6 @@ Component({
 	 * 组件的方法列表
 	 */
 	methods: {
-
 	},
 	
 })

fore-end/components/messageRecord/messageRecord.wxml

@@ -1,5 +1,5 @@
 <!--components/messageRecord/messageRecord.wxml-->	
-<view class="item" style="width: {{width}};">
+<view class="item" style="width: {{width}};" >
 	<van-image
 	 width="50px" 
 	 height="50px" 

fore-end/pages/chat/chat.js

@@ -1,23 +1,188 @@
 // pages/chat/chat.js
-Component({
+const {getUserInfoList,getChattingRecord} = require('../../API/appraise')
+import messageMap from '../../utils/util'
+var socketMsgQueue = {
+	from: wx.getStorageSync('uid'),
+	to: '',
+	msgType: 1,
+	time: '',
+	content: ''
+}
+var getUserInfoListOption = {
+	data:{
+		uid:[]
+	}
+}
+var getChattingRecordOption = {
+	uid:wx.getStorageSync('uid'),
+	target:''
+}
+Page({
+
 	/**
-	 * 组件的属性列表
+	 * 页面的初始数据
 	 */
-	properties: {
+	data: {
+		toUid:'',
+		goodsId:'',
+		goods: {
+			pic:'',
+			name:'',
+			price:''
+		},
+		//登录用户的信息
+		login: {
+			id: wx.getStorageSync('uid')
+		},
+		chatList: [
+			{
+				from: '7385700531999608832',
+				to: '7384540497554968576',
+				nickname:'daisy',
+				avatar: 'http://192.168.31.30:8084/pics/1698753512AiD8PaNrvqsDb1493fda534929a5b5d05f80a8cf3d16.jpg',
+				message: '你好',
+				type: 'text'
+			},
+			{
+				to: '7385700531999608832',
+				from: '7384540497554968576',
+				nickname:'无情的敲代码机器人',
+				avatar: 'http://192.168.31.30:8084/pics/1699175056BvtgC8vv8gSzd85dedb14362dc3a251c6c85705ec495.jpg',
+				message: '你好',
+				type: 'text'
+			}
+		]
+		
 
 	},
 
 	/**
-	 * 组件的初始数据
+	 * 生命周期函数--监听页面加载
 	 */
-	data: {
+	onLoad(options) {
+		this.data.toUid = options.toUid;
+		this.data.goodsId = options.goodsId;
+		getChattingRecordOption.target = this.data.toUid;
+		getChattingRecord(getChattingRecordOption).then((res)=>{
+			console.log(res);
+			const receiveMessage = res.data.data;
+			
+		}).catch((err)=>{
+			console.log(err);
+		})
+		this.scrollToBottom();
+	},
 
+	/**
+	 * 生命周期函数--监听页面初次渲染完成
+	 */
+	onReady() {
+		getUserInfoListOption.data.uid = [wx.getStorageSync('uid'),this.data.toUid];
+		getUserInfoList(getUserInfoListOption).then((res)=> {
+			console.log(res);
+		}).catch((err)=>{
+			console.log(err);
+		})
 	},
 
 	/**
-	 * 组件的方法列表
+	 * 生命周期函数--监听页面显示
 	 */
-	methods: {
+	onShow() {
 
-	}
-})
+	},
+
+	/**
+	 * 生命周期函数--监听页面隐藏
+	 */
+	onHide() {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面卸载
+	 */
+	onUnload() {
+
+	},
+
+	/**
+	 * 页面相关事件处理函数--监听用户下拉动作
+	 */
+	onPullDownRefresh() {
+
+	},
+
+	/**
+	 * 页面上拉触底事件的处理函数
+	 */
+	onReachBottom() {
+
+	},
+
+	/**
+	 * 用户点击右上角分享
+	 */
+	onShareAppMessage() {
+
+	},
+    // 输入监听
+    inputClick(e) {
+        this.setData({
+            content: e.detail.value
+        })
+    },
+    // 发送监听
+    sendClick() {
+        var that = this;
+        var list = this.data.chatList;
+        // 获取当前时间
+        var date = new Date();
+        var month = date.getMonth() + 1;
+        var day = date.getDate();
+        var hour = date.getHours();
+        var minu = date.getMinutes();
+        var now1 = month < 10 ? '0' + month : month;
+		var now2 = day < 10 ? '0' + day : day;
+		// 组装数据
+		var msg = {
+			from: wx.getStorageSync('uid'),
+			to: this.data.toUid,
+            nickname: wx.getStorageSync('nickName'),
+            avatar: wx.getStorageSync('avatarUrl'),
+            message: this.data.content,
+            type: 'text',
+            date: now1 + '-' + now2 + ' ' + hour + ':' + minu
+		}
+		console.log(msg);
+        this.setData({
+            chatList: list.concat(msg)
+        }, () => {
+            that.scrollToBottom();
+            that.setData({
+                content: ''
+            })
+		})
+		var socketMsg = socketMsgQueue;
+		socketMsg.msgType = 1;
+		socketMsg.content = this.data.content;
+		socketMsg.to = this.data.toUid;
+		console.log(this.data.toUid);
+		var time = new Date().getTime();
+		console.log(time);
+		socketMsg.time = time;
+		console.log(socketMsg);
+		wx.sendSocketMessage({
+		  data: JSON.stringify(socketMsg),
+		})
+    },
+    // 滑动到最底部
+    scrollToBottom() {
+        setTimeout(() => {
+            wx.pageScrollTo({
+                scrollTop: 200000,
+                duration: 3
+            });
+        }, 600)
+    },
+})

fore-end/pages/chat/chat.json

@@ -1,4 +1,3 @@
 {
-	"component": true,
 	"usingComponents": {}
 }

fore-end/pages/chat/chat.wxml

@@ -1,8 +1,47 @@
 <!--pages/chat/chat.wxml-->
-<view>
-	<van-cell-group>
-		<van-image></van-image>
-		<van-cell></van-cell>
-		<van-button></van-button>
+<view class="chat">
+	<van-cell-group custom-class="chat-card" inset>
+		<van-image
+		lazy-load
+		width="100" 
+		height="100" 
+		fit="cover"
+		radius="12px"
+		src="{{goods.pic}}"
+		image-class="chat-card-image"
+		 style="position: relative; left: 23rpx; top: 0rpx"></van-image>
+		<view class="chat-card-info" style="position: relative; left: 48rpx; top: 0rpx">
+			<view class="chat-card-info-title">{{goods.name}}</view>
+			<view class="chat-card-info-price">￥{{goods.price}}</view>
+		</view>
+		<van-button round size="normal" color="rgba(245, 56, 56, 0.91)" custom-class="chat-card-btn" style="position: relative; left: 121rpx; top: 0rpx">点击购买</van-button>
 	</van-cell-group>
+	<view class="scroll-list">
+		<block wx:for="{{chatList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
+			<view wx:if="{{item.time}}" class="show-date">{{item.time}}</view>
+			<view class="{{login.id==item.from?'row row-self':'row'}}" wx:else>
+				<view class="{{login.id==item.from?'head-self':'head-friend'}}">
+					<image class="avatar" src="{{item.avatar}}"></image>
+				</view>
+				<view>
+					<view wx:if="{{login.id!=item.from}}" class="nick">{{item.nickname}}</view>
+					<view class="{{login.id==item.from?'message msg-self':'message msg-friend'}}">
+						<text>{{item.message}}</text>
+					</view>
+				</view>
+			</view>
+		</block>
+	</view>
+	<view class="footer">
+		<view class="row">
+			<view class="input-box">
+				<textarea class="text-area" placeholder-class="placeholder" show-confirm-bar="{{false}}" cursor-spacing="30" maxlength="500"
+				disable-default-padding="{{true}}"
+				confirm-hold="{{true}}" hold-keyboard="{{true}}" auto-height="false" placeholder="输入信息" bindinput="inputClick" value="{{content}}"></textarea>
+			</view>
+			<view class="send-btn" wx:if="{{content!=''}}">
+				<text class="send-text" bindtap="sendClick">发 送</text>
+			</view>
+		</view>
+	</view>
 </view>

fore-end/pages/chat/chat.wxss

@@ -1 +1,193 @@
-/* pages/chat/chat.wxss */
+/* pages/chat/chat.wxss */
+page {
+    background-color: #f1f1f1;
+}
+
+.scroll-list {
+    padding-bottom: 120rpx;
+}
+
+/* 显示时间 */
+.show-date {
+    text-align: center;
+    font-size: 24rpx;
+    padding: 15rpx 0;
+    color: gray;
+}
+
+/* 每行对话样式 */
+.row {
+    display: flex;
+    flex-direction: row;
+    padding: 20rpx;
+}
+
+/* 提示信息 */
+.tips-text {
+    text-align: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: gray;
+}
+
+.row-self {
+    flex-direction: row-reverse;
+}
+
+/* 头像 */
+.head-self {
+    margin-left: 20rpx;
+}
+
+.head-friend {
+    margin-right: 20rpx;
+}
+
+.avatar {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+}
+
+.nick {
+    color: gray;
+    font-size: 24rpx;
+    margin-bottom: 15rpx;
+}
+
+/* 消息内容 */
+.message {
+    background-color: white;
+    font-size: 30rpx;
+    padding: 20rpx;
+    display: flex;
+    align-items: center;
+    line-height: 45rpx;
+}
+
+.msg-self {
+    border-top-left-radius: 30rpx;
+    border-bottom-right-radius: 30rpx;
+    color: #434343;
+    background-image: linear-gradient(to right, #33ccff, #B0E2FF);
+}
+
+.msg-friend {
+    border-top-right-radius: 30rpx;
+    border-bottom-left-radius: 30rpx;
+    color: #ffffff;
+    background-image: linear-gradient(to right, #ff9933, #ff6633);
+}
+
+.chat-card{
+	background-color: rgba(162, 202, 242, 1);
+	display: flex;
+}
+
+.chat-card-image{
+	position: relative;
+	border-radius: 12px;
+	width: 10px;
+	top: 10px;
+}
+
+.chat-card-info{
+	position: relative;
+
+}
+
+.chat-card-info-title{
+	position: relative;
+	top: 10px;
+}
+
+.chat-card-info-price{
+	position: relative;
+	top: 50px;
+	color: rgba(245, 56, 56, 0.91);
+}
+
+.chat-card-btn{
+	position: relative;
+	top: 60px;
+	right: 5px;
+}
+
+.chat-footer-input{
+	border:0;
+	outline:0;
+	border:solid 1px rgba(0, 0, 0, 0.15);
+	border-radius: 4px;
+	width: 300px;
+	height: 30px;
+	position: relative;
+	left: 10px;
+	margin-top: 10px;
+}
+
+.chat-footer{
+	display: flex;
+	border: 0;
+	border-top: solid 1px rgba(0, 0, 0, 0.15);
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%; 
+	height: 50px;
+}
+
+.chat-footer-icon{
+	margin-left: 15px;
+}
+
+/* 以下为输入框样式 */
+.footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+    background-color: white;
+    border-top: 1rpx solid #f1f1f1;
+}
+
+.input-box {
+    flex: 5;
+    border: 1rpx solid #f1f1f1;
+    border-radius: 10rpx;
+}
+
+.send-btn {
+    flex: 1;
+    text-align: center;
+    margin-left: 10rpx;
+    color: white;
+    margin-top: 10rpx;
+}
+
+.send-text {
+    background-color: #FF6347;
+    font-size: 30rpx;
+    border-radius: 10rpx;
+    padding: 12rpx 20rpx;
+}
+
+.text-area {
+    max-height: 180rpx;
+    width: 98%;
+    padding: 15rpx 10rpx;
+    font-size: 30rpx;
+}
+
+.placeholder {
+    font-size: 30rpx;
+}
+
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+    color: transparent;
+}

fore-end/pages/message/message.js

@@ -1,16 +1,17 @@
 // pages/message/message.js
 const {getUserRelation,addUserRelation, getUserInfoList, getGoodsInfoList} = require('../../API/appraise')
+import messageMap from '../../utils/util'
 var getRelationOption = {
 	data:{
-		uid: wx.getStorageSync('uid'),
+		
 	}
 }
 
 var addRelationOption = {
 	data:{
-		"goodsId":7,
-		"owner": '7384540497554968576',
-		"target": '7386092638421651456',
+		"goodsId":9,
+		"owner": '7386090454720188416',
+		"target": '7384540497554968576',
 		"type":1
 	}
 }
@@ -28,23 +29,41 @@ var getGoodsInfoListOption = {
 }
 
 
+
+
 var key = "commodityPicture";
 let key1 = "avatarUrl";
 let key2 = "merchantName";
 let key3 = "id";
+
+function sendSocketMessage(msg){
+	wx.sendSocketMessage({
+	  data: msg,
+	})
+}
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-		message:[]		
+		message:[
+			// {
+			// 	// id:1,
+			// 	// item:{
+			// 	// 	avatarUrl: "http://192.168.31.30:8084/pics/1698753512AiD8PaNrvqsDb1493fda534929a5b5d05f80a8cf3d16.jpg",
+			// 	// 	commodityPicture: "https://img.js.design/assets/img/6229b69ff89eeaf3b7fd1919.jpg",
+			// 	// 	merchantName: "daisy"
+			// 	// }
+			// }
+		]		
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
+		
     },
     /**
      * 生命周期函数--监听页面初次渲染完成
@@ -56,6 +75,9 @@ Page({
 		// }).catch((err) => {
 		// 	console.log(err);
 		// })
+		getRelationOption.data = {
+			uid: wx.getStorageSync('uid'),
+		}
 		getUserRelation(getRelationOption).then((res) => {
 			console.log(res);
 			const fUid = res.data.data.fUid;
@@ -83,6 +105,7 @@ Page({
 					message[i][key3] = i+1;
 					message[i].item[key1] = users[i].avatar;
 					message[i].item[key2] = users[i].name;
+					message[i].item['targetId'] = users[i].uid;
 					
 				}
 				console.log(message);
@@ -93,6 +116,7 @@ Page({
 					for(let i=0;i<goods.length;i++)
 					{
 						message[i].item[key] = goods[i].Pic;
+						message[i].item['goodsId'] = goods[i].Id;
 					}
 					this.setData({
 						message:message
@@ -148,5 +172,29 @@ Page({
      */
     onShareAppMessage() {
 
-    }
+	},
+	toChat(e) {
+		wx.connectSocket({
+			url: 'ws://192.168.31.30:8084'+'/chat'+'?uid='+wx.getStorageSync('uid'),
+		  })
+		  // 监听
+		  wx.onSocketOpen((result) => {
+			  console.log("websocket连接已打开");
+			})
+		  // 失败监控
+		  wx.onSocketError((result) => {
+			  console.log("websocket连接失败", result);
+		  })
+		  // 监听服务器的数据返回
+		  wx.onSocketMessage((result) => {
+			  console.log("服务器的数据返回", result);
+			  
+		  })
+		  console.log(e.target.dataset.item);
+		  let item = e.target.dataset.item;
+		wx.navigateTo({
+			url: '/pages/chat/chat?toUid='+item.targetId+'?goodsId='+item.goodsId+'?nickName',
+		  })
+	}
+		
 })

fore-end/pages/message/message.wxml

@@ -8,6 +8,6 @@
 	</view>
 </van-notice-bar>
 <view class="item" wx:for="{{message}}" wx:key="id" >
-	<message-record item="{{item.item}}" test="{{test}}"></message-record>
+	<message-record item="{{item.item}}" test="{{test}}" bindtap="toChat" data-item="{{item.item}}"></message-record>
 </view>
 <view class="bottom">已经到底啦~</view>

fore-end/project.config.json

@@ -23,7 +23,8 @@
 			]
 		},
 		"es6": true,
-		"condition": true
+		"condition": true,
+		"uglifyFileName": false
 	},
 	"editorSetting": {
 		"tabIndent": "tab",

fore-end/project.private.config.json

@@ -3,7 +3,10 @@
 	"projectname": "wechatTrading",
 	"setting": {
 		"compileHotReLoad": false,
-		"urlCheck": false
+		"urlCheck": false,
+		"autoAudits": false,
+		"bigPackageSizeSupport": false,
+		"preloadBackgroundData": false
 	},
 	"condition": {
 		"miniprogram": {

fore-end/utils/util.js

@@ -1,6 +1,7 @@
 import Toast from '@vant/weapp/toast/toast';
 const { loginURL, registerURL } = require('../API/appraise')
 const baseURL = "http://192.168.31.30:8084";//后台服务提供的地址
+const wsConnectURL = "ws://192.168.31.30:8084";//websocket连接地址
 const uploadUrl = "/pic/upload";
 const formatTime = date => {
   const year = date.getFullYear()
@@ -13,6 +14,9 @@ const formatTime = date => {
   return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
 }
 
+const messageMap = new Map();
+
+
 const formatNumber = n => {
   n = n.toString()
   return n[1] ? n : `0${n}`
@@ -48,6 +52,31 @@ function http(url, option) {
     })
 }
 
+function ws(url , option) {
+	return new Promise((resolve,reject) => {
+		wx.connectSocket({
+		  url: wsConnectURL+url,
+		  ...option,
+		  
+		  success(res) {
+			  const {data,code,message} = res.data;
+			  if(code == 200){
+				// resolve(data);
+				resolve(res);
+			  }else if(code == 500){
+				reject(res);
+			  }else{
+				  reject(res);
+			  }
+		  },
+		  fail(err) {
+			  console.log(err);
+			  reject(err);
+		  }
+		})
+	})
+}
+
 function upLoad(filePath) {
 	return new Promise((resolve,reject) => {
 		wx.uploadFile({
@@ -92,6 +121,8 @@ function chooseImage(){
 module.exports = {
     formatTime,
 	http,
+	ws,
 	upLoad,
 	chooseImage,
+	messageMap
   }