1/pages/cloudStore/components/wholeSales.vue

<template>
	<view class="wholeSales">
		<view class="top">
			<text>批发规格</text>
			<view>
				<u-picker 
				ref='uPicker'
				:show="show" 
				:columns="columns"
				@cancel="show = false"
				@change="changeHandler"
				> 
				</u-picker>
				<view @click="show = true" class="openBtn">
					50规格
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="item" v-for="item in clist">
				<view class="type-price">
					<text class="ctype">{{item.type}}</text>
					<text class="price">{{item.price}}</text>
				</view>
				<view class="bottom">
					<text class="bottom-text">批发重量（斤）</text>
					<u-number-box v-model="item.value" @change='valChange' button-size="30" ></u-number-box>
				</view>
			</view>
		</view>
		<view class="inputBtnCon">
			<view class="left">
				共<text class="allValue">{{allValue}}</text>斤<br>
				<text >共计金额</text>
			</view>
			<view class="allPrice">
				<text >{{allPrice}}</text>
			</view>
			<button class="inputBtn">批发下单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				clist:[{
					type:'6.0公',
					price:'50.60',
					value:0
				},
				{
					type:'5.5公',
					price:'50.60',
					value:0
				},
				{
					type:'5.0公',
					price:'50.60',
					value:0
				},
				{
					type:'6.0母',
					price:'50.60',
					value:0
				},
				{
					type:'6.0公',
					price:'50.60',
					value:0
				},
				{
					type:'6.0公',
					price:'50.60',
					value:0
				},
				{
					type:'6.0公',
					price:'50.60',
					value:0
				},
				{
					type:'6.0公',
					price:'50.60',
					value:0
				}],
				allValue:2888,
				allPrice:2888888,
				show:false,
				columns:[
					["50规格","49规格","38规格"],
				],
				
			}
		},
		methods:{
			valChange(e){
				console.log('当前值为：' + e.value)
			},
			changeHandler(e){
				
			}
		}
	}
</script>

<style lang="scss">
	.wholeSales{
		min-height: 100vh;
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		
		.top{
			height: 92rpx;
			display: flex;
			>text{
				font-weight: 400;
				font-size: 28rpx;
				color: #AFAFAF;
				margin: 32rpx 0 0 32rpx;
			}
			.openBtn{
				width: 220rpx;
				height: 56rpx;
				background: #EDEEEF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				justify-content: space-between;
				padding: 8rpx 20rpx;
				margin: 24rpx 0 12rpx 18rpx;
				box-sizing: border-box;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
		}
		.body{
			.item{
				margin: 0 auto;
				width: 676rpx;
				height: 140rpx;
				border-bottom: 2rpx solid rgba(0,0,0,0.06);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 24rpx;
				padding-bottom: 28rpx;
				box-sizing: border-box;
				.type-price{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.ctype{
						font-weight: 600;
						font-size: 32rpx;
						color: #222222;
						width: 90rpx;
						text-align-last: justify;
					}
					.price{
						font-family: OPPOSans, OPPOSans;
						font-weight: bold;
						font-size: 32rpx;
						color: #FF0000;
						&::before{
							content: '¥';
							font-size: 24rpx;
							margin-right: 4rpx;
						}
					}
				}
				.bottom{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.bottom-text{
						font-weight: 400;
						font-size: 24rpx;
						color: #AFAFAF;
						margin-top: 34rpx;
					}
				}
			}
		}
		.inputBtnCon{
			width: 100%;
			height: 184rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			z-index: 100;
			display: flex;
			justify-content: space-between;
			padding: 0 36rpx;
			.left{
				height: 74rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0,0,0,0.3);
				margin-top: 42rpx;
				text-align-last:justify;
				.allValue{
					font-weight: 600;
					font-size: 30rpx;
					color: #222222;
					
				}
			}
			.allPrice{
				margin-top: 46rpx;
				width: 148rpx;
				height: 68rpx;
				font-weight: 500;
				font-size: 48rpx;
				color: #FF2D46;
				line-height: 67rpx;
				text-align: right;
				&::before{
					content: '¥';
					font-size: 24rpx;
					margin-right: 4rpx;
				}
			}
			.inputBtn{
				width: 346rpx;
				height: 92rpx;
				background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%), #FFFFFF;
				border-radius: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 24rpx;
			}
		}
	}
</style>