qjd-user-uniapp/pages/cart/cart.vue

<template>
	<view class="container">
		<view class="swiper">
			<view class="swiper-text">共{{13}}件商品</view>
		</view>
		<view class="sort-right-box">
			<scroll-view :show-scrollbar="0" show-scrollbar="true" scroll-y="true" class="goods-box">
				<view class="goods-row" v-for="item in goodsList" @click="">
					<view class="goods-top">
						<view class="iconfont iconqueding select" @click=""></view>
						<view class="iconfont icondianpu magr5"></view>
						<view class="seller-label magr5">{{item.sellerName}}</view>
						<view class="iconfont iconfangxiang magr5"></view>
					</view>
					<view class="split-line"></view>
					<view class="goods-middle">
					    <view class="iconfont iconqueding select-goods" @click=""></view>
						<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
						<view>
							<view class="goods-details">{{item.details}}</view>
							<uni-tag text="类型:普通商品" size="small" type="default"></uni-tag>
							<view class="goods-spec">
								<text>{{item.spec}}</text>
							</view>
						</view>
					</view>
					<view class="split-line"></view>
					<view class="goods-bottom">
						<text class="magr5">合计</text>
						<view class="goods-spec magr5">
							<text>{{item.spec}}</text>
						</view>
						<view class="settle-btn"><text>结算(3)</text></view>
					</view>
					
					<!-- <cover-image class="goods-img" @click="" :src="item.url"></cover-image>
					<view class="goods-info">
						<view class="goods-name">{{item.name}}</view>
						<view class="goods-details">{{item.details}}</view>
						<view class="goods-number">
							<text class="goods-spec">{{item.spec}}</text>
							<text class="goods-sales">{{item.sales}}人付款</text>
						</view>
					</view>
					<view class="goods-cart"></view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	export default {
		components: {'uni-tag': uniTag},
		data() {
			return {
				goodsList: [
					{name: '优质白菜', sellerName: '商家1', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', sellerName: '商家2', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', sellerName: '商家3', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', sellerName: '商家4', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', sellerName: '商家5', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', sellerName: '商家6', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10}
				],
			}
		},
		onLoad(){
			
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.magr5{
		margin-right: 5px;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
		.swiper{
			height: 150px;
			background-color: #52A63A;
			border-radius: 0 0 40px 40px;
			.swiper-text{
				color: #FFFFFF;
				padding-left: 10px;
				padding-top: 15px;
			}
		}
		.sort-right-box{
			height: calc(100% - 58px);
			.goods-box{
				width: 100%;
				height: calc(100% - 44px);
				box-sizing: border-box;
				.goods-row{
					width: calc(100% - 24px);
					height: 185px;
					box-sizing: border-box;
					margin: 4px 0 12px 12px;
					background: #FFFFFF;
					border-radius: 15px;
					.goods-top{
					    display: flex;
						align-items: center;
						.select {
							color: #52A63A; 
							font-size: 35px;
						}
					}
					.select-goods {
						color: #52A63A;
						font-size: 35px;
						float: left;
						text-align: center;
					}
					.split-line{
						height: 1px;
						background: #EEEEEE;
						margin-top: 5px;
						margin-bottom: 5px;
					}
					.goods-middle {
						display: flex;
					}
					.goods-img{
						width: 84px;
						height: 84px;
					}
					.goods-details{
						height: 28px;
						font-size: 12px;
						font-family: PingFang SC;
						color: #999999;
						line-height: 14px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						margin-top: 10px;
					}
					.goods-spec{
						height: 16px;
						font-family: PingFang SC;
						line-height: 16px;
						font-size: 15px;
						color: #52A63A;
						margin-top: 10px;
					}
					.goods-bottom{
						position: relative;
						left: 130px;
						margin-top: 10px;
						margin-bottom: 10px;
						display: flex;
						align-items: baseline;
					}
					.settle-btn{
						color: #FFFFFF;
						background: #52A63A;
						border-radius: 40px;
						height: 30px;
						width: 80px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.goods-number{
						height: 16px;
						font-family: PingFang SC;
						line-height: 16px;
						.goods-icon{
							font-size: 12px;
							color: #52A63A;
						}
						.goods-spec{
							font-size: 15px;
							color: #52A63A;
							margin-right: 15px;
						}
						.goods-sales{
							font-size: 12px;					
							color: #999999;
						}
					}
					.goods-info{
						width: calc(100% - 104px);
						height: 84px;
						float: left;
						.goods-name{
							height: 18px;
							font-size: 15px;
							font-family: PingFang SC;
							color: #333333;
							line-height: 18px;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
					.goods-cart{
						width: 20px;
						height: 84px;
						float: left;
					}
				}
			}
		}
	}
</style>