VUE-17 图片的获取，购物车商品数量的添加与减少，计算整个购物车商品的价格（循环）

本节：将图片从服务器调用到页面上，购物车数量的增加与减少，计算整个购物车商品的价格（循环）。

1.div

2.script：定义你要使用到的数组；计算整个购物车商品的价钱；购物车商品的数量增加和减少；

3.服务器的配置

1.import 指针 from "../pages/user/shoppinglist" (.vue的文件名)

2.const routes = [

{ path: "/网站路径的名字", component: 指针 },]

完整代码：

<template><div><myheader> </myheader><div>购物车</div><div v-for="(goods, index) in shoplist" :key="'goods-' + index"><div style="margin-top: 30px">{{ goods.name }} - 价格:￥{{ goods.price }}<div>数量：{{ goods.num }} --总价：{{ goods.num * goods.price }}￥</div><div><img:src="'http://www.yhjtp.com:8761/' + goods.covers"style="width: 50px;  height: 50px;  border-radius: 50%"/></div><div><button @click="shoppingadd('1', goods.id)">+</button>{{ goods.num }}<button @click="shoppingadd('-1', goods.id)">-</button></div></div></div><div>余额：{{ userData.money }}</div><div><button @click="shoppingcount()">点击结算</button><div>总价：{{ count }}</div></div></div>
</template><script>
import myheader from "../../components/Header.vue";export default {components: { myheader },data() {return {shoplist: [], //[]数组，{}是对象count: 0,goods: "",num: 1,userData: {}, //对象};},created() {this.shoppinglist();this.loadUserInfo();// }},methods: {loadUserInfo() {var that = this; //方便指对象this.axios //axios接口的调用，传送已经修改好的数据信息.get(`/user/loadUserInfo/`, {headers: {token: that.common.token, //根据接口要求，填写要传的参数},}).then(function (response) {console.log(response); //在控制台输出接收到的信息，response是从服务器接收到的信息，自定义的名字that.userData = response.data.data; //5执行列表的循环输出});},countprice() {// 计算整个购物车商品的总价钱var that = this;that.count = 0;for (let i of that.shoplist) {that.count += i.num * i.price;}},handleChange(value) {console.log(value);},shoppingadd(type, goodsId) {// 添加和修改购物车商品数量var that = this; //方便指对象this.axios //axios接口的调用，传送已经修改好的数据信息.get(`/cart/addToCart/${type}/${goodsId}`, {headers: {token: that.common.token, //根据接口要求，填写要传的参数},}).then(function (response) {console.log(response); //在控制台输出接收到的信息，response是从服务器接收到的信息，自定义的名字that.shoppinglist(); //再重新调用商品列表});},shoppinglist() {// 输出购物车数据var that = this; //方便指对象this.axios //axios接口的调用，传送已经修改好的数据信息.get(`/cart/loadCartList/`, {headers: {token: that.common.token, //根据接口要求，填写要传的参数},}).then(function (response) {console.log(response); //在控制台输出接收到的信息，response是从服务器接收到的信息，自定义的名字that.shoplist = response.data.data; //5执行列表的循环输出//5执行列表的循环输出、that.countprice();});},shoppingcount() {//购买购物车的东西var that = this; //方便指对象this.axios //axios接口的调用，传送已经修改好的数据信息.post(`/cart/cartSettle/`,{},{// post要参数，没有也要占位headers: {token: that.common.token, //根据接口要求，填写要传的参数},}).then(function (response) {console.log(response); //在控制台输出接收到的信息，response是从服务器接收到的信息，自定义的名字// that.count = response.data.data.response; //5执行列表的循环输出//5执行列表的循环输出alert("购物成功！");});},},
};
</script><style>
</style>

VUE-17 图片的获取，购物车商品数量的添加与减少，计算整个购物车商品的价格（循环）相关推荐

利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变当用户单击"+" ...
使用计算属性实现购物车功能效果（商品数量增减、单选多选计算金额和总价，）
使用计算属性实现购物车效果(商品数量增减.单选多选计算金额和总价,) 涉及知识: Vue 基本指令 Vue 计算属性使用 Vue 的基础语法知识,包括插值表达式与数据绑定.常用指令.计算属性等实现购 ...
SpringBoot-项目4-购物车(添加入购物车，购物车列表，购物车商品数量加减操作)
64. 购物车-创建数据表 # 注意:没有添加相应的not null约束 CREATE TABLE t_cart (cid INT AUTO_INCREMENT COMMENT '购物车数据id',u ...
ECSHOP最小起订数插件,ECSHOP商品起订数量插件,ECSHOP商品批发限购插件,ecshop商品批发起订量限购插件,ecshop商品购买批发最小起订量数量插件
ECSHOP插件:ecshop批发商起订量限制插件达到订购量起批. 对自己下面的分销商批发订购商品数量做限制,减少工作量,拒绝无效单.可以在后台单独设置或者批量设置商品的最低订购量.方便供应商管理商品 ...
输入商品单价和商品数量（输入负数时代表输入结束），自动计算商品总价，若支付金额不足会提示生育应付金额
输入商品单价和商品数量(输入负数时代表输入结束),自动计算商品总价,若支付金额不足会提示生育应付金额 package day04;import java.util.Scanner;public cla ...
模拟购物车购物过程python,用函数模拟简单的购物车（Python）
""" 购物车功能: a.引导用户输入金额 b.给用户展示所有的商品 c.引导用户输入需要进行的操作[添加删除结算购物车退出] d.引导用户选择商品 e.引导用户输 ...
Django+Vue开发生鲜电商平台之11.首页、商品数量、缓存和限速功能开发
文章目录一.首页功能完善 1.轮播图实现 2.新品功能开发 3.商品系列分类展示功能二.商品相关数量功能实现 1.商品点击数.收藏数功能实现 2.商品库存量和销量功能实现三.DRF缓存设置 1. ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
jQuery 内容文本值|| 案例：购物车案例模块-增减商品数量 || 案例：购物车案例模块-修改商品小计
jQuery 内容文本值 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...

VUE-17 图片的获取，购物车商品数量的添加与减少，计算整个购物车商品的价格（循环）

VUE-17 图片的获取，购物车商品数量的添加与减少，计算整个购物车商品的价格（循环）相关推荐

最新文章

热门文章