使用vue 实现外卖平台，饿了么美团模仿

使用vue 实现外卖平台，饿了么美团模仿

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

目录结构：

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" &#="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">{{iginPrice?"￥"&#iginPrice:""}}</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>{{iginPrice?"￥"&#iginPrice:""}}</span></div></div></div><div class="foot"><span class="sumnum">{{sumnum}}</span><img src=".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();//注册路由模块，叫userthis.$isterModule("USER", UserModule);UserAction();for (this.i = 0; this.i < this.b.length; this.i++) {dlist.push(this.b[this.i]);}// this.store.dispatch('USER/getUserAction')},methods: {//prototype 属性使您有能力向对象添加属性和方法。//映射的请求函数是apActions("USER", ["getUserAction"]),getGood(obj) {dlist = [];for (this.i = 0; this.i < this.b.length; this.i++) {if (this.b[this.i].kind === parseInt(obj)) {dlist.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++) {price = (this.b[this.i].price * this.b[this.i].buynum).toFixed(2);this.pricelist.push(price));}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() {dlist = [];for (this.i = 0; this.i < this.b.length; this.i++) {if (this.b[this.i].title.indexOf(this.value) >= 0) {dlist.push(this.b[this.i]);console.dlist);}}},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;
}
ment {width: 50%;height: 30px;display: inline-block;line-height: 30px;font-weight: bolder;border-bottom: 1px solid olivedrab;
}
ment: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 = {//数据存在zheCOMMITUSER(state, data = {}) {state.a = data.astate.b = data.bstate.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}]};storemit("COMMITUSER", data);}
};
export default UserAction;