LJH_Shop/niucloud/addon/mall/uni-app/pages/goods/cart.vue

<template>
    <view :style="themeColor()">
        <view class="bg-page h-screen overflow-hidden flex flex-col" v-if="!loading">
            <view v-if="!info" class="empty-page">
                <image class="img" :src="img('static/resource/images/system/login.png')" mode="aspectFit" />
                <view class="desc">暂未登录</view>
                <button shape="circle" plain="true" class="btn" @click="toLogin">去登录</button>
            </view>
            <view v-else-if="!cartList.length" class="empty-page">
                <image class="img" :src="img('addon/mall/cart-empty.png')" model="aspectFit" />
                <view class="desc">赶紧去逛逛, 购买心仪的商品吧</view>
                <button shape="circle" plain="true" class="btn" @click="redirect({ url: '/addon/mall/pages/goods/list' })">去逛逛</button>
            </view>
            <block v-else>
                <view class="flex-1 h-0">
                    <scroll-view class="scroll-height box-border" :scroll-y="true">
                        <view class="py-[var(--top-m)] sidebar-marign">
                            <view class="box-border"  v-if="cartList.length">
                                <view class="bg-[#fff] flex px-[var(--pad-sidebar-m)] justify-between items-center h-[80rpx] box-border font-400 text-[24rpx] mb-[24rpx] leading-[30rpx] rounded-[var(--rounded-big)]">
                                    <view class="flex items-center text-[24rpx] text-[#333]">
                                        <text>共<text class="text-[28rpx] mx-[2rpx] text-[var(--price-text-color)]">{{checkedNum }}</text>件商品</text>
                                    </view>
                                    <text @click="isEdit = !isEdit" class="text-[var(--text-color-light6)] text-[24rpx]">{{ isEdit ? '完成' : '管理' }}</text>
                                </view>
                                <view v-for="(item, index) in cartList" :key="index" class="bg-[#fff] mb-[20rpx] rounded-[var(--rounded-big)] pb-[10rpx]">
                                    <view class="flex px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] border-0 border-[#f0f0f0] border-solid border-b-[2rpx] items-baseline">
                                        <text v-if="item.disabled" class="iconfont text-color text-[34rpx] mr-[20rpx] w-[34rpx] h-[34rpx] rounded-[17rpx]" :class="{ 'iconxuanze1 ':item.checked,'bg-[#F5F5F5]':!item.checked}"></text>
                                        <text v-else class="iconfont text-color text-[34rpx] mr-[20rpx] w-[34rpx] h-[34rpx] rounded-[17rpx]" :class="{ 'iconxuanze1 ':item.checked,'bg-[#F5F5F5]':!item.checked}" @click="isClickSite(item)"></text>
                                        <text class="iconfont iconVector-25 text-[32rpx]"></text>
                                        <text class="ml-[12rpx] text-[28rpx] flex-1 truncate">{{item.site_name }}</text>
                                    </view>
                                    <u-swipe-action ref="swipeActiveRef">
                                        <block v-for="(subItem, subIndex) in item.goods_list" :key="subIndex">
                                            <view v-if="subItem.goodsSku"  class="py-[20rpx] overflow-hidden w-full">
                                                <u-swipe-action-item :options="cartOptions" @click="swipeClick(index,subIndex,subItem)">
                                                    <view class="flex px-[var(--pad-sidebar-m)]">
                                                        <text class="self-center w-[34rpx] h-[34rpx] rounded-[17rpx] mr-[32rpx] bg-[#F5F5F5] overflow-hidden flex-shrink-0" v-if="subItem.disabled"></text>
                                                        <text v-else class="self-center iconfont text-color text-[34rpx] mr-[32rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden flex-shrink-0" :class="{ 'iconxuanze1':subItem.checked,'bg-[#F5F5F5]':!subItem.checked}" @click="changeItem(item,subItem)">
                                                        </text>
                                                        <view class="relative w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden">
                                                            <u--image class="rounded-[var(--goods-rounded-big)] overflow-hidden" width="200rpx" height="200rpx" @click="toDetail(subItem)" :src="img(subItem.goodsSku.sku_image_thumb_mid||'')" mode="aspectFill">
                                                                <template #error>
                                                                    <image class="w-[200rpx] h-[200rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
                                                                </template>
                                                            </u--image>
                                                            <view v-if="subItem.disabled" class="absolute top-0 right-0 left-0 bottom-0 flex justify-center items-center bg-black bg-opacity-50 text-white rounded-[var(--goods-rounded-big)]">已下架</view>
                                                        </view>
                                                        <view class="flex flex-1 flex-wrap ml-[20rpx]">
                                                            <view class="w-[100%] flex flex-col items-baseline">
                                                                <view class="text-[#333] text-[28rpx] max-h-[80rpx] leading-[40rpx] multi-hidden font-400">
                                                                    {{ subItem.goods.goods_name }}
                                                                </view>
                                                                <view class="box-border max-w-[376rpx] mt-[10rpx] px-[14rpx] h-[36rpx] leading-[36rpx] truncate text-[var(--text-color-light6)] bg-[#F5F5F5] text-[22rpx] rounded-[20rpx]" v-if="subItem.goodsSku && subItem.goodsSku.sku_spec_format">
                                                                    {{ subItem.goodsSku.sku_spec_format }}
                                                                </view>
                                                            </view>
                                                            <view class="flex justify-between items-end self-end w-[100%]">
                                                                <view class="flex items-end text-[var(--price-text-color)] leading-[40rpx] price-font">
                                                                    <view class="text-[var(--price-text-color)] price-font">
                                                                        <text class="text-[24rpx] font-500">￥</text>
																		<text class="text-[40rpx] font-500">{{ parseFloat(goodsPrice(subItem)).toFixed(2).split('.')[0] }}</text>
																		<text class="text-[24rpx] font-500">.{{ parseFloat(goodsPrice(subItem)).toFixed(2).split('.')[1] }}</text>
																		<image class="h-[24rpx] ml-[6rpx]" v-if="priceType(subItem) == 'member_price'" :src="img('addon/mall/VIP.png')" mode="heightFix" />
																		<image class="h-[24rpx] ml-[6rpx]" v-if="priceType(subItem) == 'discount_price'" :src="img('addon/mall/discount.png')" mode="heightFix" />
                                                                    </view>
                                                                </view>
                                                                <u-number-box v-model="subItem.num" :min="numLimit(subItem).min"
                                                                        :max="numLimit(subItem).max" integer :step="1" input-width="68rpx"
                                                                        input-height="52rpx" button-size="52rpx" disabledInput :disabled="subItem.disabled" :longPress="false"
                                                                        @change="numChange($event, subItem)">
                                                                    <template #minus>
                                                                        <text
                                                                                :class="{ 'text-[var(--text-color-light9)]': subItem.num === numLimit(subItem).min, 'text-[#303133]': subItem.num !== numLimit(subItem).min }"
                                                                                class="text-[24rpx] font-500 nc-iconfont nc-icon-jianV6xx"></text>
                                                                    </template>
                                                                    <template #input>
                                                                            <text class="px-[6rpx] box-border overflow-hidden text-[#303133] text-[24rpx] mx-[10rpx] w-[72rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]">{{ subItem.num}}
                                                                            </text>
                                                                    </template>
                                                                    <template #plus>
                                                                            <text
                                                                                :class="{ 'text-[var(--text-color-light9)]': subItem.num === numLimit(subItem).max, ' text-[#303133]': subItem.num !== numLimit(subItem).max }"
                                                                                class="text-[24rpx] font-500 nc-iconfont nc-icon-jiahaoV6xx"></text>
                                                                    </template>
                                                                </u-number-box>
                                                            </view>
                                                        </view>
                                                    </view>
                                                </u-swipe-action-item>
                                            </view>
                                        </block>
                                    </u-swipe-action>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </block>
        </view>
        
        <!--  #ifdef  H5 -->
        <view v-if="cartList.length" class="flex h-[96rpx] items-center bg-[#fff] fixed left-0 right-0 bottom-[50px] pl-[30rpx] pr-[20rpx] box-solid mb-ios justify-between">
            <view class="flex items-center" @click="allChange">
                <text class="self-center iconfont text-color text-[34rpx] mr-[10rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden flex-shrink-0" :class=" isSelectAll ? 'iconxuanze1' : 'bg-[#F5F5F5]'"></text>
                <text class="font-400 text-[#303133] text-[26rpx]">全选</text>
            </view>
            <view class="flex items-center">
                <view class="flex-1 flex items-center justify-between" v-if="!isEdit">
                    <view class="flex items-center mr-[20rpx] text-[var(--price-text-color)] leading-[44rpx]">
                        <view class="font-400 text-[#303133] text-[28rpx]">合计：</view>
                        <text class="text-[var(--price-text-color)] price-font text-[32rpx] font-bold">
                            ￥{{parseFloat(total)  }}
                        </text>
                    </view>
                    <button  class="w-[188rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="settlement">结算</button>
                </view>
                <view class="flex-1 flex items-center justify-end" v-else>
                    <button class="w-[188rpx] h-[70rpx] font-500 text-[26rpx] leading-[70rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="deleteCartFn">删除</button>
                </view>
            </view>
        </view>
        <!--  #endif -->
        <!--  #ifndef  H5 -->
        <view v-if="cartList.length" class="pl-[30rpx] pr-[20rpx] flex h-[96rpx] items-center bg-[#fff] fixed left-0 right-0 bottom-[100rpx] box-solid mb-ios justify-between">
            <view class="flex items-center" @click="allChange">
                <text class="self-center iconfont text-color text-[30rpx] mr-[20rpx] w-[34rpx] h-[34rpx] rounded-[17rpx] overflow-hidden flex-shrink-0" :class=" isSelectAll ? 'iconxuanze1' : 'bg-[#F5F5F5]'"></text>
                <text class="font-400 text-[#303133] text-[26rpx]">全选</text>
            </view>
            <view class="flex items-center">
                <view class="flex-1 flex items-center justify-between" v-if="!isEdit">
                    <view class="flex items-center mr-[67rpx] text-[var(--price-text-color)] leading-[44rpx]">
                        <view class="font-400 text-[#303133] text-[28rpx]">合计：</view>
                        <text class="text-[var(--price-text-color)] price-font text-[32rpx] font-bold">
                            ￥{{ parseFloat(total)  }}
                        </text>
                    </view>
                    <button  class="w-[188rpx] h-[70rpx] font-500 text-[26rpx] leading-[72rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="settlement">结算</button>
                </view>
                <view class="flex-1 flex items-center justify-end" v-else>
                    <button class="w-[188rpx] h-[70rpx] font-500 text-[26rpx] leading-[72rpx] !text-[#fff] m-0 rounded-full primary-btn-bg remove-border" @click="deleteCartFn">删除</button>
                </view>
            </view>
        </view>
        <!--  #endif -->
        <u-loading-page bg-color="rgb(248,248,248)" :loading="loading" loadingText=""></u-loading-page>
        <tabbar />
        <!-- 强制绑定手机号 -->
		<bind-mobile ref="bindMobileRef" /> 
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch,toRaw,nextTick } from 'vue'
import useMemberStore from '@/stores/member'
import { useLogin } from '@/hooks/useLogin'
import { onShow } from '@dcloudio/uni-app'
import { img, redirect, getToken } from '@/utils/common'
import useCartStore from '@/addon/mall/stores/cart'
import { getCartGoodsList } from '@/addon/mall/api/cart'
import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
import {t} from "@/locale";

