基础版本

 {
   "pages": [
+    "pages/gift-shop/gift-shop",
     "pages/index/index",
     "pages/authorize/authorize",
     "pages/register/register",
     "pages/scan-result/scan-result",
     "pages/integral-detail/integral-detail",
-    "pages/gift-shop/gift-shop",
     "pages/gift-detail/gift-detail",
     "pages/address-management/address-management",
     "pages/address-edit/address-edit",
@@ -34,7 +34,8 @@
     "selectedColor": "#3680EB",
     "borderStyle": "black",
     "backgroundColor": "#ffffff",
-    "list": [{
+    "list": [
+      {
         "pagePath": "pages/index/index",
         "iconPath": "image/tabbar/scan_bar.png",
         "selectedIconPath": "image/tabbar/scan_bar_selected.png",

+Component({
+  properties: {
+    // 这里定义了innerText属性，属性值可以在组件使用时指定
+    innerText: {
+      type: String,
+      value: 'default value',
+    }
+  },
+  data: {
+    // 这里是一些组件内部数据
+    someData: {}
+  },
+  methods: {
+    // 这里是一个自定义方法
+    customMethod() {}
+  }
+})

+{
+    "component": true
+  }

+.demo-item{}

+<view class="demo-item">demo-item</view>

 {
-  "navigationBarTitleText": "more"
+  "navigationBarTitleText": "礼物兑换"
 }

 @import '../../assets/scss/mixins';
 @import '../../assets/scss/utils';
 
+$contentWidth:690px;
+
 .page {
-  .bgc {}
+  .bgc {
+    background: #F8F8F8;
+  }
 
   .bg {}
 
   .main {
+    .top {
+      position: absolute;
+      width: 750px;
+      height: 110px;
+      background-color: #fff;
+
+      &-wrap {
+        position: relative;
+        width: $contentWidth;
+        height: 110px;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .search {
+        width: 540px;
+        height: 76px;
+        background: #F8F8F8;
+        border-radius: 8px;
+        @extend .fcc;
+
+        .ipt {
+          font-size: 28px;
+          letter-spacing: 0;
+          @extend .bb;
+          padding: 0 20px;
+          width: 540px;
+        }
+
+        .icon {
+          width: 36px;
+          height: 36px;
+          margin-right: 20px;
+        }
+      }
+
+      .filter {
+        font-size: 28px;
+        color: #3680EB;
+        letter-spacing: 0;
+        @extend .fcc;
+
+        .icon-wrap {
+          margin-left: 4px;
+
+          .icon {
+            width: 12px;
+            height: 12px;
+            display: block;
+            margin: 4px 0;
+          }
+        }
+      }
+    }
+
     .top-space {
-      height: 0px;
+      height: 116px;
     }
 
     .content {
       position: relative;
+
+      .product {
+        width: $contentWidth;
+        margin: 0 auto;
+
+        &-item {
+          background: #fff;
+          width: $contentWidth;
+          height: 260px;
+          margin: 20px 0;
+          box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
+          border-radius: 8px;
+          @extend .bb;
+          padding: 30px;
+          display: flex;
+          justify-content: space-between;
+
+          .image-wrap {
+            width: 200px;
+            height: 200px;
+            .img {}
+          }
+
+          .cont {
+            position: relative;
+            flex: 1;
+
+            .name {
+              font-size: 32px;
+              color: #333333;
+            }
+
+            .desc {
+              font-size: 24px;
+              color: #999999;
+              margin-top: 12px;
+            }
+
+            .integral {
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              font-size: 24px;
+              color: #FF7900;
+            }
+
+            .btn {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+
+              width: 140px;
+              height: 64px;
+              line-height: 64px;
+              text-align: center;
+              color: #fff;
+              border-radius: 8px;
+              background: #3680EB;
+              font-size: 28px;
+            }
+          }
+        }
+      }
     }
   }
 }

@@ -2,7 +2,62 @@
   <view class="app__bgc bgc"></view>
   <view class="app__bg bg"></view>
   <view class="app__content main">
+    <view class="top">
+      <div class="top-wrap">
+        <view class="search">
+          <input class="ipt" placeholder="输入关键字搜索" />
+          <image class="icon" mode="aspectFit" src="../../image/icon/icon_search.png" />
+        </view>
+        <view class="filter">
+          积分排序
+          <view wx:if="{{1>0}}" class="icon-wrap">
+            <image class="icon up" src="../../image/icon/icon_filter_up_on.png" mode="widthFix" />
+            <image class="icon down" src="../../image/icon/icon_filter_down.png" mode="widthFix" />
+          </view>
+          <view wx:else class="icon-wrap">
+            <image class="icon up" src="../../image/icon/icon_filter_up.png" mode="widthFix" />
+            <image class="icon down" src="../../image/icon/icon_filter_down_on.png" mode="widthFix" />
+          </view>
+        </view>
+      </div>
+    </view>
     <view class="top-space"></view>
-    <view class="content"></view>
+    <view class="content">
+      <view class="product">
+        <view class="product-item">
+          <view class="image-wrap">
+            <!-- <image  /> -->
+          </view>
+          <view class="cont">
+            <view class="name">某东购物卡200元</view>
+            <view class="desc">可在xx超市使用，可够买xxx</view>
+            <view class="integral">消耗积分：3000分</view>
+            <view class="btn">查看</view>
+          </view>
+        </view>
+        <view class="product-item">
+          <view class="image-wrap">
+            <!-- <image  /> -->
+          </view>
+          <view class="cont">
+            <view class="name">某东购物卡200元</view>
+            <view class="desc">可在xx超市使用，可够买xxx</view>
+            <view class="integral">消耗积分：3000分</view>
+            <view class="btn">查看</view>
+          </view>
+        </view>
+        <view class="product-item">
+          <view class="image-wrap">
+            <!-- <image  /> -->
+          </view>
+          <view class="cont">
+            <view class="name">某东购物卡200元</view>
+            <view class="desc">可在xx超市使用，可够买xxx</view>
+            <view class="integral">消耗积分：3000分</view>
+            <view class="btn">查看</view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </view>

 {
-  "navigationBarTitleText": "more"
+  "navigationBarTitleText": "个人中心"
 }