427 lines
12 KiB
Vue
427 lines
12 KiB
Vue
<template>
|
||
<view class="main" style="padding-bottom: 218rpx;">
|
||
<!-- 头部 -->
|
||
<status-nav :ifReturn="false" navBarTitle="购物车"></status-nav>
|
||
<!-- 内容区 -->
|
||
<view class="content">
|
||
<!-- 地址 -->
|
||
<view class="cart-addr">
|
||
<view class="addr">
|
||
<image v-if="address!==''" src="/static/icon/icon-addr.png" mode="heightFix"></image>
|
||
<text v-if="address!==''">{{address}}</text>
|
||
</view>
|
||
<view class="edit-btn" v-if="!ifDel" @tap="editShopEv">编辑</view>
|
||
<view class="edit-btn del-btn" v-else @tap="delShopEv">删除</view>
|
||
</view>
|
||
<!-- 全选 -->
|
||
<view class="all-chose" v-if="cartList.length>0">
|
||
<view class="radio" :class="isAll?'checked':''" @tap="checkedAllEv">
|
||
<image v-if="isAll" src="/static/icon/icon-checked.png" mode="widthFix"></image>
|
||
</view>
|
||
<text>全选</text>
|
||
</view>
|
||
<!-- 购物车列表 -->
|
||
<view class="cart-list">
|
||
<view class="item" v-for="(item,index) in cartList" :key="index">
|
||
<view class="radio" :class="item.ifChecked?'checked':''" @tap="checkedEv(index)">
|
||
<image v-if="item.ifChecked" src="/static/icon/icon-checked.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="txt-bg">
|
||
<view class="img">
|
||
<image :src="item.src" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="txt">
|
||
<view class="tit">{{item.title}}</view>
|
||
<view class="price-box" style="align-items: flex-end;">
|
||
<view class="price-bg">
|
||
<view class="price" v-if="item.price != 0">
|
||
<text>￥</text>
|
||
<text>{{item.price.substr(0,item.price.indexOf('.'))}}</text>
|
||
<text>{{item.price.substr(item.price.indexOf('.'),item.price.length)}}</text>
|
||
</view>
|
||
<view class="price" v-if="item.integral>0">
|
||
<text v-if="item.price != 0">+</text>
|
||
<text>{{item.integral}}</text>
|
||
<text>积分</text>
|
||
</view>
|
||
</view>
|
||
<view class="btns">
|
||
<view class="btn" @tap.stop="addCutEv(index,0)">
|
||
<image src="/static/icon/icon-jian.png" mode="widthFix"></image>
|
||
</view>
|
||
<input type="number" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" v-model="item.num">
|
||
<view class="btn" v-model="item.num" @tap.stop="addCutEv(index,1)">
|
||
<image src="/static/icon/icon-jia.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 更多 -->
|
||
<view class="no-more" v-if="cartList.length==0">购物车空空如也~~</view>
|
||
<!-- <view class="no-more" v-if="cartList.length==total">{{cartList.length==total?'不要再往下拉，我是有底线的~~':'下拉加载更多~~'}}</view> -->
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="pull-title">猜你喜欢</view>
|
||
<!-- 猜你喜欢 -->
|
||
<view class="relevant-goods">
|
||
<goods-list :goodsList="goodsList" :ifRefreshCart="true" v-on:getCartList="getCartList"></goods-list>
|
||
</view>
|
||
</view>
|
||
<!-- 总计价格 -->
|
||
<view class="total-price">
|
||
<view class="txt">
|
||
<!-- <view class="chose-all">
|
||
<view class="radio" :class="isAll?'checked':''" @tap="checkedAllEv">
|
||
<image v-if="isAll" src="/static/icon/icon-checked.png" mode="widthFix"></image>
|
||
</view>
|
||
<text>全选</text>
|
||
</view> -->
|
||
<view class="price-box">
|
||
<text>合计：</text>
|
||
<view class="price">
|
||
<text>￥</text>
|
||
<text>{{allPrice.substr(0,allPrice.indexOf('.'))}}</text>
|
||
<text>{{allPrice.substr(allPrice.indexOf('.'),allPrice.length)}}</text>
|
||
</view>
|
||
<view class="price" v-if="allScore>0">
|
||
<text>+</text>
|
||
<text>{{allScore}}</text>
|
||
<text>积分</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="submit-btn" :class="allNum>0?'':'grey'" @tap="submitEv">去结算<text v-if="allNum>0">({{allNum}})</text></view>
|
||
</view>
|
||
<!-- 尾部 -->
|
||
<foot-bar :current="2"></foot-bar>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import swiperPu from '@/components/swipers/swiper-pu';
|
||
import goodsList from '@/components/goods-list/goods-list';
|
||
export default {
|
||
components:{
|
||
swiperPu,
|
||
goodsList
|
||
},
|
||
data() {
|
||
return {
|
||
statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
||
baseHttps:`${getApp().globalData.hostapi}`, //接口链接
|
||
backgroudColor:'none', //状态栏背景颜色
|
||
bannerList:[], //轮播图列表
|
||
isplay:false, //是否自动轮播
|
||
playTimer:null, //间隔时间
|
||
goodsBannerHeight:0, //轮播高度
|
||
zIndex:-1, //层级
|
||
address:'',
|
||
ifDel:false, //是否可删除
|
||
goodsList:[], //猜你喜欢列表
|
||
|
||
originalNum:0,//当前输入框原值
|
||
maxNum:99999,//最大可输入数量
|
||
minNum:1,//最小可输入数量
|
||
skuId:'',
|
||
flag:true, //是否可提交
|
||
|
||
cartList:[], //购物车列表
|
||
isAll:false, //是否全部选中
|
||
ids:'', //选中的id
|
||
page:1,
|
||
size:999,
|
||
total:0,
|
||
|
||
category_ids:'',
|
||
sku_list:[], //订单商品
|
||
};
|
||
},
|
||
onLoad() {
|
||
// 判断是否有定位
|
||
if(uni.getStorageSync('baseAddress')){
|
||
this.address = uni.getStorageSync('baseAddress');
|
||
}
|
||
// 获取购物车列表
|
||
this.getCartList();
|
||
},
|
||
onPageScroll(object){
|
||
if(object.scrollTop >= 5){
|
||
this.backgroudColor = '#f7f7f7';
|
||
}
|
||
if(object.scrollTop <= 0){
|
||
this.backgroudColor = 'none';
|
||
}
|
||
if(object.scrollTop>uni.getSystemInfoSync().windowHeight){
|
||
this.zIndex = 999;
|
||
}else{
|
||
this.zIndex = -1;
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
// if(this.total !== this.cartList.length){
|
||
// this.page++;
|
||
// // 获取购物车列表
|
||
// this.getCartList();
|
||
// }
|
||
},
|
||
computed:{
|
||
// 提交数量
|
||
allNum(){
|
||
let allNum = 0;
|
||
this.cartList.forEach(item=>{
|
||
if(item.ifChecked) {
|
||
allNum++;
|
||
}
|
||
})
|
||
return allNum;
|
||
},
|
||
// 总价
|
||
allPrice() {
|
||
let allPrice = 0;
|
||
this.cartList.forEach(item=>{
|
||
if(item.ifChecked) {
|
||
allPrice += parseFloat(item.price*item.num*1);
|
||
}
|
||
})
|
||
return this.$toolAll.tools.addXiaoShu(allPrice).toString();
|
||
// return allPrice.toString();
|
||
},
|
||
// 总积分
|
||
allScore(){
|
||
let allScore = 0;
|
||
this.cartList.forEach(item=>{
|
||
if(item.ifChecked) {
|
||
allScore += parseFloat(item.integral*item.num*1);
|
||
}
|
||
})
|
||
return parseInt(allScore);
|
||
}
|
||
},
|
||
methods: {
|
||
// 全选
|
||
checkedAllEv(){
|
||
let exit = this.cartList.filter(item=>item.ifChecked==false);
|
||
if(exit.length>0){
|
||
this.isAll = true;
|
||
this.cartList.forEach(item=>item.ifChecked = true);
|
||
} else {
|
||
this.isAll = false;
|
||
this.cartList.forEach(item=>{item.ifChecked = false});
|
||
}
|
||
let idsTemparr = this.cartList.filter(item=>{return item.ifChecked==true})
|
||
let idsArr = [];
|
||
let skuList = [];
|
||
idsTemparr.forEach(item=>{
|
||
idsArr.push(item.id);
|
||
let obj = {
|
||
sku_coding: item.coding,
|
||
num: item.num
|
||
}
|
||
skuList.push(obj);
|
||
})
|
||
// 选中的id
|
||
this.ids = idsArr.join(',');
|
||
// 订单商品
|
||
this.sku_list = skuList;
|
||
|
||
},
|
||
|
||
// 选中事件
|
||
checkedEv(index){
|
||
this.cartList[index].ifChecked = !this.cartList[index].ifChecked;
|
||
let exit = this.cartList.filter(item=>item.ifChecked==false);
|
||
if(exit.length>0){
|
||
this.isAll = false;
|
||
} else {
|
||
this.isAll = true;
|
||
}
|
||
let idsTemparr = this.cartList.filter(item=>{return item.ifChecked==true})
|
||
let idsArr = [];
|
||
let skuList = [];
|
||
idsTemparr.forEach(item=>{
|
||
idsArr.push(item.id);
|
||
let obj = {
|
||
sku_coding: item.coding,
|
||
num: item.num
|
||
}
|
||
skuList.push(obj);
|
||
})
|
||
// 选中的id
|
||
this.ids = idsArr.join(',');
|
||
// 订单商品
|
||
this.sku_list = skuList;
|
||
},
|
||
|
||
// 数量加减
|
||
addCutEv(index,num) {
|
||
if(num) {
|
||
// 加 ，如果当前商品数量不等于最大值
|
||
if(this.cartList[index].num != this.maxNum) {
|
||
this.cartList[index].num++;
|
||
}
|
||
} else {
|
||
// 减 ，如果当前商品数量大于最小值
|
||
if(this.cartList[index].num > this.minNum) {
|
||
this.cartList[index].num--;
|
||
}
|
||
}
|
||
// 改变对应数量
|
||
this.$requst.post('/api/order/shopping-cart-change-num',{id:this.cartList[index].id,num:this.cartList[index].num}).then(res=>{
|
||
if(res.code!=0){
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
})
|
||
// 改变提交数据
|
||
let idsTemparr = this.cartList.filter(item=>{return item.ifChecked==true})
|
||
let skuList = [];
|
||
idsTemparr.forEach(item=>{
|
||
let obj = {
|
||
sku_coding: item.coding,
|
||
num: item.num
|
||
}
|
||
skuList.push(obj);
|
||
})
|
||
// 订单商品
|
||
this.sku_list = skuList;
|
||
},
|
||
|
||
// 编辑
|
||
editShopEv(){
|
||
this.ifDel =true;
|
||
},
|
||
|
||
// 删除商品
|
||
delShopEv(){
|
||
this.ifDel =false;
|
||
if(this.ids!==''){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否删除选中商品？',
|
||
success: (res)=> {
|
||
if (res.confirm) {
|
||
// 确认删除
|
||
this.confirmDel();
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
// 确认删除
|
||
confirmDel(){
|
||
this.$requst.post('/api/order/shopping-cart-del',{id:this.ids.toString()}).then(res=>{
|
||
if(res.code==0){
|
||
this.cartList = this.cartList.filter(item=>item.ifChecked==false);
|
||
this.isAll =false;
|
||
this.$toolAll.tools.showToast('删除成功');
|
||
}else{
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取购物车列表
|
||
getCartList(){
|
||
this.isAll = false;
|
||
let params = {
|
||
page: this.page,
|
||
size: this.size
|
||
}
|
||
this.$requst.get('/api/order/shopping-cart',params).then(res => {
|
||
if(res.code == 0){
|
||
console.log(res,'购物车列表');
|
||
this.total = res.data.total;
|
||
if(this.page==1) this.cartList = [];
|
||
let cartArr = [];
|
||
let categoryIds = [];
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
id: item.id,
|
||
spuId: item.spu.id,
|
||
skuId: item.sku.id,
|
||
coding: item.sku.coding,
|
||
src: item.spu.spu_cover,
|
||
title: item.spu.spu_name,
|
||
integral: item.score,
|
||
price: item.sku.sku_price,
|
||
num: item.num,
|
||
ifChecked:false,
|
||
}
|
||
cartArr.push(obj);
|
||
categoryIds.push(item.category_id);
|
||
})
|
||
this.cartList = this.cartList.concat(cartArr);
|
||
// 选中的id
|
||
this.category_ids = categoryIds.join(',');
|
||
// 获取商品列表
|
||
this.getGoodsList();
|
||
}else{
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
})
|
||
},
|
||
|
||
// 输入框获取焦点事件
|
||
focusEv(num) {
|
||
// 储存当前商品的原始数值
|
||
this.originalNum = num;
|
||
},
|
||
|
||
// 输入框失去焦点事件
|
||
blurEv(index,e) {
|
||
// 失去焦点时，获取当前输入框里的数值
|
||
let currentNum = e.detail.value*1;
|
||
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||
this.cartList[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
||
},
|
||
|
||
// 获取商品列表
|
||
getGoodsList(){
|
||
let params = {
|
||
page:1,
|
||
size:6,
|
||
}
|
||
if(this.category_ids!==''){
|
||
params.category_id = this.category_ids;
|
||
}
|
||
this.$requst.get('/api/spu/list',params).then(res => {
|
||
if(res.code == 0){
|
||
console.log(res,'商品列表');
|
||
let goodsArr= [];
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
id: item.id,
|
||
title: item.name,
|
||
src: this.baseHttps + item.cover,
|
||
price: item.price,
|
||
integral: item.score,
|
||
sku_id: item.skuInfo.id,
|
||
tag: item.tag
|
||
}
|
||
goodsArr.push(obj);
|
||
})
|
||
this.goodsList = goodsArr;
|
||
}else{
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 去结算
|
||
submitEv(){
|
||
if(this.allNum>0){
|
||
uni.setStorageSync('sku_list',this.sku_list);
|
||
uni.navigateTo({
|
||
url:'/pages/cart/orderConfirm'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style> |