首页样式改进

pages/index/index.js

@@ -4,6 +4,12 @@ const product = require('../../utils/product.js')
 Page({
   data: {items: [], slides: []},
 
+  bindShowProduct: function (e) {
+    wx.navigateTo({
+      url: `../show_product/show_product?id=${e.currentTarget.dataset.id}`
+    })
+  },
+
   onLoad: function() {
     var that = this
 

pages/index/index.wxml

@@ -11,15 +11,17 @@
     </swiper>
 
     <block wx:for="{{items}}" wx:for-item="item">
-      <navigator url="../show_product/show_product?id={{item.id}}">
-        <view>
+      <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>
-          <text> {{item.name}} </text>
-          <text> ¥{{item.price}} </text>
+        <view class="item-right">
+          <view class="title">
+            <text> {{item.name}} </text>
+          </view>
+          <text class="price"> ¥{{item.price}} </text>
         </view>
-      </navigator>
+      </view>
     </block>
   </scroll-view>
 </view>

pages/index/index.wxss

@@ -1,6 +1,40 @@
-.head-img {
-  width: 100%;
-}
 .slide-img {
   width: 100%;
+}
+
+.item {
+  height: 270rpx;
+  padding: 15rpx;
+  background-color: #fff;
+  border-top: 1px solid #e4e4e4;
+  color: #787878;
+  display:flex;
+  align-items:center;
+}
+
+.item image {
+  display: block;
+  width: 310rpx;
+}
+
+.item-right {
+  display: block;
+  margin-left: 11px;
+  flex: 1;
+}
+
+.title {
+  margin-bottom: 25px;
+}
+
+.title text {
+  font-size: 16px;
+  color: #787878;
+  white-space: pre-wrap;
+  line-height: 17px;
+}
+
+text {
+  font-size: 15px;
+  color: #444;
 }

pages/show_product/show_product.js

@@ -43,7 +43,7 @@ Page({
       exist.quantity = this.data.quantity
     } else {
       var model = getApp().jsonModel
-      var product = new model('product', this.data.id)
+      var product = new model('products', this.data.id)
       product.setAttribute('quantity', this.data.quantity)
       cartItems.data.push(product)
     }