Merge branch 'master' of http://git.yoho.cn/fe/yoho-community-web

@@ -65,11 +65,21 @@ export default {
       this.posting = false;
 
       if (result.code === 200) {
-        this.$createToast({
-          txt: favorite ? '收藏成功' : '取消收藏成功',
-          type: 'success',
-          time: 1000
-        }).show();
+        if (favorite) {
+          this.prompt = this.$grassPrompt({
+            img: this.product.productImage,
+            title: '收藏成功',
+            desc: '可在 [我的-商品收藏] 页面查看'
+          });
+        } else {
+          this.prompt && this.prompt.hide();
+          this.$createToast({
+            txt: '取消收藏成功',
+            type: 'success',
+            time: 1000
+          }).show();
+        }
+
         this.favorite = favorite;
       } else {
         this.$createToast({

@@ -5,11 +5,13 @@ import {
 import {createApp} from './app';
 import {createApi} from 'create-api';
 import {Style, Toast, Dialog, ActionSheet} from 'cube-ui'; //eslint-disable-line
+import Prompt from 'plugins/grass-prompt';
 import {get} from 'lodash';
 import Lazy from 'vue-lazyload';
 import yoho from 'common/yoho';
 import sdk from 'common/sdk';
 import 'statics/scss/common.scss';
+import 'statics/scss/grass-prompt.scss';
 import 'statics/font/iconfont.css';
 
 const $app = document.getElementById('app');
@@ -34,6 +36,7 @@ Vue.prop('auth', function() {
 
   return true
 });
+Vue.use(Prompt);
 Vue.use(Toast);
 Vue.use(Dialog);
 Vue.use(ActionSheet);

+import {isArray} from 'lodash';
+
+export default {
+  install(Vue) {
+    let promptVM = null;
+    let promptEle = null;
+    let timer = null;
+
+    function creatPromptVM(self) {
+      let tpl = Vue.extend({
+          data: function () {
+              return {
+                type: '',
+                img: '',
+                title: '',
+                desc: '',
+                onClick: null,
+                classNames: []
+              }
+          },
+          render: function(h) {
+            let classNames = ['yoho-grass-prompt-wrap', ...this.classNames];
+
+            return h('div', {class: ['yoho-grass-prompt', `yoho-grass-prompt-${this.type}`]}, [
+              h(this.url ? 'router-link' : 'div', {
+                class: classNames,
+                on: {
+                  click: () => {
+                    this.onClick && this.onClick();
+                  }
+                }
+              }, [
+                h('ImageFormat', {
+                  class: ['prompt-thumb'],
+                  props: {
+                    src: this.img,
+                    lazy: false,
+                    width: 100,
+                    height: 100
+                  }
+                }),
+                h('div', {class: ['prompt-info']}, [
+                  h('p', {
+                    class: ['prompt-info-title'],
+                    domProps: {
+                      innerHTML: this.title
+                    }
+                  }),
+                  h('p', {
+                    class: ['prompt-info-desc'],
+                    domProps: {
+                      innerHTML: this.desc
+                    }
+                  })
+                ]),
+                h('span', {class: ['iconfont', 'icon-right', 'prompt-icon']})
+              ])
+            ])
+          }
+      });
+
+      promptVM = new tpl();
+      promptEle = promptVM.$mount().$el;
+      document.body.appendChild(promptEle);
+    }
+
+    Vue.prototype.$grassPrompt = function(data = {}, time) {
+      let {img, title, desc, type, className, onClick} = data;
+
+      if (!promptVM) {
+        creatPromptVM(this);
+      }
+
+      promptVM.img  = img || '';
+      promptVM.title = title;
+      promptVM.desc = desc;
+      promptVM.type = type || 'bottom';
+
+      if (className && !isArray(className)) {
+        className = [className];
+      }
+
+      promptVM.classNames = className || [];
+
+      if (typeof onClick === 'function') {
+        promptVM.onClick = onClick;
+      }
+
+      let res = {
+        show() {
+          timer && clearTimeout(timer);
+          timer = setTimeout(function() {
+            promptVM.classNames.push('yoho-grass-prompt-enter-active');
+
+            timer = setTimeout(function() {
+              promptVM.classNames.push('yoho-grass-prompt-leave-active');
+            }, time || 8000);
+          }, 100);
+        },
+        hide() {
+          timer && clearTimeout(timer);
+          promptVM.classNames = [];
+        }
+      }
+
+      res.show();
+
+      return res;
+    }
+  }
+}

+.yoho-grass-prompt {
+  position: fixed;
+  width: 100%;
+  z-index: 10;
+
+  .yoho-grass-prompt-wrap {
+    width: 100%;
+    padding: 30px;
+    background-color: rgba(0, 0, 0, 0.7);
+    position: absolute;
+    display: flex;
+    align-items: center;
+
+    .prompt-thumb {
+      width: 100px;
+      height: 100px;
+    }
+
+    .prompt-info {
+      flex-grow: 1;
+      margin-left: 20px;
+
+      > * {
+        margin-top: 10px;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+
+      .prompt-info-title {
+        font-size: 32px;
+        color: #fff;
+      }
+
+      .prompt-info-desc {
+        font-size: 24px;
+        color: #b0b0b0;
+        font-weight: 300;
+      }
+    }
+
+    .prompt-icon {
+      color: #979797;
+      font-size: 40px;
+    }
+  }
+
+  &.yoho-grass-prompt-top {
+    top: 0;
+
+    > * {
+      bottom: 0;
+    }
+
+    .yoho-grass-prompt-enter-active {
+      transform: translateY(100%);
+    }
+
+    .yoho-grass-prompt-leave-active {
+      transform: translateY(-100%);
+    }
+  }
+
+  &.yoho-grass-prompt-bottom {
+    bottom: 0;
+
+    .yoho-grass-prompt-enter-active {
+      transform: translateY(-100%);
+    }
+
+    .yoho-grass-prompt-leave-active {
+      transform: translateY(100%);
+    }
+  }
+
+  .yoho-grass-prompt-enter-active,
+  .yoho-grass-prompt-leave-active {
+    transition: all 200ms;
+  }
+}