商品页完成

README.md

@@ -2,9 +2,7 @@
 
 ### 目录结构
 - commponents 组件
-    - index 首页组件
 - page 页面
-    - index 首页
 - utils 插件
     - [bin.js](./doc/bin.md)
 - doc 文档存放
@@ -22,3 +20,4 @@
     组件
     - classify/list 右侧商品列表
     - classify/navigation 左侧导航列表
+- pages/product/product 商品页

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/product/product",
     "pages/classify/classify",
     "pages/shopping/shopping",
     "pages/search/search",

pages/product/product.js

@@ -0,0 +1,66 @@
+// pages/product/product.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+ array: ['20粒', '30粒', '50粒', '100粒']
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/product/product.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/product/product.scss

@@ -0,0 +1,36 @@
+.box{
+    border-top: 1rpx solid #eaeaea;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .swiper{
+        margin-top: 109rpx;
+        width: 389rpx;
+        height: 657rpx;
+        .image{
+            width: 389rpx;
+            height: 549rpx;
+            background-color: #000;
+        }
+    }
+    .title{
+        font-size: 32rpx;
+        color: #333;
+        margin-bottom: 34rpx;
+    }
+    .menery{
+        font-size: 34rpx;
+        color: #666;
+        margin-bottom: 70rpx;
+    }
+    .add{
+        width: 308rpx;
+        height: 98rpx;
+        background-color: #50CA80;
+        border-radius: 49rpx;
+        line-height: 98rpx;
+        font-size: 34rpx;
+        color: #fff;
+        text-align: center;
+    }
+}

pages/product/product.wxml

@@ -0,0 +1,24 @@
+<view class="box">
+    <swiper indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}" interval="{{2000}}" class="swiper">
+        <block>
+            <swiper-item>
+                <image class="image"> </image>
+            </swiper-item>
+        </block>
+        <block>
+            <swiper-item>
+                <image class="image"> </image>
+            </swiper-item>
+        </block>
+        <block>
+            <swiper-item>
+                <image class="image"> </image>
+            </swiper-item>
+        </block>
+    </swiper>
+    <text class="title">产品名称产品名称产品名称</text>
+    <text class="menery">$140,000</text>
+     <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
+    <view class="add">加入购物车</view>
+    </picker>
+</view>

pages/product/product.wxss

@@ -0,0 +1 @@
+.box{border-top:1rpx solid #eaeaea;display:flex;flex-direction:column;align-items:center}.box .swiper{margin-top:109rpx;width:389rpx;height:657rpx}.box .swiper .image{width:389rpx;height:549rpx;background-color:#000}.box .title{font-size:32rpx;color:#333;margin-bottom:34rpx}.box .menery{font-size:34rpx;color:#666;margin-bottom:70rpx}.box .add{width:308rpx;height:98rpx;background-color:#50CA80;border-radius:49rpx;line-height:98rpx;font-size:34rpx;color:#fff;text-align:center}