vue3+vite+pinia+element-plus的购物车

这个很简单 没有什么难度 直接上代码

app.vue

<template>
  <RouterView />
</template>

<style scoped>

</style>
<script setup lang="ts">

</script>

router.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  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('../views/AboutView.vue')
    },
    {
      path: '/shop',
      name: 'shop',
      // 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('../views/shopcordView.vue')
    }
  ]
})

export default router

shopcordView.vue

<template>
    <div v-infinite-scroll="load" class="shoprcord1" style="overflow: auto">
        <el-button  class="ololo1" type="warning" @click="backhome" :icon="House">返回主页</el-button>
        <el-button  class="ololo1" type="danger" @click="deleteSelectedItems" :icon="Van">购买</el-button>
        <div class="tabheader">
            <div class="leftbox">
                <span class="cheack" @change="allid"  label="全选" size="large" />
                <span class="infostet">商品信息</span>
            </div>
            <div class="leftbox1">
                <span>单价</span>
                <span>数量</span>
                <span>金额</span>
                <span>操作</span>
            </div>
          
        </div>
        <el-divider />
        <div class="goodsinfo" v-for="(item,index) in goodsinfo.values" :key="index">
            <div class="lefbox">
                <el-checkbox class="sleec" :value="item.itemName" @change="SLEE(item,index)" v-model="lil[index]" size="large" border />
              <img :src="item.itemImg" alt="">
              <span class="inforall">{{ item.itemName }}</span>
            </div>  
            <div  class="lefbox1">
                <span class="singboll">￥{{ item.itemPrice }}</span>
              <el-input-number v-model="item.count" :min="1" :max="100" @change="handleChange" />
              <span class="allmoney">￥{{ item.itemPrice*item.count }}</span>
              <el-button class="REMOVE" type="danger" @click="deletel(index)">移除购物车</el-button>
            </div>
             
        
        </div>
           
    </div>
</template>
<script setup>
import {
  House,
  Van,
  ShoppingTrolley,
} from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { onMounted, reactive } from 'vue';
const lil = reactive([])
const router = useRouter()
import { ref } from 'vue'
const count = ref()
const load = () => {
    count.value += 2
}
const selectedItems = reactive([]);
const deleteSelectedItems = () => {
    // 遍历选中的商品项的标识数组
    selectedItems.forEach(itemId => {
        // 从 goodsinfo 中找到对应的商品项索引
        const index = goodsinfo.values.findIndex(item => item.itemId === itemId);
        // 如果找到了对应的商品项，则从数组中删除该商品项
        if (index !== -1) {
            goodsinfo.values.splice(index, 1);
        }
    });
    // 清空选中的商品项数组
    selectedItems.splice(0, selectedItems.length);
    ElMessage({
        message: '成功购买选中的商品',
        type: 'success',
        plain: true,
    });
}

const goodsinfo = reactive([])
const custer = useCounterStore()
const deletel=(index)=>{
    goodsinfo.values.splice(index, 1);
    ElMessage({
    message: '移除商品购物车成功',
    type: 'success',
    plain: true,
  })
}
onMounted(()=>{
  console.log(custer.goodslec)
  goodsinfo.values = custer.goodslec
  count.value = goodsinfo.values.length
  goodsinfo.values.forEach(item=>{
    lil.push(false)
  })
  console.log( lil)
})
const SLEE =(item1,index)=>{
    console.log(item1.itemId)
    selectedItems.push(item1.itemId,index)
}
const backhome =()=>{
    router.push('/')
}
</script>
<style scoped>
@import url('css/shopping.css');
</style>

aboutView.vue

<template>
  
  <div class="about1">
    <el-button class="ololo" type="warning" @click="backhome" :icon="House">返回主页</el-button>
    <el-button class="ololo" @click="gotoshop" type="danger">
      查看购物车<el-icon class="el-icon--right"><ShoppingTrolley /></el-icon>
    </el-button>
    <div class="about">
    <img :src="itemImg" alt="">
    <div class="goodsinfo">
      <p class="titlename">{{ itemName }}</p>
      
      <p class="moneys">￥{{ itemPrice }}</p>
      <p class="Hint">{{ itemHint }}</p>
      <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      
      <div class="payself">
        <div class="pay" @click="payitem">
          立即购买
        </div>
        <div class="add" @click="additem">
          加入购物车
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { getgoods } from '../config/api'
import { useRouter } from 'vue-router';

