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

mini-program/pages/order/components/order-card/index.js

@@ -0,0 +1,90 @@
+Component({
+  externalClasses: ['wr-class', 'header-class', 'title-class'],
+
+  options: {
+    multipleSlots: true,
+  },
+
+  relations: {
+    '../order-goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+    '../goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+    '../specs-goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+  },
+
+  created() {
+    this.children = [];
+  },
+
+  properties: {
+    order: {
+      type: Object,
+      observer(order) {
+        if (!order?.goodsList) return;
+        const goodsCount = order.goodsList.length;
+        this.setData({
+          goodsCount,
+        });
+      },
+    },
+    useTopRightSlot: Boolean,
+    //  初始显示的商品数量，超出部分会隐藏。
+    defaultShowNum: {
+      type: null,
+      value: 10,
+    },
+    useLogoSlot: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    showAll: true, // 是否展示所有商品，设置为false，可以使用展开更多功能
+    goodsCount: 0,
+  },
+
+  methods: {
+    setHidden() {
+      const isHidden = !this.data.showAll;
+      this.children.forEach(
+        (c, i) => i >= this.properties.defaultShowNum && c.setHidden(isHidden),
+      );
+    },
+
+    onOrderCardTap() {
+      this.triggerEvent('cardtap');
+    },
+
+    onShowMoreTap() {
+      this.setData({ showAll: true }, () => this.setHidden());
+      this.triggerEvent('showall');
+    },
+  },
+});

mini-program/pages/order/components/order-card/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "/components/webp-image/index",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

mini-program/pages/order/components/order-card/index.wxml

@@ -0,0 +1,30 @@
+<view class="order-card wr-class" bind:tap="onOrderCardTap">
+	<view class="header header-class">
+		<view class="store-name title-class">
+			<block wx:if="{{!useLogoSlot}}">
+				<t-image wx:if="{{order.storeLogo}}" t-class="store-name__logo" src="{{order.storeLogo}}" />
+				<t-icon
+				 wx:else
+				 prefix="wr"
+				 class="store-name__logo"
+				 name="store"
+				 size="inherit"
+				 color="inherit"
+				/>
+				<view class="store-name__label">{{order.storeName}}</view>
+			</block>
+			<slot wx:else name="top-left" />
+		</view>
+		<view wx:if="{{!useTopRightSlot}}" class="order-status">{{order.statusDesc}}</view>
+		<slot wx:else name="top-right" />
+	</view>
+	<view class="slot-wrapper">
+		<slot/>
+	</view>
+	<view wx:if="{{goodsCount > defaultShowNum && !showAll}}" class="more-mask" catchtap="onShowMoreTap">
+		展开商品信息（共 {{goodsCount}} 个）
+		<t-icon name="chevron-down" size="32rpx" />
+	</view>
+	<slot name="more" />
+</view>
+

mini-program/pages/order/components/order-card/index.wxss

@@ -0,0 +1,45 @@
+.order-card {
+  margin: 24rpx 0;
+  padding: 24rpx 32rpx 24rpx;
+  background-color: white;
+  border-radius: 8rpx;
+}
+.order-card .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+.order-card .header .store-name {
+  font-size: 28rpx;
+  font-weight: normal;
+  color: #333333;
+  display: flex;
+  align-items: center;
+  line-height: 40rpx;
+}
+.order-card .header .store-name__logo {
+  margin-right: 16rpx;
+  font-size: 40rpx;
+  width: 48rpx;
+  height: 48rpx;
+}
+.order-card .header .store-name__label {
+  max-width: 500rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+.order-card .header .order-status {
+  font-size: 26rpx;
+  line-height: 40rpx;
+  color: #fa4126;
+}
+.order-card .more-mask {
+  padding: 20rpx 0;
+  text-align: center;
+  background-color: white;
+  color: #fa4126;
+  font-size: 24rpx;
+}