shop-app/pages/cart/components/PageCtx.vue

<template>
	<view class="container">
		<!-- 页面顶部 -->
		<UiPageHeader :back="type == 'inner'" :class="`head__${type}`">
			<template slot="custom">
				<view class="head--title">
					<text>购物车</text>
					<text v-if="list.length">({{list.length}})</text>
				</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>

		<u-loadmore v-if="isLoading" status="loading" />
		<!-- 购物车数据为空 -->
		<BsEmpty v-if="!list.length && !isLoading" class="empty"
			tips="去挑点喜欢的好货吧~">
			<image slot="icon" class="empty--icon" src="@/static/goods/cart.png"></image>
			<view slot="btn" class="empty--btn" @click="$Router.pushTab('/')">去逛逛</view>
		</BsEmpty>

		<!-- 购物车商品列表 -->
		<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, item.status)">
					<radio class="radio" color="#FF875B" 
						:checked="checkedIds.length ? checkedIds.includes(item.id) : false" 
						:disabled="item.status !== 'normal'"/>
				</label>
				<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" 
						:class="(item.status !== 'normal' || !item.productSku) && 'cart-item--title__disabled'">
						{{ item.product.name }}</view>
					<view v-if="item.status === 'notSku' || !item.productSku" class="cart-item--props">请重新选择商品规格</view>
					<view v-if="item.status === 'isDisable'" class="cart-item--props">宝贝已失效，暂时无法购买</view>
					<template v-if="item.status === 'normal' && item.productSku">
						<view class="cart-item--props">{{ item.productSku.name }}</view>
						<view class="cart-item--footer">
							<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)" >
									<text slot="minus" class="cart-item--stepper-icon">-</text>
									<text slot="plus" class="cart-item--stepper-icon">+</text>
								</u-number-box>
							</view>
						</view>

					</template>
					<view  v-if="item.status === 'notSku'">
						<UiButton size="small" class="cart-item--reset-btn" type="line">重新选择</UiButton>
					</view>
				</view>
			</UiWhiteBox>
		</template>
		
		<template v-if="!isLoading">
			<view class="title">为您推荐</view>
			<BsChoiceGoods></BsChoiceGoods>
		</template>

		<!-- 底部操作栏 -->
		<view v-if="list.length" :class="`footer footer__${type}`">
			<label class="all-radio" @click="handleCheckAll">
				<radio class="radio" color="#FF875B" :disabled="list && list.filter(i => i.status == 'normal').length == 0"
					:checked="checkedIds.length > 0 && checkedIds.length === list.filter(i => i.status == 'normal').length" />
				<text>全选</text>
			</label>
			<view class="total-info" v-if="mode == 'normal'">
				<text>合计：</text>
				<UiMoney class="goods-price" :money="totalPrice" prefix/>
			</view>
			<view class="cart-action">
				<UiButton v-if="mode == 'edit'" size="max" :disable="!checkedIds.length" @click="handleDelete">删除({{checkedIds.length}})</UiButton>
				<UiButton v-else type="gradual" size="max" :disable="!checkedIds.length" @click="handleOrder">去结算({{checkedIds.length}})</UiButton>
			</view>
		</view>
	</view>
</template>

<script>
import { Debounce } from '@/common/utils';
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';

