移动端购物车模块设计

news2024/11/17 16:04:13

效果图

 

技术栈

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/814332.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DevOps系列文章之 java调用python脚本

在java类中直接执行python语句 在java类中直接调用本地python脚本 使用Runtime.getRuntime()执行python脚本文件&#xff08;推荐&#xff09; 调用python脚本中的函数 简单介绍 官网地址 首页 | (jython.org) Jython项目提供了Java中的Python实现&#xff0c; 为Python提供了…

ffplay——QT项目移植

一、ffmpeg源码编译 参考&#xff1a; https://blog.csdn.net/sgzed/article/details/119850119 在生成时做了一些修改&#xff1a; ./configure --toolchainmsvc --enable-shared --enable-postproc --enable-gpl --prefixwindows 二、对文件做调整 ffplay只需要三个文件&…

超越极限!YOLOv5引入FasterNet主干网络,目标检测速度飙升

目录 一、背景介绍1.1 目标检测算法简介1.2 YOLOv5简介及发展历程 二、主干网络选择的重要性2.1 主干网络在目标检测中的作用2.2 YOLOv5使用的默认主干网络 三、FasterNet简介与原理解析3.1 FasterNet概述3.2 FasterNet的网络结构3.2.1 基础网络模块3.2.2 快速特征融合模块3.2.…

好用的备忘录app如何使用预设提醒功能?

备忘录的预设提醒功能是什么意思呢&#xff1f;就是在使用的过程中&#xff0c;提前预设好常用的提醒的时间&#xff0c;比如明天某个时间点、下周某个时间点等等&#xff0c;在需要设置提醒的时候&#xff0c;就可以直接使用。好用的备忘录app如何使用预设提醒功能&#xff1f…

什么是SCRUM认证体系 ?

Scrum认证是一个针对个人职业发展的认证体系&#xff0c;基础级认证主要面向Scrum的三个角色&#xff1a;Scrum Master、Scrum Product Owner 和 Developers。Scrum认证体系由Scrum官方机构—国际Scrum联盟&#xff08;ScrumAlliance.org&#xff09;制定和维护&#xff0c;Scr…

HCIP——重发布及路由策略实验

重发布及路由策略实验 一、实验拓扑二、实验要求三、实验思路三、实验步骤1、配置接口IP地址以及环回地址2、配置动态路由协议3、重发布4、更改接口类型5、配置路由策略 一、实验拓扑 二、实验要求 1、使用双点双向重发布2、所有路由器进行最佳选路3、存在备份路径&#xff0c…

第三章 ref与reactive

ref ref 变为响应式数据shallowRef 浅层响应式数据&#xff08;响应式到 .value为止&#xff09;isRef 判断是否为ref响应式数据triggerRef 强制触发依赖更新customRef 自定义ref函数 <template><div class"App">{{ stu }}<button click"chang…

Java并发编程第3讲——线程安全

目录 1 线程安全 1.1 谈谈你对线程安全的理解 1.2 Java中操作共享数据分类 1.2.1 不可变&#xff08;Immutable&#xff09; 1.2.2 绝对线程安全&#xff08;Thread-safe&#xff09; 1.2.3 相对线程安全&#xff08;Thread-compatible&#xff09; 1.2.4 线程兼容&…

外观模式——提供统一入口

1、简介 1.1、概述 在软件开发中&#xff0c;有时候为了完成一项较为复杂的功能&#xff0c;一个类需要和多个其他业务类交互&#xff0c;而这些需要交互的业务类经常会作为一个完整的整体出现&#xff0c;由于涉及的类比较多&#xff0c;导致使用时代码较为复杂。此时&#…

leetcode剑指offer75题

1 替换空格 var replaceSpace function(s) {const str s.split( );return str.join(%20) };2 左旋转字符串 var reverseLeftWords function(s, n) {const s1 s.slice(n)const s2 s.slice(0,n)return s1s2 };3 表示数值的字符串 //\d 匹配整数 1次或多次 //(\.\d*)? 满足小…

