init

xhs-mini-demos/component-case/group-chat-card/group-chat-card.css

@@ -0,0 +1,39 @@
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.mr-20 {
+  margin-right: 20px;
+}
+
+.mb-8 {
+  margin-bottom: 8px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.safe-area {
+  padding-bottom: 150px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.word-break {
+  word-break: keep-all;
+}

xhs-mini-demos/component-case/group-chat-card/group-chat-card.js

@@ -0,0 +1,33 @@
+const arr = ['card', 'cell'];
+
+Page({
+  data: {
+    groupChatList: "Ev+FMMlMReM/fvLBkHwJyvVowUAzEgFlK7HoFR/NoQQ=,q2UWig7ActbQ5Ew96a+Zf3x3UxjdISWczC+tHJYm66U=,sy3YiB1GGlXLTP9KLCLwFtmxWtY3Hno1yfVzYksmLiQ=,bO8PmXJQ/g9ivaRKLJ37m4Rdb9Lh1nRCwtwaQD2VgQ8=,lt62Epn4+F59BGPXHxcoa8DkkT04zvrA9peKXWL+Njg=",
+    groupChatStr: "Ev+FMMlMReM/fvLBkHwJyvVowUAzEgFlK7HoFR/NoQQ=,q2UWig7ActbQ5Ew96a+Zf3x3UxjdISWczC+tHJYm66U=,sy3YiB1GGlXLTP9KLCLwFtmxWtY3Hno1yfVzYksmLiQ=,bO8PmXJQ/g9ivaRKLJ37m4Rdb9Lh1nRCwtwaQD2VgQ8=,lt62Epn4+F59BGPXHxcoa8DkkT04zvrA9peKXWL+Njg=",
+    type: "card",
+    typeIndex: 0,
+    arr: arr,
+  },
+  bindInputGroupChatList: function (e) {
+    this.setData({
+      groupChatList: e.detail.value,
+    });
+  },
+  bindPickerChange(e) {
+    this.setData({
+      typeIndex: e.detail.value,
+      type: arr[e.detail.value],
+    });
+  },
+  bindBlur() {
+    this.setData({
+      groupChatStr: this.data.groupChatList
+    });
+  },
+  handleBindJoinGroup(e) {
+    console.log('handleBindJoinGroup', e);
+  },
+  handleBindError(e) {
+    console.log('handleBindError', e);
+  }
+});

xhs-mini-demos/component-case/group-chat-card/group-chat-card.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "群聊组件",
+  "usingComponents": {
+    "showbox": "../../common/component/showbox/index",
+    "box": "../../common/component/container/index"
+  }
+}

xhs-mini-demos/component-case/group-chat-card/group-chat-card.xhsml

@@ -0,0 +1,45 @@
+<view class="container">
+  <showbox title="群聊组件 - 参数设置">
+    <view style="padding: 10px; background-color: #eee;">
+      <group-chat-card
+        groupIds="{{groupChatStr}}"
+        bindjoingroup="handleBindJoinGroup"
+        binderror="handleBindError"
+        type="{{arr[typeIndex]}}"
+      >
+      </group-chat-card>
+    </view>
+  </showbox>
+  <showbox title="参数设置区域，修改群组件配置">
+    <box class="box">
+      <view class="mb-8">
+        群聊id，支持传多个，用英文逗号分割，失焦后生效
+      </view>
+      <view class="_ui-input">
+        <textarea
+          type="{{type}}"
+          placeholder="群聊id，支持传多个，用英文逗号分割"
+          value="{{groupChatList}}"
+          maxlength="-1"
+          auto-height
+          bindinput="bindInputGroupChatList"
+          bindblur="bindBlur"
+        ></textarea>
+      </view>
+    </box>
+    <box class="box">
+      <view class="mb-8">
+        群聊 type，支持传 card / cell
+      </view>
+      <view class="_ui-input">
+        <picker
+          bindchange="bindPickerChange"
+          value="{{typeIndex}}"
+          range="{{arr}}"
+        >
+          <view>当前选择: {{arr[typeIndex]}}</view>
+        </picker>
+      </view>
+    </box>
+  </showbox>
+</view>