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"
				@confirm="confirm"
				> 
				</u-picker>
				<view @click="show = true" class="openBtn">
					{{columns[0][index]}}
					<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="wholeSales-bottom">
			<view class="tip">
				当前未满足 50 斤最低起批量，无法下单
			</view>
			<view class="inputBtnCon">
				<view class="left">
					<view class="left-top">
						共<text class="allValue">{{allValue}}</text>斤
					</view>
					<view class="left-bottom">共计金额</view>
				</view>
				<view class="allPrice">
					<text >{{allPrice}}</text>
				</view>
				<button class="inputBtn">批发下单</button>
			</view>
		</view>
	</view>
</template>

<script>
import index from '../../../uni_modules/uview-ui'
	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:28888,
				allPrice:28888.888,
				show:false,
				columns:[
					["50规格","49规格","38规格"],
				],
				index:0
				
			}
		},
		methods:{
			valChange(e){
				// console.log('当前值为：' + e.value)
			},
			confirm(e){
				// console.log('confirm', e)
				this.show = false
				this.index=e.indexs[0]
				// console.log('confirm.indexs', e.indexs[0])
				// console.log('数组的当前值', this.columns[0][index])
			}
		}
	}
</script>

<style lang="scss">
	.wholeSales{
		min-height: 100vh;
		width: 750rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		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{
			padding-left: 38rpx;
			.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;
					}
				}
			}
		}
		.wholeSales-bottom{
			position: fixed;
			bottom: 0;
			z-index: 100;
		}
		.tip{
			width: 750rpx;
			height: 72rpx;
			background: #FFF7E8;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 0rpx solid #FFF7E8;
			font-weight: 400;
			font-size: 28rpx;
			color: #FF7D00;
			justify-content: center;
			padding: 16rpx 0 16rpx 32rpx;
			box-sizing: border-box;
		}
		
		
		.inputBtnCon{
			width: 750rpx;
			height: 184rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			padding-left: 36rpx;
			box-sizing: border-box;
			.left{
				height: 74rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0,0,0,0.3);
				margin-top: 42rpx;
				text-align-last:justify;
				.left-top{
					.allValue{
						font-weight: 600;
						font-size: 30rpx;
						color: #222222;
					}
				}
			}
			.allPrice{
				margin-top: 46rpx;
				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: 280rpx;
				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;
				margin-left: 4rpx;
				margin-right: 36rpx;
				padding-top: 10rpx;
				box-sizing: border-box;
			}
		}
	}
</style>