知道了图片最大居中，要用class名字去写css才能覆盖原来的

准备加入购物车

app.json

@@ -9,5 +9,27 @@
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "WeChat",
     "navigationBarTextStyle":"black"
+  },
+  "tabBar": {
+    "color": "#dddddd",
+    "selectedColor": "#3cc51f",
+    "borderStyle": "white",
+    "backgroundColor": "#fefefe",
+    "list": [{
+      "pagePath": "pages/index/index",
+      "iconPath": "images/1.png",
+      "selectedIconPath": "images/1.png",
+      "text": "首页"
+    },{
+      "pagePath": "pages/cart/cart",
+      "iconPath": "images/1.png",
+      "selectedIconPath": "images/1.png",
+      "text": "购物车"
+    },{
+      "pagePath": "pages/mine/mine",
+      "iconPath": "images/1.png",
+      "selectedIconPath": "images/1.png",
+      "text": "我的"
+    }]
   }
 }

pages/show_product/show_product.js

@@ -6,6 +6,7 @@ Page({
     title: '',
     id: 0,
     address: '',
+    quantity: 1,
     product: {}
   },
 
@@ -18,7 +19,7 @@ Page({
     this.data.id = params.id
 
     that.data.product = wx.getStorageSync('products').find(function(i){
-      return i.id === that.data.id;
+      return i.id === that.data.id
     })
   },
 
@@ -32,12 +33,23 @@ Page({
     })
   },
 
+  bindAddToCart (e) {
+    wx.setStorage({
+      key: `cart-${this.data.id}`,
+      data: {quantity: this.data.quantity}
+    })
+  },
+
+  bindQuantityInput (e) {
+    this.setData({'quantity': e.detail.value})
+  },
+
   formSubmit: function(e) {
     e.detail.value['sku'] = e.target.dataset['sku']
     //  address.postBuyProduct(e.detail.value)
     console.log('form发生了submit事件，携带数据为：', e.detail.value)
   },
-  formReset: function(e) {
-    console.log('form发生了reset事件')
+  formAddcart: function(e) {
+    console.log('form发生了addcart事件')
   }
 })

pages/show_product/show_product.wxml

@@ -1,28 +1,32 @@
 <view>
-  <image src="{{product.attributes['image-url']}}" mode="aspectFill"/>
-  <text>{{product.attributes.name}}</text>
-
-  <view wx:if="{{ address > 0 }}"  bindtap="bindTapAddress">
-    <text>{{address}}</text>
-    <text>修改地址</text>
-  </view>
-  <view wx:else bindtap="bindTapAddress">
-    <text>add new address</text>
+  <view>
+    <image class="head-img" src="{{product.attributes['image-url']}}" mode="aspectFit" />
   </view>
 
+  <text>{{product.attributes.name}}</text>
+
   <view>
-    <form bindsubmit="formSubmit" bindreset="formReset" data-sku="{{product.attributes.sku}}">
-      <view class="section">
-        <text class="">数量</text>
-        <input name="quantity" value="1" />
+    <form bindsubmit="formSubmit" data-sku="{{product.attributes.sku}}">
+      <view class="section quantity">
+        <view class="quantity">数量：</view>
+        <input id="quantity" name="quantity" bindinput="bindQuantityInput" value="1" />
       </view>
       <view class="section">
-        <text>¥{{product.attributes.price || '无法获取价格'}}</text>
+        <text id="price" >¥{{product.attributes.price || '无法获取价格'}}</text>
       </view>
       <view class="btn-area">
-        <button formType="submit">buy it!</button>
-        <button formType="reset">Reset</button>
+        <button formType="submit" type='primary'>立即购买</button>
+        <button bindtap="bindAddToCart">加入购物车</button>
       </view>
     </form>
   </view>
+
+  <view wx:if="{{ address > 0 }}"  bindtap="bindTapAddress">
+    <text>{{address}}</text>
+    <text>修改地址</text>
+  </view>
+  <view wx:else bindtap="bindTapAddress">
+    <text>add new address</text>
+  </view>
+
 </view>

pages/show_product/show_product.wxss

@@ -0,0 +1,28 @@
+.head-img {
+  width: 100%;
+}
+
+.quantity {
+  display: flex;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+
+#quantity {
+  width: 80rpx;
+  border: 1rpx solid lightskyblue;
+}
+
+#price {
+  color: #FF0000;
+}
+
+.btn-area {
+  display: flex;
+}
+
+.btn-area button {
+  width: 100%;
+  border-radius: 0;
+  border-width: 0;
+}