商品列表--转详情点击加入购物车

购物车

首页列表

<template>

  <div class="home">

    <div @click="tiao(index)" class="one" v-for="(item,index) in listthree " :key="index">

        <div class="tu">

            <img :src="item.image">

        </div>

        <div class="zi">

            <p>{{item.title}}</p>

        </div>

    </div>

  </div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

export default {

  name: 'HomeView',

  components: {

  },

  computed:{

      listthree(){

          return this.$store.state.listthree

      }

  },

  mounted(){

      this.axios.get('http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f')

      .then(res=>{

        console.log(res.data.data[0].items)

        this.$store.commit("shuju",res.data.data[0].items)

      })

  },

  methods:{

      tiao(a){

         this.$router.push({

             name:'one',

         })

         var id=this.listthree[a].gid;

         console.log(id)

         localStorage.setItem('id',id)

      }

  }

}

</script>

<style src='../css/homeview.css' scoped>

</style>

详情

<template>

    <div class="da">

        <div class="quan">

            <div class="tu">

                <img :src="img" />

            </div>

            <div class="zi">

                <span>{{list.title}}</span>

            </div>

            <div class="qian">

                ${{list.price}}

            </div>

            <div class="gouwu">

                <button @click="tioagouwu">加入购物车</button>

            </div>

            <!-- {{item}} -->

        </div>

    </div>

</template>

<script>

    export default{

        name:'one',

        computed:{

            list(){

                return this.$store.state.list

            },

            img(){

                return this.$store.state.img

            },

           

        },

        mounted(){

            var id=localStorage.getItem('id')

            this.axios.get('http://vueshop.glbuys.com/api/home/goods/info/gid/'+id+'/type/details?token=1ec949a15fb709370f')

            .then(res=>{

                console.log(res)

                this.$store.commit("xiangshuju",res.data.data)

            })

        },

        methods:{

            tioagouwu(){

                this.$router.push({

                    name:'gouwu',

                })

                this.$store.commit("gouwu",this.list)

            },

           

        }

    }

</script>

<style src=''../css/one.css'' scoped>

</style>

购物车

<template>

    <div class="quan">

            <ul class="zong">

                <li v-for="(item,index) in listone" :key="index">

                   

                        <input class="xuan" type="checkbox"/>

                   

                    <span class="la">

                        <img class="tupian" :src="item.src"/>

                       

                    </span>

                    <span class="ziti">

                        {{item.title}}

                    </span>

                    <span class="qiantwo">

                        ￥{{Number(item.price)}}

                    </span>

                    <div class="dianji">

                        <button class="shanchu" @click="shan(index)">删除</button>

                        <button class="buttonone" @click="jia(index)">+</button>

                        <span class="shuliang">{{item.sales}}</span>

                        <button class="buttontwo" @click="jian(index)">-</button>

                    </div>

                </li>

            </ul>

            <div class="di">

                <input class="diquan" type="checkbox"/>

                <span class="diquanpang">全选</span>

                <span class="zongjia">总价:{{(zongjia).toFixed(1)}}</span>

            </div>

    </div>

</template>

<script>

    export default{

        name:'gouwu',

        computed:{

            listone(){

                console.log(this.$store.state.listone)

                return this.$store.state.listone

            },

                // this.listone[].sales*this.listone.price

                zongjia(){

                    return this.listone.reduce((a,b)=>{

                        return a+=b.price*b.sales

                    },0)

            }

        },

       

        methods:{

            jia(a){

                this.listone[a].sales++

            },

            jian(e){

                if(this.listone[e].sales<=1){

                    return false

                }else{

                    this.listone[e].sales--

                }

            },

            shan(b){

                this.listone.splice(b,1)

                console.log(b)

            }

        }

    }

</script>

<style src='../css/gouwu.css' scoped>

</style>

vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

      listthree:[],

      list:[],

      img:'',

      listone:[]

  },

  getters: {

  },

  mutations:{

      shuju(state,res){

        state.listthree=res

        let src=state.src

      // console.log(state.listthree)

      },

      xiangshuju(state,res){

          state.list=res

          state.img=res.images[0]

          console.log(state.list)

      },

      gouwu(state,b){

          b.src=state.img;

          b.sales=1;

          state.listone.push(b)

          console.log(state.listone)

      },

     

     

  },

  actions: {

  },

  modules: {

  }

})

路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  },

  {

    path:'/one',

    name:'one',

    component: () => import(/* webpackChunkName: "about" */ '../views/one.vue')

  },

  {

    path:'/gouwu',

    name:'gouwu',

    component: () => import(/* webpackChunkName: "about" */ '../views/gouwu.vue')

  }

]

const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes

})

export default router

css样式

购物车

*{

    margin: 0%;

    padding: 0%;

    font-size: 0.14rem;

}

span{

    display: inline-block;

}

.quan{

    width: 100%;

    height: 100vh;

    background-color: antiquewhite;

    position: relative;

}

.zong>li{

    width: 95%;

    height: 1.5rem;

    background-color: red;

    /* display: block; */

    margin: 0 auto;

    list-style: none;

    position: relative;

    margin-top: 0.1rem;

}

.la{

    width: 1.2rem;

    height: 1.2rem;

    display: inline-block;

    /* position: relative; */

}

