这个东西怎么做呢？

main.js
import Vue from ‘vue’
import App from ‘./App.vue’
// 引入全部 Mint组件

// import Mint from ‘mint-ui’;
// import ‘mint-ui/lib/style.css’
// Vue.use(Mint);

import Vant from ‘vant’;
import ‘vant/lib/index.css’;

Vue.use(Vant);
import { Lazyload } from ‘vant’;

Vue.use(Lazyload);
import router from “./router”;

// 载入ajax 请求库
import axios from “axios”;
axios.defaults.baseURL=“https://api.it120.cc/xiaochengxu”;

Vue.prototype.$http=axios;

import store from “./store”
Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount(’#app’)

app.vue

router.js
import Vue from “vue”;
import VueRouter from “vue-router”;

Vue.use(VueRouter);

const router= new VueRouter({
mode:“history”,
routes:[
{
path:"/home",
component:()=>import("…/views/Home.vue"),
name:“home”,
meta:{
title:“小米商城”
} ,
children:[
// 首页
{
path:“first”,
component:()=>import("…/views/First.vue"),
name:“first”,
meta:{
title:“首页”
}
},
// 购物车
{
path:“car”,
component:()=>import("…/views/Car.vue"),
name:“car”,
meta:{
title:“购物车”
}
},
// 个人中心
{
path:“my”,
component:()=>import("…/views/My.vue"),
name:“my”,
meta:{
title:“个人中心”
}
},
]
},
// 商品详情
{
path:"/info",
component:()=>import("…/views/Info.vue"),
name:“info”,
meta:{
title:“商品详情”
}
},
{
path:"/login",
component:()=>import("…/views/Login.vue"),
name:“login”
},
{
path:"/register",
component:()=>import("…/views/Register.vue"),
name:“register”
},
// 重定向
{
path:"/",
redirect:"/home/first"
}
]
})
export default router;

store
import Vue from “vue”;
import Vuex from “vuex”;
import local from “./local.js”
Vue.use(Vuex);
import { Toast } from “vant”;

const store= new Vuex.Store({
state:{
carArr:local.get(“xiaomicar”),
// carArr:[
// /*
// {
// // 商品详情页
// id:“商品id”,
// pic:“图片地址”,
// name:“商品名称”,
// minPrice:“商品价格”,
// numberFav:“库存”,
// // 自定义
// check:true,
// date:“加入购物车时间”,
// num:“购买数量”
// }
// */

    // ] ,
    all:true  
},
actions:{},
mutations:{
    // 添加购物车数据
    addCar(state,obj){
        // console.log(obj);
        obj.check=true;
        obj.date=new Date().getTime();
        // 查看 商品 是否已加入 购物车 ，
        let index= state.carArr.findIndex(val=>val.id == obj.id)
        // 如果 没有加入 数量 =1 并加入
        if(index ==-1){
            obj.num=1;
            state.carArr.push(obj);
        }else{
                // 如果 已加入 改变数量 +1 ,不能超过库存
            if(state.carArr[index].num < state.carArr[index].numberFav){
                state.carArr[index].num+=1
            }else{
                Toast("最大库存了"); 
            }
        }

        local.set("xiaomicar",{"info":state.carArr})
       
    },
    // 数量 加
    jiaNum(state,id){
        // console.log(id)
        let index= state.carArr.findIndex(val=>val.id == id)
        if(state.carArr[index].num < state.carArr[index].numberFav){
            state.carArr[index].num+=1
        }else{
            Toast("最大库存了");
        }
        local.set("xiaomicar",{"info":state.carArr})
    },
    // 数量 减
    jianNum(state,id){
        let index= state.carArr.findIndex(val=>val.id == id)
        if(state.carArr[index].num >1){
            state.carArr[index].num-=1
        }else{
            Toast("至少买一件吧😄"); 
        }
        local.set("xiaomicar",{"info":state.carArr})
    },
    // 删除
    del(state,id){
        let index= state.carArr.findIndex(val=>val.id == id);
        state.carArr.splice(index,1)
        local.set("xiaomicar",{"info":state.carArr})
    },
    // 全选
    checkAll(state,allVal){
        state.all = allVal;
        state.carArr.map(val=>{
            val.check = allVal
        })
        local.set("xiaomicar",{"info":state.carArr})
    },
    // 反选
    fan(state){
        let index= state.carArr.findIndex(val=>val.check == false);
        if(index ==-1){
            state.all=true;
        }else{
            state.all=false;
        }
        local.set("xiaomicar",{"info":state.carArr})
    }

},
getters:{
    sumPrice(state){
        let sum =0;
        state.carArr.map(val=>{
            if(val.check == true){
                sum+= val.minPrice * val.num
            }
        })

        return sum
    }
}

})

export default store;

home.vue

first.vue

<!-- 九宫格导航 start -->
<van-grid :column-num="3">
  <van-grid-item
    v-for="value in 6"
    :key="value"
    icon="photo-o"
    text="文字"
  />
</van-grid>
<!-- 九宫格导航  end-->
<!-- 热门商品 -->
<van-divider>热门商品</van-divider>
<van-card
  v-for="item in hotGoodsArr"
  :key="item.id"
  :num="item.numberFav"
  :tag="item.kanjia ?'砍价': (item.pingtuan?'拼团':'') "
  :price="item.minPrice"
  :desc="item.characteristic"
  :title="item.name"
  :thumb="item.pic"
  :origin-price="item.originalPrice"
  @click="$router.push('/info?id='+item.id)"
/>
<!-- 砍价商品 -->
<van-divider>砍价商品</van-divider>
 <van-card
  v-for="item in kanjiaGoodsArr"
  :key="item.id"
  :num="item.numberFav"
  :tag="item.kanjia ?'砍价': (item.pingtuan?'拼团':'') "
  :price="item.minPrice"
  :desc="item.characteristic"
  :title="item.name"
  :thumb="item.pic"
  :origin-price="item.originalPrice"
  @click="$router.push('/info?id='+item.id)"
/>
<!-- 拼团商品 -->
<van-divider>拼团商品</van-divider>
 <van-card
  v-for="item in pingtuanGoodsArr"
  :key="item.id"
  :num="item.numberFav"
  :tag="item.kanjia ?'砍价': (item.pingtuan?'拼团':'') "
  :price="item.minPrice"
  :desc="item.characteristic"
  :title="item.name"
  :thumb="item.pic"
  :origin-price="item.originalPrice"
  @click="$router.push('/info?id='+item.id)"
/>

info

car

},
};