米拓商城微信小程序_vue完成商城购物车功用

  • 栏目:行业动态 时间:2021-01-11 11:36 分享新闻到:
<返回列表

vue实现商城购物车功能       这篇文章主要为大家详细介绍了vue实现商城购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下

首先,先上最终的效果图

效果并不是很好看,但是这不是重点。

首先,我们先看下布局:

 template 
 div id="demo04" 
 div 
 h3 购物车 /h3 
 /div 
 div 
 li v-for="(item,index) in good_list" 
 div 
 label : :for="'car-checkbox-'+index" @click="select_one(index)" /label 
 /div 
 div 
 div 
 img :src="item.img" / 
 /div 
 div 
 h3 {{item.title}} /h3 
 div 
 span v-for="spec in item.spec_item" {{spec}} /span 
 /div 
 /div 
 div 
 span @click="reduce(index)" - /span 
 span {{item.num}} /span 
 span @click="add(index)" + /span 
 /div 
 div 
 span ¥{{item.price}} /span 
 span X{{item.num}} /span 
 /div 
 /div 
 /li 
 /ul 
 /div 
 div 
 div 
 label for="foot-check" : @click="slect_all" /label 
 /div 
 div 
 span 总价:{{totalPrice}} /span 
 span 共{{totalNum}}件 /span 
 /div 
 div 
 button 立即下单 /button 
 /div 
 /div 
 /div 
 /template 

非常常见的布局,微商城购物车随处可见,先说明下,在这里,实现选中的功能并不是用传统的label+checkbox实现,而是一个单独的label,目的是为了简化dom结构,在传统的jq项目或者zepto项目中,一般会会这样写,主要是为了方便操作demo,但是vue项目完全不用考虑dom的操作,怎么方便怎么来就ok。

在加些简单的样式,

 .header-title
 height 42px
 line-height 42px
 background #f5f5f5
 border-bottom 1px solid #ddd
 .header-title h3
 font-weight normal
 text-align center
 .car-list 
 background #f2f2f2
 margin-top 12px
 padding 8px
 .car-item
 border-bottom 1px solid #ddd
 position relative
 height 76px
 overflow hidden
 .car-checkbox
 display none
 .input-block
 width 30px
 float left
 height 55px
 line-height 55px
 .input-label
 cursor pointer 
 position absolute 
 width 18px 
 height 18px 
 top 18px 
 left 0 
 background #fff 
 border:2px solid #ccc
 border-radius 50%
 .input-label:after 
 opacity 0 
 content '' 
 position absolute 
 width 9px 
 height 5px 
 background transparent 
 top 6px 
 left 6px 
 border 2px solid #333 
 border-top none 
 border-right none 
 -webkit-transform rotate(-45deg) 
 -moz-transform rotate(-45deg) 
 -o-transform rotate(-45deg) 
 -ms-transform rotate(-45deg) 
 transform rotate(-45deg) 
 .car-img
 width 64px
 height 64px
 float left
 overflow hidden
 .car-img img
 width 100%
 .input-label.active
 background #F15A24
 .car-cont 
 margin-left 100px
 .car-cont h3
 font-weight normal
 line-height 24px
 font-size 14px
 .car-price 
 position absolute
 right 12px
 bottom 0px
 width 40px
 height 40px
 text-align right
 .car-price span
 display block
 height 24px
 line-height 24px
 width 100%
 .car-footer 
 height 60px
 background #f5f5f5
 position fixed
 bottom 0
 left 0
 right 0
 .foot-car
 width 42px
 height 60px
 float left
 margin-left 12px
 position relative
 .total-cont 
 height 60px
 line-height 60px
 font-size 16px
 float left
 .total-cont span
 display inline-block 
 margin-left 12px
 .btn-box
 float right
 height 60px
 line-height 60px
 .btn-box button
 height 100%
 width: 100px
 border none
 background #F15A24
 color #fff
 font-size 16px
 .num
 position absolute
 top 28px
 right 25px
 width 120px
 .num span
 display inline-block
 width 28px
 height 28px
 float left
 text-align center
 line-height 28px
 border 1px solid #ddd
 font-size 14px

