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

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;
+}

mini-program/pages/goods/details/components/goods-specs-popup/index.js

@@ -0,0 +1,339 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-nested-ternary */
+import Toast from 'tdesign-miniprogram/toast/index';
+
+Component({
+  options: {
+    multipleSlots: true,
+    addGlobalClass: true,
+  },
+
+  properties: {
+    src: {
+      type: String,
+    },
+    title: String,
+    show: {
+      type: Boolean,
+      value: false,
+    },
+    limitBuyInfo: {
+      type: String,
+      value: '',
+    },
+    isStock: {
+      type: Boolean,
+      value: true,
+    },
+    limitMaxCount: {
+      type: Number,
+      value: 999,
+    },
+    limitMinCount: {
+      type: Number,
+      value: 1,
+    },
+    skuList: {
+      type: Array,
+      value: [],
+      observer(skuList) {
+        if (skuList && skuList.length > 0) {
+          if (this.initStatus) {
+            this.initData();
+          }
+        }
+      },
+    },
+    specList: {
+      type: Array,
+      value: [],
+      observer(specList) {
+        if (specList && specList.length > 0) {
+          this.initData();
+        }
+      },
+    },
+    outOperateStatus: {
+      type: Boolean,
+      value: false,
+    },
+    hasAuth: {
+      type: Boolean,
+      value: false,
+    },
+    count: {
+      type: Number,
+      value: 1,
+      observer(count) {
+        this.setData({
+          buyNum: count,
+        });
+      },
+    },
+  },
+
+  initStatus: false,
+  selectedSku: {},
+  selectSpecObj: {},
+
+  data: {
+    buyNum: 1,
+    isAllSelectedSku: false,
+  },
+
+  methods: {
+    initData() {
+      const { skuList } = this.properties;
+      const { specList } = this.properties;
+      specList.forEach((item) => {
+        if (item.specValueList.length > 0) {
+          item.specValueList.forEach((subItem) => {
+            const obj = this.checkSkuStockQuantity(subItem.specValueId, skuList);
+            subItem.hasStockObj = obj;
+          });
+        }
+      });
+      const selectedSku = {};
+      specList.forEach((item) => {
+        selectedSku[item.specId] = '';
+      });
+      this.setData({
+        specList,
+      });
+      this.selectSpecObj = {};
+      this.selectedSku = {};
+      this.initStatus = true;
+    },
+
+    checkSkuStockQuantity(specValueId, skuList) {
+      let hasStock = false;
+      const array = [];
+      skuList.forEach((item) => {
+        (item.specInfo || []).forEach((subItem) => {
+          if (subItem.specValueId === specValueId && item.quantity > 0) {
+            const subArray = [];
+            (item.specInfo || []).forEach((specItem) => {
+              subArray.push(specItem.specValueId);
+            });
+            array.push(subArray);
+            hasStock = true;
+          }
+        });
+      });
+      return {
+        hasStock,
+        specsArray: array,
+      };
+    },
+
+    chooseSpecValueId(specValueId, specId) {
+      const { selectSpecObj } = this;
+      const { skuList, specList } = this.properties;
+      if (selectSpecObj[specId]) {
+        selectSpecObj[specId] = [];
+        this.selectSpecObj = selectSpecObj;
+      } else {
+        selectSpecObj[specId] = [];
+      }
+
+      const itemAllSpecArray = [];
+      const itemUnSelectArray = [];
+      const itemSelectArray = [];
+      specList.forEach((item) => {
+        if (item.specId === specId) {
+          const subSpecValueItem = item.specValueList.find((subItem) => subItem.specValueId === specValueId);
+          let specSelectStatus = false;
+          item.specValueList.forEach((n) => {
+            itemAllSpecArray.push(n.hasStockObj.specsArray);
+            if (n.isSelected) {
+              specSelectStatus = true;
+            }
+            if (n.hasStockObj.hasStock) {
+              itemSelectArray.push(n.specValueId);
+            } else {
+              itemUnSelectArray.push(n.specValueId);
+            }
+          });
+          if (specSelectStatus) {
+            selectSpecObj[specId] = this.flatten(subSpecValueItem?.hasStockObj.specsArray.concat(itemSelectArray));
+          } else {
+            const subSet = function (arr1, arr2) {
+              const set2 = new Set(arr2);
+              const subset = [];
+              arr1.forEach((val) => {
+                if (!set2.has(val)) {
+                  subset.push(val);
+                }
+              });
+              return subset;
+            };
+            selectSpecObj[specId] = subSet(this.flatten(itemAllSpecArray), this.flatten(itemUnSelectArray));
+          }
+        } else {
+          // 未点击规格的逻辑
+          const itemSelectArray = [];
+          let specSelectStatus = false;
+          item.specValueList.map(
+            // 找到有库存的规格数组
+            (n) => {
+              itemSelectArray.push(n.hasStockObj.specsArray);
+              if (n.isSelected) {
+                specSelectStatus = true;
+              }
+              n.hasStockObj.hasStock = true;
+              return n;
+            },
+          );
+          if (specSelectStatus) {
+            selectSpecObj[item.specId] = this.flatten(itemSelectArray);
+          } else {
+            delete selectSpecObj[item.specId];
+          }
+        }
+        this.selectSpecObj = selectSpecObj;
+      });
+      const combatArray = Object.values(selectSpecObj);
+      if (combatArray.length > 0) {
+        const showArray = combatArray.reduce((x, y) => this.getIntersection(x, y));
+        const lastResult = Array.from(new Set(showArray));
+        specList.forEach((item) => {
+          item.specValueList.forEach((subItem) => {
+            if (lastResult.includes(subItem.specValueId)) {
+              subItem.hasStockObj.hasStock = true;
+            } else {
+              subItem.hasStockObj.hasStock = false;
+            }
+          });
+        });
+      } else {
+        specList.forEach((item) => {
+          if (item.specValueList.length > 0) {
+            item.specValueList.forEach((subItem) => {
+              const obj = this.checkSkuStockQuantity(subItem.specValueId, skuList);
+              subItem.hasStockObj = obj;
+            });
+          }
+        });
+      }
+      this.setData({
+        specList,
+      });
+    },
+
+    flatten(input) {
+      const stack = [...input];
+      const res = [];
+      while (stack.length) {
+        const next = stack.pop();
+        if (Array.isArray(next)) {
+          stack.push(...next);
+        } else {
+          res.push(next);
+        }
+      }
+      return res.reverse();
+    },
+
+    getIntersection(array, nextArray) {
+      return array.filter((item) => nextArray.includes(item));
+    },
+
+    toChooseItem(e) {
+      const { isStock } = this.properties;
+      if (!isStock) return;
+      const { id } = e.currentTarget.dataset;
+      const specId = e.currentTarget.dataset.specid;
+      const hasStock = e.currentTarget.dataset.hasstock;
+      if (!hasStock) {
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '该规格已售罄',
+          icon: '',
+          duration: 1000,
+        });
+        return;
+      }
+
+      let { selectedSku } = this;
+      const { specList } = this.properties;
+      selectedSku =
+        selectedSku[specId] === id ? { ...this.selectedSku, [specId]: '' } : { ...this.selectedSku, [specId]: id };
+      specList.forEach((item) => {
+        item.specValueList.forEach((valuesItem) => {
+          if (item.specId === specId) {
+            valuesItem.isSelected = valuesItem.specValueId === selectedSku[specId];
+          }
+        });
+      });
+      this.chooseSpecValueId(id, specId);
+      const isAllSelectedSku = this.isAllSelected(specList, selectedSku);
+      if (!isAllSelectedSku) {
+        this.setData({
+          selectSkuSellsPrice: 0,
+          selectSkuImg: '',
+        });
+      }
+      this.setData({
+        specList,
+        isAllSelectedSku,
+      });
+      this.selectedSku = selectedSku;
+      this.triggerEvent('change', {
+        specList,
+        selectedSku,
+        isAllSelectedSku,
+      });
+    },
+
+    // 判断是否所有的sku都已经选中
+    isAllSelected(skuTree, selectedSku) {
+      const selected = Object.keys(selectedSku).filter((skuKeyStr) => selectedSku[skuKeyStr] !== '');
+      return skuTree.length === selected.length;
+    },
+
+    handlePopupHide() {
+      this.triggerEvent('closeSpecsPopup', {
+        show: false,
+      });
+    },
+
+    specsConfirm() {
+      const { isStock } = this.properties;
+      if (!isStock) return;
+      this.triggerEvent('specsConfirm');
+    },
+
+    addCart() {
+      const { isStock } = this.properties;
+      if (!isStock) return;
+      this.triggerEvent('addCart');
+    },
+
+    buyNow() {
+      const { isAllSelectedSku } = this.data;
+      const { isStock } = this.properties;
+      if (!isStock) return;
+      this.triggerEvent('buyNow', {
+        isAllSelectedSku,
+      });
+    },
+
+    // 总处理
+    setBuyNum(buyNum) {
+      this.setData({
+        buyNum,
+      });
+      this.triggerEvent('changeNum', {
+        buyNum,
+      });
+    },
+
+    handleBuyNumChange(e) {
+      const { value } = e.detail;
+      this.setData({
+        buyNum: value,
+      });
+    },
+  },
+});

