automated_uniapp/uni_modules/cool-fixtures/components/fix-goods-list/fix-goods-list.vue

<template>
	<fix-base-style :styleSpacing="styleSpacing" :styleColor="styleColor" :position="position" :index="index">
		<view class="fix-goods-list">
			<template v-if="list.length">
				<view class="inner" :class="[`is-${data.mode}`, data.isShadow ? 'is-shadow-pb' : '']">
					<view class="grid-item" v-for="(item, index) in list" :key="index" :class="[data.isShadow ? 'is-shadow' : '']"
						@click="toDetail(item)">
						<image mode="widthFix" class="icon" :src="item.mainPic" />
						<view class="content">
							<view class="title">{{ item.title }}</view>
							<view class="price-sold">
								<cl-text type="price" :color="styleColor.color" :size="34" :value="item.price" bold />
								<cl-text color="info" :size="22" :value="`${item.sold || 0}件已售`" />
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<cl-empty :fixed="false" text="暂无商品~~"></cl-empty>
			</template>
		</view>
	</fix-base-style>
</template>

<script lang="ts" name="fix-goods-list" setup>
	import { ref, watch, computed, type PropType } from "vue";
	import type { Form } from "../../types/form";
	import { baseProps } from "../../hooks";
	import { useCool, useStore } from "/@/cool";
	const { service, router } = useCool();
	const { user } = useStore();

	const props = defineProps({
		data: {
			type: Object as PropType<Form.Goods>,
			default: () => {
				({
					mode: "mode-1",
					source: "source-1",
					attribute: 0,
					num: 99,
					gap: 0,
					isShadow: false,
					isVoucher: false,
					type: [],
					list: [],
				});
			},
		},
		index: {
			type: Number,
			default: 0,
		},
		...baseProps,
	});

	const list = ref<Array<Eps.GoodsInfoEntity>>([]);
	// 创建计算属性来返回我们关心的特定属性
	const watchedData = computed(() => ({
		source: props.data.source,
		attribute: props.data.attribute,
		num: props.data.num,
		ids: props.data.list.map((e) => e.id),
		typeIds: props.data.type.map((e) => e.id),
	}));
	watch(
		() => watchedData.value,
		async (newValue) => {
			let goods = [];
			try {
				goods = await service.goods.info.getGoodsFromFixture({
					source: newValue.source,
					attribute: newValue.attribute,
					num: newValue.num,
					ids: newValue.ids,
					typeIds: newValue.typeIds,
				});
			} catch (error) {
				console.log(error);
			}
			list.value = goods;
		},
		{
			deep: true,
			immediate: true,
		},
	);

	async function toDetail(item : Eps.GoodsInfoEntity) {
		if (item.openJump && item.jumpInfo.AppID) {
			try {
				// @ts-ignore
				await wx.openEmbeddedMiniProgram({
					appId: item.jumpInfo.AppID,
					path: item.jumpInfo.page,
					allowFullScreen: true,
				});
			} catch {
				// @ts-ignore
				await wx.navigateToMiniProgram({
					appId: item.jumpInfo.AppID,
					path: item.jumpInfo.page,
				});
			}
		} else {
			router.push({
				path: "/pages/goods/detail",
				query: {
					id: item.id,
				},
			});
		}
	}
</script>

<style lang="scss" scoped>
.fix-goods-list {
	box-sizing: border-box;
	overflow: hidden;

	.is-shadow-pb {
		padding-bottom: 20rpx;
	}

	.inner {
		.grid-item {
			background-color: #fff;
			border-radius: 12rpx;
			box-sizing: border-box;
			overflow: hidden;
		}

		.is-shadow {
			box-shadow:
				0 3px 5px rgba(0, 0, 0, 0.2),
				0 6px 10px rgba(0, 0, 0, 0.1);
		}

		.icon {
			width: 100%;
			max-width: 100%;
			vertical-align: middle;
		}

		.content {
			max-width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			overflow: hidden;

			.title {
				box-sizing: border-box;
				white-space: nowrap;
				/* 禁止换行 */
				overflow: hidden;
				/* 隐藏溢出的内容 */
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
				max-width: 100%;
				/* 确保元素最大宽度不超过容器 */
				font-size: 28rpx;
			}

			.price-sold {
				margin-top: 16rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}

			.voucher {
				font-size: 28rpx;
				margin-top: 16rpx;

				.tips {
					color: #e6a23c;
					font-size: 24rpx;
				}

				.di {
					margin-left: 20rpx;
					color: #e6a23c;
				}
			}
		}
	}

	.is-mode-1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.is-mode-2 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20rpx;
	}

	.is-mode-3 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20rpx;

		.grid-item {
			background-color: #fff;
			border-top-right-radius: 12rpx;
			border-top-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;
			border-bottom-left-radius: 12rpx;
			overflow: hidden;
			display: grid;
			grid-template-columns: 200rpx 1fr;
			gap: 40rpx;
		}
	}

	.is-mode-4 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20rpx;

		.grid-item {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-top-right-radius: 12rpx;
			border-top-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;
			border-bottom-left-radius: 12rpx;
			overflow: hidden;
		}
	}
}
</style>