【腾讯云 Cloud studio 实战训练营】真正做到让你的开发成本只在编码

文章目录 写在前面CODINGCloud studio工具在线编码运行项目代码上传Cloud Studio 开发贪吃蛇写在最后 写在前面 期待已久的体验活动终于来了&#xff0c;Clound Studio用了才知道有多爽&#xff0c;Cloud Studio 是基于浏览器的集成式开发环境 (IDE)&#xff0c;为开发者提供了…

第二课:数据类型与变量

一. 数据类型 整型 byte short int long 小数 float double 字符 char 布尔 boolean 1.不论在16位&#xff0c;32位还是64位系统&#xff0c;int都占用4个字节&#xff0c;long都占用8个字节 &#x1f446;可移植性&#xff0c;可以跨平台运行&#xf…

【黑马头条之redis实现延迟任务】

本笔记内容为黑马头条项目的延迟任务精准发布文章部分 目录 一、实现思路 二、延迟任务服务实现 1、搭建heima-leadnews-schedule模块 2、数据库准备 3、安装redis 4、项目集成redis 5、添加任务 6、取消任务 7、消费任务 8、未来数据定时刷新 1.reids key值匹配 …

“智能算式批改系统”开发与部署优化

“智能算式批改系统”开发与部署优化 摘要 本次大作业搭建并实现了“智能算式批改系统”的开发与部署优化。“智能算式批改系统”是一款集yolo目标检测、paddleocr识别和四则运算判别算法的智能批改系统。该系统能够对上传包含四则运算题的页面进行批改&#xff0c;包括识别出…

【Docker】Docker安装Kibana服务

文章目录 1. 什么是Kibana2. Docker安装Kibana2.1. 前提2.2. 安装Kibana Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套&#xff08;质量有保证&#xff0c;内容详情&#xff09; 1. 什么是Kibana Kibana 是一款适用于Elasticsearch的数据可视化和管…

PyTorch深度学习实战(7)——批大小对神经网络训练的影响

PyTorch深度学习实战&#xff08;7&#xff09;——批大小对神经网络性能的影响 0. 前言1. 批处理概念2. 批处理的优势3. 批大小对神经网络性能的影响3.1 批大小为 323.2 批大小为 30,000 小结系列链接 0. 前言 在神经网络中&#xff0c;批( batch )是指一次输入网络进行训练或…

微服务体系<2> ribbon

1. 什么是负载均衡 比如说像这样 一个请求打在了nginx上 基于nginx进行负载分流 这就是负载均衡但是负载均衡分 服务端负载均衡和客户端负载均衡 客户端负载均衡 我user 从注册中心拉取服务 拉取order列表&#xff0c;然后发起getOne()调用 这就是客户端负载均衡 特点就是我…

【echarts】用js与echarts数据图表化,折线图、折线图堆叠、柱状图、折柱混合、环形图

echarts 是一个基于 JavaScript 的开源可视化库&#xff0c;用于构建交互式和自定义的图表&#xff0c;使数据更加直观和易于理解&#xff0c;由百度开发并于2018年捐赠给 Apache 软件基金会&#xff0c;后来改名为Apache ECharts 类似的还有Chart.js Chart.js地址&#xff1…

从此告别涂硅脂 利民推出新款CPU固态导热硅脂片:一片26.9元

利民(Thermalright)近日推出了新款Heilos CPU固态导热硅脂片&#xff0c;其中Intel版为26.9元&#xff0c;AMD版售价29.9元。 以往向CPU上涂硅脂&#xff0c;需要先挤一粒绿豆大小的硅脂&#xff0c;然后用塑料片涂匀&#xff0c;操作和清理对新手都极不友好。 该固态导热硅脂片…

string【2】模拟实现string类

string模拟实现 引言&#xff08;实现概述&#xff09;string类方法实现默认成员函数构造函数拷贝构造赋值运算符重载析构函数 迭代器beginend 容量size、capacity、emptyreserveresize 访问元素operator[] 修改insert插入字符插入字符串 appendpush_backoperatoreraseclearswa…