可以搜索，可以添加到购物车，可以计算价格 

目录结构：

components（folder）

        meituan.vue

        store（folder）

               action.js

               mulation.js

               action.js

               index.js

 

 

 

 

这是主界面  meituan.vue

<template>
  <div>
    <div class="head">
      <input class="search" placeholder="搜索店内商品" v-model="value" @keyup.enter="search()">

      <span class="shopname">{{name}}</span>
    </div>
    <div class="content">
      <div class="shop">商品</div>
      <div class="comment">评价</div>
      <div class="daohang">
        <div class="detail">
          <div v-for="(val,index) in goodlist" :key="index" class="shopdetail">
            <img :src="val.img">
            <span class="name">
              {{val.title}}
              <br>
              <span class="num">月销量：{{val.num}}</span>
            </span>
            <div v-show="val.discount>0" class="originprice">
              <div class="discount">{{val.discount?val.discount+"折":""}}</div>
              {{val.discount?"限一次优惠":""}}
            </div>
            <div class="price">
              ￥{{val.price}}
              <span class="orprice">{{val.originPrice?"￥"+val.originPrice:""}}</span>
            </div>
            <div class="addorjian">
              <div class="add" @click="add(val)">+</div>
              <div class="addnum">{{val.buynum}}</div>
              <div class="jian" @click="jian(val.kind,val.id)">-</div>
            </div>
            <br>
          </div>
        </div>
        <div v-for="(val,key) in a" :key="key" @click="getGood(val.kind)">
          <div class="left">
            {{val.name}}
            <div class="goodnum" v-show="val.num>0">{{val.num?val.num:""}}</div>
          </div>
          <span>{{val.originPrice?"￥"+val.originPrice:""}}</span>
        </div>
      </div>
    </div>
    <div class="foot">
      <span class="sumnum">{{sumnum}}</span>
      <img src="https://assets.2dfire.com/frontend/a9752c552cf460467d8baad9adada580.png">
      <span class="sumprice">{{"￥"+sumprice}}</span>
      <div class="getorder" @click="getorder">去结算</div>
    </div>
  </div>
