vue3前端开发-小兔鲜项目-添加购物车操作第一步

首先,呢,告诉大家一个坏消息,官方媒体的案例代码已经被他们删除了。如图所示。

也就是说,大家已经看不到官方的代码文件了。

那么既然如此,我们自己写的这个博客记录日志,就显得尤为重要了。继续今天的内容分享。

今天分享的是,添加购物车的第一步操作。

如果用户意见勾选了商品规格,我们就把它按照逻辑业务要求加入购物车内。如果没有选择规格,就给一个提示。


<script setup>
import {getDetail} from '@/apis/detail'
import {ref,onMounted} from 'vue'
import { useRoute } from 'vue-router';
import DetailHot from './components/DetailHot.vue'
import { useCartStore } from '@/stores/cart';
import { ElMessage } from 'element-plus';
// import ImageView from '@/components/ImageView/index.vue'
// import XtxSku from '@/components/XtxSku/index.vue'
const cartStore = useCartStore()
const route = useRoute()
const goods = ref({})
const getGoods = async ()=>{const res = await getDetail(route.params.id)goods.value =res.result
}
onMounted(()=>getGoods())
//sku规则被操作时,这里的sku是从子组件内传递过来的数据!
let skuObj = ref({})
const skuChange=(sku)=>{console.log(sku) //赋值。skuObj.value = sku
}
//count定义好
const count = ref(1)
const countChange = (count)=>{console.log(count)
}
//添加购物车
const addCart = ()=>{if(skuObj.value.skuId){//规则已经选择了,触发actioncartStore.addCart({id:goods.value.id,name:goods.value.name,picture:goods.value.mainPictures[0],count:count.value,skuId:skuObj.value.skuId,attrsText:skuObj.value.specsText,selected:true})}else{//规格没有选择,提示用户ElMessage.warning('请选择规格')}
}
</script><template><div class="xtx-goods-page"><div class="container" v-if="goods.details"><div class="bread-container"><el-breadcrumb separator=">"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: `/category/${goods.categories[1].id}` }">{{goods.categories[1].name}}</el-breadcrumb-item><el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories[0].id}` }">{{goods.categories[0].name}}</el-breadcrumb-item><el-breadcrumb-item>{{goods.name}}</el-breadcrumb-item></el-breadcrumb></div><!-- 商品信息 --><div class="info-container"><div><div class="goods-info"><div class="media"><!-- 图片预览区 --><XtxImageView  :image-list="goods.mainPictures"/><!-- 统计数量 --><ul class="goods-sales"><li><p>销量人气</p><p> {{goods.salesCount}}+ </p><p><i class="iconfont icon-task-filling"></i>销量人气</p></li><li><p>商品评价</p><p>{{goods.commentCount}}+</p><p><i class="iconfont icon-comment-filling"></i>查看评价</p></li><li><p>收藏人气</p><p>{{goods.collectCount}}+</p><p><i class="iconfont icon-favorite-filling"></i>收藏商品</p></li><li><p>品牌信息</p><p>{{goods.brand.name}}+</p><p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p></li></ul></div><div class="spec"><!-- 商品信息区 --><p class="g-name"> {{goods.name}} </p><p class="g-desc">{{ goods.desc }} </p><p class="g-price"><span>{{ goods.price }}</span><span> {{ goods.oldPrice }}</span></p><div class="g-service"><dl><dt>促销</dt><dd>12月好物放送,App领券购买直降120元</dd></dl><dl><dt>服务</dt><dd><span>无忧退货</span><span>快速退款</span><span>免费包邮</span><a href="javascript:;">了解详情</a></dd></dl></div><!-- sku组件 --><XtxSku :goods="goods" @change="skuChange"/> <!-- 数据组件 --><el-input-number v-model="count"  @change="countChange"/><!-- 按钮组件 --><div><el-button size="large" class="btn" @click="addCart">加入购物车</el-button></div></div></div><div class="goods-footer"><div class="goods-article"><!-- 商品详情 --><div class="goods-tabs"><nav><a>商品详情</a></nav><div class="goods-detail"><!-- 属性 --><ul class="attrs"><li v-for="item in goods.details.properties" :key="item.value"><span class="dt">{{ item.name }}</span><span class="dd">{{item.value}}</span></li></ul><!-- 图片 --><img v-for="img in goods.details.pictures" v-img-lazy="img" :key="img"/></div></div></div><!-- 24热榜+专题推荐 --><div class="goods-aside"><!--24小时热榜--><DetailHot :hot-type="1"/><!--每周热榜--><DetailHot :hot-type="2"/></div></div></div></div></div></div>
</template><style scoped lang='scss'>
.xtx-goods-page {.goods-info {min-height: 600px;background: #fff;display: flex;.media {width: 580px;height: 600px;padding: 30px 50px;}.spec {flex: 1;padding: 30px 30px 30px 0;}}.goods-footer {display: flex;margin-top: 20px;.goods-article {width: 940px;margin-right: 20px;}.goods-aside {width: 280px;min-height: 1000px;}}.goods-tabs {min-height: 600px;background: #fff;}.goods-warn {min-height: 600px;background: #fff;margin-top: 20px;}.number-box {display: flex;align-items: center;.label {width: 60px;color: #999;padding-left: 10px;}}.g-name {font-size: 22px;}.g-desc {color: #999;margin-top: 10px;}.g-price {margin-top: 10px;span {&::before {content: "¥";font-size: 14px;}&:first-child {color: $priceColor;margin-right: 10px;font-size: 22px;}&:last-child {color: #999;text-decoration: line-through;font-size: 16px;}}}.g-service {background: #f5f5f5;width: 500px;padding: 20px 10px 0 10px;margin-top: 10px;dl {padding-bottom: 20px;display: flex;align-items: center;dt {width: 50px;color: #999;}dd {color: #666;&:last-child {span {margin-right: 10px;&::before {content: "•";color: $xtxColor;margin-right: 2px;}}a {color: $xtxColor;}}}}}.goods-sales {display: flex;width: 400px;align-items: center;text-align: center;height: 140px;li {flex: 1;position: relative;~li::after {position: absolute;top: 10px;left: 0;height: 60px;border-left: 1px solid #e4e4e4;content: "";}p {&:first-child {color: #999;}&:nth-child(2) {color: $priceColor;margin-top: 10px;}&:last-child {color: #666;margin-top: 10px;i {color: $xtxColor;font-size: 14px;margin-right: 2px;}&:hover {color: $xtxColor;cursor: pointer;}}}}}
}.goods-tabs {min-height: 600px;background: #fff;nav {height: 70px;line-height: 70px;display: flex;border-bottom: 1px solid #f5f5f5;a {padding: 0 40px;font-size: 18px;position: relative;>span {color: $priceColor;font-size: 16px;margin-left: 10px;}}}
}.goods-detail {padding: 40px;.attrs {display: flex;flex-wrap: wrap;margin-bottom: 30px;li {display: flex;margin-bottom: 10px;width: 50%;.dt {width: 100px;color: #999;}.dd {flex: 1;color: #666;}}}>img {width: 100%;}
}.btn {margin-top: 20px;}.bread-container {padding: 25px 0;
}
</style>

其他的代码辅助有:1-carStore,这是pina的内容。实现数据复用的效果。

我们还做了浏览器缓存同步存储,防止页面刷新引起的数据丢失的情况发生。


1:carStore的内容如下:

import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useCartStore =defineStore('cart',()=>{const cartList = ref([])const addCart = (goods)=>{//添加购物车操作//如果已经添加过了,count++//没有添加过,直接push//s思路:通过匹配传递过来的商品对象的中的skuId能不能在cartList中找到,const item = cartList.value.find((item)=>goods.skuId === item.skuId)if(item){//找到了item.count++}else{cartList.value.push(goods)}}return{cartList,addCart}
},{//同步存储到缓存中,刷新浏览器就不会丢失数据了persist: true,
})

自己登录测试用户后,添加一下购物车,我这边亲自测试了一下,正常的

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SuccBI+低代码文档中心 — 可视化分析(仪表板)(下)

制作仪表板 引入数据模型 仪表板所需模型已经在数据模块中准备好&#xff0c;可以将对应模型表添加到数据模型中。提供了两种添加方式&#xff1a; 在数据栏中点击添加按钮&#xff0c;在弹出框中通过搜索或直接在其所在目录下选中该模型&#xff0c;点击确定。 点击数据按钮…

一篇讲清楚什么是密码加密和加盐算法 | 附Java代码实现

目录 前言&#xff1a; 一、密码加密 1. MD5介绍 2.彩虹表攻击 3.测试复杂密码是否能被攻破 二、加盐算法 1.对密码123456演示加盐算法 2.盐值的储存 3.密码加盐思想总结 三、Java代码实现 前言&#xff1a; 早些年&#xff0c;数据泄露屡见不鲜&#xff0c;每个班上总…

【Web前端】vue3整合eslint约束代码格式

一、整合eslint 整合eslint的两种方式&#xff1a; 在已有项目中整合eslint&#xff1a;# 安装eslint及其vue插件即可 npm i -D eslint eslint-plugin-vue创建项目时整合eslint&#xff1a; 提示 是否引入ESLint用于代码质量检测 时选择 是# 创建vue3项目 npx create-vue # 下…

.NET8使用VS2022打包Docker镜像

NET8使用VS2022打包Docker镜像 1. 项目中添加Docker支持文件2. 自定义镜像名称3. 发布Docker镜像3.1 安装Docker3.2 控制台切换到项目根目录,执行以下命令发布镜像 3.3 修改镜像名称4. 保存镜像到本地 1. 项目中添加Docker支持文件 2. 自定义镜像名称 项目文件PropertyGroup节…

vue3中 ref 和 reactive 的区别

相同&#xff1a;均是声明响应式对象。且声明的响应式对象是深层的 1. 数据类型不同&#xff1a;ref用于包装JavaScript基本类型的数据&#xff08;如字符串、数字、布尔值等&#xff09;&#xff0c;而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。 2.访问方式…

力扣45:跳跃游戏2题解

题目链接&#xff1a; https://leetcode.cn/problems/jump-game-ii/description/?envTypestudy-plan-v2&envIdtop-100-liked 参考的代码随想录里面的题解&#xff1a; 题目 难度 中等&#xff0c;标的是中等难度&#xff0c;而且我之前做过这道题&#xff0c;但是我没写…

AI大模型赋能开发者|海云安创始人谢朝海受邀在ISC.AI 2024大会就“大模型在软件开发安全领域的应用”主题发表演讲

近日&#xff0c;ISC.AI 2024 第十二届互联网安全大会在北京国家会议中心盛大开幕。作为全球规格最高、规模最大、影响力最深远的安全峰会之一&#xff0c;本次大会以“打造安全大模型 引领安全行业革命”为主题&#xff0c;聚焦安全与AI两大领域&#xff0c;吸引了众多行业领袖…

【NLP】文本张量表示方法【word2vec、词嵌入】

文章目录 1、文本张量表示2、one-hot词向量表示2.1、one-hot编码代码实现&#xff1a;2.2、onehot编码器的使用2.3、one-hot编码的优劣势 3、word2vec模型3.1、模型介绍3.2、CBOW模式3.3、skipgram模式3.4、word2vec的训练和使用3.4.1、获取训练数据3.4.2、训练词向量3.4.3、查…

学习笔记第二十三天

1.程序与进程 程序&#xff08;Program&#xff09;&#xff1a;是静态的&#xff0c;它是一组指令的集合&#xff0c;这些指令被存储硬盘上&#xff0c;&#xff0c;程序本身 不占用CPU或内存资源&#xff0c;直到它被加载到内存中执行。 程序---静态---硬盘 进程&#xff08…

C++速学day4

类的继承关系 蛇 和 爬行类动物 //这两个类就是继承关系 子类 父类 //它们的关系相当于 派生类 基类 继承的作用 1、 吸收基类成员 2、改造基类成员 3、添加新的成员 class Dervid…

docker基本管理和应用

docker是一个开源的应用容器引擎&#xff0c;基于go语言开发的 docker是运行在linux的容器化工具&#xff0c;可以理解为轻量级的虚拟机 可以在任何主机上&#xff0c;轻松创建的一个轻量级&#xff0c;可移植的&#xff0c;自给自足的容器 鲸鱼--------->宿主机 集装箱…

vulnstack-7(红日靶场七)

环境配置 vlunstack是红日安全团队出品的一个实战环境&#xff0c;具体介绍请访问&#xff1a;漏洞详情http://vulnstack.qiyuanxuetang.net/vuln/detail/9/ 添加两个网卡 DMZ区域&#xff1a; 给Ubuntu (Web 1) 配置了两个网卡&#xff0c;一个可以对外提供服务&#xff1b;…

前端路由VueRouter总结

简介&#xff1a; Vue路由vue-router是官方的路由插件&#xff0c;能够轻松的管理 SPA 项目中组件的切换。Vue的单页面应用是基于路由和组件的&#xff0c;路由用于设定访问路径&#xff0c;并将路径和组件映射起来vue-router 目前有 3.x 的版本和 4.x 的版本&#xff0c;vue-…

设计模式(1)创建型模式和结构型模式

1、目标 本文的主要目标是学习创建型模式和结构型模式&#xff0c;并分别代码实现每种设计模式 2、创建型模式 2.1 单例模式&#xff08;singleton&#xff09; 单例模式是创建一个对象保证只有这个类的唯一实例&#xff0c;单例模式分为饿汉式和懒汉式&#xff0c;饿汉式是…

sliver源码分析-初始化以及脚手架

引言 项目概述&#xff1a;对开源的C2框架sliver进行源码分析&#xff0c;意图学习其原理。本篇分析sliver的入口以及脚手架&#xff0c;和基本的配置文件目标与读者&#xff1a;网络安全兴趣爱好者 准备工作 源码路径BishopFox/sliver: Adversary Emulation Framework (git…

[C++][opencv]基于opencv实现photoshop算法图像旋转

【测试环境】 vs2019 opencv4.8.0 【效果演示】 【核心实现代码】 //图像旋转: src为原图像&#xff0c; dst为新图像, angle为旋转角度, isClip表示是采取缩小图片的方式 int imageRotate4(InputArray src, OutputArray dst, double angle, bool isClip) {Mat input src.…

【c++】类和对象 (中) (类的默认成员函数)

类的默认成员函数 在C中&#xff0c;如果你定义了一个类但没有显式地提供特定的成员函数&#xff08;比如构造函数、析构函数、拷贝构造函数、拷贝赋值运算符等&#xff09;&#xff0c;编译器会为这些函数生成默认的实现。这些默认生成的成员函数称为类的默认成员函数。那么既…

C#学习笔记15:上位机助手_usercontrol窗体内嵌的应用

今日完善一下之前的上位机助手&#xff0c;做一个组合窗体内嵌的多功能助手软件应用, 与之前的上位机软件相比: 更注重控件能够随着窗体缩放而缩放变换&#xff0c;串口助手部分能自动后台检测串口设备&#xff0c;解决市面上大部分串口助手的打开初始化会卡顿的问题 ( 多线程后…

Linux服务管理-Nginx配置

静态解析主要解析html、css动态解析需要解析php 动态资源通过轮询分配到后端的Apache服务器处理 apache是同步阻塞&#xff0c;nginx是异步非阻塞

论文阅读笔记:Efficient Teacher: Semi-Supervised Object Detection for YOLOv5

Efficient Teacher: Semi-Supervised Object Detection for YOLOv5 1 背景1.1 动机1.2 问题 2 创新点3 方法4 模块4.1 伪标签分配4.2 Epoch Adapter 5 效果5.1 与SOTA方法对比5.2 消融实验 论文&#xff1a;https://arxiv.org/pdf/2302.07577v3.pdf 代码&#xff1a;https://g…