From 70fd414cf6cc378ef0fc6ab16ae16f62b4b7fea9 Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Mon, 19 Dec 2016 18:01:59 +0800
Subject: [PATCH] toast example

---
 app.json                   |  3 +-
 pages/dashboard/index.wxml | 10 ++++-
 pages/steps/index.wxml     | 82 +++++++++++++++++++++++++++++---------
 pages/toast/index.js       |  9 +++++
 pages/toast/index.wxml     |  7 ++++
 pages/toptips/index.js     |  4 +-
 zui/index.js               |  2 +
 zui/steps/index.wxss       |  4 ++
 zui/toast/index.js         | 28 +++++++++++++
 zui/toast/index.wxml       |  3 ++
 10 files changed, 129 insertions(+), 23 deletions(-)
 create mode 100644 pages/toast/index.js
 create mode 100644 pages/toast/index.wxml
 create mode 100644 zui/toast/index.js
 create mode 100644 zui/toast/index.wxml

diff --git a/app.json b/app.json
index eb026ef7..5094cf0b 100644
--- a/app.json
+++ b/app.json
@@ -10,7 +10,8 @@
     "pages/tab/index",
     "pages/quantity/index",
     "pages/toptips/index",
-    "pages/steps/index"
+    "pages/steps/index",
+    "pages/toast/index"
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",
diff --git a/pages/dashboard/index.wxml b/pages/dashboard/index.wxml
index 75747d91..1252400b 100644
--- a/pages/dashboard/index.wxml
+++ b/pages/dashboard/index.wxml
@@ -33,10 +33,18 @@
       <view class="zui-cell__bd">Quantity</view>
       <view class="zui-cell__ft"></view>
     </navigator>
-    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/toptips/index">
+    <navigator class="zui-cell zui-cell--access" url="/pages/toptips/index">
       <view class="zui-cell__bd">Toptips</view>
       <view class="zui-cell__ft"></view>
     </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/pages/steps/index">
+      <view class="zui-cell__bd">Steps</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
+    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/toast/index">
+      <view class="zui-cell__bd">Toast</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
   </view>
 
 </view>
diff --git a/pages/steps/index.wxml b/pages/steps/index.wxml
index 4b2a9e75..f0aba3b4 100644
--- a/pages/steps/index.wxml
+++ b/pages/steps/index.wxml
@@ -1,24 +1,68 @@
-<view class="top-info__steps zui-steps zui-steps-3">
-  <view
-    class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
-    <text class="zui-steps__title">步骤一</text>
-    <view class="zui-steps__icon">
-      <view class="zui-steps__circle"></view>
+<view class="container">
+
+  <view class="zui-cell">
+    <view class="zui-cell__bd">
+      <view class="top-info__steps zui-steps zui-steps-3">
+        <view
+          class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
+          <text class="zui-steps__title">步骤一</text>
+          <view class="zui-steps__icon">
+            <view class="zui-steps__circle"></view>
+          </view>
+          <view class="zui-steps__line"></view>
+        </view>
+        <view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
+          <text class="zui-steps__title">步骤二</text>
+          <view class="zui-steps__icon">
+            <view class="zui-steps__circle"></view>
+          </view>
+          <view class="zui-steps__line"></view>
+        </view>
+        <view class="zui-steps__step zui-steps__step--last-child">
+          <text class="zui-steps__title">步骤三</text>
+          <view class="zui-steps__icon">
+            <view class="zui-steps__circle"></view>
+          </view>
+          <view class="zui-steps__line"></view>
+        </view>
+      </view>
     </view>
-    <view class="zui-steps__line"></view>
   </view>
-  <view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
-    <text class="zui-steps__title">步骤二</text>
-    <view class="zui-steps__icon">
-      <view class="zui-steps__circle"></view>
+
+  <view class="zui-cell zui-cell--last-child">
+    <view class="zui-cell__bd">
+      <view class="top-info__steps zui-steps zui-steps-4">
+        <view
+          class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
+          <text class="zui-steps__title">步骤一</text>
+          <view class="zui-steps__icon">
+            <view class="zui-steps__circle"></view>
+          </view>
+          <view class="zui-steps__line"></view>
+        </view>
+        <view class="zui-steps__step zui-steps__step--done">
+          <text class="zui-steps__title">步骤二</text>
+          <view class="zui-steps__icon">
+            <view class="zui-steps__circle"></view>
+          </view>
+          <view class="zui-steps__line"></view>
+        </view>
+        <view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
+          <text class="zui-steps__title">步骤三</text>
+          <view class="zui-steps__icon">
+            <view class="zui-steps__circle"></view>
+          </view>
+          <view class="zui-steps__line"></view>
+        </view>
+        <view class="zui-steps__step zui-steps__step--last-child">
+          <text class="zui-steps__title">步骤四</text>
+          <view class="zui-steps__icon">
+            <view class="zui-steps__circle"></view>
+          </view>
+          <view class="zui-steps__line"></view>
+        </view>
+      </view>
     </view>