最近在学习stylus的使用,所以,就当做练习了。
接下就是javascript了。

export default {
 data () {
 return {
 good_list: [
 title: 'Apple iPhone 6s 16GB 玫瑰金色 移动联通电信4G手机',
 img: "public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg",
 num: 2,
 price: 6070.00,
 spec_item:[
 '内存:16G',
 '网络:4G',
 '颜色:玫瑰金'
 is_selected: false
 title: 'Apple iPhone 6s 32GB 玫瑰金色 移动联通电信4G手机',
 img: 'public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
 num: 2,
 price: 4570.00,
 spec_item:[
 '内存:32G',
 '网络:4G',
 '颜色:玫瑰金'
 is_selected: true
 title: 'Apple iPhone 6s 8GB 玫瑰金色 移动联通电信4G手机',
 img: 'public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
 num: 2,
 price: 4870.00,
 spec_item:[
 '内存:8G',
 '网络:4G',
 '颜色:玫瑰金'
 is_selected: false
 title: 'Apple iPhone 6s 128GB 玫瑰金色 移动联通电信4G手机',
 img: 'public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
 num: 2,
 price: 10568.00,
 spec_item:[
 '内存:128G',
 '网络:4G',
 '颜色:玫瑰金'
 is_selected: true
 totalPrice: 0,
 totalNum: 0,
 selected_all: false
 mounted: function () {
 this.getTotal();
 watch: {
 'good_list': {
 handler: function (val, oldVal) {
 // console.log(val)
 return val;
 deep: true
 methods: {
 getTotal () {
 this.totalPrice = 0
 this.totalNum = 0
 for (var i = 0; i this.good_list.length; i++) {
 var _d = this.good_list[i]
 if(_d.is_selected){
 this.totalPrice += _d['price'] * _d['num']
 this.totalNum +=_d['num']
 select_one (index) {
 if(this.good_list[index].is_selected == true){
 this.good_list[index].is_selected = false
 }else{
 this.good_list[index].is_selected = true
 this.getTotal()
 slect_all () {
 if(this.selected_all){
 for (var i = 0; i this.good_list.length; i++) {
 this.good_list[i].is_selected = false;
 this.selected_all = false 
 }else{
 for (var i = 0; i this.good_list.length; i++) {
 this.good_list[i].is_selected = true;
 this.selected_all = true 
 this.getTotal()
 reduce (index) {
 if(this.good_list[index].num = 1) return;
 this.good_list[index].num --
 this.getTotal()
 add (index) {
 this.good_list[index].num ++
 this.getTotal()
 }

这里用mock数据来代替后台请求数据的动作,为了方便测试,逻辑比较简单,首先getTotal这个方法用来计算选中的item的数量以及总价,select_one用来处理单个选中的逻辑,slect_all 用来处理全部选中以及全部取消选中的操作,reduce用来处理处理减操作,顾名思义add用来处理加的操作。当然在真实的开发中,还会有校验库存的动作,每次加减都要校验库存。数据处理也会更复杂,但是闻琴弦而知雅意,器原理都是相通的。

github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

米拓商城微信小程序_vue完成商城购物车功

行业动态 2021-01-11
vue完成商城系统买东西车作用 本文关键为大伙儿详尽详细介绍了vue完成商城系统买东西...
查看全文

上海微网站建设-软件开发公司企业网站建

行业动态 2021-01-11
手机软件/高新科技高档网站设计制作考虑顾客和协作小伙伴的期待是雍熙的主要每日任务,同...
查看全文

什么软件可以抠图-自适应网站建设有什么

行业动态 2021-01-10
响应式网页页面设计方案是响应式网页页面设计方案一种,细分化响应式指网页页面中总体大...
查看全文
返回全部新闻


区域站点: 南丰县免费抠图换背景软件   南宫市网页效果图制作   囊谦县在线抠图软件   南和县手机抠图   南华县免费抠图换背景软件   南江县网页效果图制作   南京市在线抠图软件   南靖县手机抠图   南康市免费抠图换背景软件   南乐县网页效果图制作   南陵县在线抠图软件   南宁市手机抠图   南平市免费抠图换背景软件   南皮县网页效果图制作   南市区在线抠图软件   南通市手机抠图   南投县免费抠图换背景软件   南雄市网页效果图制作   南溪县在线抠图软件   南阳市手机抠图   南漳县免费抠图换背景软件   南召县网页效果图制作   南郑县在线抠图软件   那坡县手机抠图   那曲县免费抠图换背景软件   纳雍县网页效果图制作   讷河市在线抠图软件   内黄县手机抠图   内江市免费抠图换背景软件   内丘县网页效果图制作   内乡县在线抠图软件   嫩江市手机抠图   聂荣县免费抠图换背景软件   尼玛县网页效果图制作   尼木县在线抠图软件   宁安市手机抠图   宁波市免费抠图换背景软件   宁城县网页效果图制作   宁德市在线抠图软件   宁都县手机抠图   宁国市免费抠图换背景软件   宁海县网页效果图制作   宁化县在线抠图软件   宁晋县手机抠图   宁陵县免费抠图换背景软件   宁明县网页效果图制作   宁南县在线抠图软件   宁强县手机抠图   宁陕县免费抠图换背景软件   宁武县网页效果图制作   宁乡市在线抠图软件   宁阳县手机抠图   宁远县免费抠图换背景软件   农安县网页效果图制作   磐安县在线抠图软件   盘锦市手机抠图   盘山县免费抠图换背景软件   磐石市网页效果图制作   盘州市在线抠图软件   蓬安县手机抠图   澎湖县免费抠图换背景软件   蓬莱市网页效果图制作   彭山县在线抠图软件   蓬溪县手机抠图   彭阳县免费抠图换背景软件   彭泽县网页效果图制作   彭州市在线抠图软件   偏关县手机抠图   平安县免费抠图换背景软件   平昌县网页效果图制作   平定县在线抠图软件   屏东县手机抠图   平度市免费抠图换背景软件   平果县网页效果图制作   平和县在线抠图软件   平湖市手机抠图   平江县免费抠图换背景软件   平乐县网页效果图制作   平凉市在线抠图软件   平利县手机抠图   平罗县免费抠图换背景软件   平陆县网页效果图制作   屏南县在线抠图软件   平泉市手机抠图   屏山县免费抠图换背景软件   平顺县网页效果图制作   平塘县在线抠图软件   平潭县手机抠图   平武县免费抠图换背景软件   萍乡市网页效果图制作   平乡县在线抠图软件   平阳县手机抠图   平遥县免费抠图换背景软件   平阴县网页效果图制作   平邑县在线抠图软件   平远县手机抠图   平舆县免费抠图换背景软件   皮山县网页效果图制作   普安县在线抠图软件   浦北县手机抠图   浦城县免费抠图换背景软件   普洱市网页效果图制作   普格县在线抠图软件   浦江县手机抠图   普兰县免费抠图换背景软件   普宁市网页效果图制作   莆田市在线抠图软件   迁安市手机抠图   乾安县免费抠图换背景软件   潜江市网页效果图制作   潜山市在线抠图软件  

友情链接: 淘宝做图片用什么 类似图怪兽的软件 招牌设计图片 抠图在线 手机版

Copyright © 2002-2020 在线抠图软件_手机抠图_免费抠图换背景软件_网页效果图制作_通道怎么抠图 版权所有 (网站地图) 备案号:粤ICP备10235580号