微调

app.json

@@ -82,7 +82,9 @@
     "pages/mineJob/index",
     "pages/memberGroupList/index",
     "pages/sendCreatorCode/index",
-    "pages/creatorSelectPage/index"
+    "pages/creatorSelectPage/index",
+    "components/chat/text",
+    "components/chat/hello"
   ],
   "permission": {
     "scope.userLocation": {

components/chat/hello.js

@@ -0,0 +1,66 @@
+// components/chat/hello.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

components/chat/hello.json

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

components/chat/hello.wxml

@@ -0,0 +1,15 @@
+<view class="g-components-chat-gree g_fs_16">
+  <view class="g_flex_row_start">
+    <view>Hi，我是</view>
+    <view class="g_fw_600">大鹏</view>
+    <view>，你的智能工作助理。</view>
+  </view>
+  <view class="g_flex_row_start">
+    <view>以后找工作不用跟老板谈了，直接来跟</view>
+    <view class="g_fw_600 g_ml_4 g_mr_4">大鹏</view>
+    <view>谈。</view>
+  </view>
+  <view>
+    来说说你的要求，我们开始吧…
+  </view>
+</view>

components/chat/hello.wxss

@@ -0,0 +1,10 @@
+/* components/chat/hello.wxss */
+.g_fw_600{
+  font-weight: 600;
+}
+.g_ml_4{
+  margin-left: 4px;
+}
+.g_mr_4{
+  margin-right: 4px;
+}

components/chat/text.js

@@ -0,0 +1,66 @@
+// components/chat/text.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

components/chat/text.json

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

components/chat/text.wxml

@@ -0,0 +1,3 @@
+<view class="panel-text">
+  模拟返回纯文本内容
+</view>

components/chat/text.wxss

@@ -0,0 +1 @@
+/* components/chat/text.wxss */

subPage/chat/index.js

@@ -6,6 +6,12 @@ Page({
    */
   data: {
     eventType:'input',// 底部事件类型 input 键盘输入，voice 语音输入
+    list:[
+      {
+        id:-1,
+        type:'text'
+      }
+    ]
   },
 
   /**

subPage/chat/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "hello-panel": "../../components/chat/hello",
+    "text-panel": "../../components/chat/text"
+  }
 }

subPage/chat/index.wxml

@@ -1,6 +1,41 @@
 <view class="p-home-chat g_h_all g_flex_column_between">
   <view class="chat-content g_flex_column_end g_flex_1">
-    具体内容
+    <view class="chat-card"
+          wx:for="{{list}}"         
+          wx:for-item="item"         
+          wx:for-index="index"       
+          wx:key="{{item.id}}"
+    >
+      <view wx:if="{{index == 0}}"
+           class="item-obj hello-obj"
+      >
+        <hello-panel />
+      </view>
+      <view class="other-obj" wx:if="{{index > 0}}">
+        <view wx:if="{{index % 2 == 1}}" 
+              class="item-obj ask-box"
+        >
+          <view class="" wx:if="{{item.type == 'text'}}">
+            <text-panel />
+          </view>
+        </view>
+        <view wx:if="{{index % 2 == 0}}" 
+              class="item-obj send-box"
+        >
+
+        </view>
+      </view>
+      <view class="item-opera g_flex_row_between">
+        <view class="g_flex_row_start">
+          <i class="iconfont icon-useful era-icon g_mr_12"></i>
+          <i class="iconfont icon-un_useful era-icon"></i>
+        </view>
+        <view class="g_flex_row_end">
+          <i class="iconfont icon-fuzhi11 era-icon g_mr_12"></i>
+          <i class="iconfont icon-fenxiangfenxiangshare era-icon"></i>
+        </view>
+      </view>
+    </view>
   </view>
   <view class="chat-operate g_flex_none">
     <view class="m-input g_flex_row_between">

subPage/chat/index.wxss

@@ -199,4 +199,25 @@ textarea {
   top: 50%;
   z-index: 99;
   transform: translate(-50%, -50%);
+}
+
+.chat-card{
+  padding: 0 10px;
+}
+.item-obj{
+  background-color: #fff;
+  border-radius: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+  padding: 10px;
+}
+.item-opera{
+  margin-top: 10px;
+}
+.era-icon{
+  font-size: 20px;
+  color: #888888;
+}
+.g_mr_12{
+  margin-right: 12px;
 }