wxapp_shuibei/pages/users/user_goods_collection/index.vue

<template>
	<view>
		<!-- <view class="hdbj"></view> -->
		<view class='collectionGoods' v-if="collectProductList.length">
			<view class='nav acea-row row-between-wrapper'>
				<view>当前共 <text class='num'>{{ totals }}</text>件商品</view>
				<view class='administrate acea-row row-center-wrapper' @click='manage'>{{ footerswitch ? '管理' : '取消'}}
				</view>
			</view>
			<view class="list">
				<up-checkbox-group shape="circle" v-model="selectValue" @change="checkboxChange" class="centent" activeColor="#F8C008">
					<view v-for="(item,index) in collectProductList" :key="item.id" class='item acea-row row-middle'
						style="width: 100%;">
						<up-checkbox :name="item.id.toString()" :checked="item.checked" v-if="!footerswitch"
							style="margin-right: 10rpx;" activeColor="#F8C008" />
						<view class="acea-row" style="align-items: center;" @click='goDetail(item)'>
							<view class='pictrue'>
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="desc">
								<view class='name'>{{item.storeName}}</view>
								<view class='money'>￥<view class="price">
									{{calcPrice(item)}}
								</view><view class="qi">
									起
								</view> </view>
							</view>
						</view>
					</view>
				</up-checkbox-group>
			</view>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<view v-if="!footerswitch" class='footer acea-row row-between-wrapper'>
				<view>
					<up-checkbox-group shape="circle" @change="checkboxAllChange">
						<up-checkbox value="all" :checked="!!isAllSelect" activeColor="#F8C008" />
						<text class='checkAll' @click="toggleSelectAll">全选</text>
					</up-checkbox-group>
				</view>
				<view class='button acea-row row-middle'>
					<form @submit="delCollectionAll" report-submit='true'>
						<button class='bnt' formType="submit">取消收藏</button>
					</form>
				</view>
			</view>
		</view>
		<view class='noCommodity' v-else-if="!collectProductList.length && page > 1">
			<view class='pictrue'>
				<image :src="HTTP_REQUEST_URL_IMG+'noCollection.png'"></image>
			</view>
			<!--      <recommend :hostProduct="hostProduct"></recommend>-->
		</view>

		<!--    <home></home>-->
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onActivated
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		storeToRefs
	} from 'pinia';
	import {
		useAppStore
	} from "@/stores/app.js";
	import {
		HTTP_REQUEST_URL_IMG
	} from "@/config/app";
	import {
		getCollectUserList,
		getProductHot,
		collectDelete
	} from '@/api/store.js';
	import {
		toLogin
	} from "@/libs/login.js";
	import recommend from '@/components/recommend';
	// 获取实时金价
	import useRealGoldPrice from "@/hooks/useRealGoldPrice";
	const {
		realGoldprice, // 黄金实时销售价（基础）
		realPtprice, // 铂金实时销售价（基础）
		realAgprice, // 白银实时销售价（基础）
	} = useRealGoldPrice({});
	import home from '@/components/home';
	import Util from '@/utils/util';

	// Store
	const appStore = useAppStore();
	const isLogin = appStore.isLogin;

	// 响应式数据
	const footerswitch = ref(true);
	const hostProduct = ref([]);
	const loadTitle = ref('加载更多');
	const loading = ref(false);
	const loadend = ref(false);
	const collectProductList = ref([]);
	const limit = 8;
	const page = ref(1);
	const isAuto = ref(false);
	const isShowAuth = ref(false);
	const hotScroll = ref(false);
	const hotPage = ref(1);
	const hotLimit = 10;
	const isAllSelect = ref(false);
	const selectValue = ref([]);
	const delBtnWidth = 80;
	const totals = ref(0);
	const startX = ref(0);


	const goDetail = (item) => {
		if(footerswitch){
			let id = String(item.id);
			if(selectValue.value.includes(id)){
				collectProductList.value.forEach(item=>{
					if(item.id==id){
						item.checked = false;
					}
				})
				selectValue.value = selectValue.value.filter(n=>n!=id)
			}else{
				selectValue.value.push(id)
			}
			isAllSelect.value = collectProductList.value.length === selectValue.value.length;
			return 
		}
		uni.navigateTo({
			url: "/pages/goods/goods_details/index?id="+item.productId
		})
	}
	
	const calcPrice = (product)=>{
		const price = Number(product.price);
		// 2. 计算乘积
		const total = (price + product.sales) * realGoldprice.value;
		// 3. 向上取整到两位小数（先放大100倍取整，再缩小100倍）
		const roundedTotal = Math.ceil(total * 100) / 100;
		// 4. 格式化保留两位小数
		const formattedTotal = roundedTotal.toFixed(2);
		
		const totalLaborCost = Number(product.totalLaborCost);
		const additionalAmount = Number(product.additionalAmount);
		const totalPrice = (totalLaborCost + additionalAmount).toFixed(2);
		
		return totalPrice
	}


	// 管理切换
	const manage = () => {
		footerswitch.value = !footerswitch.value;
	};

	// 多选框变化
	const checkboxChange = (event) => {
		console.log(event);
		const values = event;

		collectProductList.value.forEach(item => {
			item.checked = values.includes(item.id.toString());
		});

		// selectValue.value = values.toString();
		isAllSelect.value = collectProductList.value.length === values.length;
	};

	// 全选变化
	const checkboxAllChange = (event) => {
		if (event.length > 0) {
			setAllSelectValue(1);
		} else {
			setAllSelectValue(0);
		}
	};
	
	const toggleSelectAll = ()=>{
		if(isAllSelect.value){
			setAllSelectValue(0);
		}else{
			setAllSelectValue(1);
		}
	}

	// 设置全选状态
	const setAllSelectValue = (status) => {
		const selectValues = [];

		collectProductList.value.forEach(item => {
			if (status) {
				item.checked = true;
				selectValues.push(String(item.id));
				isAllSelect.value = true;
			} else {
				item.checked = false;
				isAllSelect.value = false;
			}
		});
		console.log(selectValues)
		selectValue.value = selectValues;
	};

	// 授权回调
	const onLoadFun = () => {
		get_user_collect_product();
		// get_host_product();
	};

	// 授权关闭
	const authColse = (e) => {
		isShowAuth.value = e;
	};

	// 获取收藏产品
	const get_user_collect_product = async () => {
		if (loading.value || loadend.value) return;

		loading.value = true;
		loadTitle.value = '';

		try {
			const res = await getCollectUserList({
				page: page.value,
				limit: limit
			});

			res.data.list.forEach(item => {
				item.right = 0;
			});

			totals.value = res.data.total;
			const collectProductListData = res.data.list;
			const isLoadend = collectProductListData.length < limit;

			// 重置逻辑优化
			if (page.value === 1) {
				// 第一页，清空原数组
				collectProductList.value = [...collectProductListData];
			} else {
				// 后续分页，追加数据
				collectProductList.value = [...collectProductList.value, ...collectProductListData];
			}

			loadend.value = isLoadend;
			loadTitle.value = isLoadend ? '我是有底线的' : '加载更多';
			page.value++;

		} catch (err) {
			console.error(err);
			if (page.value === 1) {
				collectProductList.value = [];
			}
		} finally {
			loading.value = false;
		}
	};

	// 取消收藏多个
	const delCollectionAll = () => {
		console.log(selectValue.value)
		if (!selectValue.value || selectValue.value.length === 0) {
			uni.showToast({
				title: '请选择商品',
				icon: 'none'
			});
		}

		del({
			ids: selectValue.value.toString()
		}).then(()=>{
			selectValue.value = [];
		})
	};

	// 删除操作
	const del = async (data) => {
		try {
			await collectDelete(data);
			uni.showToast({
				title: '取消收藏成功',
				icon: 'success'
			});

			collectProductList.value = [];
			loadend.value = false;
			page.value = 1;
			get_user_collect_product();
		} catch (err) {
			uni.showToast({
				title: err.message || '操作失败'
			});
		}
	};

	// 获取热门商品
	const get_host_product = async () => {
		if (hotScroll.value) return;

		try {
			const res = await getProductHot(hotPage.value, hotLimit);
			hotPage.value++;
			hotScroll.value = res.data.list.length < hotLimit;
			hostProduct.value = hostProduct.value.concat(res.data.list);
		} catch (err) {
			console.error(err);
		}
	};

	// 页面加载
	onLoad(() => {
		// if (isLogin) {
		//   loadend.value = false;
		//   page.value = 1;
		//   collectProductList.value = [];
		//   get_user_collect_product();
		// } else {
		//   // toLogin();
		// }
	});

	// 页面显示
	onShow(() => {
		if (isLogin) {
			loadend.value = false;
			page.value = 1;
			collectProductList.value = [];
			get_user_collect_product();
		} else {
			// toLogin();
		}
	});

	// 页面上拉触底
	onReachBottom(() => {
		get_user_collect_product();
		// get_host_product();
	});