const memberStore = useMemberStore()
const info = computed(() => memberStore.info)
const loading = ref(true)
const optionLoading = ref(false)
const total = ref('0.00')
const cartList = ref<object[]>([])
const isEdit = ref(false)
const cartStore = useCartStore();

const getCartGoodsListFn = () => {
    getCartGoodsList({}).then(({data}) => {
		cartList.value = []
		loading.value = false
		cartList.value = Object.values(data).map(item => {
            item.checked = false
            item.goods_list.map(subItem =>{
                if (subItem.goods.status == 1 && subItem.goods.delete_time == 0) {
                    subItem.checked = false
                } else {
                    subItem.disabled = true
                }
                return subItem
            })
            item.disabled = item.goods_list.every(subItem => subItem.disabled)
            return item
		})
        isSelectAll.value = false
        allChange()
    }).catch((err)=>{
		if(err.code==401){
			cartList.value = []
			loading.value = false
		}
	})
}

onShow(() => {
	getCartGoodsListFn()
	cartStore.getList();
})
// 总共数量
// 选择数量
const checkedNum = computed(() => {
	let num = 0
	cartList.value.forEach(item => {
		item.goods_list.forEach(subItem=>{
            if(subItem.checked){
                num += subItem.num
           }
        })
	})
	return num
})
// 计算总价
watch(() => cartList.value, () => {
	let value = 0
	cartList.value.forEach((item,index) => {
        item.goods_list.forEach(subItem => {
            if (subItem.checked && subItem.goodsSku){
                let price: any = 0;
                if (subItem.goods.is_discount) {
                    price = subItem.goodsSku.sale_price // 折扣价
                } else if (subItem.goods.member_discount && getToken()) {
                    price = subItem.goodsSku.member_price // 会员价
                } else {
                    price = subItem.goodsSku.price
                }
                value += parseFloat(price) * subItem.num
            }
        })
        
	})
	total.value = value.toFixed(2)
}, { deep: true })

