fangliaoxiaochengxv/components/CommercePart.vue

<template>
	<view class="commerce-part">
		<view class="main-content">
			<view v-if="false" class="not-login-box">
				<u-empty text="暂无搜索内容哦~"> </u-empty>
			</view>
			<view v-else class="activity-box">
				<view class="activity-list" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
					<image style="width: 100%; height: 344rpx; border-radius: 20rpx 20rpx 0 0" :src="item.cover"
						mode="aspectFill">
					</image>
					<view class="list-content text-overflow2">
						<view class="text-overflow-single mb10">{{item.goods_name}}</view>
						<view class="display-flex-between">
							<text class="fs13 fw600 color-red">￥{{item.price_selling}}</text>
							<text class="text-through fs12 color-ca">￥{{item.price_market}}</text>
						</view>
					</view>
				</view>
				<view style="width: 100%">
					<!-- <u-loadmore :status="status" @loadmore="loadmoreClick" :load-text="loadText" /> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CommercePart",
		props: {
			type: {
				type: String,
				default: "common",
			},
			data: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		data() {
			return {
				imageUrl: this.$C.imageUrl,
				cateList: [],
				cateCurrent: "",
				sortCurrent: "",
			};
		},
		watch: {
			type: {
				handler() {
					if (this.type == "list") {
						this.getCateList();
					}
				},
				immediate: true,
			},
		},
		mounted() {
			if (this.$refs.cateItem) {
				this.$refs.cateItem.top = "50px";
				this.$refs.sortItem.top = "50px";
			}
		},
		methods: {
			cateChange(item, key) {
				this[key] = item.id;
				this.$refs.cateItem.show = false;
				this.$refs.cateItem.setContentAnimate(0);
				this.$refs.sortItem.show = false;
				this.$refs.sortItem.setContentAnimate(0);
				this.$emit("filterChange", {
					cateids: this.cateCurrent,
					sort: this.sortCurrent,
				});
			},
			getCateList() {
				uni.showLoading({
					title: "加载中",
				});
				this.$api
					.getGoodsCate()
					.then((res) => {
						uni.hideLoading();
						if (res.code == 1) {
							this.cateList = res.data;
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			toDetail(item) {
				uni.navigateTo({
					url: `../../subPages/goodsDetail/goodsDetail?code=${item.code}&type=${this.type}`
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.title-box {
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tabs-box {
		height: 90rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		::v-deep {
			.u-dropdown__menu__item {
				justify-content: flex-start;
			}
		}
	}

	.sort-content {
		.sort-list {
			height: 82rpx;
			align-items: center;
			padding: 0 20rpx;
			border-top: 1rpx solid #e6e6e6;
			font-size: 28rpx;
			color: #595959;

			&-active {
				color: #7856ff;
				font-weight: bold;
			}
		}
	}

	.main-content {
		// height: calc(100vh - 420rpx);
		// overflow-y: auto;
		// padding: 0 20rpx;

		.activity-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.activity-list {
				width: calc(50% - 11rpx);
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 22rpx;
				padding-bottom: 30rpx;
				font-size: 24rpx;

				.list-title {
					font-size: 30rpx;
					padding: 0 16rpx 8rpx;
				}

				.list-content {
					color: #2c2c2c;
					padding: 10rpx 16rpx 0;
					// display: flex;

				}
			}
		}
	}
</style>