mini-program/pages/goods/details/components/goods-specs-popup/index.json

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

mini-program/pages/goods/details/components/goods-specs-popup/index.wxml

@@ -0,0 +1,84 @@
+<t-popup visible="{{show}}" placement="bottom" bind:visible-change="handlePopupHide">
+  <view class="popup-container">
+    <view class="popup-close" bindtap="handlePopupHide">
+      <t-icon name="close" size="36rpx" />
+    </view>
+    <view class="popup-sku-header">
+      <t-image t-class="popup-sku-header__img" src="{{src}}" />
+      <view class="popup-sku-header__goods-info">
+        <view class="popup-sku__goods-name">{{title}}</view>
+        <view class="goods-price-container">
+          <slot name="goods-price" />
+        </view>
+        <!-- 已选规格 -->
+        <view class="popup-sku__selected-spec">
+          <view>选择：</view>
+          <view wx:for="{{specList}}" wx:key="specId">
+            <view
+              class="popup-sku__selected-item"
+              wx:for="{{item.specValueList}}"
+              wx:for-item="selectedItem"
+              wx:if="{{selectedItem.isSelected}}"
+              wx:key="specValueId"
+            >
+              {{selectedItem.specValue}}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="popup-sku-body">
+      <view class="popup-sku-group-container">
+        <view class="popup-sku-row" wx:for="{{specList}}" wx:key="specId">
+          <view class="popup-sku-row__title">{{item.title}}</view>
+          <block
+            wx:for="{{item.specValueList}}"
+            wx:for-item="valuesItem"
+            wx:for-index="valuesIndex"
+            wx:key="specValueId"
+          >
+            <view
+              class="popup-sku-row__item {{valuesItem.isSelected ? 'popup-sku-row__item--active' : ''}} {{!valuesItem.hasStockObj.hasStock || !isStock ? 'disabled-sku-selected' : ''}}"
+              data-specid="{{item.specId}}"
+              data-id="{{valuesItem.specValueId}}"
+              data-val="{{valuesItem.specValue}}"
+              data-hasStock="{{valuesItem.hasStockObj.hasStock}}"
+              bindtap="toChooseItem"
+            >
+              {{valuesItem.specValue}}
+            </view>
+          </block>
+        </view>
+      </view>
+      <view class="popup-sku-stepper-stock">
+        <view class="popup-sku-stepper-container">
+          <view class="popup-sku__stepper-title">
+            购买数量
+            <view class="limit-text" wx:if="{{limitBuyInfo}}"> ({{limitBuyInfo}}) </view>
+          </view>
+          <t-stepper value="{{buyNum}}" min="{{1}}" max="{{2}}" theme="filled" bind:change="handleBuyNumChange" />
+        </view>
+      </view>
+    </view>
+    <view wx:if="{{outOperateStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="specsConfirm">
+      确定
+    </view>
+    <view
+      class="popup-sku-actions flex flex-between {{!isStock ? 'popup-sku-disabled' : ''}}"
+      wx:if="{{!outOperateStatus}}"
+    >
+      <view class="sku-operate">
+        <view class="selected-sku-btn sku-operate-addCart {{!isStock ? 'disabled' : ''}}" bindtap="addCart">
+          加入购物车
+        </view>
+      </view>
+      <view class="sku-operate">
+        <view class="selected-sku-btn sku-operate-buyNow  {{!isStock ? 'disabled' : ''}}" bindtap="buyNow">
+          立即购买
+        </view>
+      </view>
+    </view>
+    <slot name="bottomSlot" />
+  </view>
+</t-popup>
+<t-toast id="t-toast" />

