添加组件

miniprogram/pages/components/count-plugin/count-plugin.json

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

miniprogram/pages/components/count-plugin/count-plugin.ts

@@ -0,0 +1,20 @@
+Component({
+  options: { multipleSlots: true },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    count: null,
+    customStyle: null,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});

miniprogram/pages/components/count-plugin/count-plugin.wxml

@@ -0,0 +1,12 @@
+<!-- 头部显示数量组件 -->
+<view class="flex" style="margin-bottom: 24rpx;{{customStyle}}">
+  <view style="flex: 1;flex-shrink: 0;word-break: break-all;">
+    <slot name="left"></slot>
+  </view>
+  <view class="flex" style="flex-shrink: 0;">
+    <view>
+      <slot name="right"></slot>
+    </view>
+    <view>共{{count}}条</view>
+  </view>
+</view>

miniprogram/pages/components/count-plugin/count-plugin.wxss

@@ -0,0 +1,6 @@
+.flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 12rpx;
+}

miniprogram/pages/components/total-bar-plugin/total-bar-plugin.json

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

miniprogram/pages/components/total-bar-plugin/total-bar-plugin.ts

@@ -0,0 +1,19 @@
+Component({
+  options: { multipleSlots: true },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    customStyle: null,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});

miniprogram/pages/components/total-bar-plugin/total-bar-plugin.wxml

@@ -0,0 +1,3 @@
+<view class="box" style="{{customStyle}}">
+  <slot></slot>
+</view>

miniprogram/pages/components/total-bar-plugin/total-bar-plugin.wxss

@@ -0,0 +1,10 @@
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 24rpx;
+  column-gap: 24rpx;
+  row-gap: 16rpx;
+  background: #e8f3ff;
+  padding: 24rpx;
+  border-radius: 8rpx;
+}