export default {
    components: {
        BsEmpty,
        BsChoiceGoods,
        UiPageHeader,
        UiMoney,
        UiButton,
        UiWhiteBox
	},
	props : {
		type : {
			type : String,
			// 页面类型 inner内页 tabBar tabBar页面
			default : 'inner' 
		}
	},
    data() {
        return {
            // 正在加载
            isLoading: true,
            // 当前模式: normal正常 edit编辑
			mode: 'normal',
            // 购物车结算模式时商品列表，商品有notSku无SDK库存，正常normal 下架isDisable
			settlementList : [],
			// 购物车删除模式时的列表 ，所有商品状态为正常
			delList : [],
            // 购物车商品总数量
            total: null,
            // 选中的商品ID记录
            checkedIds: [],
        }
    },
    watch: {
        // 监听选中的商品
        checkedIds: {
            handler(val) {
				// 记录到缓存中
                uni.setStorageSync(CartIdsIndex, val)
            },
            immediate: false
        }
    },
	computed : {
		// 根据模式最终显示的商品列表
		list(){
			return (this.mode === 'normal' ? this.settlementList : this.delList) || [];
		},
		totalPrice(){
			const checkedList = this.list.filter(item => this.checkedIds.includes(item.id)) || [];
			let tempPrice = 0;
			checkedList.forEach(item => {
				// 商品单价, 为了方便计算先转换单位为分 (整数)
                const unitPrice = item.productSku ? item.productSku.sellPrice * 100 : 0
                tempPrice += unitPrice * (item.number || 0)
			});
			return (tempPrice / 100).toFixed(2);

		}
	},
    methods: {
		/**
		 * 组件缺少onShow onLoad生命周期，提供一个open方法给页面及组件使用
		 */
		open(options) {
			
			// 获取购物车商品列表
			this.getCartList();
			this.isLoading = false;
			// 获取缓存中的选中记录
			this.checkedIds = uni.getStorageSync(CartIdsIndex) || [];
		},

        /**
		 * 获取购物车商品列表
		 */
        async getCartList() {
			this.isLoading = true;
			// APP有Bug到拦截器里跳转不了 待研究问题
			if(!this.$store.state.token){
				uni.redirectTo({url: '/login'});
			}
			const {error, result} = await ApiGetCartList();
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.settlementList = result.map(item => {
				const singleBuyLimit = item.product.singleBuyLimit;
				const stock = item.productSku && item.productSku.stock;
				const maxBuyNum =  singleBuyLimit ? Math.min(singleBuyLimit, stock || 1) : stock
				return {
					...item,
					status : item.product.isEnable ?  
						(!item.productSku || item.productSku.stock == 0) ? 'notSku': 'normal' : 
						'isDisable',
					maxBuyNum
				}
			});
			this.delList = result.map(item => {
				return {
					...item,
					status : 'normal'
				}
			})
			this.onClearInvalidId();
			this.isLoading = false;
        },

        /**
		 * 清除checkedIds中无效的ID
		 */
        onClearInvalidId() {
			this.checkedIds = this.checkedIds.filter(i => this.list.findIndex(item => item.id === i) > -1);
        },

        /**
		 * 切换当前模式
		 */
        handleToggleMode() {
			this.mode = this.mode == 'normal' ? 'edit' : 'normal';
			if(this.mode == 'normal'){
				this.checkedIds = this.checkedIds.filter(i => {
					return this.list.find(item => {
						return item.status === 'normal' && item.id === i;
					}) ? true : false
				})
			}
        },

        /**
		 * 监听步进器更改事件
		 */
        onChangeStepper({ value }, item) {
			
            // 这里是组织首次启动时的执行
            if (item.number == value) {
				uni.$u.toast('数量不能再少了');
				return false
			}
            // 记录一个节流函数句柄
            if (!item.debounceHandle) {
				item.oldValue = item.number
                item.debounceHandle = Debounce(this.updateCartNum, 500)
            }
            // 更新商品数量
            item.number = value
            // 提交更新购物车数量 (节流)
            item.debounceHandle(item, item.oldValue, value);
        },

        /**
		 * 提交更新购物车数量
		 */
        async updateCartNum(item, oldValue, newValue) {
			const {error, result} = await ApiPutCartNum({
				id : item.id,
				number : item.number
			});
			if(error){
				this.$toast(error.message);
				item.number = item.sku;
				return false;
			}
			if(result.isBeyondMaxLimit){
				uni.$u.toast('数量超出范围');
				item.number = result.canSetShoppingCartNumber;
				return false;
			}
        },


        /**
		 * 选中商品
		 */
        handleCheckItem(cartId, status) {
            const { checkedIds } = this
            const index = checkedIds.findIndex(id => id === cartId)
            index < 0 ? checkedIds.push(cartId) : checkedIds.splice(index, 1)
        },

        /**
		 * 全选事件
		 * 取到当前列表状态正常的商品列表。
		 * 如果选中IDS等于正常状态列表，则判断为取消全部
		 * 否则选中全部正常状态商品
		 */
        handleCheckAll() {
			const { checkedIds, list } = this;
			const normalList = list.filter(i => i.status == 'normal');
			if(normalList.length == 0){
				return false;
			}
			this.checkedIds = checkedIds.length === normalList.length ? [] :
				 normalList.map(item => item.id);
        },

        /**
		 * 结算选中的商品
		 */
        handleOrder() {
            const ids = this.checkedIds;
            if (ids.length) {
                this.$Router.push({
					path : '/orderSubmit', 
					query : { 
						mode: 'cart', 
						ids:ids.join(',') 
					}
				})
            }
        },

        /**
		 * 删除选中的商品
		 */
        handleDelete() {
			const ids = this.checkedIds;
            if (!ids.length) {
                return false
			}
			
			this.$msb.confirm({
				content : '您确定要删除该商品吗？',
				confirm : async ()=>{
					const {error} = await ApiDeleteCartGoods({idList : ids.join(',')});
					if(error){
						uni.$u.toast(error.message);
						return false;
					}
					this.delList = this.delList.filter(item => !ids.includes(item.id));
					this.settlementList = this.settlementList.filter(item => !ids.includes(item.id));
					
					this.checkedIds = [];
					this.onClearInvalidId();
				}
			})
        }

    }
}
</script>