</script>

<style scoped lang="scss">
	/* 样式部分保持不变 */
	// .hdbj {
	// 	width: 100%;
	// 	height: 30rpx;
	// 	background-color: #f5f5f5;
	// 	z-index: 999999;
	// 	position: fixed;
	// 	top: 0;
	// }
	page{
		height: 100%;
		background-color: #F9F7F0;
	}
	.order-item {
		width: 100%;
		display: flex;
		position: relative;
		align-items: right;
		flex-direction: row;
	}

	.remove {
		width: 120rpx;
		height: 100%;
		background-color: $theme-color;
		color: white;
		position: absolute;
		top: 0;
		right: -160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.collectionGoods {
		padding-top: 80rpx;
		.nav {
			height: 80rpx;
			background-color: #F9F7F0;
			padding: 0 16rpx;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #333;
			position: fixed;
			z-index: 5;
			left: 0;
			top: 0;
			right: 0;
			border-radius: 16rpx;
			
			.num{
				font-size: 32rpx;
				color:#F8C008;
				font-weight: bold;
			}
			.administrate{
				font-size: 28rpx;
				color: #F8C008;
				font-weight: bold;
			}
		}

		.list {
			padding: 16rpx;
			// margin-top: 110rpx;
			.desc{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				width: 434rpx;
				// flex: 1;
			}

			.name {
				width: 434rpx;
				margin-bottom: 32rpx;
			}
		}

		.centent {
			/* #ifdef H5 || MP */
			// background-color: #fff;
			/* #endif */
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
		}
	}

	.collectionGoods .item {
		background-color: #fff;
		// padding-left: 24rpx;
		// height: 180rpx;
		padding: 16rpx;
		margin-bottom: 20rpx;
		border-radius: 14rpx;
	}

	.collectionGoods .item .pictrue {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
	}

	.collectionGoods .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.collectionGoods .item  {
		width: 535rpx;
		// height: 130rpx;
		font-size: 32rpx;
		color: #333;
	}

	.collectionGoods .item  .name {
		width: 100%;
		line-height: 48rpx;
		font-weight: bold;
	}

	.collectionGoods .item  .money {
		display: flex;
		align-items: flex-end;
		font-size: 28rpx;
		color: #FD5F3C;
		
		.price{
			font-size: 36rpx;
			font-weight: bold;
			margin: 0 5rpx;
		}
		.qi{
			font-size: 20rpx;
		}
	}

	.collectionGoods .item  .delete {
		font-size: 26rpx;
		color: #282828;
		width: 144rpx;
		height: 46rpx;
		border: 1px solid #bbb;
		border-radius: 4rpx;
		text-align: center;
		line-height: 46rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding-top: 1rpx;
		padding-bottom: 30rpx;
		border-top: 0;
	}

	.footer {
		z-index: 9;
		width: 100%;
		height: 128rpx;
		background-color: #fff;
		position: fixed;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		border-bottom: 1px solid #EEEEEE;
		/* #ifdef H5 || MP */
		bottom: 0rpx;
		padding-bottom: 32rpx;

		/* #endif */
		/* #ifndef MP */
		// bottom: 98rpx;
		// bottom: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		// bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		/* #endif */
		.checkAll {
			font-size: 28rpx;
			color: #282828;
			margin-left: 16rpx;
			line-height: 56rpx;
		}

		.button .bnt {
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
			border-radius: 8rpx;
			background-color: #F8C008;
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: none;
		}
	}
</style>