316 lines
10 KiB
Vue
316 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<status-container titlet="购物车" returnc="#FFFFFF">
|
||
<view v-if="loading" slot="content" style="margin-top: -20rpx;">
|
||
<view class="bacf boxshowb posi-sticky" :style="{top:newtop+'px'}">
|
||
<view class="pad-zy30 pad-sx24 disjbac pad-zy30 pad-sx20">
|
||
<view class="fon26 col26" v-if="addressInfo">{{addressInfo.province_str}}{{addressInfo.city_str}}{{addressInfo.county_str}}</view>
|
||
<view class="fon26 col26" v-else></view>
|
||
<image @tap="$toolAll.tools.goPage(`/pagesB/add-address/add-address?id=${addressInfo.id}`)" src="/static/tabbar/icon-edit.png" mode="" style="width: 26rpx;height: 28rpx;" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
<view v-if="datalist.length" class="bacf mar-s30 pad-zy30 pad-x30 boxshowb">
|
||
<view class="disac animated pad-sx30 bbot" :class="item.ifExit ? 'fadeIn' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}" v-for="(item,index) in datalist" :key="index">
|
||
<!-- 选择 -->
|
||
<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||
<!-- 商品图片 -->
|
||
<image @tap="chooseEv(index)" class="flexs mar-zy20" :src="item.spu.spu_cover" mode="aspectFill" style="width: 194rpx;height: 136rpx;" lazy-load></image>
|
||
<view class="disjb fc width100" style="height: 136rpx;">
|
||
<view @tap="goDetail(item.spu.id)">
|
||
<!-- 商品标题 -->
|
||
<view class="fon24 clips2 col26">{{item.spu.spu_name}}</view>
|
||
<view class="fon24 clips1 col9 mar-s10">{{item.sku.sku_name}}</view>
|
||
</view>
|
||
<view class="disjbac">
|
||
<!-- 商品价格 -->
|
||
<view class="fon24 col-e42417 bold">￥{{$toolAll.tools.addXiaoShu(item.price)}}</view>
|
||
<!-- 商品数量 -->
|
||
<view class="disac overflow" style="height: 50rpx;">
|
||
<!-- 减数量 -->
|
||
<view class="borbot-df disjcac radius4" @tap="addCutEv(index,0)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
|
||
<i class="icon icon-cut fon20" :style="{backgroundColor: item.num==minNum || !ifManage ? '#FFFFFF' : '#000000'}"></i>
|
||
</view>
|
||
<!-- 实际数量 -->
|
||
<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput" v-model="item.num">
|
||
<!-- 加数量 -->
|
||
<view class="borbot-df disjcac radius4" @tap="addCutEv(index,1)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
|
||
<i class="icon icon-add fon20" :style="{backgroundColor: item.num==maxNum || !ifManage ? '#FFFFFF' : '#000000'}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<pitera v-else textStr="您的购物车：这也空空，那也空空(*^▽^*)" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||
<!-- 热门产品推荐 -->
|
||
<view class="pad-zy30 mar-x30 mar-s40">
|
||
<view class="disjcac" style="border-bottom: 2rpx solid #ebe3e2;">
|
||
<view class="col26 fon30 pad-zy14" style="background-color: #fff6f5;margin-bottom: -20rpx;">热门产品推荐</view>
|
||
</view>
|
||
</view>
|
||
<view class="pad-zy20">
|
||
<list ref="refproduct" @goDetail="goDetail"></list>
|
||
</view>
|
||
<!-- 底部导航 -->
|
||
<view class="disjbac bacf pad20 posixzy fon24 boxshowt">
|
||
<view class="disac" @tap="chooseAllEv">
|
||
<view class="flexs mo-item mar-y10" :class="ifSelectAll ? 'active-item' : ''"></view>
|
||
<span>全选</span>
|
||
</view>
|
||
<view class="disac">
|
||
<view class="">合计：<span class="fon38 colf8 bold">￥{{allPrice}}</span></view>
|
||
<view @tap="goConfirmOrder" class="fon24 radius32 colf disjcac mar-z20" style="width: 184rpx;height: 64rpx;background-color: #f37617;">{{datalist.length?'去支付':'去购物'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</status-container>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 底部组件
|
||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||
import list from '@/components/list.vue';
|
||
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||
import pitera from '@/components/nothing/pitera.vue';
|
||
export default {
|
||
components:{'foot-tab' :footTab,list,swiperPu,pitera},
|
||
data() {
|
||
return {
|
||
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||
richText:'',
|
||
ifLogin:false,
|
||
datalist:[
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||
],
|
||
ifSelectAll:false,//是否全选
|
||
originalNum:0,//当前输入框原值
|
||
maxNum:20,//最大可输入数量
|
||
minNum:1,//最小可输入数量
|
||
addressInfo:'',
|
||
loading:false
|
||
}
|
||
},
|
||
onShow() {
|
||
this.loading = false;
|
||
// 开启banner图自动轮播
|
||
this.$store.commit('setAutoplay',true);
|
||
// 获取地址信息
|
||
this.getAddress();
|
||
// 获取购物车列表
|
||
this.getCartList();
|
||
// 检测是否全选
|
||
this.judgeSelectAllEv();
|
||
uni.removeStorageSync('orderInfo');
|
||
uni.removeStorageSync('skuList');
|
||
},
|
||
onHide() {
|
||
// 关闭banner图自动轮播
|
||
this.$store.commit('setAutoplay',false);
|
||
},
|
||
computed:{
|
||
// 总价及合计
|
||
allPrice() {
|
||
let allPrice = 0;
|
||
this.datalist.forEach(item=>{
|
||
if(item.ifcheck) {
|
||
allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
|
||
}
|
||
})
|
||
return this.$toolAll.tools.addXiaoShu(allPrice);
|
||
},
|
||
// 要删除的数量
|
||
delNum() {
|
||
let delNum = 0;
|
||
this.datalist.forEach(item=>{
|
||
if(item.ifcheck) {
|
||
delNum += 1;
|
||
}
|
||
})
|
||
return delNum;
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
// 热门商品
|
||
getShopList(){
|
||
let params = {
|
||
page:1,
|
||
size:1000,
|
||
is_hot:1
|
||
}
|
||
this.$requst.post('/api/spu/list',params).then(res=>{
|
||
if(res.code==0){
|
||
// 设置商品列表
|
||
this.$refs.refproduct.list = res.data.list;
|
||
}
|
||
})
|
||
},
|
||
// 获取购物车列表
|
||
getCartList(){
|
||
let params = {
|
||
page:1,
|
||
size:1000
|
||
}
|
||
this.datalist = [];
|
||
this.$requst.get('/api/order/shopping-cart',params).then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.list.length){
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
...item,
|
||
ifcheck:false,
|
||
ifExit:true,
|
||
ifShow:true
|
||
}
|
||
this.datalist.push(obj);
|
||
})
|
||
}
|
||
this.loading = true;
|
||
this.getShopList();
|
||
}
|
||
})
|
||
},
|
||
// 获取地址列表
|
||
getAddress(){
|
||
this.$requst.get('/api/user/address').then(res=>{
|
||
if(res.code==0){
|
||
// 设置地址列表
|
||
if(res.data.length){
|
||
res.data.forEach(item=>{
|
||
if(item.is_default){
|
||
this.addressInfo = item;
|
||
} else {
|
||
this.addressInfo = res.data[0];
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 前往确认订单页
|
||
goConfirmOrder(){
|
||
if(this.datalist.length){
|
||
let exit = this.datalist.findIndex(item=>item.ifcheck==true);
|
||
if(exit!=-1){
|
||
let newList = [];
|
||
this.datalist.forEach(item=>{
|
||
if(item.ifcheck){
|
||
let obj = {
|
||
sku_coding:item.sku.coding,
|
||
num:item.num,
|
||
}
|
||
newList.push(obj);
|
||
}
|
||
})
|
||
let params = {
|
||
sku_list:newList
|
||
};
|
||
this.$requst.post('/api/order/prepare-info',params).then(res=>{
|
||
if(res.code==0){
|
||
uni.navigateTo({
|
||
url:'/pagesB/confirm-order/confirm-order'
|
||
})
|
||
uni.setStorageSync('orderInfo',res.data);
|
||
uni.setStorageSync('skuList',params.sku_list);
|
||
}
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast('请选择要支付的商品')
|
||
}
|
||
} else {
|
||
uni.reLaunch({
|
||
url:'/pages/tabbar/shop/shop'
|
||
})
|
||
}
|
||
},
|
||
// 全选事件
|
||
chooseAllEv(){
|
||
this.ifSelectAll = !this.ifSelectAll;
|
||
this.datalist.forEach(item=>item.ifcheck = this.ifSelectAll ? true : false);
|
||
},
|
||
// 选中事件
|
||
chooseEv(index) {
|
||
this.datalist[index].ifcheck = !this.datalist[index].ifcheck;
|
||
this.judgeSelectAllEv();
|
||
},
|
||
// 判断全选中是否被选中
|
||
judgeSelectAllEv() {
|
||
if(this.datalist.length){
|
||
let exit = this.datalist.findIndex(item=>item.ifcheck==false);
|
||
if(exit!=-1) {
|
||
this.ifSelectAll = false;
|
||
} else {
|
||
this.ifSelectAll = true;
|
||
}
|
||
} else {
|
||
this.ifSelectAll = false;
|
||
}
|
||
},
|
||
// 去商品详情事件
|
||
goDetail(id){
|
||
uni.navigateTo({
|
||
url:`/pagesB/shop-detail/shop-detail?id=${id}`
|
||
})
|
||
},
|
||
// 数量加减事件
|
||
addCutEv(index,num) {
|
||
// 不在管理状态下：可进行加减
|
||
if(num) {
|
||
// 加 ，如果当前商品数量不等于最大值
|
||
if(this.datalist[index].num != this.maxNum) {
|
||
this.datalist[index].num++;
|
||
this.editNum(this.datalist[index].id,this.datalist[index].num);
|
||
}
|
||
} else {
|
||
// 减 ，如果当前商品数量大于最小值
|
||
if(this.datalist[index].num > this.minNum) {
|
||
this.datalist[index].num--;
|
||
this.editNum(this.datalist[index].id,this.datalist[index].num);
|
||
} else {
|
||
this.datalist[index].ifExit = false;
|
||
this.delCart(this.datalist[index].id);
|
||
setTimeout(()=>{
|
||
this.datalist.splice(index,1);
|
||
this.judgeSelectAllEv();
|
||
},500)
|
||
}
|
||
}
|
||
console.log(this.allPrice,'总价');
|
||
},
|
||
// 修改购物车数量
|
||
editNum(id,num){
|
||
this.$requst.post('/api/order/shopping-cart-change-num',{id,num}).then(res=>{})
|
||
},
|
||
// 删除购物车
|
||
delCart(id){
|
||
this.$requst.post('/api/order/shopping-cart-del',{id}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('删除成功');
|
||
}
|
||
})
|
||
},
|
||
// 输入框获取焦点事件
|
||
focusEv(num) {
|
||
// 储存当前商品的原始数值
|
||
this.originalNum = num;
|
||
},
|
||
// 输入框失去焦点事件
|
||
blurEv(index,e) {
|
||
// 失去焦点时，获取当前输入框里的数值
|
||
let currentNum = e.detail.value*1;
|
||
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||
this.datalist[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
||
this.editNum(this.datalist[index].id,this.datalist[index].num);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.countInput{width: 68rpx;border-top: 2rpx solid #DFDFDF;border-bottom: 2rpx solid #DFDFDF;border-radius: 4rpx;height: 50rpx;box-sizing: border-box;}
|
||
</style>
|