discover

pages/components/blockList/blockList.json

@@ -5,6 +5,7 @@
     "homeOne":"../blocks/home1/homeOne",
     "homeThree":"../blocks/home3/homeThree",
     "divider":"../blocks/divider/divider",
-    "horizon":"../blocks/horizon/horizon"
+    "horizon":"../blocks/horizon/horizon",
+    "homeGrid": "../blocks/homeGrid/homeGrid"
   }
 }

pages/components/blockList/blockList.wxml

@@ -4,5 +4,6 @@
     <homeThree wx:if="{{item.item_type == 'home3'}}" items="{{item.items}}"></homeThree> 
     <homeOne wx:if="{{item.item_type == 'home1'}}" items="{{item.items}}" ></homeOne>
     <horizon wx:if="{{item.item_type == 'horizon'}}" items="{{item.items}}"></horizon> 
+    <homeGrid wx:if="{{item.item_type == 'home_grid'}}" items="{{item.items}}"></homeGrid> 
 </view>
 

pages/components/blocks/effect/effect.js

@@ -0,0 +1,23 @@
+// pages/components/blocks/effect/effect.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    function_items: Array
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

pages/components/blocks/effect/effect.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/components/blocks/effect/effect.wxml

@@ -0,0 +1,22 @@
+<!--pages/components/blocks/effect/effect.wxml-->
+<view class="function_list">
+  <view class="function_items" wx:key="index" wx:for-index="index" wx:for="{{function_items}}">      
+    <view class="function_masker_box">
+      <image class="function_img" src="{{item.img}}" mode="widthFix"></image>
+      <view class="m_title">
+        <view>
+          <text class="function_rounds"></text>
+          <text>{{item.name}}</text>
+          <text class="function_rounds"></text>
+        </view>
+        <view class="look_btn">查看全部</view>
+      </view> 
+    </view> 
+    <view class="function_item_container">
+      <view class="function_item"  wx:for-index="index" wx:for="{{item.subitem}}">
+        <image class="subitem_img" src="{{item.img}}" mode="widthFix"></image>
+        <view class="subitem_title">{{item.name}}</view>
+      </view>
+    </view>  
+  </view>
+</view>

pages/components/blocks/effect/effect.wxss

@@ -0,0 +1,65 @@
+/* pages/components/blocks/effect/effect.wxss */
+
+.function_masker_box {
+  margin-bottom: 40rpx;
+  min-height: 340rpx;
+  position: relative;
+}
+
+.function_img {
+  display: block;
+}
+
+.function_item_container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.function_item {
+  width: 25%;
+}
+
+.subitem_img {
+  display: block;
+  width: 70%;
+  margin: 0 auto;
+}
+
+.subitem_title {
+  font-size: 24rpx;
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+
+.m_title {
+  color: #fff;
+  font-size: 50rpx;
+  text-align: center;
+  text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.5);
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.function_rounds {
+  display: inline-block;
+  width: 24rpx;
+  height: 24rpx;
+  background: #fff;
+  border-radius: 50%;
+  margin: 0 10rpx;
+  line-height: 15rpx;
+}
+
+.look_btn {
+  display: inline-block;
+  font-size: 28rpx;
+  border: 1rpx solid #fff;
+  border-radius: 10rpx;
+  padding: 10rpx 20rpx;
+}

pages/components/blocks/homeGrid/homeGrid.js

@@ -0,0 +1,23 @@
+// pages/components/blocks/homeGrid/homeGrid.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    items: Array
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

pages/components/blocks/homeGrid/homeGrid.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/components/blocks/homeGrid/homeGrid.wxml

@@ -0,0 +1,6 @@
+<!--pages/components/blocks/homeGrid/homeGrid.wxml-->
+<view class="home_grid">
+  <view class="home_grid_item" wx:key="{{item}}" wx:for="{{items}}">
+    <image class="home_grid_img" src="{{item.image}}" mode="widthFix"></image>
+  </view>  
+</view>

pages/components/blocks/homeGrid/homeGrid.wxss

@@ -0,0 +1,52 @@
+/* pages/components/blocks/homeGrid/homeGrid.wxss */
+
+.home_grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  border-top: 1px solid #f7f7f7;
+  
+}
+
+.home_grid_item {
+  position: relative;
+  display: flex;
+  width: 33.3%;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1px;
+}
+
+.home_grid_item::before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  bottom: 0;
+  border-left: 1px solid #c7c7c7;
+  color: #c7c7c7;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+}
+
+.home_grid_item::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  border-bottom: 1px solid #c7c7c7;
+  color: #c7c7c7;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.home_grid_img {
+  width: 100%;
+}

