开发用户聊天页面

app.json

@@ -4,6 +4,7 @@
     "pages/activity/index",
     "pages/message/index",
     "pages/like/index",
+    "pages/chat/index",
     "pages/comment/index",
     "pages/match/index",
     "pages/pkResult/index",

components/worksList/index.js

@@ -59,7 +59,10 @@ Component({
     // 是否在tabbar页面使用
     tabBarPadding: {
       type: Boolean,
-      value: false
+      value: false,
+      observer(b){
+        console.log(b);
+      }
     }
   },
   data: {

pages/chat/index.js

@@ -0,0 +1,16 @@
+const app = getApp()
+Page({
+  data: {
+    value: '',
+    isIos: app.globalData.isIOS
+  },
+  onLoad(options) {
+
+  },
+  sendReply() {},
+  bindKeyInput(e) {
+    this.setData({
+      value: e.detail.value
+    })
+  }
+})

pages/chat/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/chat/index.less

@@ -0,0 +1,77 @@
+.chat {
+  background-color: white;
+
+  .content {
+    padding: 20rpx 30rpx 150rpx;
+
+    .base {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 42rpx;
+
+      .avatar {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        background-color: rgb(238, 238, 238);
+      }
+
+      .message {
+        flex: 1;
+        padding: 20rpx;
+        box-sizing: border-box;
+        font-size: 28rpx;
+        line-height: 42rpx;
+        border-radius: 14rpx;
+        background-color: #F2F6FC;
+      }
+    }
+
+    .someone {
+      .avatar {
+        margin-right: 30rpx;
+      }
+    }
+
+    .self {
+      .message {
+        margin-right: 30rpx;
+        background-color: #3DD076;
+        color: white;
+      }
+    }
+
+  }
+
+  .inputBox {
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 20rpx 26rpx;
+    background-color: #EEEDED;
+
+    .input {
+      height: 80rpx;
+      flex: 1;
+      padding-left: 20rpx;
+      border-radius: 10rpx;
+      background-color: white;
+    }
+
+    .submit {
+      padding: 14rpx 30rpx;
+      color: #0091FF;
+      font-size: 38rpx;
+    }
+  }
+
+  .iosPadding {
+    padding-bottom: 40rpx;
+  }
+}

pages/chat/index.wxml

@@ -0,0 +1,16 @@
+<view class="chat">
+  <view class="content">
+    <view class="base someone" wx:for="{{5}}" wx:key="index">
+      <image src="/static/star.png" class="avatar" />
+      <view class="message">获取系统信息。由于历史原因，wx.getSystemInfo 是异步的调用格式，但是是同步返回，需要异步获取系统信息请使用 wx.getSystemInfoAsync。</view>
+    </view>
+    <view class="base self" wx:for="{{5}}" wx:key="index">
+      <view class="message">获取系统信息。由于历史原因，wx.getSystemInfo 是异步的调用格式，但是是同步返回，需要异步获取系统信息请使用 wx.getSystemInfoAsync。</view>
+      <image src="/static/star.png" class="avatar" />
+    </view>
+  </view>
+  <view class="inputBox {{isIos?'iosPadding':''}}">
+    <input class="input" bindinput="bindKeyInput" value="{{value}}" placeholder="我有话说..." />
+    <view class="submit" bindtap="sendReply">发送</view>
+  </view>
+</view>

pages/chat/index.wxss

@@ -0,0 +1,62 @@
+.chat {
+  background-color: white;
+}
+.chat .content {
+  padding: 20rpx 30rpx 150rpx;
+}
+.chat .content .base {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 42rpx;
+}
+.chat .content .base .avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #eeeeee;
+}
+.chat .content .base .message {
+  flex: 1;
+  padding: 20rpx;
+  box-sizing: border-box;
+  font-size: 28rpx;
+  line-height: 42rpx;
+  border-radius: 14rpx;
+  background-color: #F2F6FC;
+}
+.chat .content .someone .avatar {
+  margin-right: 30rpx;
+}
+.chat .content .self .message {
+  margin-right: 30rpx;
+  background-color: #3DD076;
+  color: white;
+}
+.chat .inputBox {
+  position: fixed;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 20rpx 26rpx;
+  background-color: #EEEDED;
+}
+.chat .inputBox .input {
+  height: 80rpx;
+  flex: 1;
+  padding-left: 20rpx;
+  border-radius: 10rpx;
+  background-color: white;
+}
+.chat .inputBox .submit {
+  padding: 14rpx 30rpx;
+  color: #0091FF;
+  font-size: 38rpx;
+}
+.chat .iosPadding {
+  padding-bottom: 40rpx;
+}

pages/message/index.wxml

@@ -42,7 +42,7 @@
       </view>
     </view>
     <view class="base user" wx:for="{{16}}" wx:key="index" data-id='10' bind:longpress="onLongPress"
-      hover-class='pressHover'>
+      hover-class='pressHover' bindtap="jump" data-url='chat'>
       <image src="/static/message3.png" class="avatar" />
       <view class="body">
         <view class="name textOver">帅气小男孩</view>

pages/userWorks/index.wxml

@@ -1,6 +1,6 @@
 <view class="worksBox">
-    <!-- 作品列表 -->
-    <canvas id='share' type="2d"> </canvas>
-    <worksList id="worksList" videoType='my' worksList="{{list}}" autoPlay='{{false}}' />
-    <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
+  <!-- 作品列表 -->
+  <canvas id='share' type="2d"> </canvas>
+  <worksList id="worksList" videoType='my' worksList="{{list}}" autoPlay='{{false}}' />
+  <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
 </view>