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

mini-program/pages/cart/components/cart-empty/index.js

@@ -0,0 +1,23 @@
+Component({
+  properties: {
+    imgUrl: {
+      type: String,
+      value:
+        'https://cdn-we-retail.ym.tencent.com/miniapp/template/empty-cart.png',
+    },
+    tip: {
+      type: String,
+      value: '购物车是空的',
+    },
+    btnText: {
+      type: String,
+      value: '去首页',
+    },
+  },
+  data: {},
+  methods: {
+    handleClick() {
+      this.triggerEvent('handleClick');
+    },
+  },
+});

mini-program/pages/cart/components/cart-empty/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "/components/webp-image/index"
+  }
+}

mini-program/pages/cart/components/cart-empty/index.wxml

@@ -0,0 +1,6 @@
+<view class="cart-empty">
+	<t-image t-class="cart-img" src="{{imgUrl}}" />
+	<view class="tip">{{tip}}</view>
+	<view class="btn" bind:tap="handleClick">{{btnText}}</view>
+</view>
+

mini-program/pages/cart/components/cart-empty/index.wxss

@@ -0,0 +1,33 @@
+.cart-empty {
+  padding: 64rpx 0rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  height: calc(100vh - 100rpx);
+  background-color: #f5f5f5;
+}
+.cart-empty .cart-img {
+  width: 160rpx;
+  height: 160rpx;
+  margin-bottom: 24rpx;
+}
+
+.cart-empty .tip {
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #999;
+  margin-bottom: 24rpx;
+}
+.cart-empty .btn {
+  width: 240rpx;
+  height: 72rpx;
+  border-radius: 36rpx;
+  text-align: center;
+  line-height: 72rpx;
+  border: 2rpx solid #fa4126;
+  color: #fa4126;
+  background-color: transparent;
+  font-size: 28rpx;
+  font-weight: bold;
+}