const toLogin = () => {
	useLogin().setLoginBack({ url: '/addon/mall/pages/goods/cart' })
}

const toDetail = (data: any) => {
    redirect({ url: '/addon/mall/pages/goods/detail', param: { goods_id: data.goods_id } })
}

const numChange = (event, subItem) => {
	uni.$u.debounce((event) => {
		const data = subItem
		cartStore.increase({
			id: data.id,
			goods_id: data.goods_id,
			sku_id: data.sku_id,
			stock: data.goodsSku.stock,
			sale_price: data.goodsSku.sale_price,
			num: data.num,
            site_id: data.site_id
		}, 0);
	}, 500)
}

const numLimit = (data) => {
	return {
		min: 1,
		max: data.goodsSku.stock || data.num
	}
}

const cartOptions = ref([
    {
        text: t('delete'),
        style: {
            backgroundColor: '#F56C6C'
        }
    }
])

const swipeActiveRef = ref(null)
const swipeClick = (index:any,subIndex:any,subItem:any) => {
	if (optionLoading.value) return
	optionLoading.value = true
	cartStore.delete(subItem.id, () => {
		cartList.value[index].goods_list.splice(subIndex, 1) 
        if(cartList.value[index].goods_list.length == 0){
            cartList.value.splice(index, 1)
        }
		nextTick(()=>{
            if(swipeActiveRef.value){
                swipeActiveRef.value[index].closeOther()
            }
        })
		optionLoading.value = false
	})
}

