增加商品首页和详情页面

src/app.wpy

@@ -27,7 +27,8 @@ export default class extends wepy.app {
     pages: [
       'pages/index',
       'pages/product',
-      'pages/buyvip'
+      'pages/buyvip',
+      'pages/detail'
     ],
     window: {
       backgroundTextStyle: 'light',

src/components/zan-loadmore.wpy

@@ -0,0 +1,107 @@
+<style lang="less">
+.zan-loadmore {
+  position: relative;
+  width: 65%;
+  margin: 21px auto;
+  line-height: 20px;
+  font-size: 14px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.zan-loading {
+  width:20px;
+  height:20px;
+  display: inline-block;
+  vertical-align: middle;
+  animation: weuiLoading 1s steps(12, end) infinite;
+  background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+}
+
+.zan-loadmore .zan-loading {
+  margin-right: 4px;
+}
+
+.zan-loadmore__tips {
+  display: inline-block;
+  vertical-align: middle;
+  height: 20px;
+  line-height: 20px;
+}
+
+.zan-loadmore--nodata,
+.zan-loadmore--nomore {
+  border-top: 1rpx solid #e5e5e5;
+  color: #999;
+}
+
+.zan-loadmore--nodata {
+  margin-top: 120px;
+}
+
+.zan-loadmore--nodata .zan-loadmore__tips {
+  position: relative;
+  top: -11px;
+  background: #f9f9f9;
+  padding: 0 6px;
+}
+
+.zan-loadmore--nomore .zan-loadmore__tips {
+  position: relative;
+  top: -11px;
+  background: #f9f9f9;
+  padding: 0 6px;
+}
+
+.zan-loadmore__dot {
+  position: absolute;
+  left: 50%;
+  top: 10px;
+  margin-left: -2px;
+  margin-top: -2px;
+  content: " ";
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #E5E5E5;
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
+<template>
+  <block wx:if="{{nomore}}">
+    <view class="zan-loadmore zan-loadmore--nomore">
+        <view class="zan-loadmore__tips">{{ nomore_str || '无更多数据' }}</view>
+    </view>
+  </block>
+
+  <block wx:elif="{{nodata}}">
+    <view class="zan-loadmore zan-loadmore--nodata">
+      <view class="zan-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
+    </view>
+  </block>
+
+  <block wx:elif="{{loading}}">
+    <view class="zan-loadmore">
+      <view class="zan-loading"></view>
+      <view class="zan-loadmore__tips">加载中...</view>
+    </view>
+  </block>
+</template>
+<script>
+import wepy from 'wepy'
+
+export default class zanLoadmore extends wepy.component {
+  props = {
+    loading: Boolean,
+    nodata: {type: Boolean, default: false},
+    nomore: {type: Boolean, default: false},
+    nodata_str: String,
+    nomore_str: String
+  }
+  methods = {
+  }
+}
+</script>

src/pages/detail.wpy

@@ -0,0 +1,104 @@
+<style lang="less">
+  .top-image {
+    text-align:center;
+    width: 720rpx;
+  }
+  .top-image .item_img{
+    height:390rpx;
+    width: 100%;
+    border: 1px solid #eee;
+  }
+  .product-info {
+    width: 100%;
+  }
+  .product-info .info{
+    padding:10rpx 20rpx;
+    color:#666;
+    font-size:26rpx;
+    line-height:35rpx;
+    display:flex;
+    align-items:center;
+  }
+  .content-image {
+    width: 100%;
+  }
+</style>
+<template>
+  <view class="container">
+    <view class="top-image">
+      <image class="item_img" src="{{item.main_img}}" mode="aspectFit"></image>
+    </view>
+    <view class="product-info">
+      <view class="info">
+        <view>品名：</view><view>{{item.name}} </view>
+      </view>
+      <view class="info">
+        <view>规格：</view><view>{{item.size}} </view>
+      </view>
+      <view class="info">
+        <view>状态：</view><view>尚未开启抢购 </view>
+      </view>
+    </view>
+    <repeat for="{{item.images}}" item="img" >
+    <image class="content-image" src="{{img}}" mode="widthFix"></image>
+    </repeat>
+  </view>
+  <gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap"
+                 @bottomSecondTap.user="bottomSecondTap"/>
+</template>
+
+<script>
+  import wepy from 'wepy'
+  import zanLoadmore from '../components/zan-loadmore';
+  import gameBottomBar from '../components/game-bottom-bar';
+
+  export default class Detail extends wepy.page {
+    config = {
+      navigationBarTitleText: '商品详情'
+    };
+    components = {
+      zanLoadmore: zanLoadmore,
+      gameBottomBar: gameBottomBar
+    };
+
+    mixins = [];
+
+    data = {
+      bottomActionCfg: {
+        hide: false,
+        mainBtnIconClass: 'icon-cart',
+        mainBtnTitle: '购买',
+        secondBtnIconClass: 'icon-forbid',
+        secondBtnTitle: '取消'
+      },
+      item: {}
+    };
+
+
+    methods = {
+      bottomMainTap(e) {
+        console.log('bottomMainTap');
+        wepy.showToast({
+          title: '活动尚未开始',
+          icon: 'none',
+          duration: 2000
+        })
+      },
+      bottomSecondTap(e) {
+        console.log('bottomSecondTap');
+        wepy.navigateBack({
+        })
+      },
+    };
+
+    events = {
+    };
+
+    onLoad(params) {
+      this.item = JSON.parse(params.item);
+      wepy.setNavigationBarTitle({
+        title: this.item.name
+      })
+    }
+  }
+</script>

src/pages/index.wpy

@@ -1,38 +1,107 @@
 <style lang="less">
+  .product-list {
+    width: 750rpx;
+    background: #f7f7f7;
+  }
+  .product-list .item {
+    background:#fff;
+    padding:15rpx;
+    margin-bottom:15rpx;
+  }
+  .product-list .item_img {
+    height:390rpx;
+    width: 100%;
+    border: 1px solid #eee;
+  }
+  .product-list .info{
+    padding:5rpx;
+    color:#666;
+    font-size:26rpx;
+    line-height:35rpx;
+    display:flex;
+    align-items:center;
+  }
 
 </style>
 <template>
   <view class="container">
-
+    <view class="product-list">
+      <repeat for="{{records}}" item="item" >
+      <view class="item" @tap="gameTap({{item._id}})"  >
+        <image class="item_img" src="{{item.main_img}}" mode="aspectFit"></image>
+        <view class="info">
+          <view>品名：</view><view>{{item.name}} </view>
+        </view>
+        <view class="info">
+          <view>规格：</view><view>{{item.size}} </view>
+        </view>
+        <view class="info">
+          <view>状态：</view><view>尚未开启抢购 </view>
+        </view>
+      </view>
+      </repeat>
+    </view>
+    <zanLoadmore :loading.sync="loading" :nodata.sync="noData" :nomore.sync="noMore" nomore_str="更多活动敬请期待"></zanLoadmore>
   </view>
 </template>
 
 <script>
   import wepy from 'wepy'
+  import http from '../utils/http';
+  import zanLoadmore from '../components/zan-loadmore';
 
   export default class Index extends wepy.page {
     config = {
-      navigationBarTitleText: 'index'
+      navigationBarTitleText: '活动列表'
     };
     components = {
+      zanLoadmore: zanLoadmore
     };
 
     mixins = [];
 
     data = {
-
+      loading: false,
+      noData: false,
+      noMore: true,
+      records: []
     };
 
 
     methods = {
+      gameTap(id) {
+        let item;
+        for(let record of this.records) {
+          if (record._id === id) {
+            item = record;
+            break;
+          }
+        }
+        if (item) {
+          let paramStr = JSON.stringify(item);
+          wepy.navigateTo({
+            url: '/pages/detail?item=' + paramStr
+          })
+        }
 
+      }
     };
 
     events = {
     };
 
     onLoad() {
-
+      this.queryRecords();
+    }
+    async queryRecords() {
+      let self = this;
+      try {
+        let res = await http.post('/api/weapp/gift_list', {});
+        this.records = res.records;
+        this.$apply();
+      } catch (err) {
+        console.log(err);
+      }
     }
   }
 </script>