pages/discover/discover.js

@@ -1,18 +1,63 @@
 // pages/discover/discover.js
+const getReq = require('./../../config.js').getReq
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-  
+    special_datas: {},
+    direction: 'backward',
+    function_items: []
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-  
+    this.getDatas()
+    this.getFunctions()
+  },
+
+  getDatas() {
+    var self = this
+    getReq({
+      act: 'brand',
+      op: 'home'
+    }, function (res) {
+      if (res.code == 200) {
+        console.log(res)
+        self.setData({
+          special_datas: res.datas
+        })
+      }
+    })
+  },
+  secTabs: function (e) {
+    let direction = e.currentTarget.dataset.item
+
+    if (direction == this.data.direction) {
+      return
+    }
+    
+    this.setData({
+      direction
+    })
+    
+  },
+  getFunctions() {
+    var self = this
+    getReq({
+      act: 'category',
+      op: 'index'
+    }, function (res) {
+      if (res.code == 200) {
+        console.log(res.datas.items)
+        self.setData({
+          function_items: res.datas.items
+        })     
+      }
+    })
   },
 
   /**

pages/discover/discover.json

@@ -1,3 +1,8 @@
+
 {
-    "navigationBarTitleText": "发现"
+  "navigationBarTitleText": "发现",
+  "usingComponents": {
+    "blockList": "../components/blockList/blockList",
+    "effect": "../components/blocks/effect/effect"
+  }
 }

pages/discover/discover.wxml

@@ -1,2 +1,13 @@
 <!--pages/discover/discover.wxml-->
-<text>pages/discover/discover.wxml</text>
+<view class="discover_container" style="background-color: #F7F7F7">
+    <view class="discover_tab">
+      <view class="discover_tab_item" bindtap="secTabs" data-item="backward">品牌</view>
+      <view class="discover_tab_item" bindtap="secTabs" data-item="forward">功效</view>
+      <view 
+        class="discover_tab_ink-bar {{direction == 'backward' ? 'ink-bar-transition-backward' :     'ink-bar-transition-forward'}}">                 
+      </view> 
+   </view> 
+    <blockList class="{{direction == 'backward' ? '' : 'hide'}}" special_datas="{{special_datas}}"> </blockList>  
+    <effect class="{{direction == 'backward' ? 'hide' : ''}}" function_items="{{function_items}}"></effect> 
+   <!-- <effect function_items="{{function_items}}"></effect> -->
+</view>

pages/discover/discover.wxss

@@ -1 +1,68 @@
-/* pages/discover/discover.wxss */
+/* pages/discover/discover.wxss */
+.discover_container {
+  padding-top: 88rpx;
+  padding-bottom: 6rpx;
+}
+.discover_tab {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  background-color: #fff;
+  height: 88rpx;
+}
+
+.discover_tab_item {
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: -webkit-linear-gradient(top, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;
+  background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;
+  background-size: 100% 1rpx;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 88rpx;
+  color: #666;
+}
+
+.discover_tab_selected {
+  color: #eb4e4f;
+  border-bottom: 3rpx solid #eb4e4f;
+}
+
+.discover_tab_ink-bar {
+  position: absolute;
+  height: 4rpx;
+  bottom: 0;
+  background-color: #eb4e4f;
+  text-align: center;
+}
+
+.ink-bar-transition-backward {
+  left: 0;
+  right: 50%;
+  -webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s,
+                        left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+  transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s,
+                left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+}
+
+.ink-bar-transition-forward {
+  left: 50%;
+  right: 0%;
+  -webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1),
+                        left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
+  transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1),
+                left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
+}
+
+.hide {
+  display: none;
+}

pages/index/index.json

@@ -1,6 +1,6 @@
 {
   "usingComponents": {
     "tabs" : "../components/blocks/tabs/tabs",
-    "blockList" : "../components/blockList/blockList"
+    "blockList" : "../components/blockList/blockList"   
   }
 }