Vue移动常见2.0

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import Vant from 'vant'
import { Lazyload } from 'vant';

Vue.use(Lazyload);
import'vant/lib/index.css'

Vue.use(Vant)
import axios from "axios";
axios.defaults.baseURL="https://api.it120.cc/xiaochengxu"

Vue.prototype.$http= axios;
Vue.config.productionTip = false

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

App.vue

<template>
  <div id="app">
     <router-view></router-view>
  </div>
</template>

<style lang="less">

</style>

router/index.js

import Vue from'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter)
const routes=[
    {
        path:"/home",
        component:()=>import("../views/Home.vue"),
        name:"home",
        children:[
            {
                path:"car",
                component:()=>import("../components/Car.vue"),
                name:"car",
            },
            {
                path:"first",
                component:()=>import("../components/First.vue"),
                name:"first",
            },
            {
                path:"menu",
                component:()=>import("../components/Menu.vue"),
                name:"menu",
            },
        ]
        
    },
    {
        path:"/info",
        component:()=>import("../views/Info.vue"),
        name:"info",
    },
    {
        path:"/denglv",
        component:()=>import("../views/denglv.vue"),
        name:"denglv",
    },
    {
        path:"/zhuce",
        component:()=>import("../views/zhuce.vue"),
        name:"zhuce",
    },
    {
        path:"/",
        redirect:"/home/car"
       
    }

]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
  export default router

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import { Toast } from 'vant';
Vue.use(Vuex);


const store =new Vuex.Store({
    state:{
      carList: localStorage.getItem("xiaomi")?JSON.parse(localStorage.getItem("xiaomi")):[],
        all:localStorage.getItem('all') ?  Number( localStorage.getItem('all'))  : true,
    },
    actions:{},
    mutations:{
        addCar(state,obj){
            let index = state.carList.findIndex(v=>v.id == obj.id);
                // 0 1 2 3 4    没有 -1
            if( index > -1){
                // 有 -修改
                state.carList[index].num+=1;
                console.log("state.carList:",state.carList);
            }else{
                // 没有 -添加
                obj.num =1;
                obj.buy =true;
                state.carList.push(obj);
                console.log("state.carList:",state.carList);
            }
            localStorage.setItem('xiaomi',JSON.stringify(state.carList))
        },
        del(state,id){
            let index = state.carList.findIndex(v=>v.id == id);
            state.carList.splice(index,1) 
            localStorage.setItem('xiaomi',JSON.stringify(state.carList))

        },
        jia(state,id){
            let index = state.carList.findIndex(v=>v.id == id);
            state.carList[index].num +=1;
            localStorage.setItem('xiaomi',JSON.stringify(state.carList))

        },
        jian(state,id){
            let index = state.carList.findIndex(v=>v.id == id);
            if(state.carList[index].num >1){
                state.carList[index].num -=1;
            }else{
                Toast("至少买一件");
            }
             

        },
        //点击全选
        changeAll(state,value){
            state.all =value;
            state.carList.forEach(v=>{
                v.buy= value;
            })
            localStorage.setItem('xiaomi',JSON.stringify(state.carList))
            localStorage.setItem('all', state.all ?1:0)



        },
        // 点击 每一项 是否选中 全选
        allChange(state){
            let index = state.carList.findIndex(v=>v.buy ==false);
        
            if(index == -1){
                state.all= true;
            }else{
                state.all= false;
            }
            localStorage.setItem('carList',JSON.stringify(state.carList))
            localStorage.setItem('all',state.all ?1:0)
            
        }
        

    },
    getters:{
        sum(state){
            let s=0;
            console.log("state",state);
            for(let v of state.carList){
                if(v.buy == true){
                    s+= v.num * v.minPrice
                }
            }
            
            return s;

        }
    }
})

export default store;

views/Home.vue

<template>
  <div>
    <div class="content">
        <router-view></router-view>
    </div>
    <van-tabbar route>
      <van-tabbar-item  to="/home/car" icon="apps-o">首页</van-tabbar-item>
      <van-tabbar-item  to="/home/first" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item  to="/home/menu" icon="wap-home-o">个人中心</van-tabbar-item>
      

    </van-tabbar>
  </div>
</template>

<style lang="less">
    .content{
      margin-bottom: 50px;
    }
</style>

views/Info.vue

<template>
  <div>
    <van-nav-bar
    v-if="info"
    :title="info.basicInfo.name "
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
    />

    <!-- 商品详情 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="info">
      <van-swipe-item v-for="v in info.pics" :key="v.id">
          <img :src="v.pic" alt="">
      </van-swipe-item>
      
    </van-swipe>

    <p v-if="info">商品名称：{{ info.basicInfo.name }}</p>
    <p v-if="info">商品价格：{{ info.basicInfo.minPrice }}</p>
    <p v-if="info">商品描述：{{  info.basicInfo.characteristic}}</p>

    <div v-if="info" v-html="info.content" id="content"></div>
    <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button type="warning"  text="加入购物车" @click="toCar()" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data(){return { info:null}},
  mounted() {
    let id = this.$route.query.id;
    this.getGoodsDetail(id);
  },
  methods: {
    getGoodsDetail(id) {
      this.$http.get("/shop/goods/detail", { params: { id: id } }).then((res) => {
        // console.log(res.data.data);
        this.info= res.data.data;
      });
    },
// 点击加入购物车
    toCar(){
       let {id,name,minPrice,pic} = this.info.basicInfo
            const obj={id,name,minPrice,pic}

            this.$store.commit('addCar',obj)
            this.$router.push("/home/first")
    }


  },
};
</script>

