1

miniprogram/pages/select-goods/index.less

@@ -4,6 +4,8 @@
   height: 100vh;
   width: 100%;
   background: #F5F6F7;
+  display: flex;
+  flex-direction: column;
 }
 
 .top-bar {
@@ -16,189 +18,370 @@
   width: 100%;
 }
 
-.goods-section {
-  .popup-container {
-    // position: fixed;
-    // bottom: 0;
-    // left: 0;
-    // right: 0;
-    // z-index: 10;
-    width: 100%;
-    background: #FFFFFF;
-    border-radius: 32rpx 32rpx 0rpx 0rpx;
-    // padding: 40rpx 0 0;
-    box-sizing: border-box;
-    // flex: 1;
-    max-height: 86vh;
+.section-block {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  border-radius: 32rpx 32rpx 0rpx 0rpx;
+  margin-top: 100rpx;
+  flex: 1 auto;
+  display: flex;
+  flex-direction: column;
+}
 
-    .popup-scroll {
-      overflow-x: hidden;
-      overflow-y: scroll;
-      border-radius: 32rpx 32rpx 0rpx 0rpx;
-      flex: 1 auto;
-    }
+.select-good-section {
+  display: flex;
+  // align-items: center;
+  margin-top: -100rpx;
 
-    .top-vip-img {
+  .select-good-img {
+    width: 222rpx;
+    height: 222rpx;
+    padding-left: 10rpx;
+
+    image {
       width: 100%;
+      height: 100%;
     }
+  }
 
-    .goodsInfo {
-      padding: 0 40rpx 48rpx;
+  .good-info {
+    position: relative;
+    flex: 1;
+
+    .img_back {
+      position: absolute;
+      bottom: 42rpx;
+      right: 4rpx;
+      padding: 20rpx;
+      width: 32rpx;
+      height: 20rpx;
     }
   }
 
+  .good-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 400rpx;
+    font-weight: 600;
+    font-size: 32rpx;
+    color: #000000;
+    line-height: 44rpx;
 
-  .product-section {
+    padding-top: 42rpx;
+  }
+
+  .good-price {
     display: flex;
-    padding-bottom: 60rpx;
+    align-items: flex-end;
+    // line-height: 70rpx;
+    padding-top: 36rpx;
 
-    .product-img {
-      width: 160rpx;
-      height: 160rpx;
+    .desc {
+      font-size: 28rpx;
+      color: #777;
+      line-height: 40rpx;
       flex-shrink: 0;
-      margin-right: 32rpx;
-      border-radius: 6px;
-      overflow: hidden;
-
-      image {
-        width: 100%;
-        height: 100%;
-      }
     }
 
-    .product-left {
+    .currentPrice {
+      font-weight: bold;
+      color: #FE4600;
+      font-family: DINAlternate, DINAlternate;
       display: flex;
-      align-items: flex-start;
+      align-items: flex-end;
 
-      .currentPrice {
-        font-weight: bold;
-        color: #FE2451;
-        font-family: DINAlternate, DINAlternate;
-
-        .stuff {
-          padding-right: 2rpx;
-          font-size: 36rpx;
-        }
-
-        .priceZ {
-          font-size: 60rpx;
-        }
+      .stuff {
+        font-size: 32rpx;
+        padding: 0 4rpx;
+      }
 
-        .priceF {
-          font-size: 36rpx;
-        }
+      .priceZ {
+        font-size: 48rpx;
+        line-height: 1;
       }
 
-      .originPrice {
-        padding-left: 16rpx;
+      .priceF {
         font-size: 32rpx;
-        color: #AAAAAA;
-        line-height: 44rpx;
-        text-decoration: line-through;
-        padding-top: 32rpx;
       }
     }
+
+    .line {
+      margin: 0 12rpx 8rpx;
+      background-color: #AAAAAA;
+      width: 2rpx;
+      height: 20rpx;
+    }
+
+    .discountPrice {
+      padding-bottom: 2rpx;
+      font-size: 24rpx;
+      color: #AAAAAA;
+    }
+  }
+}
+
+// .goods-section {
+//   display: flex;
+//   flex-direction: column;
+//   flex: 1 auto;
+.popup-container {
+  width: 100%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  width: 100%;
+  flex: 1;
+  overflow-y: auto;
+  // max-height: 86vh;
+
+  // .popup-scroll {
+  //   overflow-x: hidden;
+  //   overflow-y: scroll;
+  //   border-radius: 32rpx 32rpx 0rpx 0rpx;
+  //   flex: 1 auto;
+  // }
+
+  .top-vip-img {
+    width: 100%;
   }
 
   .goodsInfo {
-    flex-direction: column;
+    padding: 0 24rpx 40rpx;
+  }
+}
+
+
+.product-section {
+  display: flex;
+  padding-bottom: 60rpx;
+
+  .product-img {
+    width: 160rpx;
+    height: 160rpx;
+    flex-shrink: 0;
+    margin-right: 32rpx;
+    border-radius: 6px;
+    overflow: hidden;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .product-left {
+    display: flex;
     align-items: flex-start;
-    padding-bottom: 90rpx;
 
-    .desc {
-      font-weight: 600;
-      font-size: 30rpx;
-      color: #000000;
-      line-height: 40rpx;
-      display: flex;
-      align-items: center;
+    .currentPrice {
+      font-weight: bold;
+      color: #FE2451;
+      font-family: DINAlternate, DINAlternate;
 
-      .iconBefore {
-        width: 18rpx;
-        height: 28rpx;
-        margin-right: 8rpx;
+      .stuff {
+        padding-right: 2rpx;
+        font-size: 36rpx;
       }
 
-      text {
-        padding-left: 8rpx;
-        font-size: 28rpx;
-        color: #AAAAAA;
-        line-height: 40rpx;
+      .priceZ {
+        font-size: 60rpx;
+      }
+
+      .priceF {
+        font-size: 36rpx;
       }
     }
 
-    .goodsList {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
+    .originPrice {
+      padding-left: 16rpx;
+      font-size: 32rpx;
+      color: #AAAAAA;
+      line-height: 44rpx;
+      text-decoration: line-through;
+      padding-top: 32rpx;
     }
+  }
+}
 
-    .goodsItem {
-      background: rgba(255, 255, 255, 0.7);
-      border-radius: 12rpx;
-      border: 4rpx solid rgba(255, 255, 255, 0.7);
-      padding: 10rpx;
-      margin-right: 16rpx;
-      font-weight: 600;
-      font-size: 24rpx;
-      color: #131415;
-      position: relative;
-      margin-top: 24rpx;
-      display: flex;
-      align-items: center;
+.goodsInfo {
+  flex-direction: column;
+  align-items: flex-start;
+  padding-bottom: 90rpx;
 
-      &.selected {
-        border: 4rpx solid #FE4600;
-      }
+  .desc {
+    font-weight: 600;
+    font-size: 30rpx;
+    color: #000000;
+    line-height: 40rpx;
+    display: flex;
+    align-items: center;
+
+    .iconBefore {
+      width: 18rpx;
+      height: 28rpx;
+      margin-right: 8rpx;
+    }
+
+    text {
+      padding-left: 8rpx;
+      font-size: 28rpx;
+      color: #AAAAAA;
+      line-height: 40rpx;
+    }
+  }
+
+  .tips {
+    padding-top: 8rpx;
+    padding-bottom: 24rpx;
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 34rpx;
+  }
+
+  .goodsList {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .goodsItem {
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 12rpx;
+    border: 4rpx solid rgba(255, 255, 255, 0.7);
+    padding: 10rpx;
+    margin-right: 16rpx;
+    font-weight: 600;
+    font-size: 24rpx;
+    color: #131415;
+    position: relative;
+    margin-top: 24rpx;
+    display: flex;
+    align-items: center;
 
-      &.nosale {
-        background: #F4F4F5;
-        color: #B1B1B1;
+    &.selected {
+      border: 4rpx solid #FE4600;
+    }
+
+    &.nosale {
+      background: #F4F4F5;
+      color: #B1B1B1;
+    }
+
+    .goodImg {
+      flex-shrink: 1;
+      width: 64rpx;
+      height: 64rpx;
+      margin-right: 10rpx;
+    }
+
+    .infos {
+      .name {
+        line-height: 28rpx;
       }
 
-      .goodImg {
-        flex-shrink: 1;
-        width: 64rpx;
-        height: 64rpx;
-        margin-right: 10rpx;
+      .price {
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 24rpx;
+        color: #FE4600;
       }
+    }
 
-      .infos {
-        .name {
-          line-height: 28rpx;
-        }
+    .nosale {
+      position: absolute;
+      top: -20rpx;
+      right: -16rpx;
+      width: 56rpx;
+      height: 28rpx;
+      display: block;
+      z-index: 1;
+    }
+  }
 
-        .price {
-          font-family: DINAlternate, DINAlternate;
+
+  .instrument-item {
+    padding: 12rpx 30rpx;
+    display: flex;
+    align-items: center;
+    background: #F8F8F8;
+    border-radius: 12rpx;
+    border: 4rpx solid #f8f8f8;
+    margin-bottom: 24rpx;
+
+    &.selected {
+      border: 4rpx solid #FE4600;
+    }
+
+    .checkbox {
+      width: 32rpx;
+      height: 32rpx;
+      flex-shrink: 0;
+    }
+
+    .instrument-img {
+      width: 104rpx;
+      height: 104rpx;
+      flex-shrink: 0;
+      margin: 0 6rpx 0 26rpx;
+    }
+
+    .instrment-info {
+      .prices {
+        display: flex;
+        align-items: flex-end;
+
+        .currentPrice {
           font-weight: bold;
-          font-size: 24rpx;
           color: #FE4600;
+          font-family: DINAlternate, DINAlternate;
+          display: flex;
+          align-items: flex-end;
+
+          .stuff {
+            font-size: 32rpx;
+            padding: 0 4rpx;
+          }
+
+          .priceZ {
+            font-size: 48rpx;
+            line-height: 1;
+          }
+
+          .priceF {
+            font-size: 32rpx;
+          }
         }
-      }
 
-      .nosale {
-        position: absolute;
-        top: -20rpx;
-        right: -16rpx;
-        width: 56rpx;
-        height: 28rpx;
-        display: block;
-        z-index: 1;
+        .line {
+          margin: 0 12rpx 8rpx;
+          background-color: #AAAAAA;
+          width: 2rpx;
+          height: 20rpx;
+        }
+
+        .discountPrice {
+          padding-bottom: 2rpx;
+          font-size: 24rpx;
+          color: #AAAAAA;
+        }
       }
     }
   }
+}
 
 
 
-  button {
-    width: 100%;
-    line-height: 88rpx;
-    background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%);
-    border-radius: 44rpx;
-    font-weight: 500;
-    font-size: 32rpx;
-    color: #FFFFFF;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
+button {
+  width: 100%;
+  line-height: 88rpx;
+  background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%);
+  border-radius: 44rpx;
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #FFFFFF;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+// }

miniprogram/pages/select-goods/index.wxml

@@ -3,60 +3,97 @@
   <navigation-bar title=" " background="transparent" back="{{ false }}"></navigation-bar>
   <view class="top-bar"></view>
 
-  <view class="select-good-section">
+  <view class="section-block">
+    <view class="select-good-section">
+      <view class="select-good-img">
+        <image src="{{ selected.pic }}"></image>
+      </view>
+      <view class="good-info">
+        <view class="good-name">{{ selected.name }}</view>
+        <view class="good-price">
+          <!-- <view class="desc">共计</view> -->
+          <view class="currentPrice">
+            <text class="stuff">¥</text>
+            <text class="priceZ">{{ formatSelectGood.integerPart }}</text>
+            <text class="priceF">.{{ formatSelectGood.decimalPart }}</text>
+          </view>
+          <text class="line"></text>
+          <text class="discountPrice">优惠 ¥{{ formatSelectGood.discountPrice }}</text>
+        </view>
 
-  </view>
+        <image class="img_back" bind:tap="onBack" src="./images/icon-back.png"></image>
+      </view>
+    </view>
 
-  <view class="goods-section">
     <scroll-view class="popup-container" bounces="false" scroll-y="true" type="list">
       <view class="popup-scroll">
-        <view class="goodsInfo">
-          <view class="desc">
-            <image src="./images/icon2.png" class="iconBefore"></image>选择规格（{{ list.length }}）</view>
-          <view class="goodsList">
-            <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">
-              <image class="goodImg" src="{{ item.pic }}"></image>
-              <view class="infos">
-                <view class="name">{{ item.typeName }}</view>
-                <view class="price">￥<text>{{ item.showSalePrice }}</text></view>
+        <!-- <view class="goodsInfo">
+            <view class="desc">
+              <image src="./images/icon2.png" class="iconBefore"></image>选择规格（{{ list.length }}）
+            </view>
+            <view class="goodsList">
+              <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">
+                <image class="goodImg" src="{{ item.pic }}"></image>
+                <view class="infos">
+                  <view class="name">{{ item.typeName }}</view>
+                  <view class="price">￥<text>{{ item.showSalePrice }}</text></view>
+                </view>
+                <image class="nosale" wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
               </view>
-              <image class="nosale" wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
             </view>
+          </view> -->
+
+        <view class="goodsInfo">
+          <view class="desc">
+            <image src="./images/icon2.png" class="iconBefore"></image>选择乐器（{{ instrumentList.length }}）
           </view>
-        </view>
+          <view class="tips">乐器图片仅供参考，实际产品以实物为准</view>
 
-        <!-- <view class="goodsInfo">
-          <view class="desc"><image src="./images/icon2.png" class="iconBefore"></image>选择乐器（{{ instrumentList.length }}）</view>
-          <view class="goodsList">
-            <view wx:for="{{ instrumentList }}" wx:key="index" class="goodsItem {{ item.id == selectInstrumentId ? 'selected' : '' }}" bind:tap="onSelectInstrument" data-id="{{ item.id }}">
-              {{ item.name }} <text>¥{{ item.showSalePrice }}</text>
+          <view class="goodsInstrument">
+            <view class="instrument-item {{ item.id == selectInstrumentId ? 'selected' : '' }}" wx:for="{{ instrumentList }}" wx:key="index" bind:tap="onSelectInstrument" data-id="{{ item.id }}">
+              <image class="checkbox" src="./images/icon-default.png"></image>
+
+              <image class="instrument-img" src="{{ item.pic }}"></image>
+
+              <view class="instrment-info">
+                <view class="name">{{ item.name }}</view>
+                <view class="prices">
+                  <view class="currentPrice">
+                    <text class="stuff">¥</text>
+                    <text class="priceZ">{{ formatSelectGood.integerPart }}</text>
+                    <text class="priceF">.{{ formatSelectGood.decimalPart }}</text>
+                  </view>
+                  <text class="line"></text>
+                  <text class="discountPrice">优惠前 ¥{{ formatSelectGood.discountPrice }}</text>
+                </view>
+              </view>
             </view>
           </view>
-        </view> -->
+        </view>
       </view>
-      <view style="padding-bottom: 300rpx;"></view>
-      <view class="popupBottom">
-        <!-- 有选择商品的时候 -->
-        <view class="current-item" wx:if="{{!isOverSaled && selected.id}}">
-          <!-- <view class="current-item-text">您已选择：</view> -->
-          <view class="current-top">
-            共计 <view class="prices"><text class="stuff">¥</text>
-              <text class="priceZ">{{ formatSelectGood.integerPart || 0 }}</text>
-              <text class="priceF">.{{ formatSelectGood.decimalPart || '00' }}</text>
-            </view>
-            <text class="line">|</text>原价 ¥ {{ formatSelectGood.originalPrice }}
-            <block wx:if="{{ formatSelectGood.originalPrice > formatSelectGood.salePrice }}">
-              <text class="line">|</text>
-              <text>优惠 ¥ {{ formatSelectGood.discountPrice }}</text>
-            </block>
-          </view>
 
-          <view class="current-select-text">已选：{{ formatSelectGood.typeName }}</view>
-        </view>
-        <view class="btnGroup">
-          <button type="primary" catch:tap="onSubmit">立即享受专属权益</button>
+    </scroll-view>
+    <view class="popupBottom">
+      <!-- 有选择商品的时候 -->
+      <view class="current-item" wx:if="{{!isOverSaled && selected.id}}">
+        <!-- <view class="current-item-text">您已选择：</view> -->
+        <view class="current-top">
+          共计 <view class="prices"><text class="stuff">¥</text>
+            <text class="priceZ">{{ formatSelectGood.integerPart || 0 }}</text>
+            <text class="priceF">.{{ formatSelectGood.decimalPart || '00' }}</text>
+          </view>
+          <text class="line">|</text>原价 ¥ {{ formatSelectGood.originalPrice }}
+          <block wx:if="{{ formatSelectGood.originalPrice > formatSelectGood.salePrice }}">
+            <text class="line">|</text>
+            <text>优惠 ¥ {{ formatSelectGood.discountPrice }}</text>
+          </block>
         </view>
+
+        <view class="current-select-text">已选：{{ formatSelectGood.typeName }}</view>
       </view>
-    </scroll-view>
+      <view class="btnGroup">
+        <button type="primary" catch:tap="onSubmit">立即享受专属权益</button>
+      </view>
+    </view>
   </view>
 </view>