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

mini-program/pages/coupon/components/floating-button/index.js

@@ -0,0 +1,17 @@
+Component({
+  data: { icon: 'cart' },
+
+  properties: {
+    count: {
+      type: Number,
+    },
+  },
+
+  methods: {
+    goToCart() {
+      wx.switchTab({
+        url: '/pages/cart/index',
+      });
+    },
+  },
+});

mini-program/pages/coupon/components/floating-button/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

mini-program/pages/coupon/components/floating-button/index.wxml

@@ -0,0 +1,14 @@
+<view class="floating-button" bind:tap="goToCart">
+	<view class="floating-inner-container">
+		<t-icon
+		  prefix="wr"
+		  name="{{icon}}"
+		  size="42rpx"
+		  color="#FFFFFF"
+		/>
+	</view>
+	<view class="floating-right-top">
+		{{count}}
+	</view>
+</view>
+

mini-program/pages/coupon/components/floating-button/index.wxss

@@ -0,0 +1,30 @@
+.floating-button {
+  position: fixed;
+  right: 20rpx;
+  bottom: 108rpx;
+}
+
+.floating-button .floating-inner-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 96rpx;
+  width: 96rpx;
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 0.7;
+  border-radius: 48rpx;
+}
+
+.floating-button .floating-right-top {
+  position: absolute;
+  right: 0rpx;
+  top: 0rpx;
+  height: 28rpx;
+  background: #fa4126;
+  border-radius: 64rpx;
+  font-weight: bold;
+  font-size: 22rpx;
+  line-height: 28rpx;
+  color: #fff;
+  padding: 0 8rpx;
+}