413 lines
16 KiB
Vue
413 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<view class="shop-cart">
|
|||
|
|
<view class="main " :style="{'padding-bottom': (cartType == 1 ? '100rpx' : 0)}">
|
|||
|
|
<view class="cart-list m-b-20" v-show="cartType==1">
|
|||
|
|
<view class="cart-item bg-white" v-for="(items, index) in cartLists" :key="index">
|
|||
|
|
<view class="flex select">
|
|||
|
|
<u-checkbox :disabled="shopInvalid(items)" @change="changeSelect($event, 1, index)"
|
|||
|
|
shape="circle" :value="items.is_selected == 1">
|
|||
|
|
</u-checkbox>
|
|||
|
|
<shop-title :shop="items.shop"></shop-title>
|
|||
|
|
<view class="xs muted flex-none" v-if="items.shop.is_pay == 0">该店铺未开启支付功能</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<u-swipe-action :show="openCartId == item.cart_id" btn-width="150" v-for="item in items.cart"
|
|||
|
|
:key="item.cart_id" :index="item.cart_id" @click="deleteOneCart($event, item.cart_id)"
|
|||
|
|
:options="options" @open="openSwipe">
|
|||
|
|
<view class="flex p-20">
|
|||
|
|
<u-checkbox :disabled="cartInvalid(item)"
|
|||
|
|
@change="changeSelect($event, 2, item.cart_id)" shape="circle"
|
|||
|
|
:value="item.selected == 1">
|
|||
|
|
</u-checkbox>
|
|||
|
|
<router-link class="flex-1"
|
|||
|
|
:to="{path: '/pages/goods_details/goods_details', query: {id: item.goods_id}}">
|
|||
|
|
<view class="flex">
|
|||
|
|
<view class="goods-img m-r-20">
|
|||
|
|
<u-image width="180rpx" height="180rpx" border-radius="10rpx"
|
|||
|
|
:src="item.image" />
|
|||
|
|
<view v-if="item.goods_status == 0 || item.goods_del == 1" class="invalid sm white text-center">已失效
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info flex-1">
|
|||
|
|
<view class="line-2 nr">{{item.goods_name}}</view>
|
|||
|
|
<view class="muted line-1 xs m-t-10">
|
|||
|
|
{{item.spec_value_str}}
|
|||
|
|
</view>
|
|||
|
|
<view class="flex row-between m-t-20">
|
|||
|
|
<view class="price flex primary">
|
|||
|
|
<price-format :price="item.price" :first-size="32" :second-size="32"
|
|||
|
|
:subscript-size="24" :weight="500">
|
|||
|
|
</price-format>
|
|||
|
|
</view>
|
|||
|
|
<view class="cartNum" @tap.stop="">
|
|||
|
|
<u-number-box :disabled="cartInvalid(item)" :value="item.goods_num"
|
|||
|
|
:min="1" :max="item.stock"
|
|||
|
|
@change="countChange($event, item.cart_id)" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</router-link>
|
|||
|
|
</view>
|
|||
|
|
</u-swipe-action>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cart-null flex-col col-center row-center bg-white m-b-20" style="padding: 80rpx 0 50rpx"
|
|||
|
|
v-show="cartType == 2">
|
|||
|
|
<image class="img-null" src="/static/images/cart_null.png"></image>
|
|||
|
|
<view class="muted m-b-20">购物车暂无任何商品~</view>
|
|||
|
|
<router-link to="/pages/index/index" navType="pushTab">
|
|||
|
|
<view class="primary br60 btn flex row-center">去逛逛</view>
|
|||
|
|
</router-link>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="!isLogin" class="login flex-col col-center row-center">
|
|||
|
|
<image class="img-null" src="/static/images/cart_null.png"></image>
|
|||
|
|
<view class="muted mt20">登录后才能查看购物车哦</view>
|
|||
|
|
<router-link to="/pages/login/login">
|
|||
|
|
<view class="white br60 flex row-center btn">
|
|||
|
|
<image class="mr10" src="/static/images/icon_wechat.png"></image>
|
|||
|
|
<text>去登录</text>
|
|||
|
|
</view>
|
|||
|
|
</router-link>
|
|||
|
|
</view>
|
|||
|
|
<goods-column v-if="showMoreGoods" ref="mescrollItem"></goods-column>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="footer flex bg-white" v-show="cartType == 1">
|
|||
|
|
<u-checkbox :disabled="allInvalid()" @change="changeSelect($event,3)" shape="circle" :value="isSelectedAll">
|
|||
|
|
全选
|
|||
|
|
</u-checkbox>
|
|||
|
|
<view class="primary" @tap="deleteSelectCart">删除</view>
|
|||
|
|
<view class="all-price flex lg m-r-20 row-right">
|
|||
|
|
<view>合计：</view>
|
|||
|
|
<view class="primary">￥{{totalPrice || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right-btn br60 white" :style="' ' + (nullSelect ? 'background: #d7d7d7' : '')"
|
|||
|
|
@tap="goToConfirm">去结算</view>
|
|||
|
|
</view>
|
|||
|
|
<u-modal v-model="showDelTips" :show-cancel-button="true" comfirm-text="狠心删除"
|
|||
|
|
:confirm-color="colorConfig.primary" :show-title="false" @confirm="deleteCart">
|
|||
|
|
<view class="flex-col col-center tips-dialog" style="padding-top: 40rpx">
|
|||
|
|
<image class="icon-lg" src="/static/images/icon_warning.png" />
|
|||
|
|
<view style="margin:30rpx 0;">确认删除选中商品吗？</view>
|
|||
|
|
</view>
|
|||
|
|
</u-modal>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getCartList,
|
|||
|
|
changeCartSelect,
|
|||
|
|
changeGoodsCount,
|
|||
|
|
deleteGoods
|
|||
|
|
} from '@/api/store';
|
|||
|
|
import {
|
|||
|
|
getUser
|
|||
|
|
} from '@/api/user';
|
|||
|
|
import {
|
|||
|
|
mapGetters,
|
|||
|
|
mapActions
|
|||
|
|
} from 'vuex'
|
|||
|
|
import Cache from '@/utils/cache'
|
|||
|
|
import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
|
|||
|
|
export default {
|
|||
|
|
mixins: [MescrollCompMixin],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//购物车状态 1为有 2为空 0则什么都不显示
|
|||
|
|
cartType: 0,
|
|||
|
|
showMoreGoods: false,
|
|||
|
|
cartLists: [],
|
|||
|
|
showDelTips: false,
|
|||
|
|
totalPrice: '',
|
|||
|
|
options: [{
|
|||
|
|
text: '删除',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#FF2C3C'
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
openCartId: 0
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(['cartNum', 'inviteCode']),
|
|||
|
|
// 一个都没有选中
|
|||
|
|
nullSelect() {
|
|||
|
|
const {
|
|||
|
|
cartLists
|
|||
|
|
} = this
|
|||
|
|
let nullS = true
|
|||
|
|
cartLists.forEach((item) => {
|
|||
|
|
item.cart.forEach(goods => {
|
|||
|
|
if (goods.selected) nullS = false
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return nullS
|
|||
|
|
},
|
|||
|
|
// 判断全选状态
|
|||
|
|
isSelectedAll() {
|
|||
|
|
const {
|
|||
|
|
cartLists
|
|||
|
|
} = this
|
|||
|
|
if (!cartLists.length) return false
|
|||
|
|
if (this.allInvalid()) return false
|
|||
|
|
let index = cartLists.findIndex(item => item.is_selected == 0);
|
|||
|
|
return index == -1 ? true : false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getCartListFun();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapActions(['getCartNum']),
|
|||
|
|
// 删除购物车
|
|||
|
|
deleteCart() {
|
|||
|
|
this.showDelTips = false
|
|||
|
|
deleteGoods({
|
|||
|
|
cart_id: this.cartId
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
this.getCartListFun();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
openSwipe(index) {
|
|||
|
|
this.openCartId = index
|
|||
|
|
},
|
|||
|
|
cartInvalid(item) {
|
|||
|
|
return item.goods_status == 0 || item.goods_del == 1 || item.is_pay == 0 || item.has_item == 0 ? true : false
|
|||
|
|
},
|
|||
|
|
shopInvalid(item) {
|
|||
|
|
return item.cart.every(citem => this.cartInvalid(citem))
|
|||
|
|
},
|
|||
|
|
allInvalid() {
|
|||
|
|
return this.cartLists.every(item => this.shopInvalid(item))
|
|||
|
|
},
|
|||
|
|
// 删除选中购物车
|
|||
|
|
deleteSelectCart() {
|
|||
|
|
this.cartId = this.getSelectCart()
|
|||
|
|
this.showDelTips = !this.showDelTips;
|
|||
|
|
},
|
|||
|
|
// 删除单个购物车
|
|||
|
|
deleteOneCart(e, cartId) {
|
|||
|
|
if (cartId) {
|
|||
|
|
this.cartId = cartId;
|
|||
|
|
}
|
|||
|
|
this.showDelTips = !this.showDelTips;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async getCartListFun() {
|
|||
|
|
const {
|
|||
|
|
data: {
|
|||
|
|
lists,
|
|||
|
|
total_amount
|
|||
|
|
},
|
|||
|
|
code
|
|||
|
|
} = await getCartList()
|
|||
|
|
if (code == 1) {
|
|||
|
|
let cartType = 0;
|
|||
|
|
if (lists.length == 0) {
|
|||
|
|
cartType = 2;
|
|||
|
|
} else {
|
|||
|
|
cartType = 1;
|
|||
|
|
}
|
|||
|
|
this.showMoreGoods = true
|
|||
|
|
this.cartLists = lists;
|
|||
|
|
this.cartType = cartType;
|
|||
|
|
this.totalPrice = total_amount;
|
|||
|
|
this.getCartNum()
|
|||
|
|
} else {
|
|||
|
|
this.cartType = 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 更改选中状态 type为1选中店铺/2选中商品/3全选
|
|||
|
|
changeSelect({
|
|||
|
|
value
|
|||
|
|
}, type, number) {
|
|||
|
|
let cartId = []
|
|||
|
|
const {
|
|||
|
|
cartLists
|
|||
|
|
} = this
|
|||
|
|
switch (type) {
|
|||
|
|
case 1:
|
|||
|
|
cartId = cartLists[number].cart.map(item => item.cart_id)
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
cartId.push(number)
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
cartId = cartLists.reduce((pre, item) => {
|
|||
|
|
return pre.concat(item.cart.map(i => i.cart_id))
|
|||
|
|
}, cartId)
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
this.changeCartSelectFun(cartId, value);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCartSelectFun(cartId, selected) {
|
|||
|
|
changeCartSelect({
|
|||
|
|
cart_id: cartId,
|
|||
|
|
selected: selected ? 1 : 0
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
this.getCartListFun();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 数量改变
|
|||
|
|
countChange({
|
|||
|
|
value
|
|||
|
|
}, cartId) {
|
|||
|
|
console.log(value)
|
|||
|
|
let cartid = cartId;
|
|||
|
|
changeGoodsCount({
|
|||
|
|
cart_id: cartid,
|
|||
|
|
goods_num: value
|
|||
|
|
}).then(res => {
|
|||
|
|
this.getCartListFun();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getSelectCart() {
|
|||
|
|
const {
|
|||
|
|
cartLists
|
|||
|
|
} = this
|
|||
|
|
return cartLists.reduce((pre, item) => {
|
|||
|
|
return pre.concat(item.cart.filter(i => i.selected && !this.cartInvalid(i)).map(i => i
|
|||
|
|
.cart_id))
|
|||
|
|
}, [])
|
|||
|
|
},
|
|||
|
|
goToConfirm() {
|
|||
|
|
let {
|
|||
|
|
cartLists
|
|||
|
|
} = this;
|
|||
|
|
let goods = [];
|
|||
|
|
let carts = this.getSelectCart()
|
|||
|
|
if (carts.length == 0) return this.$toast({
|
|||
|
|
title: '您还没有选择商品哦'
|
|||
|
|
});
|
|||
|
|
// 处理出商品数组数据
|
|||
|
|
cartLists.forEach(item => {
|
|||
|
|
if (item.cart.length != 0) {
|
|||
|
|
item.cart.forEach((el, i) => {
|
|||
|
|
// 选中的商品才能进入
|
|||
|
|
if(el.selected == 1) {
|
|||
|
|
goods.push({
|
|||
|
|
item_id: el.item_id,
|
|||
|
|
num: el.goods_num,
|
|||
|
|
goods_id: el.goods_id,
|
|||
|
|
shop_id: item.shop.shop_id
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const params = {
|
|||
|
|
carts: carts,
|
|||
|
|
goods: goods,
|
|||
|
|
type: 'cart'
|
|||
|
|
};
|
|||
|
|
this.$Router.push({
|
|||
|
|
path: '/pages/confirm_order/confirm_order',
|
|||
|
|
query: {
|
|||
|
|
data: params
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.shop-cart {
|
|||
|
|
.main {
|
|||
|
|
padding-bottom: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cart-list {
|
|||
|
|
.cart-item {
|
|||
|
|
margin: 20rpx 20rpx 0;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
|
|||
|
|
.goods-img {
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.invalid {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info {
|
|||
|
|
max-width: 400rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select {
|
|||
|
|
height: 80rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
border-bottom: $-solid-border;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cart-null {
|
|||
|
|
.btn {
|
|||
|
|
border: 1px solid $-color-primary;
|
|||
|
|
width: 184rpx;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
padding: 8rpx 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
position: fixed;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
bottom: var(--window-bottom);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
z-index: 20;
|
|||
|
|
|
|||
|
|
.all-price {
|
|||
|
|
text-align: right;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-btn {
|
|||
|
|
padding: 13rpx 45rpx;
|
|||
|
|
background: linear-gradient(90deg, rgba(249, 95, 47, 1) 0%, rgba(255, 44, 60, 1) 100%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login {
|
|||
|
|
height: calc(100vh - var(--window-bottom));
|
|||
|
|
background: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
background-color: #09BB07;
|
|||
|
|
width: 280rpx;
|
|||
|
|
line-height: 70rpx;
|
|||
|
|
margin: 40rpx auto 0;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|