feiniao-youwei-uniapp/pages/tabBar/shopping/shopping.vue

<template>
	<view class="base-container">
		<view class="search-wrap">
			<up-search placeholder="日照香炉生紫烟" v-model="keyword"></up-search>
			<text class="manage">管理</text>
		</view>
		<view class="shop-list">

			<view class="shop-item" v-for="(item,index) in 3" :key="index">
				<up-checkbox-group>
					<up-checkbox v-model="shopChecked" shape="circle" label="从化荔博园店铺" labelColor="#000" labelSize="14"></up-checkbox>
					<up-icon class="icon" name="arrow-right" color="rgba(137, 137, 137, 0.69)" size="12"></up-icon>
				</up-checkbox-group>
				<up-swipe-action>
					<up-swipe-action-item v-for="(ele,idx) in 3" :key="idx" :options="options1">
						<view class="commodity-item">
							<up-checkbox-group>
								<up-checkbox v-model="commodityChecked" shape="circle"></up-checkbox>
							</up-checkbox-group>
							<view class="commodity-info">
								<image class="commodity-img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
								<view class="commodity-cont">
									<view class="name">
										<text>海南妃子笑荔枝新鲜采摘</text>
										<text>x1</text>
									</view>
									<up-text size="12" color="#717070" text="3斤装规格"></up-text>
									<up-text size="12" color="#AFAFAF" text="坏单包退 包邮"></up-text>
									<view class="total">
										<text class="unit">¥</text>
										<text class="sum">108</text>
									</view>
								</view>
							</view>
						</view>
					</up-swipe-action-item>
				</up-swipe-action>
			</view>
		</view>
		<view class="footer">
			<up-checkbox-group>
				<up-checkbox v-model="checked" shape="circle" label="全选"></up-checkbox>
			</up-checkbox-group>
			<view class="footer-right">
				<view class="total">
					合计：<text class="unit">¥</text><text class="total-num">0</text>
				</view>
				<view class="buttom">结算</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"

	const options1 = reactive([{
		text: '删除',
		style: {  
		      backgroundColor: '#f56c6c'  
		    }  
	}]);

	const keyword = ref("")
	const shopChecked = ref(false)
	const commodityChecked = ref(false)

	const checked = ref(false)
</script>

<style lang="scss" scoped>
	.base-container {
		padding: 0;

		.search-wrap {
			background: #fff;
			display: flex;
			align-items: center;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			.manage{
				margin-left: 20rpx;
			}
		}
		.shop-list {
			height: calc(100vh - 100rpx - 120rpx);
			overflow-y: auto;
			overflow: auto;
			.shop-item {
				background: #fff;
				margin-top: 20rpx;
				padding: 20rpx 24rpx;

				.commodity-item {
					width: 100%;
					padding: 20rpx 0 20rpx 10rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.commodity-info{
						width: 100%;
						display: flex;
						align-items: center;
						.commodity-img{
							width: 182rpx;
							height: 182rpx;
							margin-right: 10rpx;
							border-radius: 10rpx;
						}
						.commodity-cont{
							width: calc(100% - 182rpx - 10rpx);
							.name{
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 28rpx;
								font-weight: 500;
							}
							.total{
								color: #FF7700;
								font-size: 24rpx;
								margin-top: 14rpx;
								.sum{
									font-weight: 500;
									font-size: 38rpx;
									margin-left: 2rpx;
								}
							}
						}
					}
				}
			}
		}
		/* #ifdef H5 */
		.shop-list{
			height: calc(100vh - 100rpx - 120rpx - 188rpx);
		}
		/* #endif */
		.footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			padding: 20rpx 24rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.26);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.footer-right {
				display: flex;
				align-items: center;

				.total {
					font-size: 24rpx;

					.unit {
						color: #FF7700;
						font-size: 26rpx;
					}

					.total-num {
						font-size: 40rpx;
						color: #FF7700;
						font-weight: 500;
					}
				}

				.buttom {
					padding: 16rpx 78rpx;
					border-radius: 8rpx;
					background: #FFD95E;
					margin-left: 22rpx;
				}
			}
		}
	}
</style>