<style lang="less" scoped>
/deep/ .my-swipe {
  height: 45vh;
  border: 1px solid red;
  img {
    width: 100%;
    height: 100%;
  }
}

/deep/ #content {
    margin-bottom: 50px;
    //  line-height: 0; 
    img{
        width: 100%;
        height: 100%;
        vertical-align: middle;  
        // display: block;
    }

}
</style>

components/Car.vue

<template>
  <div>
     <h1>小米商城</h1>
     <van-swipe :autoplay="3000">
        <van-swipe-item v-for="image in images" :key="image.id">
          <img :src="image.picUrl" class="img" /> 
        </van-swipe-item>
      </van-swipe>
      <van-grid column-num="4">
        <van-grid-item v-for="value in 4" :key="value" icon="photo-o" text="文字" />
        <van-grid-item v-for="value in aar" :key="value" icon="photo-o" text="文字" />
      </van-grid>
      <div v-if="goodsList.length>0" >
        <h3>热门推荐</h3>
        <div v-for="v in goodsList " :key="v.id" @click="toInfo(v.id)">
              <van-card
                    :price="v.maxCoupons"
                    :desc="v.name"
                    :title="v.characteristic"
                    :thumb="v.pic"
                    :origin-price="v.originalPrice"
                    />
                    
          </div>
      </div>
      <div v-if="dazhe.length>0" >
        <h3>砍价商品列表</h3>
        <div v-for="b in dazhe " :key="b.id" @click="toInfo(b.id)">
              <van-card
                    :tag="b.tags"
                    :price="b.maxCoupons"
                    :desc="b.name"
                    :title="b.characteristic"
                    :thumb="b.pic"
                    :origin-price="b.originalPrice"
                    />
        </div>
      </div>
       <div v-if="pintuan.length>0" >
        <h3>拼团商品列表</h3>
       
        <div v-for="b in pintuan " :key="b.id" @click="toInfo(b.id)">
              <van-card
                    :tag="b.tags"
                    :price="b.maxCoupons"
                    :desc="b.name"
                    :title="b.characteristic"
                    :thumb="b.pic"
                    :origin-price="b.originalPrice"
                    />
        </div>
      </div>

  </div>
</template>
<script>
  export default {
  data() {
    return {
      aar:[11,22,33,44],
      images:[],
      goodsList:[],
      dazhe:[],
      pintuan:[]


    };
  },
  created() {
       this.aaaa()
        this.bbbb()
        this.cccc()
        this.dddd()
    },
    methods: {
      aaaa(){
         this.$http.get("/banner/list")
            .then(res=>{
                 this.images=res.data.data;
            })
      },
     async bbbb(){
        let res =await this.$http.get("/shop/goods/list",{params:{"kanjia":false, "pingtuan": false}})
               this.goodsList=res.data.data;
            
      },
   async  cccc(){
         let res =await this.$http.get("/shop/goods/list",{params:{"kanjia":true }})
               this.dazhe=res.data.data;
               console.log("dazhe",this.dazhe)
      },
      async  dddd(){
         let res =await this.$http.get("/shop/goods/list",{params:{"pingtuan":true}})
            
                console.log("pintuan",res.data.data)
               this.pintuan=res.data.data;
      },
      toInfo(id){
        this.$router.push({"name":"info",query:{id:id}})

      }
  
  
       }
};
</script>
<style>
.img{
  width:100%;
  height:186px;
}
</style>

components/First.vue

<template>
  <div>
    <div class="car_list" v-for="v in carList" :key="v.id">
      <van-swipe-cell>
          <template #left>
            <div class="item">
                <input type="checkbox" v-model="v.buy" @change="fn2" class="iet" />
            </div>
        </template>
        <van-card :price="v.minPrice" :desc="v.name" :thumb="v.pic">
          <template #footer>
            <van-stepper @plus="jia(v.id)" @minus="jian(v.id)" />
          </template>
        </van-card>
        <template #right>
          <van-button square type="danger" text="删除" @click="del(v.id)"class="a" />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar :price="sum * 100" button-text="提交订单" >
      <input type="checkbox" :checked="all" @change="fn" /> 全选
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState(["carList", "all"]),
    ...mapGetters(["sum"]),
  },
  methods: {
    ...mapMutations(["del", "jia", "jian"]),
    fn(event) {
      this.$store.commit("changeAll", event.target.checked);
    },
    fn2() {
      this.$store.commit("allChange");
    },
  },
};
</script>

<style lang="less" >
.car_list {
  margin-bottom: 50px;
}
.van-submit-bar {
  bottom: 50px;
}
 .item ,
 .a {
  width: 100%;
  height: 100%;
  
}
 
 .iet{
margin-top: 200%;
 }
</style>