purchase-let/multipleShop/index/index.vue

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.multiple {
		padding-bottom: 30rpx;

		.multiple-search {
			position: sticky;
			top: 0;
			z-index: 10;
			display: flex;
			height: 90rpx;
			background-color: #fff;
			padding: 0 24rpx;
			box-sizing: border-box;

			.multiple-search-txt {
				position: absolute;
				right: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 110rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-size: 28rpx;
				color: #20B128;
			}
		}

		.multiple-card {
			padding-top: 24rpx;

			.multiple-card-item {
				display: flex;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: 0 24rpx 20rpx;
				padding: 30rpx 0 42rpx 30rpx;
				overflow: hidden;

				.multiple-card-item-left {
					width: 70%;
					border-right: 2rpx solid #F1F1F1;

					.multiple-card-item-left-title {
						margin-bottom: 14rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #444444;
					}

					.multiple-card-item-left-tag {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						margin-bottom: 16rpx;

						text {
							width: 90rpx;
							height: 42rpx;
							line-height: 42rpx;
							text-align: center;
							border-radius: 8rpx;
							font-size: 24rpx;
							margin-right: 16rpx;
							padding: 4rpx 10rpx;
						}

						.yellow {
							background-color: #FFF8F1;
							color: #FFB76D;
						}

						.green {
							color: #20B128;
							background-color: #F2FFF3;
						}
					}

					.multiple-card-item-left-info {
						display: flex;

						&:nth-child(1) {
							margin-bottom: 10rpx;
						}

						text {
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							margin-left: 4rpx;
						}
					}
				}

				.multiple-card-item-right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 30%;

					.multiple-card-item-right-distance {
						margin-bottom: 20rpx;
						font-size: 22rpx;
						color: #777777;
					}

					.multiple-card-item-right-icon {
						display: flex;
						align-items: center;
					}
				}
			}

			.active {
				position: relative;
				border: 2rpx solid #20B128;

				&::after {
					content: "";
					display: block;
					position: absolute;
					right: -34rpx;
					bottom: -8rpx;
					width: 0;
					height: 0;
					border-left: 50rpx solid transparent;
					border-right: 50rpx solid transparent;
					border-bottom: 50rpx solid #20B128;
					transform: rotate(135deg);
				}

				&::before {
					content: "√";
					display: block;

					position: absolute;
					right: 10rpx;
					bottom: 4rpx;
					color: #fff;
					z-index: 11;
					font-weight: bold;
				}
			}
		}
	}
</style>
<template>
	<view class="multiple">
		<view class="multiple-search">
			<u-search :animation="true" :showAction="false" bgColor="#f6f6f6" placeholder="请输入门店"></u-search>
			<view class="multiple-search-txt">搜索</view>
		</view>

		<view class="multiple-card">
			<view class="multiple-card-item active" v-for="item in 10">
				<view class="multiple-card-item-left">
					<view class="multiple-card-item-left-title">泸州春雨路自提中转中心</view>
					<view class="multiple-card-item-left-tag">
						<text class="yellow">可自提</text>
						<text class="green">可配送</text>
					</view>
					<view class="multiple-card-item-left-info">
						<u-image src="../images/location_small.webp" width="24rpx" height="24rpx" />
						<text>四川省泸州市龙马潭区一环春雨路一段107号一环路117号</text>
					</view>
					<view class="multiple-card-item-left-info">
						<u-image src="../images/time.webp" width="24rpx" height="24rpx" />
						<text>09:00-20:00</text>
					</view>
				</view>
				<view class="multiple-card-item-right">
					<view class="multiple-card-item-right-distance">距离1km</view>
					<view class="multiple-card-item-right-icon">
						<view style="margin-right: 30rpx;">
							<u-image src="../images/phone.webp" width="48rpx" height="48rpx" />
						</view>
						<u-image src="../images/location.webp" width="48rpx" height="48rpx" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		shopListApi
	} from "@/api/multipleShop.js";
	import {
		onLoad
	} from "@dcloudio/uni-app"




	// 获取门店
	const getShopList = () => {
		shopListApi().then(res => {
			console.log(res);
		})
	}


	onLoad(() => {
		getShopList();
	})
</script>