import {
  House,

  ShoppingTrolley,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
const apiurl = ref('/m1/1256591-0-default/mall/commodity')
const typeo = ref()
const data = ref()
const itemid = ref()
const itemImg = ref()
const itemHint = ref()
const itemPrice = ref()
const itemName = ref()
const conters = useCounterStore()
const itemtype = ref()
const goodspp=ref()
const goodsinfo = ref()
const router = useRouter()
const num = ref(1)
const weiyipaichon = ref()
const gotoshop =()=>{
  router.push('/shop')
}
const backhome =()=>{
  router.push('/')
}
const handleChange = (value) => {
  console.log(value)
}
const additem =()=>{
  const foundItem = conters.goodslec.find(item => item.itemId === goodsinfo.value[0].itemId);
if (foundItem) {
    foundItem.count++;
    ElMessage({
    message: '新添加购物车成功',
    type: 'success',
    plain: true,
  })
} else {
    goodsinfo.value[0].count = num.value;
    conters.goodslec.push(goodsinfo.value[0]);
    ElMessage({
    message: '重复添加购物车成功',
    type: 'success',
    plain: true,
  })
}
}
onMounted(async ()=>{
  const urlParams = new URLSearchParams(window.location.search)
  itemid.value= urlParams.get('data')
  itemtype.value = urlParams.get('type')
  console.log('你好')
  await goodsap()
})
watch(goodspp.value,()=>{
  if(goodspp.value.itemImg==undefined)
  {
    console.log('暂无')
  }else{
    goodsap()
  }
})
const goodsap = async() =>{
  console.log('调用我了')
  data.value =await  getgoods.api(apiurl.value)
  typeo.value=await data.value.filter(item=>item.shopTitle==itemtype.value)
  goodsinfo.value = await typeo.value[0].itemList.filter(item=>item.itemId==itemid.value)
  itemImg.value = goodsinfo.value[0].itemImg
  itemHint.value = goodsinfo.value[0].itemHint
  itemPrice.value = goodsinfo.value[0].itemPrice
  itemName.value = goodsinfo.value[0].itemName
  console.log( goodspp.value,'typeo.value')
}
</script>
<style>
@import url('css/shopgoods.css');
</style>

HomeView.vue

<template>
  <main>
    <div class="common">  
      
      <el-radio-group class="popo" v-model="radio1" size="large">
        <el-radio-button @click="xuanzhon(index)" v-for="(item,index) in data" :key="index" :label="item.shopTitle" />、
        <el-button @click="gotoshop" class="ololo1" type="danger">
      查看购物车<el-icon class="el-icon--right"><ShoppingTrolley /></el-icon>
    </el-button>
      </el-radio-group>
      <div class="popogoods">
        <div class="goods" @click="shopgods(item.itemId)" v-for="(item,index) in shopgoods" :key="index">
          <img :src="item.itemImg" alt="">
            <p class="miaoshu">{{ item.itemName }}</p>
            <span class="moneyes">￥{{ item.itemPrice }}</span>
        </div>
      </div>
    </div>

  </main>
</template>
<script setup lang="ts">
import { onMounted,ref } from 'vue';
import {
  House,
  ArrowLeft,
  ShoppingTrolley,
  Check,
  ArrowRight,
  Delete,
  Edit,
  Share,
} from '@element-plus/icons-vue'
import { getgoods } from '../config/api'
import { useRouter } from 'vue-router'

import type { TabsPaneContext } from 'element-plus'

const shopgoods = ref()
const router = useRouter()

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const eletype = ref<string>()
const data = ref()
const apiurl = ref('/m1/1256591-0-default/mall/commodity')
onMounted(async ()=>{
  data.value =await  getgoods.api(apiurl.value)
  console.log(data.value)
  xuanzhon(0)
})
const gotoshop =()=>{
  router.push('/shop')
}
const xuanzhon=(index:number)=>{
  shopgoods.value = data.value[index].itemList
  console.log(shopgoods.value)
  eletype.value = data.value[index].shopTitle
  console.log(data.value[index].shopTitle,'种类')
}
const radio1 = ref('手机')
const shopgods = (item:string)=>{
  const itemrouter = item
  router.push('/about?data='+itemrouter+'&type='+ eletype.value)
}
</script>
<style>
@import url('css/main.css');
</style>

最后一个 pinia

import { ref, computed, reactive } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const goodslec = reactive([])

  return { 
    goodslec
  }
})

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(ElementPlus)
app.use(createPinia())
app.use(router)

app.mount('#app')

封装好的接口

import axios  from "axios"
const ipconf = 'https://mock.apifox.cn'
export const getgoods = {
    async api(shopgoods:string){
        // eslint-disable-next-line no-unused-vars
        const apium = ipconf+shopgoods
        try{
            const response = await axios(apium)
            const data = response.data.comList
            
            return await data
        }catch(error){
            console.log(error)
        }
    }
}