|
|
|
|
@ -3,12 +3,14 @@
|
|
|
|
|
<!-- 页面顶部 -->
|
|
|
|
|
<UiPageHeader :back="type == 'inner'" :class="`head__${type}`">
|
|
|
|
|
<template slot="custom">
|
|
|
|
|
<view :class="`head--title`">
|
|
|
|
|
<view class="head--title">
|
|
|
|
|
<text>购物车</text>
|
|
|
|
|
<text v-if="list.length">({{list.length}})</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="mode == 'normal'" class="head--edit" @click="handleToggleMode">编辑</view>
|
|
|
|
|
<view v-else class="head--finish" @click="handleToggleMode">完成</view>
|
|
|
|
|
<template v-if="list.length">
|
|
|
|
|
<view v-if="mode == 'normal'" class="head--edit" @click="handleToggleMode">编辑</view>
|
|
|
|
|
<view v-else class="head--finish" @click="handleToggleMode">完成</view>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</UiPageHeader>
|
|
|
|
|
|
|
|
|
|
@ -21,26 +23,19 @@
|
|
|
|
|
</BsEmpty>
|
|
|
|
|
|
|
|
|
|
<!-- 购物车商品列表 -->
|
|
|
|
|
<view v-else class="cart-list">
|
|
|
|
|
<view class="cart-item" v-for="(item, index) in list" :key="index"
|
|
|
|
|
@click="$Router.push(`/goodsDetail?id=${item.id}`)">
|
|
|
|
|
<template v-else >
|
|
|
|
|
<UiWhiteBox class="cart-item" v-for="(item, index) in list" :key="index" >
|
|
|
|
|
<label class="cart-item--radio" @click.stop="handleCheckItem(item.id)">
|
|
|
|
|
<radio class="radio" color="#FF875B"
|
|
|
|
|
:checked="checkedIds.length ? checkedIds.includes(item.id) : false" />
|
|
|
|
|
</label>
|
|
|
|
|
<image class="cart-item--image" :src="item.product.mainPicture" mode="scaleToFill"></image>
|
|
|
|
|
<view class="cart-item--content">
|
|
|
|
|
<view class="cart-item--title"><text>{{ item.product.name }}</text></view>
|
|
|
|
|
<view class="cart-item--props">
|
|
|
|
|
<view class="cart-item--props-item" >
|
|
|
|
|
<text>{{ item.productSku.name }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<image class="cart-item--image" :src="item.product.mainPicture" mode="scaleToFill"
|
|
|
|
|
@click="$Router.push(`/goodsDetail?id=${item.productId}`)"></image>
|
|
|
|
|
<view class="cart-item--content" @click="$Router.push(`/goodsDetail?id=${item.productId}`)">
|
|
|
|
|
<view class="cart-item--title">{{ item.product.name }}</view>
|
|
|
|
|
<view class="cart-item--props">{{ item.productSku.name }}</view>
|
|
|
|
|
<view class="cart-item--footer">
|
|
|
|
|
<view class="cart-item--price">
|
|
|
|
|
<text class="unit">￥</text>
|
|
|
|
|
<text class="value">{{ item.productSku.sellPrice }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<UiMoney class="cart-item--price" :money="item.productSku.sellPrice" prefix></UiMoney>
|
|
|
|
|
<view class="cart-item--stepper">
|
|
|
|
|
<u-number-box :min="1" button-size="40rpx" bgColor="#F5F6FA"
|
|
|
|
|
:value="item.number" :max="item.maxBuyNum" @change="onChangeStepper($event, item)" >
|
|
|
|
|
@ -50,8 +45,8 @@
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</UiWhiteBox>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-if="!isLoading">
|
|
|
|
|
<view class="title">为您推荐</view>
|
|
|
|
|
@ -61,30 +56,17 @@
|
|
|
|
|
<!-- 底部操作栏 -->
|
|
|
|
|
<view v-if="list.length" :class="`footer footer__${type}`">
|
|
|
|
|
<label class="all-radio" @click="handleCheckAll">
|
|
|
|
|
<radio class="radio" color="#FF875B"
|
|
|
|
|
<radio class="radio" color="#FF875B"
|
|
|
|
|
:checked="checkedIds.length > 0 && checkedIds.length === list.length" />
|
|
|
|
|
<text>全选</text>
|
|
|
|
|
</label>
|
|
|
|
|
<view class="total-info">
|
|
|
|
|
<text>合计：</text>
|
|
|
|
|
<view class="goods-price">
|
|
|
|
|
<text class="unit">￥</text>
|
|
|
|
|
<text class="value">{{ totalPrice }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<UiMoney class="goods-price" :money="totalPrice" prefix/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="cart-action">
|
|
|
|
|
<view class="btn-wrapper">
|
|
|
|
|
<!-- dev:下面的disabled条件使用checkedIds.join方式判断 -->
|
|
|
|
|
<!-- dev:通常情况下vue项目使用checkedIds.length更合理, 但是length属性在微信小程序中不起作用 -->
|
|
|
|
|
<view v-if="mode == 'normal'" class="btn-item btn-main" :class="{ disabled: checkedIds.length === 0 }"
|
|
|
|
|
@click="handleOrder()">
|
|
|
|
|
<text>去结算 {{ checkedIds.length > 0 ? `(${checkedIds.length})` : '' }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="mode == 'edit'" class="btn-item btn-main" :class="{ disabled: !checkedIds.length }"
|
|
|
|
|
@click="handleDelete()">
|
|
|
|
|
<text>删除</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<UiButton v-if="mode == 'edit'" :disable="!checkedIds.length" @click="handleDelete">删除</UiButton>
|
|
|
|
|
<UiButton v-else type="gradual" :disable="!checkedIds.length" @click="handleOrder">去结算({{list.length}})</UiButton>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -96,6 +78,9 @@ import BsEmpty from '@/components/BsEmpty.vue';
|
|
|
|
|
import BsChoiceGoods from '@/components/BsChoiceGoods.vue';
|
|
|
|
|
import UiPageHeader from '@/components/UiPageHeader.vue';
|
|
|
|
|
import {ApiGetCartList, ApiPutCartNum, ApiDeleteCartGoods} from '@/common/api/cart';
|
|
|
|
|
import UiMoney from '../../../components/UiMoney.vue';
|
|
|
|
|
import UiButton from '../../../components/UiButton.vue';
|
|
|
|
|
import UiWhiteBox from '../../../components/UiWhiteBox.vue';
|
|
|
|
|
|
|
|
|
|
const CartIdsIndex = 'CartIds';
|
|
|
|
|
|
|
|
|
|
@ -103,7 +88,10 @@ export default {
|
|
|
|
|
components: {
|
|
|
|
|
BsEmpty,
|
|
|
|
|
BsChoiceGoods,
|
|
|
|
|
UiPageHeader
|
|
|
|
|
UiPageHeader,
|
|
|
|
|
UiMoney,
|
|
|
|
|
UiButton,
|
|
|
|
|
UiWhiteBox
|
|
|
|
|
},
|
|
|
|
|
props : {
|
|
|
|
|
type : {
|
|
|
|
|
@ -280,32 +268,30 @@ export default {
|
|
|
|
|
const ids = this.checkedIds;
|
|
|
|
|
if (!ids.length) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
uni.showModal({
|
|
|
|
|
title: '友情提示',
|
|
|
|
|
content: '您确定要删除该商品吗？',
|
|
|
|
|
showCancel: true,
|
|
|
|
|
success:async ()=> {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$msb.confirm({
|
|
|
|
|
content : '您确定要删除该商品吗？',
|
|
|
|
|
confirm : async ()=>{
|
|
|
|
|
const {error} = await ApiDeleteCartGoods({idList : ids.join(',')});
|
|
|
|
|
if(error){
|
|
|
|
|
uni.$u.toast(error.message);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
this.list = this.list.filter(item => !ids.includes(item.id));
|
|
|
|
|
// this.checkedIds = [];
|
|
|
|
|
this.checkedIds = [];
|
|
|
|
|
this.onClearInvalidId();
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
page {
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
background: $color-grey1;
|
|
|
|
|
padding-bottom: 240rpx;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
@ -321,6 +307,9 @@ export default {
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: var(--window-top);
|
|
|
|
|
z-index: 999;
|
|
|
|
|
&--title text{
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
}
|
|
|
|
|
&--totla{
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: $color-grey6;
|
|
|
|
|
@ -342,17 +331,13 @@ export default {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 购物车列表
|
|
|
|
|
.cart-list {
|
|
|
|
|
background: $color-grey0;
|
|
|
|
|
}
|
|
|
|
|
// 购物车列
|
|
|
|
|
.cart-item {
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 30rpx 0;
|
|
|
|
|
margin: 0 auto 24rpx auto;
|
|
|
|
|
border-bottom: 1px solid $color-grey2;
|
|
|
|
|
padding: 50rpx 40rpx 40rpx 24rpx;
|
|
|
|
|
margin: 20rpx auto;
|
|
|
|
|
&--radio {
|
|
|
|
|
width: 56rpx;
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
@ -390,7 +375,7 @@ export default {
|
|
|
|
|
&--props {
|
|
|
|
|
margin-top: 14rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
color: #ababab;
|
|
|
|
|
color: $color-grey4;
|
|
|
|
|
font-size: $font-size-sm;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
@ -405,18 +390,6 @@ export default {
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
&--price {
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
color: $color-yellow4;
|
|
|
|
|
|
|
|
|
|
.unit {
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.value {
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&--stepper-icon{
|
|
|
|
|
font-size: 38rpx;
|
|
|
|
|
color: $color-grey3;
|
|
|
|
|
@ -507,53 +480,28 @@ export default {
|
|
|
|
|
padding-right: 30rpx;
|
|
|
|
|
font-size: $font-size-sm;
|
|
|
|
|
color: $color-grey5;
|
|
|
|
|
|
|
|
|
|
.goods-price {
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
color: $color-yellow3;
|
|
|
|
|
|
|
|
|
|
.unit {
|
|
|
|
|
font-size: $font-size-sm;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.value {
|
|
|
|
|
font-size: $font-size-lg;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cart-action {
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
|
|
|
|
|
.btn-wrapper {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
font-size: $font-size-base;
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
line-height: 72rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
}
|
|
|
|
|
/deep/{
|
|
|
|
|
.cart-item--price{
|
|
|
|
|
text{
|
|
|
|
|
color: $color-grey0;
|
|
|
|
|
font-size: $font-size-base;
|
|
|
|
|
color: $color-yellow4;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 立即购买按钮
|
|
|
|
|
.btn-main {
|
|
|
|
|
background: $color-yellow3;//linear-gradient(to right, #f9211c, #ff6335);
|
|
|
|
|
|
|
|
|
|
// 禁用按钮
|
|
|
|
|
&.disabled {
|
|
|
|
|
background: rgba($color: $color-yellow3, $alpha: .7);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ui-money--prefix{
|
|
|
|
|
font-size: $font-size-sm;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.goods-price{
|
|
|
|
|
text{
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
color: $color-yellow4;
|
|
|
|
|
}
|
|
|
|
|
.ui-money--prefix{
|
|
|
|
|
font-size: $font-size-lg;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
ch
3 years ago
