cashier_app/components/my-components/my-select-goods.vue

<template>
	<view class="my-select-goods">
		<view class="radio-wrap">
			<u-radio-group v-model="foodType">
				<u-radio v-for="item in radioList" :key="item.value" :label="item.label" :name="item.value" :customStyle="customStyle"></u-radio>
			</u-radio-group>
		</view>
		<view class="selec-goods-card" @click="popupShow = true" v-if="foodType == 2">
			<view class="title">
				<text class="t">选择商品</text>
			</view>
			<view class="placeholder">
				<view class="left">
					<text class="placeholder-t" v-if="selectGoodsCount.length <= 0">请选择商品</text>
					<text class="t" v-else>{{ selectGoodsCount.map((item) => item.name).join('、') }}</text>
				</view>
				<u-icon name="arrow-right" size="14px" color="#999"></u-icon>
			</view>
		</view>
		<u-popup :show="popupShow" :round="20" closeable @close="popupClosed">
			<view class="popup-container">
				<view class="title">
					<text class="t">请选择</text>
				</view>
				<view class="goods-scroll-wrap">
					<view class="left">
						<scroll-view scroll-y class="scroll-view">
							<view
								class="category-item"
								v-for="(item, index) in categorys"
								:key="item.id"
								:class="{ active: categorysIndex == index }"
								@click="changeCategorys(item, index)"
							>
								<text class="t">{{ item.name }}</text>
								<text class="t" v-if="item.selectedNum > 0">({{ item.selectedNum }})</text>
							</view>
						</scroll-view>
					</view>
					<view class="right">
						<scroll-view scroll-y class="scroll-view">
							<view class="goods-item" v-for="(item, index) in categorys[categorysIndex].goods" :key="item.id" @click="selectGoods(item, index)">
								<view class="name">
									<text class="t">{{ item.name }}</text>
								</view>
								<view class="selec-btn">
									<u-icon name="checkmark-circle-fill" color="#318afe" size="18" v-if="item.selected"></u-icon>
									<view class="circle" v-else></view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="footer">
					<view class="btn">
						<u-button type="primary" size="large" @click="confirmHandle">
							确定
							<template v-if="countNum > 0">({{ countNum }})</template>
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getCategoryList, getProductList } from '@/http/api/product.js';

const popupShow = ref(false);

const modelValue = defineModel({
	type: [String, Array],
	default: []
});

const customStyle = ref({
	marginRight: '20px'
});

const radioList = ref([
	{
		value: 1,
		label: '全部商品参与'
	},
	{
		value: 2,
		label: '部分商品参与'
	}
]);

const foodType = defineModel('foodType', {
	type: [Number, String],
	default: 1
});

const categorys = ref([]);
const categorysIndex = ref(0);

// 切换分类
function changeCategorys(item, index) {
	categorysIndex.value = index;
}

// 获取商品分类
async function getCategoryListAjax() {
	try {
		categorys.value = await getCategoryList();
		categorys.value.forEach((item) => {
			item.goods = [];
			item.selectedNum = 0;
		});
	} catch (error) {
		console.log(error);
	}
}

const goods = ref([]);

function selectGoods(item, index) {
	item.selected = !item.selected;
	updateSelectGoods();
}

// 在这个方法里更新已选择的数量和商品
const countNum = ref(0);
function updateSelectGoods() {
	countNum.value = 0;
	categorys.value.forEach((item) => {
		let num = 0;
		item.goods.forEach((val) => {
			if (val.selected) {
				num++;
				countNum.value++;
			}
		});
		item.selectedNum = num;
	});
	confirmSelectGoods;
}

// 确定
const foods = defineModel('foods', {
	type: [Array, String],
	default: []
});
function confirmHandle() {
	confirmSelectGoods();
	popupShow.value = false;
}

// 点击确定更新已选择的商品
const selectGoodsCount = ref([]);
function confirmSelectGoods() {
	selectGoodsCount.value = [];
	categorys.value.forEach((item) => {
		item.goods.forEach((val) => {
			if (val.selected) {
				selectGoodsCount.value.push(val);
			}
		});
	});

	foods.value = selectGoodsCount.value.map((item) => item.id);
}

// 获取商品列表
async function getProductListAjax() {
	try {
		const res = await getProductList();
		res.forEach((item, index) => {
			console.log('modelValue.value===', modelValue.value);
			console.log('index===', item.id.includes(modelValue.value));
			if (modelValue.value.includes(item.id)) {
				item.selected = true;
			} else {
				item.selected = false;
			}
			categorys.value.forEach((val, i) => {
				if (val.id == item.categoryId) {
					val.goods.push(item);
				}
			});
		});

		updateSelectGoods();
		confirmSelectGoods();
	} catch (error) {
		console.log(error);
	}
}

// popup关闭
function popupClosed() {
	popupShow.value = false;
	// countNum.value = 0;
}

onMounted(async () => {
	await getCategoryListAjax();
	await getProductListAjax();
});
</script>

<style scoped lang="scss">
.my-select-goods {
	.selec-goods-card {
		margin-top: 20upx;
		background-color: #f8f8f8;
		border-radius: 10upx;
		padding: 20upx;
		.ttile {
			.t {
				font-size: 28upx;
				font-weight: bold;
				color: #333;
			}
		}
		.placeholder {
			display: flex;
			padding-top: 12upx;
			.left {
				flex: 1;
				.placeholder-t {
					font-size: 28upx;
					color: #999;
				}
			}
		}
	}
}
.popup-container {
	$color: #318afe;
	.title {
		padding: 28upx;
		display: flex;
		justify-content: center;
		.t {
			font-size: 32upx;
			font-weight: bold;
		}
	}
	.goods-scroll-wrap {
		width: 100%;
		height: 50vh;
		display: flex;
		.left {
			width: 240upx;
			height: 100%;
			background-color: #f9f9f9;
		}
		.right {
			flex: 1;
			height: 100%;
		}
		.scroll-view {
			width: 100%;
			height: 100%;
			.category-item {
				width: 100%;
				height: 84upx;
				display: flex;
				align-items: center;
				padding-left: 38upx;
				&.active {
					background-color: #fff;
					position: relative;
					&::after {
						content: '';
						width: 8upx;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 10;
						background-color: $color;
					}
				}
				.t {
					font-size: 32upx;
				}
			}
			.goods-item {
				height: 84upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 28upx;
				.name {
					.t {
						font-size: 32upx;
					}
				}
				.selec-btn {
					$size: 32upx;
					width: $size;
					height: $size;
					display: flex;
					align-items: center;
					justify-content: center;
					.circle {
						width: $size;
						height: $size;
						border-radius: 50%;
						border: 1px solid #999;
					}
				}
			}
		}
	}
	.footer {
		padding: 28upx;
	}
}
</style>