.la>.tupian{

    width: 1rem;

    height: 1rem;

    position: absolute;

    left: 0.3rem;

    display: inline-block;

    top: 0.1rem;

}

.ziti{

    width:60%;

    height: 0.5rem;

    background-color: blue;

    display: inline-block;

    line-height: 0.2rem;

    position: absolute;

    top: 0.09rem;

    right: 0.04rem;

}

.xuan{

    /* width: 0.2r/* em;

    height: 0.2rem; */

    background-color: black;

    display: inline-block;

    position: absolute;

    top: 0.4rem;

    left: 0.05rem;

    zoom: 1.5;

    /* border-radius: 10rem; */

}

.qiantwo{

    width: 0.6rem;

    height: 0.3rem;

    background-color: antiquewhite;

    position: absolute;

    bottom: 0.3rem;

    left: 1.4rem;

    display: inline-block;

    line-height: 0.3rem;

}

.dianji{

    width: 0.9rem;

    height: 0.3rem;

    background-color: antiquewhite;

    position: absolute;

    right: 0.1rem;

    bottom: 0.1rem;

    border-radius: 10rem;

    /* position: relative; */

}

.dianji>button{

   

   

}

.dianji>.buttonone{

    position: absolute;

    bottom:0rem;

    left: 0.0rem;

    top: 0rem;

    border-radius: 10rem;

    width: 0.3rem;

    height: 0.3rem;

}

.dianji>.buttontwo{

    position: absolute;

    bottom:0rem;

    right: 0.0rem;

    top: 0rem;

    border-radius: 10rem;

    width: 0.3rem;

    height: 0.3rem;

}

.di{

    width: 100%;

    height: 0.5rem;

    background-color: blue;

    position: absolute;

    bottom: 0rem;

}

.di>.diquan{

    position: absolute;

    zoom: 1.5;

    left: 0.2rem;

    top: 0.1rem;

}

.diquanpang{

    display: inline-block;

    position: absolute;

    left: 0.5rem;

    top: 0.14rem;

}

.shuliang{

width: 0.3rem;

height: 0.3rem;

/* background-color: aqua; */

line-height: 0.3rem;

}

.zongjia{

    width: 0.8rem;

    height: 0.3rem;

    background-color: brown;

    position: absolute;

    bottom: 0.1rem;

    right: 0.5rem;

}

.shanchu{

    width: 0.8rem;

    height: 0.3rem;

    position: absolute;

    bottom: 0.4rem;

    right: 0.09rem;

}

首页列表

*{

    margin: 0%;

    padding: 0%;

    list-style: none;

    font-size: 0.14rem;

}

.home{

    width: 100%;

    height:100vh;

    /* background-color: #E5E5E5; */

}

.one{

    width: 100%;

    height: 1.3rem;

    /* background-color:#E5E5E5; */

}

.tu{

    width: 100%;

    height: 0.8rem;

    background-color: white;

}

/* .zi{

    display: inline-block;

} */

.tu img{

    width: 1.2rem;

    height: 1.2rem;

    float:left;

    background-color: white

}

.zi{

    width: 100%;

    height: 1rem;

    /* background-color: antiquewhite; */

    /* margin-top: 0rem; */

}

.zi>p{

    line-height: 0.1.5rem;

    width: 3rem;

    height: 0.3rem;

    margin-top:-0.4rem;

    /* padding-left: 0.1rem; */

    background-color: white;

   

}

详情

*{

    margin: 0%;

    padding: 0%;

    font-size: 0.14rem;

}

.da{

    width: 100%;

    height: 100vh;

    background-color:#EDEDED;

    /* opacity: 0.2; */

}

.quan{

    width: 100%;

    height: 100vh;

    /* background-color: aqua; */

}

.tu{

    width: 100%;

    height: 3rem;

    margin: 0 auto;

   

}

.tu>img{

    width: 100%;

    height: 3rem;

    margin: 0 auto;

}

.zi{

    width: 100%;

    height: 0.5rem;

    /* background-color: antiquewhite; */

    margin-top: 0.2rem;

    /* line-height: 0.9rem; */

   

}

.zi>span{

    width: 80%;

    height: 0.5rem;

    /* background-color: aqua; */

    display: inline-block;

    line-height: 0.2.5rem;

}

.qian{

    width: 100%;

    height: 0.2rem;

    /* background-color: aquamarine; */

    margin-top: 0.2rem;

}

.gouwu{

    width: 100%;

    height: 0.5rem;

    /* background-color: antiquewhite; */

    margin-top: 0.2rem;

}

移动端适配

<!DOCTYPE html>

<html lang="">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

            <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel="icon" href="<%= BASE_URL %>favicon.ico">

        <title><%= htmlWebpackPlugin.options.title %></title>

        <style>

            body{

               

            }

            html{

                 font-size: 100px;

            }

            *{

                margin: 0;

                padding: 0;

            }

        </style>

    </head>

    <body>

        <script>

            window.onload=function(){

               

            }

            window.addEventListener("reset",function(){

                var bases = 100;

                var basew = 375;

                var client = document.documentElement.clientWidth;

                var f = client * (bases / basew)

                document.querySelector('html').style.fontSize = f + "px"

            })

        </script>

        <noscript>

            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript

                enabled. Please enable it to continue.</strong>

        </noscript>

        <div id="app"></div>

        <!-- built files will be auto injected -->

    </body>

</html>