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 magl5" @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 magl5" @click=""></view>
						<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
						<view class="goods-info">
							<view class="goods-details">{{item.details}}</view>
							<view class="goods-type">类型：{{item.goodType}}</view>
							<!-- <uni-tag text="类型: 普通商品" size="small" type="default"></uni-tag> -->
							<view class="goods-info-btm">
								<view class="goods-spec">
									<text>{{item.spec}}</text>
								</view>
								<!-- <uni-number-box :min="1" :value="cartNum"></uni-number-box> -->
								<view class="pro-num-box">
									<text class="num-btn r" @click="numSub(index,cIndex)">-</text>
									<text class="num">{{item.num}}</text>
									<text class="num-btn l" @click="numAdd(index,cIndex)">+</text>
								</view>
							</view>
						</view>
					</view>
					<view class="split-line"></view>
					<view class="goods-bottom">
						<text class="magr20">合计</text>
						<view class="goods-spec magr10">
							<text>{{item.spec}}</text>
						</view>
						<view class="settle-btn"><text>结算(3)</text></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

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

		},
		methods: {
			// 数量减
			numSub(index, cIndex) {
				// if (this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum > 1) {
				// 	this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum = this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum - 1
				// 	this.updateCart()
				// } else {
				//   uni.showToast({
				// 	title: '亲！至少一件哦！',
				// 	icon:"none"
				//   })
				// }
			},
			// 数量加
			numAdd(index, cIndex) {
				// if (this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum <= 100) {
				//       this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum = this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum + 1
				//       this.updateCart()
				//     } else {
				//       wx.showToast({
				//         title: '库存不足！',
				//         icon: 'none'
				//       })
				//     }
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.magl5 {
		margin-left: 5px;
	}

	.magr5 {
		margin-right: 5px;
	}

	.magr10 {
		margin-right: 10px;
	}

	.magr20 {
		margin-right: 20px;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;

		.swiper {
			height: 120px;
			background-color: #52A63A;
			border-radius: 0 0 40px 40px;

			.swiper-text {
				color: #FFFFFF;
				padding-left: 10px;
				padding-top: 15px;
			}
		}

		.sort-right-box {
			position: absolute;
			top: 50px;
			height: calc(100% - 50px);
			width: 100%;

			.goods-box {
				width: 100%;
				height: 100%;

				// 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-info {
							flex: 1;
							margin-left: 10px;

							.goods-details {
								height: 28px;
								font-size: 12px;
								font-family: PingFang SC;
								color: #333333;
								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-type {
								width: 100px;
								height: 20px;
								background: #F0F0F0;
								border-radius: 2px;
								color: #666666;
								font-size: 10px;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.goods-info-btm {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.pro-num-box {
									margin-top: 10px;
									margin-right: 10px;
									width: 80px;
									height: 20px;
									border: 1px solid #ddd;
									border-radius: 4upx;
									display: flex;
									flex-direction: row;
									justify-content: space-between;

									.num-btn {
										font-size: 34upx;
										color: #666;
										display: inline-block;
										width: 40upx;
										text-align: center;
										line-height: 32upx;
									}

									.num-btn.r {
										border-right: 1px solid #ddd;
									}

									.num-btn.l {
										border-left: 1px solid #ddd;
									}

									.num {
										font-size: 26upx;
										color: #333;
									}
								}
							}

							.goods-spec {
								height: 16px;
								font-family: PingFang SC;
								line-height: 16px;
								font-size: 14px;
								color: #52A63A;
								margin-top: 10px;
							}
						}
					}

					.goods-bottom {
						position: absolute;
						right: 20px;
						display: flex;
						align-items: baseline;
						font-size: 14px;
					}

					.settle-btn {
						color: #FFFFFF;
						background: #52A63A;
						border-radius: 40px;
						height: 30px;
						width: 80px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	// /deep/ .uni-numbox {
	// 	width: 80px;
	// 	height: 20px;
	// }
</style>