<style lang="scss">
  page {
	background: $color-grey1;
	padding-bottom: 240rpx;
	
  }
</style>
<style lang="scss" scoped>
  // 页面顶部
.head {
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    background-color: $color-grey0;
    position: sticky;
    top: var(--window-top);
	z-index: 999;
	&--title text{
		font-size: 36rpx;
		font-weight: bold;
	}
	&--totla{
		font-size: 36rpx;
		color: $color-grey6;
	}
	&--edit,&--finish{
		font-size: $font-size-base;
		color: $color-grey4;
	}
	&--finish{
		color: $color-yellow4;
	}
	&__tabBar{
		justify-content: center;
		.head--edit,.head--finish{
			position: absolute;
			right: 30rpx;
		}
	}

}

// 购物车列
.cart-item {
	width: 690rpx;
    display: flex;
    align-items: center;
    padding: 50rpx 40rpx 40rpx 24rpx;
    margin: 0 auto 20rpx;
    &--radio {
		width: 56rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-right: 10rpx;
		text-align: center;
    }
    &--image {
		width: 170rpx;
		height: 170rpx;
		display: block;
		border-radius: 12rpx;
    }

    &--content {
		flex: 1;
		padding-left: 24rpx;
	}

    &--title {
		font-size: $font-size-base;
		line-height: 36rpx;
		font-weight: bold;
		max-height: 76rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
		&__disabled{
			color: $color-grey3;
		}
		
	}

	&--props {
        margin-top: 14rpx;
        height: 40rpx;
        color: $color-grey4;
        font-size: $font-size-sm;
        overflow: hidden;

        &-item {
          display: inline-block;
          margin-right: 14rpx;
        }
	}
	&--footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
	}
	&--stepper-icon{
		font-size: 38rpx;
		color: $color-grey3;
		margin:0 14rpx;
	}
	&--stepper-input{
		height:40rpx;
		margin: 0 14rpx;
	}
	&--reset-btn{
		margin-top: 22rpx;
		float: right;
	}
}

// 空数据按钮
.empty{
	background: $color-grey0;
	&--btn {
		width: 220rpx;
		margin: 0 auto 10rpx auto;
		font-size: $font-size-base;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		color: $color-grey6;
		border-radius: 50rpx;
		border: 1px solid rgb(192, 185, 185);
	}
	&--icon{
		width: 304rpx;
		height: 192rpx;
	}
}

.title{
	font-size: $font-size-lg;
	text-align: center;
	margin: 51rpx auto 30rpx auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 500rpx;
	&::after,&::before{
		display: inline-block;
		content: '';
		width: 160rpx;
		height: 2rpx;
		background: linear-gradient(90deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
		
	}
	&::before{
		
		background: linear-gradient(270deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
	}
}

// 底部操作栏
.footer {
	display: flex;
	justify-content: space-between;
    align-items: center;
    height: 140rpx;
    background: $color-grey0;
    padding: 0 30rpx;
	position: fixed;
	bottom: 0;
	/*  #ifdef  H5  */
		bottom: 50px;
	/*  #endif  */
    left: 0;
    right: 0;
	z-index: 11;
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
	&__inner{
		bottom: 0;
	}
    .all-radio {
      width: 140rpx;
      display: flex;
	  align-items: center;
	  text{
		  color: $color-grey5;
		  font-size: $font-size-base;
	  }

      .radio {
		  margin-right: 5rpx;
      }
    }

    .total-info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
	  padding-right: 30rpx;
	  text{
		font-size: $font-size-base;
		color: $color-grey5;

	  }
    }


}
/deep/{
	.cart-item--price{
		text{
			font-size: $font-size-lg;
			color: $color-yellow4;
			font-weight: bold;
		}
		.ui-money--prefix{
			font-size: $font-size-sm;
		}
	}
	.uni-radio-input{
		width: 36rpx;
		height: 36rpx;
	}
	.goods-price{
		margin-bottom: 10rpx;
		text{
			font-size: 40rpx;
			color: $color-yellow4;
			font-weight: bold;
		}
		.ui-money--prefix{
			font-size: $font-size-lg;
		}
	}
}
</style>