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

mini-program/pages/goods/details/components/buy-bar/index.js

@@ -0,0 +1,66 @@
+Component({
+  externalClasses: ['wr-sold-out', 'wr-class'],
+
+  options: { multipleSlots: true },
+
+  properties: {
+    soldout: {
+      // 商品是否下架
+      type: Boolean,
+      value: false,
+    },
+    jumpArray: {
+      type: Array,
+      value: [],
+    },
+    isStock: {
+      type: Boolean,
+      value: true,
+    }, // 是否有库存
+    isSlotButton: {
+      type: Boolean,
+      value: false,
+    }, // 是否开启按钮插槽
+    shopCartNum: {
+      type: Number, // 购物车气泡数量
+    },
+    buttonType: {
+      type: Number,
+      value: 0,
+    },
+    minDiscountPrice: {
+      type: String,
+      value: '',
+    },
+    minSalePrice: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    fillPrice: false,
+  },
+
+  methods: {
+    toAddCart() {
+      const { isStock } = this.properties;
+      if (!isStock) return;
+      this.triggerEvent('toAddCart');
+    },
+
+    toBuyNow(e) {
+      const { isStock } = this.properties;
+      if (!isStock) return;
+      this.triggerEvent('toBuyNow', e);
+    },
+
+    toNav(e) {
+      const { url } = e.currentTarget.dataset;
+      return this.triggerEvent('toNav', {
+        e,
+        url,
+      });
+    },
+  },
+});

mini-program/pages/goods/details/components/buy-bar/index.json

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

mini-program/pages/goods/details/components/buy-bar/index.wxml

@@ -0,0 +1,38 @@
+<view class="flex soldout flex-center wr-sold-out" wx:if="{{soldout ||  !isStock}}">
+	{{soldout ? '商品已下架' : '商品已售馨'}}
+</view>
+<view class="footer-cont flex flex-between wr-class">
+	<view class="flex flex-between bottom-operate-left" wx:if="{{jumpArray.length > 0}}">
+		<view
+		  wx:for="{{jumpArray}}"
+		  wx:key="index"
+		  class="icon-warp operate-wrap"
+		  bindtap="toNav"
+		  data-ele="foot_navigation"
+		  data-index="{{index}}"
+		  data-url="{{item.url}}"
+		>
+			<view>
+				<text wx:if="{{shopCartNum > 0 && item.showCartNum}}" class="tag-cart-num">
+					{{shopCartNum > 99 ? '99+' : shopCartNum}}
+				</text>
+				<t-icon prefix="wr" name="{{item.iconName}}" size="40rpx" />
+				<view class="operate-text">{{item.title}}</view>
+			</view>
+		</view>
+	</view>
+	<block wx:if="{{buttonType === 1}}">
+		<view class="flex buy-buttons">
+			<view class="bar-separately {{soldout || !isStock ? 'bar-addCart-disabled' : ''}}" bindtap="toAddCart">
+				加入购物车
+			</view>
+			<view class="bar-buy {{soldout || !isStock ? 'bar-buyNow-disabled' : ''}}" bindtap="toBuyNow">
+				立即购买
+			</view>
+		</view>
+	</block>
+	<block wx:if="{{isSlotButton}}">
+		<slot name="buyButton" />
+	</block>
+</view>
+

mini-program/pages/goods/details/components/buy-bar/index.wxss

@@ -0,0 +1,107 @@
+.footer-cont {
+  background-color: #fff;
+  padding: 16rpx;
+}
+
+.icon-warp {
+  width: 110rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.operate-wrap {
+  position: relative;
+}
+
+.bottom-operate-left {
+  width: 100%;
+}
+
+.bottom-operate-left .icon-warp {
+  width: 50%;
+}
+
+.tag-cart-num {
+  display: inline-block;
+  position: absolute;
+  left: 50rpx;
+  right: auto;
+  top: 6rpx;
+  color: #fff;
+  line-height: 24rpx;
+  text-align: center;
+  z-index: 99;
+  white-space: nowrap;
+  min-width: 28rpx;
+  border-radius: 14rpx;
+  background-color: #fa550f !important;
+  font-size: 20rpx;
+  font-weight: 400;
+  padding: 2rpx 6rpx;
+}
+
+.operate-text {
+  color: #666;
+  font-size: 20rpx;
+}
+
+.soldout {
+  height: 80rpx;
+  background: rgba(170, 170, 170, 1);
+  width: 100%;
+  color: #fff;
+}
+
+.addCart-disabled,
+.bar-addCart-disabled {
+  background: rgba(221, 221, 221, 1) !important;
+  color: #fff !important;
+  font-size: 28rpx;
+}
+
+.buyNow-disabled,
+.bar-buyNow-disabled {
+  background: rgba(198, 198, 198, 1) !important;
+  color: #fff !important;
+  font-size: 28rpx;
+}
+
+.bar-separately,
+.bar-buy {
+  width: 254rpx;
+  height: 80rpx;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bar-separately {
+  background: #ffece9;
+  color: #fa4126;
+  border-radius: 40rpx 0 0 40rpx;
+}
+
+.bar-buy {
+  background-color: #fa4126;
+  border-radius: 0rpx 40rpx 40rpx 0rpx;
+}
+
+.flex {
+  display: flex;
+  display: -webkit-flex;
+}
+
+.flex-center {
+  justify-content: center;
+  -webkit-justify-content: center;
+  align-items: center;
+  -webkit-align-items: center;
+}
+
+.flex-between {
+  justify-content: space-between;
+  -webkit-justify-content: space-between;
+}