//判断是否全选
const isSelectAll = ref(false)
const isallclick = ()=>{
    const isActve = cartList.value.every((item) => {
        return item.checked
    })
    if (isActve) { isSelectAll.value = true } else { isSelectAll.value= false }
}
// 选择单个商品
const changeItem = (data,value) =>{
    value.checked = !value.checked
    let arr =[];
    data.goods_list.forEach((item) => {
        if(item.checked != undefined){
            arr.push(item)
        }
    })
    const isActve = arr.every((item) => {
        return item.checked
    })
    if (isActve) { data.checked = true } else { data.checked = false }
    isallclick()
}
// 选择店铺
const isClickSite = (data) =>{
    data.checked = !data.checked
    if (data.checked) {
        data.goods_list.forEach(item => {
            if(!item.disabled){
                item.checked = true
            }
        })
    } else {
        data.goods_list.forEach(item => {
            if(!item.disabled){
                item.checked = false
            }
        });
    }
    isallclick()
}
// 全选
const allChange = () =>{
    isSelectAll.value = !isSelectAll.value
    if (isSelectAll.value) {
        cartList.value.forEach(item => {
            item.checked = item.goods_list.some((item) => {
                return !item.disabled
            })
            item.goods_list.forEach(subItem => {
                if(!subItem.disabled){
                    subItem.checked = true
                }
            })
        })
    } else {           
        cartList.value.forEach(item => {
            item.checked = false
            item.goods_list.forEach(subItem => {
                if(!subItem.disabled){
                    subItem.checked = false
                }
            })
        })
    }

}

