首页和 show product 的样式改进，首页加入category分类，需要后端代码的更新

pages/index/index.js

@@ -2,6 +2,7 @@ const product = require('../../utils/product.js')
 
 Page({
   data: {
+    categories: [2,6,7],
     items: [],
     slides: [],
     navs: [{icon: "../../images/1.png", name: "资产"},

pages/index/index.wxml

@@ -19,18 +19,32 @@
       </block>
     </view>
 
-    <block wx:for="{{items}}" wx:for-item="item">
-      <view class="item" bindtap="bindShowProduct" data-id="{{item.id}}">
-        <view class="image">
-          <image class="head-img" src="{{item['image-url']}}" mode="aspectFit"></image>
-        </view>
-        <view class="item-right">
-          <view class="title">
-            <text> {{item.name}} </text>
-          </view>
-          <text class="price"> ¥{{item.price}} </text>
+    <block wx:for="{{categories}}" wx:for-item="category">
+      <!-- 首个循环 -->
+      <view class="separate"></view>
+
+      <view>
+        <view class="category-title">
+          <view class="icon"><image src="../../images/1.png"></image></view>
+          <view><text class="name">新品上市</text></view>
         </view>
+        <block wx:for="{{items}}" wx:for-item="item">
+          <view wx:if="{{category === item['category-id']}}">
+            <view class="item" bindtap="bindShowProduct" data-id="{{item.id}}">
+              <view class="image">
+                <image class="head-img" src="{{item['image-url']}}" mode="aspectFit"></image>
+              </view>
+              <view class="item-right">
+                <view class="title"><text> {{item.name}} </text></view>
+                <view class="desc"><text> {{item.desc || '私人稻田精品礼盒'}} </text></view>
+                <!--<text class="price"> ¥{{item.price}} </text>-->
+                <view class="buy-now"><text class="inline">立即购买</text></view>
+              </view>
+            </view>
+          </view>              
+        </block>
       </view>
+
     </block>
   </scroll-view>
 </view>

pages/index/index.wxss

@@ -22,9 +22,29 @@
 
 .nav-item text {
   padding-top: 20rpx;
+  font-size: 25rpx;
+}
+
+.category-title {
+  display: flex;
+  margin-top: 15rpx;
+  margin-bottom: 15rpx;
+  margin-left: 20rpx;
+}
+
+.category-title .name {
+  font-size: 30rpx;
+}
+
+.category-title .icon image {
+  width: 45rpx;
+  height: 45rpx;
+  margin-right: 15rpx;
 }
 
 .item {
+  margin-right: 30rpx;
+  margin-left: 25rpx;
   height: 270rpx;
   padding: 15rpx;
   background-color: #fff;
@@ -41,22 +61,49 @@
 
 .item-right {
   display: block;
-  margin-left: 11px;
   flex: 1;
+  text-align: right;
+  height: 180rpx;
 }
 
-.title {
-  margin-bottom: 25px;
+.item-right .desc {
+  margin-top: 25rpx;
+  font-size: 30rpx;
+}
+
+.item-right .title {
+  margin-bottom: 5rpx;
 }
 
 .title text {
-  font-size: 16px;
-  color: #787878;
-  white-space: pre-wrap;
+  font-size: 50rpx;
+  color: black;
+  white-space: pre-line;
   line-height: 17px;
 }
 
 text {
-  font-size: 15px;
   color: #444;
+}
+
+.buy-now {
+  margin-top: 45rpx;
+  display: inline-block;
+  padding: 10rpx 20rpx 10rpx 20rpx;
+  border: 1rpx solid red;
+  font-size: 30rpx;
+}
+
+.buy-now text {
+  color: red;
+}
+
+
+.buy-now .inline {
+  display: inline-block
+}
+
+.separate {
+  height: 10rpx;
+  background-color: #eee;
 }

pages/show_product/show_product.wxml

@@ -7,12 +7,14 @@
 
   <view>
     <form bindsubmit="formSubmit" data-sku="{{product.sku}}">
-      <view class="section price">
-        <text id="price" >¥{{product.price || '无法获取价格'}}</text>
-      </view>
-      <view class="section quantity">
-        <view>购买数量：</view>
-        <input id="quantity" name="quantity" bindinput="bindQuantityInput" value="1" />
+      <view class="line">
+        <view class="section price">
+          <text id="price" >¥{{product.price || '无法获取价格'}}</text>
+        </view>
+        <view class="section quantity">
+          <view>购买数量：</view>
+          <input id="quantity" name="quantity" bindinput="bindQuantityInput" value="1" />
+        </view>
       </view>
       <view class="btn-area">
         <button bindtap="bindAddToCart" type="primary">加入购物车</button>

pages/show_product/show_product.wxss

@@ -2,10 +2,20 @@
   width: 100%;
 }
 
+.line {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .quantity {
+  width: 50%;
   display: flex;
-  height: 60rpx;
-  line-height: 60rpx;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin: 20rpx;
+  font-size: 30rpx;
 }
 
 #quantity {
@@ -13,12 +23,14 @@
   border: 1rpx solid lightgrey;
 }
 
-#price {
-  color: #FF0000;
+.price {
+  margin-left: 20rpx;
+  width: 50%;
+  margin-right: auto; 
 }
 
-.btn-area {
-  display: flex;
+#price {
+  color: #FF0000;
 }
 
 .btn-area button {
@@ -32,15 +44,6 @@
   margin: 20rpx;
 }
 
-.section.price {
-  margin: 20rpx;
-}
-
-.section.quantity {
-  margin: 20rpx;
-  font-size: 30rpx;
-}
-
 .btn-area {
   position: fixed;
   bottom: 0;