移动端购物车模块设计

最新推荐文章于 2023-12-23 08:26:11 发布

贾柯伟

最新推荐文章于 2023-12-23 08:26:11 发布

阅读量390

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_63040701/article/details/132013834

版权

该代码示例展示了使用Vue3、Vant4和Element-Plus构建的购物车页面，包括地址选择、商品卡片展示、商品价格计算、数量增减、删除功能以及提交订单的逻辑。商品信息在SwipeCell中展示，包含商品名称、价格、规格和数量调整器。页面还包含一个提交栏用于结算并提交订单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

技术栈

vue3、vant4、element-plus

源码如下

页面布局

<template>
  <!-- 地址 start-->
  <AddressList class="address"/>
  <!-- 地址 end-->
  <!-- 购物车商品列表 start-->
  <van-swipe-cell class="goods-cell" v-for="(item,index) in goodsCartList.list" :key="index">
    <van-card class="goods-card"
              @click-thumb="onDesc(item.goodsId)"
              :thumb="item.goodsHeadImg"
    >
      <template #title>
        <span class="goods-card-title">{{ item.goodsName }}</span>
      </template>
      <template #price>
        <span class="goods-card-price">￥<span>{{ item.goodsPrice }}</span></span>
      </template>
      <template #desc>
        <span class="goods-card-specificationContent">{{ item.specificationContent }}</span>
      </template>
      <template #num>
        <van-stepper @change="onHandleNum(item.goodsId,item.num)" v-model="item.num" theme="round" min="1"
                     button-size="22px"
                     integer></van-stepper>

      </template>
    </van-card>
    <template #right>
      <van-button @click="onDelete(item.goodsId)" class="delete-button" type="danger" square>
        <van-icon size="large" name="delete-o"></van-icon>
      </van-button>
    </template>
  </van-swipe-cell>
  <!-- 购物车商品列表 end-->
  <!-- 提交栏 start-->
  <van-submit-bar style="margin-bottom: 50px " :price="parseInt(totalPrice)" button-text="提交订单"
                  @submit="onsubmitOrder"/>
  <!-- 提交栏 end-->

</template>

逻辑编写

<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "@/utils/request"
import {useDataStore} from "../../stores/dataStore"
import {showSuccessToast} from 'vant';
import {useRouter} from 'vue-router'
import AddressList from "../../components/AddressList/Index.vue"

const router = useRouter()
const dataStore = useDataStore()
//购物车商品列表
const goodsCartList = reactive({list: []})
//商品总价
const totalPrice = ref()
/**
 * 封装商品价格计算
 */
const sumTotalPrice = (userId) => {
  axios.get("front/cart/sumPrice", {
    params: {
      userId: userId
    }
  }).then(res => {
    if (res.data.code == 200) {
      totalPrice.value = res.data.data + '00'
    }
  })
}
/**
 * 封装商品列表查询
 */
const http = (userId) => {
  axios.get("front/cart/findGoodsCartList", {
    params: {
      userId: userId
    }
  }).then(res => {
    if (res.data.code == 200) {
      goodsCartList.list = res.data.data
      sumTotalPrice(userId)
    }
  })
}

/**
 * 封装修改商品数量方法
 */
const updateGoodsNum = (goodsId, num) => {
  axios.post("front/cart/updateGoodsCart", {
    userId: dataStore.userId,
    goodsId: goodsId,
    num: num
  }).then(res => {
    if (res.data.code == 200) {
      http(dataStore.userId)
    }
  })
}
onMounted(() => {
  http(dataStore.userId)
})
/**
 * 删除事件
 */
const onDelete = (id) => {
  axios.delete("front/cart/deleteGoodsCart", {
    params: {
      goodsId: id,
      userId: dataStore.userId
    }
  }).then(res => {
    if (res.data.code == 200) {
      showSuccessToast('删除成功');
      http(dataStore.userId)
    }

  })
}
/**
 * 数量改变触发的事件
 */
const onHandleNum = (goodsId, num) => {
  updateGoodsNum(goodsId, num)
}
/**
 * 查看商品详情
 */
const onDesc = (goodsId) => {
  router.push("/goods/goodsDesc/" + goodsId)
}
/**
 * 提交商品订单
 */
const onsubmitOrder = () => {
  axios.post("front/orders/add", {
    userId: dataStore.userId,
    ordersPay: totalPrice.value,
    ordersReceiverAddress: dataStore.addressDetailName,
    ordersReceiverPhone: dataStore.addressPhone,
    ordersReceiverZipCode: dataStore.addressReceiverZipCode,
    ordersReceiverPeople: dataStore.addressPeople,
  }).then(res => {
    if (res.data.code == 200) {
      http(dataStore.userId)
    }

  })
}
</script>

样式设计

<style scoped>
/**
地址样式
 */
.address {
  margin: 6px;
}

.goods-cell {
  margin: 7px;
  border-radius: 15px;
}

/**
商品列表样式
 */
.goods-card {
  background-color: #ffffff;
}

.goods-card-title {
  margin-left: 5px;
  font-size: 15px;
  font-weight: 600;
}

.goods-card-price {
  margin-left: 20px;
  margin-top: 35px;
  color: #ff4142;
  font-size: 15px;
}

.goods-card-price span {
  font-style: normal;
  font-family: JDZH-Regular, sans-serif;
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
  color: #f15301;
}

.goods-card-specificationContent {
  display: block;
  color: #999999;
  margin: 3px;
}

/**
删除按钮样式
 */
.delete-button {
  height: 100%;
}
</style>