//强制绑定手机号
const bindMobileRef = ref(null)

/**
 * 结算
 */
const settlement = () => {
    if(uni.getStorageSync('isbindmobile')){
        bindMobileRef.value.open()
        return false
    }

	if (!checkedNum.value) {
		uni.showToast({ title: '还没有选择商品', icon: 'none' })
		return
	}
    let body = {}
	cartList.value.forEach(item => {
        body[item.site_id] = {}
	})
    for(let key in body){
        cartList.value.forEach(item => {
            if (item.site_id == key) {
                body[key].cart_ids = []
                item.goods_list.forEach(subItem => {
                    if (subItem.checked) {
                        body[key].cart_ids.push(subItem.id)
                    }
                })
            }
        })
        if (!body[key].cart_ids.length){
            delete body[key]
        }
    }
	uni.setStorage({
		key: 'orderCreateData',
		data: {
			body: body
		},
		success() {
			redirect({ url: '/addon/mall/pages/order/payment' })
		}
	})
}

/**
 * 删除
 */
const deleteCartFn = () => {
	if (!checkedNum.value) {
		uni.showToast({ title: '还没有选择商品', icon: 'none' })
		return
	}
	if (optionLoading.value) return
	optionLoading.value = true

	const ids:any = []
	if(isSelectAll.value){
        cartList.value.forEach(item => {
            item.goods_list.forEach(subItem => {
                ids.push(subItem.id)
            })
        })
    }else{
        cartList.value.forEach(item => {
            item.goods_list.forEach(subItem => {
                if (subItem.checked) {
                    ids.push(subItem.id)
                }
            })
        })
    }

	cartStore.delete(ids, () => {
		getCartGoodsListFn()
		optionLoading.value = false
	})
}
// 价格类型 
let priceType = (data:any) =>{
	let type = "";
	if(data.goods.is_discount){
		type = 'discount_price'// 折扣
	}else if(data.goods.member_discount && getToken()){
		type = 'member_price' // 会员价
	}else{ 
		type = ""
	}
	return type;
}
// 商品价格
let goodsPrice = (data:any) =>{
	let price = "0.00";
	if(data.goods.is_discount){
		price = data.goodsSku.sale_price?data.goodsSku.sale_price:data.goodsSku.price // 折扣价
	}else if(data.goods.member_discount && getToken()){
		price = data.goodsSku.member_price?data.goodsSku.member_price:data.goodsSku.price // 会员价
	}else{
		price = data.goodsSku.price
	}
	return price;
}

</script>
<style lang="scss" scoped>
.remove-border {
	&::after {
		border: none;
	}
}
:deep(uni-page) {
	background: var(--page-bg-color);
}

uni-page-body {
	height: 100%;
}

.text-color {
	color: var(--primary-color);
}

.bg-color {
	background-color: var(--primary-color);
}

:deep(.tab-bar-placeholder) {
	display: none !important;
}

:deep(.u-tabbar__placeholder) {
	display: none !important;
}

/*  #ifdef  H5  */
.scroll-height {
	height: calc(100vh - 100rpx - 50px - constant(safe-area-inset-bottom));
	height: calc(100vh - 100rpx - 50px - env(safe-area-inset-bottom));
}
/*  #endif  */

/*  #ifndef  H5  */
.scroll-height {
	height: calc(100vh - 200rpx - constant(safe-area-inset-bottom));
	height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
}
/*  #endif  */

.text-ellipsis{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
:deep(.u-swipe-action-item__right__button__wrapper){
    padding:0 10rpx !important;
}
:deep(.u-swipe-action-item__right__button__wrapper__text){
    font-size:24rpx !important;
}
</style>