-    <view class="zui-steps__line"></view>
-  </view>
-  <view class="zui-steps__step zui-steps__step--last-child">
-    <text class="zui-steps__title">步骤三</text>
-    <view class="zui-steps__icon">
-      <view class="zui-steps__circle"></view>
-    </view>
-    <view class="zui-steps__line"></view>
   </view>
+
 </view>
diff --git a/pages/toast/index.js b/pages/toast/index.js
new file mode 100644
index 00000000..69273041
--- /dev/null
+++ b/pages/toast/index.js
@@ -0,0 +1,9 @@
+var ZUI = require('../../zui/index');
+
+Page(Object.assign({}, ZUI.Toast, {
+  data: {},
+
+  showToast() {
+    this.showZuiToast('哎呀，出了点小问题');
+  }
+}));
diff --git a/pages/toast/index.wxml b/pages/toast/index.wxml
new file mode 100644
index 00000000..081e019a
--- /dev/null
+++ b/pages/toast/index.wxml
@@ -0,0 +1,7 @@
+<import src="/zui/toast/index.wxml" />
+
+<view class="container">
+  <button class="zui-btn zui-btn--primary zui-btn--big" catchtap="showToast">弹个窗~</button>
+</view>
+
+<template is="zui-toast" data="{{ componentToast }}"></template>
diff --git a/pages/toptips/index.js b/pages/toptips/index.js
index 911d0e70..e1d340d0 100644
--- a/pages/toptips/index.js
+++ b/pages/toptips/index.js
@@ -1,6 +1,6 @@
-var topTips = require('../../zui/toptips/index');
+var ZUI = require('../../zui/index');
 
-Page(Object.assign({}, topTips, {
+Page(Object.assign({}, ZUI.TopTips, {
   data: {},
 
   showTopTips() {
diff --git a/zui/index.js b/zui/index.js
index 02c92dc0..4f4469c1 100644
--- a/zui/index.js
+++ b/zui/index.js
@@ -1,2 +1,4 @@
 exports.Tab = require('./tab/index');
 exports.Quantity = require('./quantity/index');
+exports.TopTips = require('./toptips/index');
+exports.Toast = require('./toast/index');
diff --git a/zui/steps/index.wxss b/zui/steps/index.wxss
index 102e1dd4..10fdeccd 100644
--- a/zui/steps/index.wxss
+++ b/zui/steps/index.wxss
@@ -2,6 +2,10 @@
   position: relative;
 }
 
+.zui-steps-5 .zui-steps__step {
+  width: 25%;
+}
+
 .zui-steps-4 .zui-steps__step {
   width: 33%;
 }
diff --git a/zui/toast/index.js b/zui/toast/index.js
new file mode 100644
index 00000000..cac1274b
--- /dev/null
+++ b/zui/toast/index.js
@@ -0,0 +1,28 @@
+module.exports = {
+  showZuiToast(title, timeout) {
+    var componentToast = this.data.componentToast || {};
+    clearTimeout(componentToast.timer);
+
+    // 弹层设置~
+    componentToast = {
+      show: true,
+      title
+    };
+    this.setData({
+      componentToast
+    });
+
+    componentToast.timer = setTimeout(() => {
+      this.clearZuiToast();
+    }, timeout || 3000);
+  },
+
+  clearZuiToast() {
+    var componentToast = this.data.componentToast || {};
+    clearTimeout(componentToast.timer);
+
+    this.setData({
+      'componentToast.show': false
+    });
+  }
+};
diff --git a/zui/toast/index.wxml b/zui/toast/index.wxml
new file mode 100644
index 00000000..5c835e68
--- /dev/null
+++ b/zui/toast/index.wxml
@@ -0,0 +1,3 @@
+<template name="zui-toast">
+  <view class="zui-toast" wx:if="{{ componentToast.show }}" bindtap="clearToast">{{ componentToast.title }}</view>
+</template>