vue+vant+axios，实现购物车功能；
购物实现:1. 商品单件选择，2.单件商品数量增减操作，3. 单件商品的删除操作；4. 商品全选/取消全选功能；style:使用vant：改造：/*购物车*/.cars-header .passport-user {line-height: 32px;}.carts.van-card__footer {/*right: auto;*/top: 48px;pos...
·
购物实现:
1. 商品单件选择，
2.单件商品数量增减操作，
3. 单件商品的删除操作；
4. 商品全选/取消全选功能；
style:使用vant：
改造：
/*购物车*/
.cars-header .passport-user {line-height: 32px;}
.carts .van-card__footer {/*right: auto;*/top: 48px;position: absolute;}
.carts .van-card {padding: 5px 12px 5px 115px;background: #fff;}
.carts .van-cell-group {padding: 10px 0 45px; }
.carts .van-swipe-cell__right {background: #cc292b;line-height: 146px;color: #fff;width: 68px;font-size: 18px;text-align: center;}
.carts .van-checkbox {margin-left: 10px; }
.carts .carts-checked{float:left;color: #0a0a0a;display: block;position: relative; line-height: 100px;z-index: 666;}
.carts-select-botm{width:100%;}
.carts-botm-total{position: relative;right: -53px;top: -45px;font-size: 12px; margin-top: 12px;text-align: right;display: none}
.carts .skuchoose{position: absolute;top: -19px;width: 200px}
.carts .skuitem{color: #999;margin-bottom: 3px;}
.cart-no-data{font-size: 17px; line-height: 30px; text-align: center; margin-top: 20px; color: #cc292b;}
.cart-no-data a{text-decoration: underline;}
.carts input[type=checkbox] {display: inline-block;vertical-align: middle;width: 20px;height: 20px;-webkit-appearance: none;transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);background-color: transparent;border: 0;outline: 0 !important;line-height: 20px;color: #d8d8d8;}
.carts input[type=checkbox]:after {content: "";display:block;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 17px;font-size: 16px;color: #fff;border: 1px solid #ddd;background-color: #fff;box-sizing:border-box;}
.carts input[type=checkbox]:checked:after {content: "L";border-color: #cc292b;background-color: #cc292b;}html:
<?php
$this->assign('title','购物车');
$this->assign('js',$this->Html->script(['axios','wechat/carts.index.js']));
?>
<div id="topbar" class="clearfix cars-header goback">
<van-nav-bar title="购物车" left-text="返回" @click-left="goBack" left-arrow>
<van-icon name="home" slot="right" size="20px" color="#666" @click="goHome" />
</van-nav-bar>
</div>
<!-- 购物车列表-->
<template>
<div class="mt-50 mb-50 carts border-top1">
<div class="van-swipe-cell pt-15">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了..." @load="getcartItems()">
<div v-if="shopdata.length>0">
<van-swipe-cell :right-width="65" :on-close="onClose" v-for="(i,key) in shopdata" :key="key">
<label :for="i.item.id" class="carts-checked ml-8" >
<!-- <input type="checkbox" v-model="i.isChecked" :checked="i.isChecked" :id="i.item.id" @click="seleceOne(key)">-->
<input type="checkbox" :checked="i.isChecked" :id="i.item.id" @change="seleceOne(key)">
</label>
<van-cell-group>
<van-card
:num="i.total"
:thumb='i.item.cover'
:price="i.price | curreny"
:title="i.item.title"
:thumb-link="'/wechat/items/view/'+i.item.id"
>
<div slot="footer">
<div slot="skuchoose">
<div class="skuitem">规格: <span>{{i.sku_name}}</span></div>
<div class="skuitem">
<template v-if="i.discount!=0"><div class="font-default font-size12">优惠: ￥{{i.discount * i.total | curreny}} </div></template>
<template v-if="i.is_install==1"><div>安装:含安装</div></template>
<template v-if="i.is_install==0"><div>减免安装费: ￥{{i.waiverfee * i.total | curreny}}</div></template>
</div>
</div>
<div class="clearfix carts-select-botm">
<div>
<template v-if="i.item.limit_sale==1">
<van-stepper v-model="i.total" :max="i.item.limit_sale_count" @change="selectNumChange(i.id,i.item.limit_sale,i.total,i.item.limit_sale_count,i.sku_id,i.is_install,i.item.id,key,i.checked)"/>
</template>
<template v-if="i.item.limit_sale==0">
<van-stepper v-model="i.total" @change="selectNumChange(i.id,i.item.limit_sale,i.total,i.item.limit_sale_count,i.sku_id,i.is_install,i.item.id,key,i.checked)"/>
</template>
</div>
<span class="font-red right carts-botm-total">小计<br>
<template v-if="i.is_install==0">
￥{{(i.price - i.waiverfee - i.discount) * i.total | curreny}}
</template>
<template v-if="i.is_install==1">
￥{{(i.price - i.discount) * i.total | curreny}}
</template>
</span>
</div>
</div>
</van-card>
</van-cell-group>
<span slot="right" @click="deleteCartItem(page,i.id,key)">删除</span>
</van-swipe-cell>
</div>
<div v-if="firstload==true">
<div class="text-center no-items">
<div class="noitem-img"></div>
<p class="font-default">购物车是空的哦~，赶快 <a class="font-red" href="/wechat/items">填充购物车</a>！</p>
</div>
</div>
<van-submit-bar :price="totalPrice*100" :disabled="disabled" button-text="提交订单" @submit="onSubmit">
<!-- <label class="ml-15" for="checkedall"><input type="checkbox" id="checkedall" @click="selectAll" v-model="isCheckedAll" :checked="isCheckedAll" name="isCheckedAll">全选</label>-->
<label class="ml-10" for="checkedall"><input type="checkbox" id="checkedall" @change="selectAll" :checked="isCheckedAll" name="isCheckedAll">全选</label>
</van-submit-bar>
</van-list>
</div>
</template>js: 代码部分
var app = new Vue({
el: "#app",
data: {
loading:false,
finished:false,
pageNumber:0,//当前页
totalPage:0,//总数
page: 1,
disableok1:false,//禁用类class
disableok2:false,//禁用类class
nodata:false,//无数据加载时判断；
orderEvery:[],//暂存每页的数据长度；
isLoading: false,//控制下拉刷新的加载动画
firstload:false,//第一次items为空时，不执行，之后判断如果为空，执行；
totalNum:0,
selectPrice: 0,//被选中的总价计算；
totalPrice:0,//计算的总价
isCheckedAll:true,//全选状态
shopdata:[],//所有购物车列表;
disabled:false,
hasList: true,
cart_id:[],
total:0,//购买
cat_id:0,//商品改变后的id
},
filters:{
curreny:function(data){
data = Number(data).toFixed(2) ;
return data;
}
},
created:function(){
// this.getcartItems();
this.getTotalPrice();//计算总价；
this.getcartItems();//初始化执行第一页数据；
},
watch:{//监听商品全选/反选事件；
shopdata:{
handler:function(value){
var that=this;
var count=0;
for(var i=0;i<value.length;i++){
if(value[i].isChecked==true){
count++;
}
}
if(count==value.length){
that.isCheckedAll=true
}else{
that.isCheckedAll=false
}
},
deep:true
},
},
methods: {
//返回上一页（历史记录)
goBack:function(){
// 默认将返回上一个页面
self.location=document.referrer;
//window.history.back();
//window.history.go(-1);
},
//返回首页
goHome:function(){
window.location.href='/wechat/';
},
//购物车数据初始化
getcartItems:function(){
var that = this;
that.loading = true;
that.finished = false;
axios.get('/api/carts',{params: {page:that.page},headers:{'X-Requested-With': 'XMLHttpRequest',token:token}}).then(function(res){
that.loading = false;
that.finished = true;
if(res.data.code == 0){
that.shopdata=res.data.data;
for(let i=0;i<that.shopdata.length;i++){
//设置每一项的选中状态；
Vue.set(that.shopdata[i],"isChecked",true);
}
console.log(that.shopdata);
that.getTotalPrice();
if(that.shopdata.length==0){
that.firstload=true;
}else{
that.firstload=false;
}
}else{
that.$toast(res.data.message);
}
})
},
//计算选中商品的总价：
getTotalPrice:function () {
let shopdata = this.shopdata;
let totalprice = 0;
for (let i = 0; i < shopdata.length; i++) {
if (shopdata[i].isChecked==true) {
if(shopdata[i].is_install==0){
totalprice+=(shopdata[i].price - shopdata[i].waiverfee - shopdata[i].discount) * shopdata[i].total ;
}else if(shopdata[i].is_install==1){
totalprice+=(shopdata[i].price - shopdata[i].discount) * shopdata[i].total ;
}
}
}
this.totalPrice = totalprice;
},
//选择一项
seleceOne: function(index) {
//console.log(index);
if(this.shopdata[index].isChecked==true){
this.shopdata[index].isChecked=false;
}else{
this.shopdata[index].isChecked=true;
}
this.getTotalPrice();
},
// 全选或取消全选
selectAll: function() {
if(this.isCheckedAll==true){
for(var i=0;i<this.shopdata.length;i++){
this.shopdata[i].isChecked=false;
}
this.isCheckedAll="";
}else{
for(var i=0;i<this.shopdata.length;i++){
this.shopdata[i].isChecked=true;
}
this.isCheckedAll=true;
}
this.getTotalPrice();
},
//滑动显示删除；
onClose:function(clickPosition, instance) {
switch (clickPosition) {
case 'left':
case 'cell':
case 'outside':
instance.close();
break;
case 'right':
instance.close();
break;
}
},
//删除购物项
deleteCartItem:function(page,id,e){
var that=this;
that.shopdata.splice(e, 1); // 删除下标为i的元素，后面的1表示删除一个
axios.delete(' /api/carts',{params:{id:id},headers:{'X-Requested-With': 'XMLHttpRequest',token:token}}).then(function(res){
if(res.data.code == 0){
that.$toast("删除成功！");
that.getcartItems(page);
// console.log(that.shopdata);
if(that.shopdata.length==0 || that.shopdata==''){
that.nodata=true;
}
}else{
that.$toast(res.data.message);
}
});
that.getTotalPrice(id);
},
//购买数量改变时触发
selectNumChange:function(cart_id,limt_status,total,limt_total,sku_id ,is_install,item_id,index,checked){
if(limt_status==1 && limt_total<=total){
this.$toast("该商品最多只能购买"+limt_total+"件！");
}
this.totalChange(cart_id,total,sku_id,is_install,item_id,index,checked);
this.getTotalPrice();
},
//购买数量改变时执行；
totalChange:function(cart_id,total,sku_id,is_install,item_id,index,checked){
var that=this;
var cartNum={};
cartNum.cart_id=cart_id;
cartNum.total=total;
cartNum.sku_id=sku_id;
cartNum.is_install=is_install;
cartNum.item_id=item_id;
cartNum.is_fast=0;
axios.post('/api/carts',cartNum,{headers:{'X-Requested-With': 'XMLHttpRequest',token:token}}).then(function(res){
if(res.data.code == 0){
that.getTotalPrice();
}else{
that.$toast(res.data.message);
}
that.showcart=false;
})
},
//提交订单，并到确认订单页面
onSubmit:function() {
var that=this;
var cart_ids = [];
that.disabled=false;
for(var i=0;i<that.shopdata.length;i++){
if(that.shopdata[i].isChecked){
cart_ids.push(that.shopdata[i].id);
}
}
if(cart_ids.length > 0){
cart_ids = cart_ids.join(',');
window.location.href='/wechat/orders/create?cart_id='+cart_ids;
}else{
that.$toast("请至少选择一件商品！");
}
},
}
});
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献7条内容
所有评论(0)