通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/usercenter/components/order-group/index.js

@@ -0,0 +1,37 @@
+Component({
+  externalClasses: ['title-class', 'icon-class', 'number-class'],
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    orderTagInfos: {
+      type: Array,
+      value: [],
+    },
+    title: {
+      type: String,
+      value: '我的订单',
+    },
+    desc: {
+      type: String,
+      value: '全部订单',
+    },
+    isTop: {
+      type: Boolean,
+      value: true,
+    },
+    classPrefix: {
+      type: String,
+      value: 'wr',
+    },
+  },
+  methods: {
+    onClickItem(e) {
+      this.triggerEvent('onClickItem', e.currentTarget.dataset.item);
+    },
+
+    onClickTop() {
+      this.triggerEvent('onClickTop', {});
+    },
+  },
+});

mini-program/pages/usercenter/components/order-group/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-badge": "tdesign-miniprogram/badge/badge",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

mini-program/pages/usercenter/components/order-group/index.wxml

@@ -0,0 +1,37 @@
+<view class="order-group">
+  <t-cell-group wx:if="{{isTop}}">
+    <t-cell
+      t-class="order-group__top"
+      t-class-left="order-group__left"
+      t-class-title="order-group__top__title"
+      t-class-note="order-group__top__note"
+      title="{{title}}"
+      note="{{desc}}"
+      bordered="{{false}}"
+      arrow
+      bind:tap="onClickTop"
+    />
+  </t-cell-group>
+  <view class="order-group__content">
+    <view
+      class="order-group__item"
+      wx:for="{{orderTagInfos}}"
+      wx:for-item="item"
+      wx:key="index"
+      data-item="{{item}}"
+      bindtap="onClickItem"
+    >
+      <view class="order-group__item__icon icon-class">
+        <t-badge count="{{item.orderNum}}" max-count="{{99}}" color="#FF4646">
+          <t-icon
+            prefix="{{classPrefix}}"
+            name="{{item.iconName}}"
+            size="56rpx"
+            customStyle="background-image: -webkit-linear-gradient(90deg, #6a6a6a 0%,#929292 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
+          />
+        </t-badge>
+      </view>
+      <view class="order-group__item__title title-class">{{item.title}}</view>
+    </view>
+  </view>
+</view>

mini-program/pages/usercenter/components/order-group/index.wxss

@@ -0,0 +1,56 @@
+.order-group {
+  margin-bottom: 24rpx;
+  background-color: #ffffff;
+  border-radius: 16rpx 16rpx 0 0;
+}
+.order-group .order-group__top {
+  padding: 24rpx 18rpx 24rpx 32rpx;
+  border-radius: 16rpx 16rpx 0 0;
+}
+.order-group__top___title {
+  font-size: 32rpx;
+  line-height: 48rpx;
+  font-weight: bold;
+}
+.order-group__top__note {
+  font-size: 28rpx;
+}
+.order-group__content {
+  overflow: hidden;
+  width: 100%;
+  height: 164rpx;
+  display: flex;
+  background-color: #fff;
+  border-radius: 0 0 16rpx 16rpx;
+}
+.order-group__item {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.order-group__item:first-child {
+  border-radius: 0 0 0 16rpx;
+}
+.order-group__item:last-child {
+  border-radius: 0 0 16rpx 0;
+}
+.order-group__item__title {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 32rpx;
+}
+.order-group__item__icon {
+  margin-bottom: 20rpx;
+  width: 56rpx;
+  height: 56rpx;
+  position: relative;
+}
+.order-group__top__title {
+  font-weight: bold;
+}
+.order-group .order-group__left {
+  margin-right: 0;
+}