10.31commit 消息页面完成

fore-end/app.json

@@ -13,7 +13,8 @@
 		"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-search": "@vant/weapp/search/index",
+		"van-notice-bar": "@vant/weapp/notice-bar/index"
     },
     "pages": [
         "pages/home/home",

fore-end/components/messageRecord/messageRecord.js

@@ -4,7 +4,13 @@ Component({
 	 * 组件的属性列表
 	 */
 	properties: {
-
+		item: {
+			type:Object,
+			value:{
+				
+			}
+		},
+		width: wx.getSystemInfoSync().windowWidth
 	},
 
 	/**

fore-end/components/messageRecord/messageRecord.json

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

fore-end/components/messageRecord/messageRecord.wxml

@@ -1,2 +1,24 @@
-<!--components/messageRecord/messageRecord.wxml-->
-<text>components/messageRecord/messageRecord.wxml</text>
+<!--components/messageRecord/messageRecord.wxml-->	
+<view class="item" style="width: {{width}};">
+	<van-image
+	 width="50px" 
+	 height="50px" 
+	 src="{{item.avatarUrl}}" 
+	 round 
+	 lazy-load
+	 custom-class="message-profile">
+	 </van-image>
+	 <view class="message-text">
+		<view class="message-text-name">{{item.merchantName}}</view>
+		<view class="message-text-record">{{item.lastMessageRecord}}</view>
+		<view class="message-text-time">{{item.messageTime}}</view>
+	 </view>
+	 <van-image
+	 width="60px"
+	 height="60px"
+	 src="{{item.commodityPicture}}"
+	 lazy-load
+	 radius="12px"
+	 custom-class="message-picture">
+	 </van-image>
+</view>

fore-end/components/messageRecord/messageRecord.wxss

@@ -1 +1,37 @@
-/* components/messageRecord/messageRecord.wxss */
+/* components/messageRecord/messageRecord.wxss */
+.item{
+	border-bottom: 1px solid rgba(214, 214, 214, 0.4);
+	display: flex;
+}
+
+.message-profile{
+	position: relative;
+	left: 12px;
+	top: 2px;
+}
+
+.message-text{
+	position: relative;
+	left: 30px;
+	width: 200px;
+}
+
+.message-text-name{
+	font-size: 15px;
+}
+
+.message-text-record{
+	font-size: 12px;
+	color: rgba(128, 128, 128, 1);
+}
+
+.message-text-time{
+	font-size: 10px;
+	color: rgba(128, 128, 128, 1);
+}
+
+.message-picture{
+	/* position: relative; */
+	/* left: 140px; */
+	/* text-align: right; */
+}

fore-end/pages/home/home.js

@@ -40,7 +40,11 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-        this.getClassifyList();
+		this.getClassifyList();
+		this.setData({
+			avatarUrl:wx.getStorageSync('avatarUrl'),
+			nickName:wx.getStorageSync('nickName')
+		})
     },
 
     getClassifyList() {

fore-end/pages/home/home.wxml

@@ -4,10 +4,10 @@
     <view bind:tap="userTo">
         <!-- 头像 -->
         <view class="head-portrait-bg">
-            <van-image width="100rpx" height="100rpx" fit="cover" src="/assets/home_img/head_portrait.jpg" radius="20rpx"></van-image>
+            <van-image width="100rpx" height="100rpx" fit="cover" src="{{avatarUrl}}" radius="20rpx"></van-image>
         </view>
         <!-- 昵称 -->
-        <view class="username">deter</view>
+        <view class="username">{{nickName}}</view>
     </view>
     <!-- 消息提示 -->
     <view>

fore-end/pages/message/message.js

@@ -5,7 +5,59 @@ Page({
      * 页面的初始数据
      */
     data: {
-
+		message: [
+			{
+				id:1,
+				item: {
+					avatarUrl:'https://img.js.design/assets/smartFill/img340164da748e08.jpg',
+					merchantName: '商家1',
+					lastMessageRecord: '你好',
+					messageTime: '10-31',
+					commodityPicture: 'https://img.js.design/assets/smartFill/img409164da755928.jpg'
+				}
+			},
+			{
+				id:2,
+				item: {
+					avatarUrl:'https://img.js.design/assets/smartFill/img334164da748e08.jpg',
+					merchantName: '商家2',
+					lastMessageRecord: '你好',
+					messageTime: '10-31',
+					commodityPicture: 'https://img.js.design/assets/smartFill/img436164da758808.jpg'
+				}
+			},
+			{
+				id:3,
+				item: {
+					avatarUrl:'https://img.js.design/assets/smartFill/img327164da748e08.jpeg',
+					merchantName: '商家3',
+					lastMessageRecord: '你好',
+					messageTime: '10-31',
+					commodityPicture: 'https://img.js.design/assets/smartFill/img424164da758808.jpg'
+				}
+			},
+			{
+				id:4,
+				item: {
+					avatarUrl:'https://img.js.design/assets/smartFill/img320164da746310.jpg',
+					merchantName: '商家4',
+					lastMessageRecord: '你好',
+					messageTime: '10-31',
+					commodityPicture: 'https://img.js.design/assets/smartFill/img409164da755928.jpg'
+				}
+			},
+			{
+				id:5,
+				item: {
+					avatarUrl:'https://img.js.design/assets/smartFill/img340164da748e08.jpg',
+					merchantName: '商家5',
+					lastMessageRecord: '你好',
+					messageTime: '10-31',
+					commodityPicture: 'https://img.js.design/assets/smartFill/img427164da758808.jpg'
+				}
+			}
+		]
+		
     },
 
     /**

fore-end/pages/message/message.json

@@ -1,5 +1,7 @@
 {
-	"usingComponents": {},
+	"usingComponents": {
+		"message-record": "/components/messageRecord/messageRecord"
+	},
 	"navigationBarTitleText": "消息中心",
 	"navigationBarTextStyle":"black"
 }

fore-end/pages/message/message.wxml

@@ -1,24 +1,13 @@
 <!--pages/message/message.wxml-->
-<view class="message">
-	<van-image
-	 width="50px" 
-	 height="50px" 
-	 src="https://img.js.design/assets/smartFill/img317164da746310.jpg" 
-	 round 
-	 lazy-load
-	 custom-class="message-profile">
-	 </van-image>
-	 <view class="message-text">
-		<view class="message-text-name">商家名称</view>
-		<view class="message-text-record">最后一条聊天记录</view>
-		<view class="message-text-time">10-29</view>
-	 </view>
-	 <van-image
-	 width="60px"
-	 height="60px"
-	 src="https://img.js.design/assets/smartFill/img409164da755928.jpg"
-	 lazy-load
-	 radius="12px"
-	 custom-class="message-picture">
-	 </van-image>
-</view>
+<van-notice-bar
+	text="为保障您的资金安全，请准确核实对方身份，避免上当受骗。"
+	custom-class="notice-bar"
+>
+	<view slot="left-icon">
+		<image src="../../assets/tabBar_img/通知.png" class="left-icon"/>
+	</view>
+</van-notice-bar>
+<view class="item" wx:for="{{message}}" wx:key="id">
+	<message-record item="{{item.item}}"></message-record>
+</view>
+<view class="bottom">已经到底啦~</view>

fore-end/pages/message/message.wxss

@@ -1,35 +1,13 @@
 /* pages/message/message.wxss */
-.message{
-	border-bottom: 1px solid rgba(214, 214, 214, 0.4);
-	display: flex;
-}
-
-.message-profile{
-	position: relative;
-	left: 12px;
-	top: 2px;
-}
-
-.message-text{
-	position: relative;
-	left: 30px;
-}
 
-.message-text-name{
-	font-size: 15px;
+.left-icon{
+	width: 12px;
+	height: 12px;
+	margin-right: 12px;
 }
 
-.message-text-record{
+.bottom{
 	font-size: 12px;
+	text-align: center;
 	color: rgba(128, 128, 128, 1);
-}
-
-.message-text-time{
-	font-size: 10px;
-	color: rgba(128, 128, 128, 1);
-}
-
-.message-picture{
-	position: relative;
-	left: 120px;
 }