小程序：商品详情

htmldev/wxMini/pages/goodsDetail/goodsDetail.js

@@ -7,11 +7,11 @@ Page({
     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
     nav: [
       {
-        name: '详情',
+        name: '描述',
         value: '1'
       },
       {
-        name: '产品',
+        name: '供应商',
         value: '2'
       }
     ],
@@ -72,5 +72,14 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  handleNav(e) {
+    const { item } = e.target.dataset
+
+    if (item.value) {
+      this.setData({
+        currentNav: item.value
+      })
+    }
   }
 })

htmldev/wxMini/pages/goodsDetail/goodsDetail.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "goods-item": "../../components/goods-item"
+  }
+}

htmldev/wxMini/pages/goodsDetail/goodsDetail.scss

@@ -20,5 +20,227 @@
 }
 
 .main-information {
+  display: flex;
+  flex-direction: column;
   width: 658rpx;
+  padding: 32rpx 0 0 0;
+  margin: 0 auto;
+
+  .tag-list {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+
+    text {
+      min-width: 64rpx;
+      height: 34rpx;
+      border-radius: 10rpx;
+      background: rgba(76, 173, 115, 0.2);
+      line-height: 34rpx;
+      font-size: 20rpx;
+      color: rgba(76, 173, 115, 1);
+      text-align: center;
+    }
+  }
+
+  .name {
+    margin-top: 30rpx;
+    font-size: 48rpx;
+    color: rgba(51, 51, 51, 1)
+  }
+
+  .unit-price {
+    display: flex;
+    align-items: center;
+    margin-top: 30rpx;
+  }
+
+  .price {
+    font-size: 36rpx;
+    line-height: 42rpx;
+    color: rgba(255, 76, 44, 1);
+  }
+
+  .unit {
+    margin-left: 28rpx;
+    font-size: 28rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+}
+
+
+.nav-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
+}
+
+.nav-wrap view {
+  flex: 1;
+  padding: 44rpx 0 24rpx;
+  line-height: 40rpx;
+  font-size: 28rpx;
+  color: rgba(51, 51, 51, 1);
+  text-align: center;
+}
+
+.nav-wrap view.active {
+  position: relative;
+  left: 0;
+  top: 0;
+  color: rgba(145, 179, 121, 1);
+}
+
+.nav-wrap view.active:after {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  content: '';
+  width: 162rpx;
+  height: 8rpx;
+  border-radius: 40rpx 40rpx 0 0;
+  background: rgba(145, 179, 121, 1);
+  transform: translateX(-50%);
+}
+
+.business-info {
+  display: flex;
+  flex-direction: column;
+  padding: 44rpx 0 276rpx 46rpx;
+
+  .introduce {
+    width: 636rpx;
+    line-height: 40rpx;
+    font-size: 26rpx;
+    color: rgba(153, 153, 153, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  .subtitle {
+    margin-top: 36rpx;
+    font-size: 28rpx;
+    line-height: 36rpx;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  .date {
+    margin-top: 26rpx;
+    font-size: 28rpx;
+    line-height: 36rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+}
+
+.goods-scroll {
+  width: 100%;
+  height: 136px;
+  white-space: nowrap;
+  font-size: 0;
+
+  .item {
+    display: inline-block;
+    padding-left: 20rpx;
+
+    &:nth-of-type(1) {
+      padding-left: 0;
+    }
+
+    & > view {
+      display: flex;
+      align-items: center;
+      width: 412rpx;
+      border-radius: 20rpx;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
+      overflow: hidden;
+    }
+  }
+
+  .photo {
+    width: 168rpx;
+    height: 126rpx;
+
+    image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: pink;
+    }
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    margin-left: 18rpx;
+  }
+
+  .name {
+    font-size: 26rpx;
+    font-weight: 700;
+    line-height: 36rpx;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  .unit-price {
+    display: flex;
+    align-items: center;
+    margin-top: 2rpx;
+  }
+
+  .price {
+    font-size: 22rpx;
+    line-height: 42rpx;
+    font-weight: 700;
+    color: rgba(255, 76, 44, 1);
+  }
+
+  .unit {
+    margin-left: 10rpx;
+    font-size: 16rpx;
+    line-height: 26rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+}
+
+.fixed-bottom {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 46rpx;
+  z-index: 99;
+
+  &:after {
+    display: block;
+    content: '';
+    width: 100%;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  & > view {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 30rpx;
+  }
+
+  button {
+    width: 328rpx;
+    height: 98rpx;
+    border-radius: 88rpx;
+    box-shadow: 0 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
+    font-size: 32rpx;
+    font-weight: 500;
+
+    &:nth-of-type(2) {
+      margin-left: 17rpx;
+    }
+  }
+
+  button[type='primary'] {
+    background-color: rgba(145, 179, 121, 1);
+  }
 }

htmldev/wxMini/pages/goodsDetail/goodsDetail.wxml

@@ -18,9 +18,84 @@
   <view class="tag-list">
     <text>蔬菜</text>
   </view>
-  <text selectable>桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李桃形李</text>
+  <text
+    class="name"
+    selectable>名字</text>
   <view class="unit-price">
     <text class="price">¥23.00</text>
     <text class="unit">/ kg</text>
   </view>
 </view>
+<view class="nav-wrap">
+  <view
+    class="{{currentNav === item.value ? 'active' : ''}}"
+    wx:for="{{nav}}"
+    wx:key="value"
+    data-item="{{item}}"
+    bind:tap="handleNav">{{item.name}}
+  </view>
+</view>
+  <!--描述-->
+<view
+  class="business-info"
+  hidden="{{currentNav === '2'}}">
+  <text class="introduce" user-select>一段描述</text>
+  <block wx:if="{{false}}">
+    <view class="subtitle">预计上架时间</view>
+    <view class="date">2022年09月10日</view>
+  </block>
+  <block wx:if="{{true}}">
+    <view class="subtitle">相关产品</view>
+    <scroll-view
+      class="goods-scroll"
+      scroll-x>
+      <view
+        class="item"
+        wx:for="{{[1, 2, 3, 4]}}"
+        wx:key="item">
+        <view>
+          <view class="photo">
+            <image src=""></image>
+          </view>
+          <view class="info">
+            <text
+              class="name"
+              selectable>名字</text>
+            <view class="unit-price">
+              <text class="price">¥23.00</text>
+              <text class="unit">/ kg</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </block>
+</view>
+  <!-- todo 供应商-->
+<view
+  class="business-info"
+  hidden="{{currentNav === '1'}}">
+  供应商
+</view>
+
+<view
+  class="fixed-bottom"
+  hidden="{{currentNav === '2'}}">
+  <view>
+    <button
+      class="btn-collection"
+      type="primary"
+      wx:if="{{false}}">收藏预售产品
+    </button>
+    <block wx:if="{{true}}">
+      <button
+        class="btn-collection"
+        type="primary">添加购物车
+      </button>
+      <button
+        class="btn-collection"
+        type="primary">添加收藏夹
+      </button>
+    </block>
+  </view>
+</view>