manage_mobile/pages/massif/agrSpecs.vue

<style lang="scss">
	.container{
		background:#f6f6f6;
		min-height: 100%;
		padding:30rpx 0;

		.card{
			margin-top:0;
			&.info{
				.name{
					display: flex;
					align-items: center;
					margin-bottom: 14rpx;
					text{
						&:first-child{
							flex-shrink: 0;
							color:#fff;
							background:#10C176;
							font-size:20rpx;
							height:40rpx;
							width:80rpx;
							border-radius: 4rpx;
							text-align: center;
							line-height: 40rpx;
							margin-right:16rpx;
						}
						&:nth-child(2){
							flex-grow: 1;
						}
						&:nth-child(3){
							flex-shrink: 0;
							color:#fff;
							background:#10C176;
							border-radius: 50%;
							width:34rpx;
							height:34rpx;
							text-align: center;
							line-height: 34rpx;
						}
					}
				}
			}
		}

		.u-popup{
			.u-popup__content{
				&>.btns{
					display:flex;
					justify-content: space-between;
					padding:10rpx;
				}
				
				picker-view{
					height:500rpx;
					picker-view-column{
						view.item{
							padding:0 30rpx;
							display:flex;
							flex-direction: column;
							justify-content: space-evenly;
							.name{
								display:flex;
								align-items: center;
								text{
									font-size:16rpx;
									&:first-child{
										color:#fff;
										background:#10C176;
										border-radius:0 20rpx 0 20rpx;
										width:80rpx;
										height:34rpx;
										text-align: center;
										line-height: 34rpx;
										margin-right:16rpx;
									}
									&:nth-child(2){
										font-weight: bold;
										font-size:20rpx;
									}
									&:nth-child(3){
										color:#999;
										margin-left:6rpx;
									}
								}
							}
							.company{
								font-size:16rpx;
								&:before{
									content:attr(data-name);
									color:#FBA83C;
									margin-right:20rpx;
								}
								&:after{
									content:attr(data-company);
									color:#999999;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<d-navbar style="--bg:#10C176;--c:#fff;" isBack>
			<button slot="right" class="cu-btn round">确定</button>
		</d-navbar>

		<view class="card info">
			<view class="name">
				<text>化肥</text> <text>中量元素水溶肥</text> <text @click="show=true" class="plant-jiantou_zuoyouqiehuan"/>
			</view>
			<view style="color:#707070;font-size:20rpx;">云南云天化股份有限公司</view>
		</view>
		<view class="card">
			<u-form class="inline" labelWidth="auto" :model="formData" :rules="rules">
				<d-form
					v-for="(v,k) in fields"
					:key="k"
					v-bind="v"
					:field="k"
					:required="!!rules[k]"/>
			</u-form>
		</view>

		<u-popup :show="show" @close="show=false">
			<view class="btns">
				<button class="cu-btn sm" @click="show=false">取消</button>
				<button class="cu-btn sm bg-green">确定</button>
			</view>
			<picker-view :value="[3]" indicator-style="height:90rpx;">
				<picker-view-column>
					<view v-for="i in 10" :key="i" class="item" style="height:90rpx;">
						<view class="name"><text>化肥</text><text>中量元素水溶肥</text><text>(袋)</text></view>
						<view class="company" data-name="微量元素肥" data-company="云南云天化股份有限公司"/>
					</view>
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data(){
		return{
			fields:{
				specs:{label:"规格",tip:"库存：2袋(200kg)",type:"select"},
				num:{label:"投入数量",suffix:"kg"},
			},
			formData:{},
			rules:{

			},

			show:false,
		}
	}
}
</script>