可以搜索，可以添加到购物车，可以计算价格
目录结构：
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;