cps：商城

htmldev/cps/src/router/index.js

@@ -53,6 +53,15 @@ const routes = [
           isUseCache: false,
           keepAlive: true
         }
+      },
+      {
+        path: '/mall', // 更多省钱
+        name: 'MarketingMall',
+        component: _import('views/marketing/mall/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
       }
     ]
   }

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

@@ -7,7 +7,7 @@
         class="tab-list"
         ref="tabList">
         <li class="tab-item"
-            :class="{'link-avtive': $route.name === item.routeName}"
+            :class="{'link-avtive': $route.name === item.routeName || $route.name === item.sub}"
             v-for="(item, index) in navList"
             :key="index"
             @click="_selectNav(item)">
@@ -42,7 +42,8 @@ export default {
           title: '省钱',
           default: require('./image/ic_save_0@2x.png'),
           active: require('./image/ic_save_1@2x.png'),
-          routeName: 'MarketingSave'
+          routeName: 'MarketingSave',
+          sub: 'MarketingMall'
         },
         {
           id: 1,

htmldev/cps/src/views/marketing/mall/api/index.js

@@ -0,0 +1,11 @@
+import request from '@/api/request'
+
+/**
+ * 商品列表接口
+ * @param id 酒吧ID
+ */
+export const apiProductList = () => request({
+  method: 'GET',
+  url: '/sell/api/goods',
+  showLoading: true
+})

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

@@ -0,0 +1,363 @@
+<template>
+  <div class="mall-container">
+    <div class="mask"></div>
+    <div class="goods">
+      <div
+        ref="menuWrapper"
+        class="menu-wrapper">
+        <ul>
+          <li
+            v-for="(item, index) in goods"
+            :key="index"
+            ref="menuList"
+            :class="{'current':currentIndex === index}"
+            class="menu-item"
+            @click="selectMenu(index, $event)">
+            <span class="text">{{ item.name }}</span>
+          </li>
+        </ul>
+      </div>
+      <div
+        ref="foodsWrapper"
+        class="foods-wrapper">
+        <ul>
+          <li
+            v-for="(item, index) in goods"
+            :key="index"
+            ref="foodList"
+            class="food-list">
+            <h1 class="title">{{ item.name }}</h1>
+            <ul>
+              <li
+                v-for="(food, idx) in item.foods"
+                :key="idx"
+                class="food-item"
+                @click="selectFood(food, $event)">
+                <div class="icon">
+                  <img
+                    :src="food.product_img_url"
+                    alt=""
+                    height="88"
+                    width="88">
+                </div>
+                <div class="content">
+                  <div>
+                    <h2 class="name">{{ food.product_name }}</h2>
+                    <p v-if="false" class="desc">{{ food.product_sale_num }}人推荐</p>
+                  </div>
+                  <div class="price">
+                    <span class="now">￥{{ food.product_price | fen2Yuan }}</span>
+                  </div>
+                  <!--第一个版本暂时不用-->
+                  <div
+                    v-if="false"
+                    class="cartcontrol-wrapper">
+                    <cartcontrol
+                      :food="food"
+                      @add="addFood"/>
+                  </div>
+                  <van-button
+                    v-if="food.is_sell_out === 0"
+                    class="btn-show-sku"
+                    type="danger">选规格
+                  </van-button>
+                  <!--售罄图标-->
+                  <img
+                    v-if="food.is_sell_out === 1"
+                    alt=""
+                    class="sell-out"
+                    src="./image/ic_sold_out@2x.png">
+                </div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import BScroll from 'better-scroll'
+import { Toast, Button } from 'vant'
+import { mockGoods } from './mock'
+
+export default {
+  data () {
+    return {
+      goods: [],
+      listHeight: [],
+      scrollY: 0,
+      selectedFood: {}
+    }
+  },
+  computed: {
+    currentIndex () {
+      for (let i = 0; i < this.listHeight.length; i++) {
+        const height1 = this.listHeight[i]
+        const height2 = this.listHeight[i + 1]
+        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
+          this._followScroll(i)
+          return i
+        }
+      }
+      return 0
+    }
+  },
+  async activated () {
+    this.fetchProductList()
+  },
+  methods: {
+    selectMenu (index, event) {
+      if (!event._constructed) {
+        return
+      }
+      const foodList = this.$refs.foodList
+      const el = foodList[index]
+      // offsetY的值改为3，是因为px转rem有误差，iOS12.4.1点击左侧导航时，当前点击的菜单无法被选中，类似一个修正值
+      this.foodsScroll.scrollToElement(el, 300, true, 3)
+    },
+    async selectFood (food, event) {
+      // better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true
+      // 这里暂时用不到
+      // if (!event._constructed) {
+      //   return
+      // }
+    },
+    addFood (target) {
+      this._drop(target)
+    },
+    _initScroll () {
+      this.meunScroll = new BScroll(this.$refs.menuWrapper, {
+        click: true
+      })
+
+      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
+        click: true,
+        probeType: 3
+      })
+
+      this.foodsScroll.on('scroll', (pos) => {
+        // 判断滑动方向，避免下拉时分类高亮错误（如第一分类商品数量为1时，下拉使得第二分类高亮）
+        if (pos.y <= 0) {
+          this.scrollY = Math.abs(Math.round(pos.y))
+        }
+      })
+    },
+    _calculateHeight () {
+      const foodList = this.$refs.foodList
+      let height = 0
+      this.listHeight.push(height)
+      for (let i = 0; i < foodList.length; i++) {
+        const item = foodList[i]
+        height += item.clientHeight
+        this.listHeight.push(height)
+      }
+    },
+    _followScroll (index) {
+      const menuList = this.$refs.menuList
+      const el = menuList[index]
+      this.meunScroll.scrollToElement(el, 300, 0, -100)
+    },
+    // 获取商品列表
+    async fetchProductList () {
+      try {
+        const { data, status, msg } = mockGoods
+        if (status) {
+          if (Array.isArray(data) && data.length) {
+            this.goods = data
+            setTimeout(() => {
+              this._initScroll()
+              this._calculateHeight()
+            }, 500)
+          }
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
+    }
+  },
+  components: {
+    'van-button': Button
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mall-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+}
+
+.mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.goods {
+  display: flex;
+  position: absolute;
+  left: 0;
+  top: 111px;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  background: #F7F6F9;
+  overflow: hidden;
+
+  .menu-wrapper {
+    flex: 0 0 83px;
+    width: 83px;
+    background: #FFFFFF;
+    box-shadow: 0 2px 4px 0 rgba(31, 49, 74, 0.12);
+
+    .menu-item {
+      display: flex;
+      height: 53px;
+      width: 100%;
+      padding: 11px 0 11px 11px;
+
+      &.current {
+        background: #F2FBFF;
+
+        .text {
+          font-weight: bolder;
+          color: #4D69A4;
+        }
+      }
+
+      .text {
+        height: 31px;
+        font-size: 14px;
+        color: #666666;
+        line-height: 31px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.foods-wrapper {
+  flex: 1;
+
+  .title {
+    padding: 10px 0 20px 19px;
+    height: 42px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #736F6F;
+    line-height: 20px;
+  }
+
+  .food-item {
+    display: flex;
+    margin: 8px 18px 0 16px;
+    padding-bottom: 8px;
+  }
+
+  &:last-child {
+    @include border-none();
+    margin-bottom: 0;
+  }
+
+  .icon {
+    flex: 0 0 88px;
+    margin-right: 8px;
+    overflow: hidden;
+
+    img {
+      border-radius: 8px;
+    }
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .name {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      margin: 4px 0;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1F1E1E;
+      line-height: 22px;
+      word-break: break-all;
+    }
+
+    .desc {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      font-size: 12px;
+      color: #736F6F;
+      line-height: 17px;
+      word-break: break-all;
+    }
+
+    .price {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .now {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 600;
+      color: #D32323;
+      line-height: 22px;
+    }
+
+    .cartcontrol-wrapper {
+      position: absolute;
+      right: 0;
+      bottom: 1px;
+    }
+
+    .btn-show-sku {
+      position: absolute;
+      right: 0;
+      bottom: 7px;
+      width: 55px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      background: #D32323;
+      border-radius: 12px;
+
+      ::v-deep .van-button__text {
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 24px;
+      }
+    }
+
+    .sell-out {
+      position: absolute;
+      right: 0;
+      bottom: 9px;
+      display: block;
+      width: 46px;
+      height: 32px;
+    }
+  }
+}
+</style>

htmldev/cps/src/views/marketing/mall/mock/index.js

@@ -0,0 +1,1080 @@
+export const mockGoods = {
+  errno: 0,
+  status: 1,
+  data: [
+    {
+      name: '热销榜',
+      type: -1,
+      foods: [
+        {
+          name: '皮蛋瘦肉粥',
+          price: 10,
+          oldPrice: '',
+          description: '咸粥',
+          sellCount: 229,
+          rating: 100,
+          info: '一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '很喜欢的粥',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 1,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '扁豆焖面',
+          price: 14,
+          oldPrice: '',
+          description: '',
+          sellCount: 188,
+          rating: 96,
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 1,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          info: '',
+          icon: 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '葱花饼',
+          price: 10,
+          oldPrice: '',
+          description: '',
+          sellCount: 124,
+          rating: 85,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 1,
+              text: '没啥味道',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 1,
+              text: '很一般啊',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '牛肉馅饼',
+          price: 14,
+          oldPrice: '',
+          description: '',
+          sellCount: 114,
+          rating: 91,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 1,
+              text: '难吃不推荐',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '招牌猪肉白菜锅贴/10个',
+          price: 17,
+          oldPrice: '',
+          description: '',
+          sellCount: 101,
+          rating: 78,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 1,
+              text: '不脆,不好吃',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '南瓜粥',
+          price: 9,
+          oldPrice: '',
+          description: '甜粥',
+          sellCount: 91,
+          rating: 100,
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '红豆薏米美肤粥',
+          price: 12,
+          oldPrice: '',
+          description: '甜粥',
+          sellCount: 86,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '八宝酱菜',
+          price: 4,
+          oldPrice: '',
+          description: '',
+          sellCount: 84,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '红枣山药糙米粥',
+          price: 10,
+          oldPrice: '',
+          description: '',
+          sellCount: 81,
+          rating: 91,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '糊塌子',
+          price: 10,
+          oldPrice: '',
+          description: '',
+          sellCount: 80,
+          rating: 93,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '单人精彩套餐',
+      type: 2,
+      foods: [
+        {
+          name: '红枣山药粥套餐',
+          price: 29,
+          oldPrice: 36,
+          description: '红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注',
+          sellCount: 17,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '冰爽饮品限时特惠',
+      type: 1,
+      foods: [
+        {
+          name: 'VC无限橙果汁',
+          price: 8,
+          oldPrice: 10,
+          description: '',
+          sellCount: 15,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '还可以',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '精选热菜',
+      type: -1,
+      foods: [
+        {
+          name: '娃娃菜炖豆腐',
+          price: 17,
+          oldPrice: '',
+          description: '',
+          sellCount: 43,
+          rating: 92,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '菜量还可以,味道还可以',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '手撕包菜',
+          price: 16,
+          oldPrice: '',
+          description: '',
+          sellCount: 29,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '香酥黄金鱼/3条',
+          price: 11,
+          oldPrice: '',
+          description: '',
+          sellCount: 15,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '爽口凉菜',
+      type: -1,
+      foods: [
+        {
+          name: '八宝酱菜',
+          price: 4,
+          oldPrice: '',
+          description: '',
+          sellCount: 84,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '拍黄瓜',
+          price: 9,
+          oldPrice: '',
+          description: '',
+          sellCount: 28,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '精选套餐',
+      type: -1,
+      foods: [
+        {
+          name: '红豆薏米粥套餐',
+          price: 37,
+          oldPrice: '',
+          description: '红豆薏米粥,三鲜干蒸烧卖,拍黄瓜',
+          sellCount: 3,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '皮蛋瘦肉粥套餐',
+          price: 31,
+          oldPrice: '',
+          description: '',
+          sellCount: 12,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '果拼果汁',
+      type: -1,
+      foods: [
+        {
+          name: '蜜瓜圣女萝莉杯',
+          price: 6,
+          oldPrice: '',
+          description: '',
+          sellCount: 1,
+          rating: '',
+          info: '',
+          ratings: [],
+          icon: 'http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '加多宝',
+          price: 6,
+          oldPrice: '',
+          description: '',
+          sellCount: 7,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: 'VC无限橙果汁',
+          price: 8,
+          oldPrice: 10,
+          description: '',
+          sellCount: 15,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '还可以',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '小吃主食',
+      type: -1,
+      foods: [
+        {
+          name: '扁豆焖面',
+          price: 14,
+          oldPrice: '',
+          description: '',
+          sellCount: 188,
+          rating: 96,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 1,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '葱花饼',
+          price: 10,
+          oldPrice: '',
+          description: '',
+          sellCount: 124,
+          rating: 85,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 1,
+              text: '没啥味道',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 1,
+              text: '很一般啊',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '牛肉馅饼',
+          price: 14,
+          oldPrice: '',
+          description: '',
+          sellCount: 114,
+          rating: 91,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 1,
+              text: '难吃不推荐',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '招牌猪肉白菜锅贴/10个',
+          price: 17,
+          oldPrice: '',
+          description: '',
+          sellCount: 101,
+          rating: 78,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 1,
+              text: '不脆,不好吃',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '糊塌子',
+          price: 10,
+          oldPrice: '',
+          description: '',
+          sellCount: 80,
+          rating: 93,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    },
+    {
+      name: '特色粥品',
+      type: -1,
+      foods: [
+        {
+          name: '皮蛋瘦肉粥',
+          price: 10,
+          oldPrice: '',
+          description: '咸粥',
+          sellCount: 229,
+          rating: 100,
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '很喜欢的粥',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 1,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '南瓜粥',
+          price: 9,
+          oldPrice: '',
+          description: '甜粥',
+          sellCount: 91,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '红豆薏米美肤粥',
+          price: 12,
+          oldPrice: '',
+          description: '甜粥',
+          sellCount: 86,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '红枣山药糙米粥',
+          price: 10,
+          oldPrice: '',
+          description: '',
+          sellCount: 81,
+          rating: 91,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '鲜蔬菌菇粥',
+          price: 11,
+          oldPrice: '',
+          description: '咸粥',
+          sellCount: 56,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: ''
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750'
+        },
+        {
+          name: '田园蔬菜粥',
+          price: 10,
+          oldPrice: '',
+          description: '咸粥',
+          sellCount: 33,
+          rating: 100,
+          info: '',
+          ratings: [
+            {
+              username: '3******c',
+              rateTime: 1469281964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '2******3',
+              rateTime: 1469271264000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            },
+            {
+              username: '3******b',
+              rateTime: 1469261964000,
+              rateType: 0,
+              text: '',
+              avatar: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
+            }
+          ],
+          icon: 'http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114',
+          image: 'http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750'
+        }
+      ]
+    }
+  ]
+}

htmldev/cps/vue.config.js

@@ -50,6 +50,14 @@ module.exports = {
         pathRewrite: {
           '^/api': '/api'
         }
+      },
+      '/sell': {
+        target: 'http://ustbhuangyi.com',
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/sell': '/sell'
+        }
       }
     },
     overlay: {