416 lines
11 KiB
Vue
416 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 全选 -->
|
|||
|
|
<view class="change-all border-box background-white font26 flex" :style="{top:statusHeight+50+'px'}">
|
|||
|
|
<label class="label flex" @tap="chooseAll"><radio :checked="allChoose" color="#febf00" style="transform: scale(.8);"/><text>全选</text></label>
|
|||
|
|
<view class="del-cart" @tap="delShopEv">删除</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="slide-list">
|
|||
|
|
<view class="slide-item" v-for="(item, index) in listData" :key="index">
|
|||
|
|
<view class="slide-item-li border-box background-white flex" @tap.stop="goDetail(item.spuId)">
|
|||
|
|
<label class="radio" @tap.stop="chooseEv(index)"><radio :checked="item.ifcheck" color="#febf00"/></label>
|
|||
|
|
<view class="shop-img radius30">
|
|||
|
|
<image :src="item.image" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="shop-txt">
|
|||
|
|
<view class="shop-txt-top">
|
|||
|
|
<view class="title font30 clips1">{{item.title}}</view>
|
|||
|
|
<view class="specs font24 color-66 mar-sx10 clips2">规格：{{item.skuName}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="shop-txt-bottom flex">
|
|||
|
|
<!-- 商品价格 -->
|
|||
|
|
<view class="price font30 color-red">￥{{item.price}}</view>
|
|||
|
|
<!-- 商品数量 -->
|
|||
|
|
<view class="num font24 flex">
|
|||
|
|
<!-- 减数量 -->
|
|||
|
|
<i class="icon icon-cut count-btn fon24 color-ff radius10 flex" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#d3d3d3' : '#febf00'}"></i>
|
|||
|
|
<!-- 实际数量 -->
|
|||
|
|
<input class="input border-box radius10" type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" :disabled="item.slide_x!=0" v-model="item.num">
|
|||
|
|
<!-- 加数量 -->
|
|||
|
|
<i class="icon icon-add count-btn fon24 color-ff radius10 flex" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#d3d3d3' : '#febf00'}"></i>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 提交订单 -->
|
|||
|
|
<view class="pull-footer-bg background-white pad-all20 radius30 border-box">
|
|||
|
|
<view class="pull-footer background-grey radius30 pad-all20 border-box flex">
|
|||
|
|
<view class="price color-ff">
|
|||
|
|
<view class="font36">合计：￥{{allPrice>0?allPrice:'0'}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn font36 color-48 radius30 flex" :style="{background: !buyNum ? '#cccccc' : '#febf00'}" @tap="submitEv">{{allPrice==0 ? '去购物' : '立即购买'}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="listData.length!=0 && total==listData.length"><pitera textStr="—— 到底啦 ——"></pitera></view>
|
|||
|
|
<nothing-page v-if="!ifLoading && !listData.length" content="您的购物车,空空如也(*^▽^*)"></nothing-page>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
|
|||
|
|
import pitera from '@/components/nothing/pitera';
|
|||
|
|
import {getCartInfo} from '@/jsFile/public-api.js';
|
|||
|
|
export default {
|
|||
|
|
components:{
|
|||
|
|
pitera
|
|||
|
|
},
|
|||
|
|
name: 'cart-slide',
|
|||
|
|
props: {
|
|||
|
|
list: { //数据list
|
|||
|
|
type: Array,
|
|||
|
|
default () {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
button: { //按钮数据list
|
|||
|
|
type: Array,
|
|||
|
|
default () {
|
|||
|
|
return [
|
|||
|
|
// {title: '分享',background: '#c4c7cd'},
|
|||
|
|
{title: '删除',background: 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
customB:{
|
|||
|
|
type:String,
|
|||
|
|
default:'0'
|
|||
|
|
},
|
|||
|
|
skuId:{
|
|||
|
|
type:String,
|
|||
|
|
default:0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusHeight:uni.getSystemInfoSync().statusBarHeight,
|
|||
|
|
listData: [],
|
|||
|
|
start_slide_x: 0,
|
|||
|
|
btnWidth: 0,
|
|||
|
|
startX: 0,
|
|||
|
|
LastX: 0,
|
|||
|
|
startTime: 0,
|
|||
|
|
itemIndex: 0,
|
|||
|
|
originalNum:0,//当前输入框原值
|
|||
|
|
maxNum:99999,//最大可输入数量
|
|||
|
|
minNum:1,//最小可输入数量
|
|||
|
|
ifLoading:true,
|
|||
|
|
page:1,
|
|||
|
|
size:10,
|
|||
|
|
total:0,
|
|||
|
|
delIds:'', //删除ids
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
windowWidth() {
|
|||
|
|
return uni.getSystemInfoSync().windowWidth;
|
|||
|
|
},
|
|||
|
|
// 总价及合计
|
|||
|
|
allPrice() {
|
|||
|
|
let allPrice = 0;
|
|||
|
|
this.listData.forEach(item=>{
|
|||
|
|
if(item.ifcheck) {
|
|||
|
|
allPrice += parseFloat(item.price*item.num);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return this.$toolAll.tools.addXiaoShu(allPrice);
|
|||
|
|
// return allPrice.toString();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 要删除的数量
|
|||
|
|
buyNum() {
|
|||
|
|
let buyNum = 0;
|
|||
|
|
this.listData.forEach(item=>{
|
|||
|
|
if(item.ifcheck) {
|
|||
|
|
buyNum += 1;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return buyNum;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 全选
|
|||
|
|
allChoose() {
|
|||
|
|
let ifAll = false;
|
|||
|
|
if(this.listData.length) {
|
|||
|
|
let temparr = this.listData.filter(item=>{return item.ifcheck==false})
|
|||
|
|
temparr.length==0 ? ifAll = true : ifAll = false;
|
|||
|
|
let delTemparr = this.listData.filter(item=>{return item.ifcheck==true})
|
|||
|
|
let delArr = [];
|
|||
|
|
delTemparr.forEach(item=>{
|
|||
|
|
delArr.push(item.id)
|
|||
|
|
})
|
|||
|
|
// 删除购物车
|
|||
|
|
this.delIds = delArr.join(',');
|
|||
|
|
}
|
|||
|
|
return ifAll
|
|||
|
|
},
|
|||
|
|
...mapState({
|
|||
|
|
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
this.listData = this.list;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取商品列表
|
|||
|
|
getList(){
|
|||
|
|
uni.showLoading();
|
|||
|
|
this.total = 0;
|
|||
|
|
let params = {
|
|||
|
|
page:this.page,
|
|||
|
|
size:this.size
|
|||
|
|
}
|
|||
|
|
this.$requst.post('/api/order/shopping-cart',params).then(res=>{
|
|||
|
|
if(res.code==0){
|
|||
|
|
if(uni.getStorageSync('business_code')!==''){
|
|||
|
|
this.vipPrice = true;
|
|||
|
|
}
|
|||
|
|
this.total = res.data.total;
|
|||
|
|
console.log(res,'购物车列表')
|
|||
|
|
if(this.page==1) this.listData = [];
|
|||
|
|
if(res.data.list.length){
|
|||
|
|
res.data.list.forEach(item=>{
|
|||
|
|
let obj = {
|
|||
|
|
id: item.id,
|
|||
|
|
spuId:item.spu.id,
|
|||
|
|
skuId:item.sku_id,
|
|||
|
|
coding:item.sku.coding,
|
|||
|
|
image: item.spu.spu_cover,
|
|||
|
|
title: item.spu.spu_name,
|
|||
|
|
content: item.spu.unit,
|
|||
|
|
customTitle: item.sku.custom_title,
|
|||
|
|
skuName: item.sku.sku_name,
|
|||
|
|
slide_x: 0,
|
|||
|
|
price:item.sku.sku_price,
|
|||
|
|
num:item.num,
|
|||
|
|
ifcheck:this.skuId==item.sku_id ? true : false,
|
|||
|
|
ifExit:true,
|
|||
|
|
ifShow:true,
|
|||
|
|
}
|
|||
|
|
this.listData.push(obj);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.ifLoading = false;
|
|||
|
|
uni.hideLoading();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 全选事件
|
|||
|
|
chooseAll(){
|
|||
|
|
let exit = this.listData.filter(item=>item.ifcheck==false);
|
|||
|
|
if(exit.length){
|
|||
|
|
this.listData.forEach(item=>item.ifcheck = true);
|
|||
|
|
} else {
|
|||
|
|
this.listData.forEach(item=>{item.ifcheck = false});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 去购物、去结算、删除
|
|||
|
|
submitEv(){
|
|||
|
|
if(this.allPrice==0) {
|
|||
|
|
// 去购物
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:`/pages/index/index`
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// 去结算
|
|||
|
|
let buyList = [];
|
|||
|
|
this.listData.forEach(item=>{
|
|||
|
|
if(item.ifcheck) {
|
|||
|
|
let obj = {
|
|||
|
|
sku_coding: item.coding,
|
|||
|
|
num: item.num
|
|||
|
|
}
|
|||
|
|
buyList.push(obj);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
uni.setStorageSync('buyList',buyList);
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pages/cart/settlement'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选中事件
|
|||
|
|
chooseEv(index) {
|
|||
|
|
this.listData[index].ifcheck = !this.listData[index].ifcheck;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 数量加减事件
|
|||
|
|
addCutEv(index,num) {
|
|||
|
|
if(this.listData[index].slide_x==0){
|
|||
|
|
if(num) {
|
|||
|
|
// 加 ，如果当前商品数量不等于最大值
|
|||
|
|
if(this.listData[index].num != this.maxNum) {
|
|||
|
|
this.listData[index].num++;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 减 ，如果当前商品数量大于最小值
|
|||
|
|
if(this.listData[index].num > this.minNum) {
|
|||
|
|
this.listData[index].num--;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.$requst.post('/api/order/shopping-cart-change-num',{id:this.listData[index].id,num:this.listData[index].num}).then(res=>{
|
|||
|
|
if(res.code!=0){
|
|||
|
|
this.$toolAll.tools.showToast(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除商品
|
|||
|
|
delShopEv(){
|
|||
|
|
if(this.delIds!==''){
|
|||
|
|
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',{ids:this.delIds.toString()}).then(res=>{
|
|||
|
|
if(res.code==0){
|
|||
|
|
this.$toolAll.tools.showToast('删除成功');
|
|||
|
|
// this.getList();
|
|||
|
|
if(this.listData.length){
|
|||
|
|
this.listData.forEach((item,index)=>{
|
|||
|
|
if(item.ifcheck){
|
|||
|
|
this.listData.splice(index,1);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.$store.commit('setNum', this.listData.length);
|
|||
|
|
this.totalPrice();
|
|||
|
|
}else{
|
|||
|
|
this.$toolAll.tools.showToast(res.msg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 计算总价
|
|||
|
|
totalPrice() {
|
|||
|
|
let totalPrice = 0;
|
|||
|
|
this.listData.forEach(item=>{
|
|||
|
|
totalPrice += parseFloat(item.price*item.num);
|
|||
|
|
})
|
|||
|
|
totalPrice = this.$toolAll.tools.addXiaoShu(totalPrice);
|
|||
|
|
this.$store.commit('setPrice', totalPrice);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 查看商品详情
|
|||
|
|
goDetail(id) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:`/pagesB/shop-detail/shop-detail?id=${id}`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 输入框获取焦点事件
|
|||
|
|
focusEv(num) {
|
|||
|
|
// 储存当前商品的原始数值
|
|||
|
|
this.originalNum = num;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 输入框失去焦点事件
|
|||
|
|
blurEv(index,e) {
|
|||
|
|
// 失去焦点时，获取当前输入框里的数值
|
|||
|
|
let currentNum = e.detail.value*1;
|
|||
|
|
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
|||
|
|
this.listData[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.slide-list{
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.slide-item-li{
|
|||
|
|
align-items: center;
|
|||
|
|
width: calc(100% - 40rpx);
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
border-bottom: 2rpx solid #eaeaea;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .radio>radio{
|
|||
|
|
transform: scale(.8);
|
|||
|
|
margin-left: -5rpx;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-img{
|
|||
|
|
width: 194rpx;
|
|||
|
|
height: 194rpx;
|
|||
|
|
margin: 0 24rpx 0 6rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-img image{
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 194rpx;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt{
|
|||
|
|
width: calc(100% - 264rpx);
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-top{
|
|||
|
|
min-height: 134rpx;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-top .title{
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-top .specs{
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-bottom{
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-bottom .price{
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-bottom .num{
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 170rpx;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-bottom .num>.count-btn{
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
.slide-item-li .shop-txt-bottom .num>.input{
|
|||
|
|
width: 78rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border: 2rpx solid #d3d3d3;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.change-all{
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
width: calc(100% - 40rpx);
|
|||
|
|
height: 80rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
border-bottom: 2rpx solid #eaeaea;
|
|||
|
|
position: sticky;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
.change-all .label{
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: -5rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|