mini-program/pages/goods/details/components/goods-specs-popup/index.wxss

@@ -0,0 +1,300 @@
+.popup-container {
+  background-color: #ffffff;
+  position: relative;
+  z-index: 100;
+  border-radius: 16rpx 16rpx 0 0;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
+}
+
+.popup-container .popup-close {
+  position: absolute;
+  right: 30rpx;
+  top: 30rpx;
+  z-index: 9;
+  color: #999999;
+}
+
+.popup-sku-header {
+  display: flex;
+  padding: 30rpx 28rpx 0 30rpx;
+}
+
+.popup-sku-header .popup-sku-header__img {
+  width: 176rpx;
+  height: 176rpx;
+  border-radius: 8rpx;
+  background: #d8d8d8;
+  margin-right: 24rpx;
+}
+
+.popup-sku-header .popup-sku-header__goods-info {
+  position: relative;
+  width: 500rpx;
+}
+
+.popup-sku-header .popup-sku-header__goods-info .popup-sku__goods-name {
+  font-size: 28rpx;
+  line-height: 40rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  overflow: hidden;
+  width: 430rpx;
+  text-overflow: ellipsis;
+}
+
+.popup-sku-header .popup-sku-header__goods-info .popup-sku__selected-spec {
+  display: flex;
+  color: #333333;
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+
+.popup-sku-header
+  .popup-sku-header__goods-info
+  .popup-sku__selected-spec
+  .popup-sku__selected-item {
+  margin-right: 10rpx;
+}
+
+.popup-sku-body {
+  margin: 0 30rpx 40rpx;
+  max-height: 600rpx;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.popup-sku-body .popup-sku-group-container .popup-sku-row {
+  padding: 32rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.popup-sku-body
+  .popup-sku-group-container
+  .popup-sku-row
+  .popup-sku-row__title {
+  font-size: 26rpx;
+  color: #333;
+}
+
+.popup-sku-body .popup-sku-group-container .popup-sku-row .popup-sku-row__item {
+  font-size: 24rpx;
+  color: #333;
+  min-width: 128rpx;
+  height: 56rpx;
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  border: 2rpx solid #f5f5f5;
+  margin: 19rpx 26rpx 0 0;
+  padding: 0 16rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-sku-body
+  .popup-sku-group-container
+  .popup-sku-row
+  .popup-sku-row__item.popup-sku-row__item--active {
+  border: 2rpx solid #fa4126;
+  color: #fa4126;
+  background: rgba(255, 95, 21, 0.04);
+}
+
+.popup-sku-body
+  .popup-sku-group-container
+  .popup-sku-row
+  .disabled-sku-selected {
+  background: #f5f5f5 !important;
+  color: #cccccc;
+}
+
+.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 40rpx 0;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-sku__stepper-title {
+  display: flex;
+  font-size: 26rpx;
+  color: #333;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-sku__stepper-title
+  .limit-text {
+  margin-left: 10rpx;
+  color: #999999;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  font-size: 28px;
+  height: 48rpx;
+  line-height: 62rpx;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .input-btn,
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .input-num-wrap {
+  position: relative;
+  height: 100%;
+  text-align: center;
+  background-color: #f5f5f5;
+  border-radius: 4rpx;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .input-num-wrap {
+  color: #282828;
+  display: flex;
+  max-width: 76rpx;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .input-num-wrap
+  .input-num {
+  height: 100%;
+  width: auto;
+  font-weight: 600;
+  font-size: 30rpx;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .input-btn {
+  width: 48rpx;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .popup-stepper__minus {
+  margin-right: 4rpx;
+  border-radius: 4rpx;
+  color: #9a979b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .popup-stepper__plus {
+  margin-left: 4rpx;
+  border-radius: 4rpx;
+  color: #9a979b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .popup-stepper__plus::after {
+  width: 24rpx;
+  height: 3rpx;
+  background-color: #999999;
+}
+
+.popup-sku-body
+  .popup-sku-stepper-stock
+  .popup-sku-stepper-container
+  .popup-stepper
+  .popup-stepper__plus::before {
+  width: 3rpx;
+  height: 24rpx;
+  background-color: #999999;
+}
+
+.popup-sku-actions {
+  font-size: 32rpx;
+  height: 80rpx;
+  text-align: center;
+  line-height: 80rpx;
+  padding: 0 20rpx;
+}
+
+.popup-sku-actions .sku-operate {
+  height: 80rpx;
+  width: 50%;
+  color: #fff;
+  border-radius: 48rpx;
+}
+
+.popup-sku-actions .sku-operate .sku-operate-addCart {
+  background-color: #ffece9;
+  color: #fa4126;
+  border-radius: 48rpx 0 0 48rpx;
+}
+
+.popup-sku-actions .sku-operate .sku-operate-addCart.disabled {
+  background: rgb(221, 221, 221);
+  color: #fff;
+}
+
+.popup-sku-actions .sku-operate .sku-operate-buyNow {
+  background-color: #fa4126;
+  border-radius: 0 48rpx 48rpx 0;
+}
+
+.popup-sku-actions .sku-operate .sku-operate-buyNow.disabled {
+  color: #fff;
+  background: rgb(198, 198, 198);
+}
+
+.popup-sku-actions .sku-operate .selected-sku-btn {
+  width: 100%;
+}
+
+.popup-container .single-confirm-btn {
+  border-radius: 48rpx;
+  color: #ffffff;
+  margin: 0 32rpx;
+  font-size: 32rpx;
+  height: 80rpx;
+  text-align: center;
+  line-height: 88rpx;
+  background-color: #fa4126;
+}
+
+.popup-container .single-confirm-btn.disabled {
+  font-size: 32rpx;
+  color: #fff;
+  background-color: #dddddd;
+}

mini-program/pages/goods/details/components/promotion-popup/index.js

@@ -0,0 +1,35 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    list: Array,
+    title: {
+      type: String,
+      value: '促销说明',
+    },
+    show: {
+      type: Boolean,
+    },
+  },
+
+  // data: {
+  //   list: [],
+  // },
+
+  methods: {
+    change(e) {
+      const { index } = e.currentTarget.dataset;
+      this.triggerEvent('promotionChange', {
+        index,
+      });
+    },
+
+    closePromotionPopup() {
+      this.triggerEvent('closePromotionPopup', {
+        show: false,
+      });
+    },
+  },
+});

mini-program/pages/goods/details/components/promotion-popup/index.json

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

mini-program/pages/goods/details/components/promotion-popup/index.wxml

@@ -0,0 +1,34 @@
+<t-popup visible="{{show}}" placement="bottom" bind:visible-change="closePromotionPopup">
+	<view class="promotion-popup-container">
+		<view class="promotion-popup-close" bindtap="closePromotionPopup">
+			<t-icon name="close" size="36rpx" />
+		</view>
+		<view class="promotion-popup-title">
+			<view class="title">{{title}}</view>
+		</view>
+		<view class="promotion-popup-content">
+			<view class="promotion-detail-list">
+				<view
+				  class="list-item"
+				  wx:for="{{list}}"
+				  wx:key="index"
+				  bindtap="change"
+				  data-index="{{index}}"
+				>
+					<view class="tag">{{item.tag}}</view>
+					<view class="content">
+						<text class="list-content">{{item.label ? item.label : ''}}</text>
+					</view>
+					<t-icon
+					  class="collect-btn"
+					  name="chevron-right"
+					  size="40rpx"
+					  color="#bbb"
+					/>
+				</view>
+			</view>
+		</view>
+		<slot name="promotion-bottom" />
+	</view>
+</t-popup>
+

mini-program/pages/goods/details/components/promotion-popup/index.wxss

@@ -0,0 +1,131 @@
+.promotion-popup-container {
+  background-color: #ffffff;
+  position: relative;
+  z-index: 100;
+  border-radius: 16rpx 16rpx 0 0;
+}
+
+.promotion-popup-container .promotion-popup-close {
+  position: absolute;
+  right: 30rpx;
+  top: 30rpx;
+  z-index: 9;
+  color: rgba(153, 153, 153, 1);
+}
+
+.promotion-popup-container .promotion-popup-close .market {
+  font-size: 25rpx;
+  color: #999;
+}
+
+.promotion-popup-container .promotion-popup-title {
+  height: 100rpx;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.promotion-popup-container .promotion-popup-title {
+  font-size: 32rpx;
+  color: #222427;
+  font-weight: 600;
+}
+
+.promotion-popup-container .promotion-popup-content {
+  min-height: 400rpx;
+  max-height: 600rpx;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.promotion-popup-container .promotion-popup-content .promotion-detail-list {
+  margin: 0 30rpx;
+}
+
+.promotion-popup-container
+  .promotion-popup-content
+  .promotion-detail-list
+  .list-item:last-child {
+  margin-bottom: env(safe-area-inset-bottom);
+  border-bottom: 0;
+  padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
+}
+
+.promotion-popup-container
+  .promotion-popup-content
+  .promotion-detail-list
+  .list-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10rpx 0 28rpx;
+  position: relative;
+  font-size: 24rpx;
+  color: #222427;
+}
+
+.promotion-popup-container
+  .promotion-popup-content
+  .promotion-detail-list
+  .list-item
+  .tag {
+  box-sizing: border-box;
+  font-size: 20rpx;
+  line-height: 32rpx;
+  padding: 2rpx 12rpx;
+  background-color: #ffece9;
+  margin-right: 16rpx;
+  display: inline-flex;
+  color: #fa4126;
+  border-radius: 54rpx;
+  flex-shrink: 0;
+  position: relative;
+  top: 2rpx;
+}
+
+.promotion-popup-container
+  .promotion-popup-content
+  .promotion-detail-list
+  .list-item
+  .content {
+  font-size: 28rpx;
+  color: #222427;
+  flex: 1;
+  line-height: 40rpx;
+  display: flex;
+}
+
+.promotion-popup-container
+  .promotion-popup-content
+  .promotion-detail-list
+  .list-item
+  .content
+  .list-content {
+  width: 440rpx;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.promotion-popup-container
+  .promotion-popup-content
+  .promotion-detail-list
+  .list-item
+  .collect-btn {
+  font-size: 24rpx;
+  flex-shrink: 0;
+  margin-left: 20rpx;
+  display: flex;
+  align-items: center;
+}
+
+.promotion-popup-container
+  .promotion-popup-content
+  .promotion-detail-list
+  .list-item
+  .collect-btn
+  .linkText {
+  margin-right: 8rpx;
+}

mini-program/pages/goods/details/index.js

@@ -0,0 +1,443 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+import { fetchGood } from '../../../services/good/fetchGood';
+import { fetchActivityList } from '../../../services/activity/fetchActivityList';
+import {
+  getGoodsDetailsCommentList,
+  getGoodsDetailsCommentsCount,
+} from '../../../services/good/fetchGoodsDetailsComments';
+
+import { cdnBase } from '../../../config/index';
+
+const imgPrefix = `${cdnBase}/`;
+
+const recLeftImg = `${imgPrefix}common/rec-left.png`;
+const recRightImg = `${imgPrefix}common/rec-right.png`;
+const obj2Params = (obj = {}, encode = false) => {
+  const result = [];
+  Object.keys(obj).forEach((key) =>
+    result.push(`${key}=${encode ? encodeURIComponent(obj[key]) : obj[key]}`),
+  );
+
+  return result.join('&');
+};
+
+Page({
+  data: {
+    commentsList: [],
+    commentsStatistics: {
+      badCount: 0,
+      commentCount: 0,
+      goodCount: 0,
+      goodRate: 0,
+      hasImageCount: 0,
+      middleCount: 0,
+    },
+    isShowPromotionPop: false,
+    activityList: [],
+    recLeftImg,
+    recRightImg,
+    details: {},
+    goodsTabArray: [
+      {
+        name: '商品',
+        value: '', // 空字符串代表置顶
+      },
+      {
+        name: '详情',
+        value: 'goods-page',
+      },
+    ],
+    storeLogo: `${imgPrefix}common/store-logo.png`,
+    storeName: '云mall标准版旗舰店',
+    jumpArray: [
+      {
+        title: '首页',
+        url: '/pages/home/home',
+        iconName: 'home',
+      },
+      {
+        title: '购物车',
+        url: '/pages/cart/index',
+        iconName: 'cart',
+        showCartNum: true,
+      },
+    ],
+    isStock: true,
+    cartNum: 0,
+    soldout: false,
+    buttonType: 1,
+    buyNum: 1,
+    selectedAttrStr: '',
+    skuArray: [],
+    primaryImage: '',
+    specImg: '',
+    isSpuSelectPopupShow: false,
+    isAllSelectedSku: false,
+    buyType: 0,
+    outOperateStatus: false, // 是否外层加入购物车
+    operateType: 0,
+    selectSkuSellsPrice: 0,
+    maxLinePrice: 0,
+    minSalePrice: 0,
+    maxSalePrice: 0,
+    list: [],
+    spuId: '',
+    navigation: { type: 'fraction' },
+    current: 0,
+    autoplay: true,
+    duration: 500,
+    interval: 5000,
+    soldNum: 0, // 已售数量
+  },
+
+  handlePopupHide() {
+    this.setData({
+      isSpuSelectPopupShow: false,
+    });
+  },
+
+  showSkuSelectPopup(type) {
+    this.setData({
+      buyType: type || 0,
+      outOperateStatus: type >= 1,
+      isSpuSelectPopupShow: true,
+    });
+  },
+
+  buyItNow() {
+    this.showSkuSelectPopup(1);
+  },
+
+  toAddCart() {
+    this.showSkuSelectPopup(2);
+  },
+
+  toNav(e) {
+    const { url } = e.detail;
+    wx.switchTab({
+      url: url,
+    });
+  },
+
+  showCurImg(e) {
+    const { index } = e.detail;
+    const { images } = this.data.details;
+    wx.previewImage({
+      current: images[index],
+      urls: images, // 需要预览的图片http链接列表
+    });
+  },
+
+  onPageScroll({ scrollTop }) {
+    const goodsTab = this.selectComponent('#goodsTab');
+    goodsTab && goodsTab.onScroll(scrollTop);
+  },
+
+  chooseSpecItem(e) {
+    const { specList } = this.data.details;
+    const { selectedSku, isAllSelectedSku } = e.detail;
+    if (!isAllSelectedSku) {
+      this.setData({
+        selectSkuSellsPrice: 0,
+      });
+    }
+    this.setData({
+      isAllSelectedSku,
+    });
+    this.getSkuItem(specList, selectedSku);
+  },
+
+  getSkuItem(specList, selectedSku) {
+    const { skuArray, primaryImage } = this.data;
+    const selectedSkuValues = this.getSelectedSkuValues(specList, selectedSku);
+    let selectedAttrStr = ` 件  `;
+    selectedSkuValues.forEach((item) => {
+      selectedAttrStr += `，${item.specValue}  `;
+    });
+    // eslint-disable-next-line array-callback-return
+    const skuItem = skuArray.filter((item) => {
+      let status = true;
+      (item.specInfo || []).forEach((subItem) => {
+        if (
+          !selectedSku[subItem.specId] ||
+          selectedSku[subItem.specId] !== subItem.specValueId
+        ) {
+          status = false;
+        }
+      });
+      if (status) return item;
+    });
+    this.selectSpecsName(selectedSkuValues.length > 0 ? selectedAttrStr : '');
+    if (skuItem) {
+      this.setData({
+        selectItem: skuItem,
+        selectSkuSellsPrice: skuItem.price || 0,
+      });
+    } else {
+      this.setData({
+        selectItem: null,
+        selectSkuSellsPrice: 0,
+      });
+    }
+    this.setData({
+      specImg: skuItem && skuItem.skuImage ? skuItem.skuImage : primaryImage,
+    });
+  },
+
+  // 获取已选择的sku名称
+  getSelectedSkuValues(skuTree, selectedSku) {
+    const normalizedTree = this.normalizeSkuTree(skuTree);
+    return Object.keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
+      const skuValues = normalizedTree[skuKeyStr];
+      const skuValueId = selectedSku[skuKeyStr];
+      if (skuValueId !== '') {
+        const skuValue = skuValues.filter((value) => {
+          return value.specValueId === skuValueId;
+        })[0];
+        skuValue && selectedValues.push(skuValue);
+      }
+      return selectedValues;
+    }, []);
+  },
+
+  normalizeSkuTree(skuTree) {
+    const normalizedTree = {};
+    skuTree.forEach((treeItem) => {
+      normalizedTree[treeItem.specId] = treeItem.specValueList;
+    });
+    return normalizedTree;
+  },
+
+  selectSpecsName(selectSpecsName) {
+    if (selectSpecsName) {
+      this.setData({
+        selectedAttrStr: selectSpecsName,
+      });
+    } else {
+      this.setData({
+        selectedAttrStr: '',
+      });
+    }
+  },
+
+  addCart() {
+    const { isAllSelectedSku } = this.data;
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: isAllSelectedSku ? '点击加入购物车' : '请选择规格',
+      icon: '',
+      duration: 1000,
+    });
+  },
+
+  gotoBuy(type) {
+    const { isAllSelectedSku, buyNum } = this.data;
+    if (!isAllSelectedSku) {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '请选择规格',
+        icon: '',
+        duration: 1000,
+      });
+      return;
+    }
+    this.handlePopupHide();
+    const query = {
+      quantity: buyNum,
+      storeId: '1',
+      spuId: this.data.spuId,
+      goodsName: this.data.details.title,
+      skuId:
+        type === 1 ? this.data.skuList[0].skuId : this.data.selectItem.skuId,
+      available: this.data.details.available,
+      price: this.data.details.minSalePrice,
+      specInfo: this.data.details.specList?.map((item) => ({
+        specTitle: item.title,
+        specValue: item.specValueList[0].specValue,
+      })),
+      primaryImage: this.data.details.primaryImage,
+      spuId: this.data.details.spuId,
+      thumb: this.data.details.primaryImage,
+      title: this.data.details.title,
+    };
+    let urlQueryStr = obj2Params({
+      goodsRequestList: JSON.stringify([query]),
+    });
+    urlQueryStr = urlQueryStr ? `?${urlQueryStr}` : '';
+    const path = `/pages/order/order-confirm/index${urlQueryStr}`;
+    wx.navigateTo({
+      url: path,
+    });
+  },
+
+  specsConfirm() {
+    const { buyType } = this.data;
+    if (buyType === 1) {
+      this.gotoBuy();
+    } else {
+      this.addCart();
+    }
+    // this.handlePopupHide();
+  },
+
+  changeNum(e) {
+    this.setData({
+      buyNum: e.detail.buyNum,
+    });
+  },
+
+  closePromotionPopup() {
+    this.setData({
+      isShowPromotionPop: false,
+    });
+  },
+
+  promotionChange(e) {
+    const { index } = e.detail;
+    wx.navigateTo({
+      url: `/pages/promotion-detail/index?promotion_id=${index}`,
+    });
+  },
+
+  showPromotionPopup() {
+    this.setData({
+      isShowPromotionPop: true,
+    });
+  },
+
+  getDetail(spuId) {
+    Promise.all([fetchGood(spuId), fetchActivityList()]).then((res) => {
+      const [details, activityList] = res;
+      const skuArray = [];
+      const {
+        skuList,
+        primaryImage,
+        isPutOnSale,
+        minSalePrice,
+        maxSalePrice,
+        maxLinePrice,
+        soldNum,
+      } = details;
+      skuList.forEach((item) => {
+        skuArray.push({
+          skuId: item.skuId,
+          quantity: item.stockInfo ? item.stockInfo.stockQuantity : 0,
+          specInfo: item.specInfo,
+        });
+      });
+      const promotionArray = [];
+      activityList.forEach((item) => {
+        promotionArray.push({
+          tag: item.promotionSubCode === 'MYJ' ? '满减' : '满折',
+          label: '满100元减99.9元',
+        });
+      });
+      this.setData({
+        details,
+        activityList,
+        isStock: details.spuStockQuantity > 0,
+        maxSalePrice: maxSalePrice ? parseInt(maxSalePrice) : 0,
+        maxLinePrice: maxLinePrice ? parseInt(maxLinePrice) : 0,
+        minSalePrice: minSalePrice ? parseInt(minSalePrice) : 0,
+        list: promotionArray,
+        skuArray: skuArray,
+        primaryImage,
+        soldout: isPutOnSale === 0,
+        soldNum,
+      });
+    });
+  },
+
+  async getCommentsList() {
+    try {
+      const code = 'Success';
+      const data = await getGoodsDetailsCommentList();
+      const { homePageComments } = data;
+      if (code.toUpperCase() === 'SUCCESS') {
+        const nextState = {
+          commentsList: homePageComments.map((item) => {
+            return {
+              goodsSpu: item.spuId,
+              userName: item.userName || '',
+              commentScore: item.commentScore,
+              commentContent: item.commentContent || '用户未填写评价',
+              userHeadUrl: item.isAnonymity
+                ? this.anonymityAvatar
+                : item.userHeadUrl || this.anonymityAvatar,
+            };
+          }),
+        };
+        this.setData(nextState);
+      }
+    } catch (error) {
+      console.error('comments error:', error);
+    }
+  },
+
+  onShareAppMessage() {
+    // 自定义的返回信息
+    const { selectedAttrStr } = this.data;
+    let shareSubTitle = '';
+    if (selectedAttrStr.indexOf('件') > -1) {
+      const count = selectedAttrStr.indexOf('件');
+      shareSubTitle = selectedAttrStr.slice(count + 1, selectedAttrStr.length);
+    }
+    const customInfo = {
+      imageUrl: this.data.details.primaryImage,
+      title: this.data.details.title + shareSubTitle,
+      path: `/pages/goods/details/index?spuId=${this.data.spuId}`,
+    };
+    return customInfo;
+  },
+
+  /** 获取评价统计 */
+  async getCommentsStatistics() {
+    try {
+      const code = 'Success';
+      const data = await getGoodsDetailsCommentsCount();
+      if (code.toUpperCase() === 'SUCCESS') {
+        const {
+          badCount,
+          commentCount,
+          goodCount,
+          goodRate,
+          hasImageCount,
+          middleCount,
+        } = data;
+        const nextState = {
+          commentsStatistics: {
+            badCount: parseInt(`${badCount}`),
+            commentCount: parseInt(`${commentCount}`),
+            goodCount: parseInt(`${goodCount}`),
+            /** 后端返回百分比后数据但没有限制位数 */
+            goodRate: Math.floor(goodRate * 10) / 10,
+            hasImageCount: parseInt(`${hasImageCount}`),
+            middleCount: parseInt(`${middleCount}`),
+          },
+        };
+        this.setData(nextState);
+      }
+    } catch (error) {
+      console.error('comments statiistics error:', error);
+    }
+  },
+
+  /** 跳转到评价列表 */
+  navToCommentsListPage() {
+    wx.navigateTo({
+      url: `/pages/goods/comments/index?spuId=${this.data.spuId}`,
+    });
+  },
+
+  onLoad(query) {
+    const { spuId } = query;
+    this.setData({
+      spuId: spuId,
+    });
+    this.getDetail(spuId);
+    this.getCommentsList(spuId);
+    this.getCommentsStatistics(spuId);
+  },
+});

mini-program/pages/goods/details/index.json

@@ -0,0 +1,18 @@
+{
+  "navigationBarTitleText": "商品详情",
+  "usingComponents": {
+    "t-image": "/components/webp-image/index",
+    "t-tag": "tdesign-miniprogram/tag/tag",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-rate": "tdesign-miniprogram/rate/rate",
+    "t-swiper": "tdesign-miniprogram/swiper/swiper",
+    "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "price": "/components/price/index",
+    "buy-bar": "./components/buy-bar/index",
+    "promotion-popup": "./components/promotion-popup/index",
+    "goods-specs-popup": "./components/goods-specs-popup/index"
+  }
+}

mini-program/pages/goods/details/index.wxml

@@ -0,0 +1,153 @@
+<view class="goods-detail-page">
+  <view class="goods-head">
+    <t-swiper
+      wx:if="{{details.images.length > 0}}"
+      height="750rpx"
+      current="{{current}}"
+      autoplay="{{autoplay}}"
+      duration="{{duration}}"
+      interval="{{interval}}"
+      navigation="{{navigation}}"
+      list="{{details.images}}"
+    ></t-swiper>
+    <view class="goods-info">
+      <view class="goods-number">
+        <view class="goods-price">
+          <price
+            wr-class="class-goods-price"
+            symbol-class="class-goods-symbol"
+            price="{{minSalePrice}}"
+            type="lighter"
+          />
+          <view class="goods-price-up">起</view>
+          <price wr-class="class-goods-del" price="{{maxLinePrice}}" type="delthrough" />
+        </view>
+        <view class="sold-num">已售{{soldNum}}</view>
+      </view>
+      <view wx:if="{{activityList.length > 0}}" class="goods-activity" bindtap="showPromotionPopup">
+        <view class="tags-container">
+          <view wx:for="{{activityList}}" data-promotionId="{{item.promotionId}}" wx:key="index" wx:if="{{index<4}}">
+            <view class="goods-activity-tag">{{item.tag}}</view>
+          </view>
+        </view>
+        <view class="activity-show">
+          <view class="activity-show-text">领劵</view>
+          <t-icon name="chevron-right" size="42rpx" />
+        </view>
+      </view>
+      <view class="goods-title">
+        <view class="goods-name">{{details.title}}</view>
+        <view class="goods-tag">
+          <t-button open-type="share" t-class="shareBtn" variant="text">
+            <view class="btn-icon">
+              <t-icon name="share" size="40rpx" color="#000" />
+              <view class="share-text">分享</view>
+            </view>
+          </t-button>
+        </view>
+      </view>
+      <view class="goods-intro">{{intro}}</view>
+    </view>
+    <view class="spu-select" bindtap="showSkuSelectPopup">
+      <view class="label">已选</view>
+      <view class="content">
+        <view class="{{!selectedAttrStr ? 'tintColor' : ''}}">
+          {{selectedAttrStr ? buyNum : ''}}{{selectedAttrStr || '请选择'}}
+        </view>
+        <t-icon name="chevron-right" size="40rpx" color="#BBBBBB" />
+      </view>
+    </view>
+    <view wx:if="{{ commentsStatistics.commentCount > 0 }}" class="comments-wrap">
+      <view class="comments-head" bindtap="navToCommentsListPage">
+        <view class="comments-title-wrap">
+          <view class="comments-title-label">商品评价</view>
+          <view class="comments-title-count"> ({{ commentsStatistics.commentCount }}) </view>
+        </view>
+        <view class="comments-rate-wrap">
+          <view class="comments-good-rate">{{commentsStatistics.goodRate}}% 好评</view>
+          <t-icon name="chevron-right" size="40rpx" color="#BBBBBB" />
+        </view>
+      </view>
+      <view class="comment-item-wrap" wx:for="{{ commentsList }}" wx:for-item="commentItem" wx:key="goodsSpu">
+        <view class="comment-item-head">
+          <t-image src="{{commentItem.userHeadUrl}}" t-class="comment-item-avatar" />
+          <view class="comment-head-right">
+            <view class="comment-username">{{commentItem.userName}}</view>
+            <t-rate
+              value="{{ commentItem.commentScore }}"
+              count="{{5}}"
+              size="12"
+              gap="2"
+              color="{{['#ffc51c', '#ddd']}}"
+            />
+          </view>
+        </view>
+        <view class="comment-item-content"> {{commentItem.commentContent}} </view>
+      </view>
+    </view>
+  </view>
+  <view class="desc-content">
+    <view class="desc-content__title" wx:if="{{details.desc.length > 0}}">
+      <t-image t-class="img" src="{{recLeftImg}}" />
+      <span class="desc-content__title--text">详情介绍</span>
+      <t-image t-class="img" src="{{recRightImg}}" />
+    </view>
+    <view wx:if="{{details.desc.length > 0}}" wx:for="{{details.desc}}" wx:key="index">
+      <t-image t-class="desc-content__img" src="{{item}}" mode="widthFix" />
+    </view>
+  </view>
+  <view class="goods-bottom-operation">
+    <buy-bar
+      jumpArray="{{jumpArray}}"
+      soldout="{{soldout}}"
+      isStock="{{isStock}}"
+      shopCartNum="{{cartNum}}"
+      buttonType="{{buttonType}}"
+      bind:toAddCart="toAddCart"
+      bind:toNav="toNav"
+      bind:toBuyNow="buyItNow"
+      class="goods-details-card"
+    />
+  </view>
+  <goods-specs-popup
+    id="goodsSpecsPopup"
+    show="{{isSpuSelectPopupShow}}"
+    title="{{details.title || ''}}"
+    src="{{specImg ? specImg : primaryImage}}"
+    specList="{{details.specList || []}}"
+    skuList="{{skuArray}}"
+    limitBuyInfo="{{details.limitInfo[0].text || ''}}"
+    bind:closeSpecsPopup="handlePopupHide"
+    bind:change="chooseSpecItem"
+    bind:changeNum="changeNum"
+    bind:addCart="addCart"
+    bind:buyNow="gotoBuy"
+    bind:specsConfirm="specsConfirm"
+    isStock="{{isStock}}"
+    outOperateStatus="{{outOperateStatus}}"
+  >
+    <view slot="goods-price">
+      <view class="popup-sku__price">
+        <price
+          wx:if="{{!isAllSelectedSku || (!promotionSubCode && isAllSelectedSku)}}"
+          price="{{selectSkuSellsPrice ? selectSkuSellsPrice : minSalePrice }}"
+          wr-class="popup-sku__price-num"
+          symbol-class="popup-sku__price-symbol"
+        />
+        <price
+          wx:if="{{selectSkuSellsPrice === 0 && minSalePrice !== maxSalePrice && !isAllSelectedSku}}"
+          price="{{maxSalePrice}}"
+          wr-class="popup-sku__price-del"
+          type="delthrough"
+        />
+      </view>
+    </view>
+  </goods-specs-popup>
+  <promotion-popup
+    list="{{list}}"
+    bind:closePromotionPopup="closePromotionPopup"
+    show="{{isShowPromotionPop}}"
+    bind:promotionChange="promotionChange"
+  />
+</view>
+<t-toast id="t-toast" />

mini-program/pages/goods/details/index.wxss

@@ -0,0 +1,342 @@
+@import '../../../style/global.wxss';
+page {
+  width: 100vw;
+}
+
+.goods-detail-page .goods-info {
+  margin: 0 auto;
+  padding: 26rpx 0 28rpx 30rpx;
+  background-color: #fff;
+}
+
+.goods-detail-page .swipe-img {
+  width: 100%;
+  height: 750rpx;
+}
+
+.goods-detail-page .goods-info .goods-price {
+  display: flex;
+  align-items: baseline;
+}
+
+.goods-detail-page .goods-info .goods-price-up {
+  color: #fa4126;
+  font-size: 28rpx;
+  position: relative;
+  bottom: 4rpx;
+  left: 8rpx;
+}
+
+.goods-detail-page .goods-info .goods-price .class-goods-price {
+  font-size: 64rpx;
+  color: #fa4126;
+  font-weight: bold;
+  font-family: DIN Alternate;
+}
+
+.goods-detail-page .goods-info .goods-price .class-goods-symbol {
+  font-size: 36rpx;
+  color: #fa4126;
+}
+
+.goods-detail-page .goods-info .goods-price .class-goods-del {
+  position: relative;
+  font-weight: normal;
+  left: 16rpx;
+  bottom: 2rpx;
+  color: #999999;
+  font-size: 32rpx;
+}
+
+.goods-detail-page .goods-info .goods-number {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.goods-detail-page .goods-info .goods-number .sold-num {
+  font-size: 24rpx;
+  color: #999999;
+  display: flex;
+  align-items: flex-end;
+  margin-right: 32rpx;
+}
+
+.goods-detail-page .goods-info .goods-activity {
+  display: flex;
+  margin-top: 16rpx;
+  justify-content: space-between;
+}
+
+.goods-detail-page .goods-info .goods-activity .tags-container {
+  display: flex;
+}
+
+.goods-detail-page .goods-info .goods-activity .tags-container .goods-activity-tag {
+  background: #ffece9;
+  color: #fa4126;
+  font-size: 24rpx;
+  margin-right: 16rpx;
+  padding: 4rpx 8rpx;
+  border-radius: 4rpx;
+}
+
+.goods-detail-page .goods-info .goods-activity .activity-show {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fa4126;
+  font-size: 24rpx;
+  padding-right: 32rpx;
+}
+
+.goods-detail-page .goods-info .goods-activity .activity-show-text {
+  line-height: 42rpx;
+}
+
+.goods-detail-page .goods-info .goods-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.goods-detail-page .goods-info .goods-title .goods-name {
+  width: 600rpx;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: 32rpx;
+  word-break: break-all;
+  color: #333333;
+}
+
+.goods-detail-page .goods-info .goods-title .goods-tag {
+  width: 104rpx;
+  margin-left: 26rpx;
+}
+
+.goods-detail-page .goods-info .goods-title .goods-tag .shareBtn {
+  border-radius: 200rpx 0px 0px 200rpx;
+  width: 100rpx;
+  height: 96rpx;
+  border: none;
+  padding-right: 36rpx !important;
+}
+
+.goods-detail-page .goods-info .goods-title .goods-tag .shareBtn::after {
+  border: none;
+}
+
+.goods-detail-page .goods-info .goods-title .goods-tag .btn-icon {
+  font-size: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 96rpx;
+  color: #999;
+}
+
+.goods-detail-page .goods-info .goods-title .goods-tag .btn-icon .share-text {
+  padding-top: 8rpx;
+  font-size: 20rpx;
+  line-height: 24rpx;
+}
+
+.goods-detail-page .goods-info .goods-intro {
+  font-size: 26rpx;
+  color: #888;
+  line-height: 36rpx;
+  word-break: break-all;
+  padding-right: 30rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  overflow: hidden;
+}
+
+.spu-select {
+  height: 80rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+  display: flex;
+  align-items: center;
+  padding: 30rpx;
+  font-size: 28rpx;
+}
+
+.spu-select .label {
+  margin-right: 30rpx;
+  text-align: center;
+  flex-shrink: 0;
+  color: #999999;
+  font-weight: normal;
+}
+
+.spu-select .content {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.spu-select .content .tintColor {
+  color: #aaa;
+}
+
+.goods-detail-page .desc-content {
+  margin-top: 20rpx;
+  background-color: #fff;
+  padding-bottom: 120rpx;
+}
+
+.goods-detail-page .desc-content__title {
+  font-size: 28rpx;
+  line-height: 36rpx;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx 20rpx;
+}
+
+.goods-detail-page .desc-content__title .img {
+  width: 206rpx;
+  height: 10rpx;
+}
+
+.goods-detail-page .desc-content__title--text {
+  font-size: 26rpx;
+  margin: 0 32rpx;
+  font-weight: 600;
+}
+
+.goods-detail-page .desc-content__img {
+  width: 100%;
+  height: auto;
+}
+
+.goods-bottom-operation {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #fff;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.popup-sku-header .popup-sku-header__goods-info .popup-sku__price {
+  display: flex;
+  align-items: baseline;
+  color: #fa4126;
+  margin-top: 48rpx;
+}
+
+.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-num {
+  font-size: 64rpx;
+  color: #fa4126;
+  font-weight: bold;
+  font-family: DIN Alternate;
+}
+
+.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-del {
+  position: relative;
+  font-weight: normal;
+  left: 12rpx;
+  bottom: 2rpx;
+  color: #999999;
+  font-size: 32rpx;
+}
+
+.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-symbol {
+  font-size: 36rpx;
+  color: #fa4126;
+}
+
+.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-max-num {
+  font-size: 48rpx;
+}
+
+.goods-detail-page .goods-head {
+  --td-swiper-radius: 0;
+}
+
+.t-toast__content {
+  z-index: 12000 !important;
+}
+
+.comments-wrap {
+  margin-top: 20rpx;
+  padding: 32rpx;
+  background-color: #fff;
+}
+
+.comments-wrap .comments-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.comments-wrap .comments-head .comments-title-wrap {
+  display: flex;
+}
+
+.comments-title-label,
+.comments-title-count {
+  color: #333333;
+  font-size: 32rpx;
+  font-weight: 500;
+  line-height: 48rpx;
+}
+
+.comments-rate-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+}
+
+.comments-rate-wrap .comments-good-rate {
+  color: #999999;
+  font-size: 26rpx;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 36rpx;
+}
+
+.comment-item-wrap .comment-item-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 32rpx;
+}
+
+.comment-item-wrap .comment-item-head .comment-item-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 64rpx;
+}
+
+.comment-item-wrap .comment-item-head .comment-head-right {
+  margin-left: 24rpx;
+}
+
+.comment-head-right .comment-username {
+  font-size: 26rpx;
+  color: #333333;
+  line-height: 36rpx;
+  font-weight: 400;
+}
+
+.comment-item-wrap .comment-item-content {
+  margin-top: 20rpx;
+  color: #333333;
+  line-height: 40rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+}