cps：省钱

htmldev/cps/src/views/marketing/index.vue

@@ -19,6 +19,9 @@
       </ul>
     </div>
     <router-view/>
+    <a
+      class="jump-mine"
+      href="javascript:;">我的</a>
   </div>
 </template>
 
@@ -175,4 +178,15 @@ export default {
     }
   }
 }
+
+.jump-mine {
+  position: absolute;
+  right: 20px;
+  bottom: 17px;
+  z-index: 1;
+  width: 66px;
+  height: 69px;
+  font-size: 0;
+  background: url("./image/ic_mine@2x.png") center center/64px 67px no-repeat;
+}
 </style>

htmldev/cps/src/views/marketing/save/index.vue

@@ -1,13 +1,163 @@
 <template>
-  <div>省钱</div>
+  <div class="save-container">
+    <div
+      class="wrapper"
+      ref="shopsWrapper">
+      <ul>
+        <li
+          v-for="(item, index) in shops"
+          :key="index">
+          <p class="category">{{ item.category }}</p>
+          <div class="wrap">
+            <!--第一个默认占位-->
+            <p></p>
+            <p
+              v-for="(shop, idx) in item.child"
+              :key="idx"
+              @click="handleJump(shop)">
+              <i :style="{backgroundImage: 'url(' + shop.icon + ')'}"></i>
+              <span>{{ shop.name }}</span>
+            </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
+import BScroll from 'better-scroll'
+
 export default {
-  name: 'index'
+  name: 'index',
+  data () {
+    return {
+      shopsScroll: null,
+      shops: [
+        {
+          category: '外卖',
+          child: [
+            {
+              icon: require('./image/ic_eleme@2x.png'),
+              name: '饿了么'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+      setTimeout(() => {
+        this._initScroll()
+      }, 500)
+    } else {
+      if (this.shopsScroll) {
+        this.shopsScroll.refresh()
+      }
+    }
+  },
+  methods: {
+    _initScroll () {
+      this.shopsScroll = new BScroll(this.$refs.shopsWrapper, {
+        click: true,
+        probeType: 3
+      })
+    },
+    handleJump (shop) {
+      console.log(shop)
+    }
+  },
+  beforeDestroy () {
+    this.shopsScroll && this.shopsScroll.destroy()
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.save-container {
+  position: absolute;
+  left: 0;
+  top: 56px;
+  right: 0;
+  bottom: 0;
+  background: #F7F6F9;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 15px 0 102px;
+
+    li {
+      position: relative;
+      left: 0;
+      top: 0;
+      width: 365px;
+      margin-bottom: 28px;
+    }
+  }
+
+  .category {
+    position: absolute;
+    left: 0;
+    top: 37px;
+    z-index: 1;
+    width: 118px;
+    height: 81px;
+    font-size: 24px;
+    color: #FE8F00;
+    line-height: 81px;
+    letter-spacing: 3px;
+    text-align: center;
+    background: url("./image/bg_category@2x.png") center center/118px 81px no-repeat;
+  }
 
+  .wrap {
+    display: flex;
+    flex-flow: row wrap;
+    width: 335px;
+    background: #FFFFFF;
+    box-shadow: 0 2px 4px 0 rgba(31, 49, 74, 0.12);
+    border-radius: 10px;
+    padding: 40px 0 26px 18px;
+    margin: 0 auto;
+
+    p {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100px;
+      margin-top: 30px;
+
+      &:nth-of-type(1),
+      &:nth-of-type(2),
+      &:nth-of-type(3) {
+        margin-top: 0;
+      }
+    }
+
+    i {
+      width: 50px;
+      height: 50px;
+      background-position: center center;
+      background-size: 48px 48px;
+      background-repeat: no-repeat;
+    }
+
+    span {
+      margin-top: 8px;
+      font-size: 16px;
+      color: #1F314A;
+      line-height: 22px;
+    }
+  }
+}
 </style>