</template>
<script>
// import order from "./order"
import Vue from "vue";
import Vuex, { mapState, mapActions } from "vuex";
import UserModule from "./store/index";
export default {
  name: "Meituan",
  data() {
    return {
      goodlist: [],
      value: "",
      sumnum: 0,
      sumprice: 0
    };
  },
  created() {
    //使用vuex`
    Vue.use(Vuex);
    //创建一个store对象
    this.$store = new Vuex.Store();
    //注册路由模块，叫user
    this.$store.registerModule("USER", UserModule);

    this.getUserAction();
    for (this.i = 0; this.i < this.b.length; this.i++) {
      this.goodlist.push(this.b[this.i]);
    }
    // this.store.dispatch('USER/getUserAction')
  },
  methods: {
    //prototype 属性使您有能力向对象添加属性和方法。
    //映射的请求函数是getUserAction
    ...mapActions("USER", ["getUserAction"]),
    getGood(obj) {
      this.goodlist = [];
      for (this.i = 0; this.i < this.b.length; this.i++) {
        if (this.b[this.i].kind === parseInt(obj)) {
          this.goodlist.push(this.b[this.i]);
          if (this.b[this.i].discount === undefined) {
          }
        }
      }
    },
    add(val) {
      this.pricelist = [];
      for (this.i = 0; this.i < this.a.length; this.i++) {
        if (this.a[this.i].kind === val.kind) {
          this.a[this.i].num += 1;
        }
      }
      for (this.i = 0; this.i < this.b.length; this.i++) {
        if (this.b[this.i].id === val.id) {
          this.b[this.i].buynum += 1;
        }
      }
      this.sumnum += 1;
      for (this.i = 0; this.i < this.b.length; this.i++) {
        this.oneprice = (this.b[this.i].price * this.b[this.i].buynum).toFixed(
          2
        );
        this.pricelist.push(Number(this.oneprice));
      }
      const sum = (...arr) =>
        [].concat(...arr).reduce((acc, val) => acc + val, 0);
      this.sumprice = sum(this.pricelist).toFixed(2);
    },
    jian(obj, obj2) {
      for (this.i = 0; this.i < this.a.length; this.i++) {
        if (this.a[this.i].kind === obj) {
          this.a[this.i].num -= 1;
        }
      }
      for (this.i = 0; this.i < this.b.length; this.i++) {
        if (this.b[this.i].id === obj2) {
          this.b[this.i].buynum -= 1;
        }
      }
      this.sumnum -= 1;
    },
    search() {
      this.goodlist = [];
      for (this.i = 0; this.i < this.b.length; this.i++) {
        if (this.b[this.i].title.indexOf(this.value) >= 0) {
          this.goodlist.push(this.b[this.i]);
          console.log(this.goodlist);
        }
      }
    },
    getorder(){

    }
  },
  //把可能经常变动的值放在这，对应state.js（默认值）
  computed: {
    ...mapState("USER", {
      a: state => state.a,
      b: state => state.b,
      name: state => state.name
    })
  }
};
</script>
<style lang="">
* {
  padding: 0;
  margin: 0;
}
.sumprice {
  position: absolute;
  top: 10px;
  left: 80px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.getorder {
  position: absolute;
  left: 314px;
  background-color: green;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 20px;
  color: white;
  font-weight: bolder;
  line-height: 75px;

  /* overflow:hidden */
}
.content {
  width: 100%;
  /* margin-bottom: 20px; */
}
.sumnum {
  position: absolute;
  margin-left: 42px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: red;
  text-align: center;
  z-index: 1;
  color: white;
  font-weight: bold;
  vertical-align: middle;
}
.addnum {
  width: 20px;
  height: 20px;
  float: right;
  color: black;
  text-align: center;
  vertical-align: middle;
  margin-top: -17px;
  margin-left: 8px;
}
.addorjian {
  margin-right: 30px;
}
.goodnum {
  color: white;
  font-weight: bold;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: red;
  text-align: center;
  line-height: 20px;
}
.shopname {
  margin-left: 20px;
  margin-top: 10px;
  font-size: 15px;
  color: white;
  display: block;
}
.search {
  margin-top: 20px;
  margin-left: 10px;
}
.orprice {
  text-decoration: line-through;
  color: gray;
  margin-left: 5px;
}
.add {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  float: right;
  background-color: cornflowerblue;
  color: white;
  text-align: center;
  vertical-align: middle;
  /* display: inline-block; */
  margin-top: -17px;
  margin-left: 8px;
  font-weight: bold;
}
.jian {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  float: right;
  background-color: cornflowerblue;
  color: white;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  margin-top: -17px;
  font-weight: bold;
}
.originprice {
  display: inline-block;
  color: red;
  width: auto;
  height: 16px;
  border: 1px red solid;
  border-radius: 3px;
  margin-left: 0px;
  text-align: center;
  vertical-align: middle;
  padding-right: 2px;
  margin-top: -10px;
}

.discount {
  display: inline-block;
  margin-right: 5px;
  color: white;
  background-color: red;
}
.head {
  width: 100%;
  height: 100px;
  background-color: olivedrab;
}
.shop {
  width: 49%;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  font-weight: bolder;
  border-bottom: 1px solid olivedrab;
}
.shop:hover {
  color: olivedrab;
}
.comment {
  width: 50%;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  font-weight: bolder;
  border-bottom: 1px solid olivedrab;
}
.comment:hover {
  color: olivedrab;
}
.left {
  width: 20%;
  height: 30px;
  border-top: 0px;
  line-height: 30px;
  text-align: center;
  color: gray;
  background-color: #f8f8f8;
}
.daohang {
  width: 100%;
}
.detail {
  width: 76%;
  height: 200px;
  margin-top: 20px;
  position: absolute;
  right: 0;
  top: 10;
}
.shopdetail img {
  width: 70px;
  height: 60px;
}
.name {
  position: absolute;
  line-height: 20px;
  font-weight: bold;
}
.price {
  color: red;
  margin-left: 70px;
  /* float: left; */
  /* display: inline-block; */
}

.num {
  font-weight: normal;
  color: gray;
}
.foot img {
  width: 90px;
  height: 70px;
  position: fixed;
  bottom: 10px;
  left: 10px;
}
.foot {
  height: 80px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  background-color: olivedrab;
  border-radius: 50px;
  /* position:relative; */
  overflow: hidden;
}
</style>

 路由 router  index.js

import Vue from "vue";
import Router from "vue-router";
import Meituan from "@/components/meituan"
Vue.use(Router);
export default new Router({
routes: [
{
      path: "/",
      component: Meituan

},

  ]
});

store里面的state.js 

class UserState {
    defaultState() {
        return {
            a:"",
            b:"",
            name:""
        }
    }
}
export default new UserState().defaultState()

这是store里面的mutation.js 

const UserMutation = {
  //数据存在zhe

    COMMITUSER(state, data = {}) {
        state.a = data.a
        state.b = data.b
        state.name=data.name

    },

}
export default UserMutation

这是store的index.js 

import UserState from '../store/state'
import UserAction from '../store/action'
import UserMutation from '../store/mutation'

const UserStore = {
    namespaced: true,
    state: UserState,
    actions: UserAction,
    mutations: UserMutation,
}


export default UserStore

这是模仿请求的数据，模拟一个接口

store.js里面的action.js 

import img1 from "../../img/1.jpg";
import img2 from "../../img/2.jpg";
import img3 from "../../img/3.jpg";
import img4 from "../../img/4.jpg";
import img5 from "../../img/5.jpg";
const UserAction = {
  getUserAction(store) {
    let data = {
      name:"鲜丰水果",
      a: [
        {
          name:"优惠",
          num:0,
          kind:0
        },
        {
          name:"水果",
          num:0,
          kind:1
        },
        {
          name:"干果",
          num:0,
          kind:2
        },
        {
          name:"鲜奶",
          num:0,
          kind:3
        },
        {
          name:"果切",
          num:0,
          kind:4
        },


    ],
      b: [
        {
          id:0,
          img: img1,
          title:"烟台苹果",
          price:0.1,
          num:69,
          kind:0,
          discount:0.2,
          originPrice:5,
          buynum:0


        },
        {
          id:1,
          img: img2,
          title:"柠檬",
          price:1,
          num:27,
          kind:0,
          discount:1,
          originPrice:10,
          buynum:0
        },
        {
          id:2,
          img: img3,
          title:"沙糖桔",
          price:4.99,
          num:63,
          kind:1,
          buynum:0
        },
        {id:3,
          img: img4,
          title:"香梨",
          price:2.5,
          num:56,
          kind:1,
          buynum:0
        },
        {
          id:4,
          img: img5,
          title:"猕猴桃",
          price:1.88,
          num:89,
          kind:1,
          buynum:0
        }

      ]
    };

    store.commit("COMMITUSER", data);
  }
};
export default UserAction;