manage_mobile/pages/seeding/mana.vue

<style lang="less">
.container{
	height:100%;
	background:#f6f6f6;
	padding-top:30rpx;
	scroll-view{
		height:100%;
		.card{
			margin-top:0;
			&>.content{
				display:flex;
				border-bottom:2rpx solid rgba(216, 216, 216, 0.2);
				padding-bottom:12rpx;
				margin-bottom:20rpx;
				.u-transition{
					position:relative;
					margin-right:22rpx;
					&:before{
						content:attr(data-attr);
						position:absolute;
						z-index: 10;
						padding:6rpx 10rpx;
						top:0;
						left:0;
						border-radius: 30rpx;
						background:rgba(0,0,0,0.4);
						color:#fff;
						font-size:20rpx;
					}
				}
				.info{
					flex-grow: 1;
					width:1rpx;
					font-size:24rpx;
					.title{
						display:flex;
						align-items: center;
						margin-bottom:6rpx;
						.name{
							font-weight: bold;
							margin-right:12rpx;
							font-size:28rpx;
						}
						.tab{
							background:#10C176;
							height:36rpx;
							line-height: 36rpx;
							color:#fff;
							font-size:20rpx;
							border-radius: 40rpx;
							padding:0 8rpx;
							min-width:62rpx;
							text-align: center;
						}
					}
					.num{
						color:#10C176;
						font-size:32rpx;
						font-weight: bold;
						margin-top:6rpx;
					}
					.residue{
						color:#FCA606;
						font-size:24rpx;
						margin-top:6rpx;
					}
					.zhu:after{content:"株";}
					.company{
						color:#999;
					}
				}
			}
			&>.foot{
				display:flex;
				align-items: center;
				justify-content: space-between;
				color:#999;
				font-size:24rpx;
				button{
					height:max-content;
					background:transparent;
					color:#10C176;
					padding:0;
					font-size:24rpx;
					&:before{
						font-size:30rpx;
						margin-right:6rpx;
					}
				}
			}
		}
	}
	
	.u-popup{
		input{
			width:100%;
			background:rgba(0,0,0,0.1);
			height:60rpx;
			border-radius: 8rpx;
			padding:0 20rpx;
			&:focus{
				border:2rpx solid #10C176;
			}
		}
	}
}
</style>
<template>
	<view class="container">
		<d-navbar style="--bg:#10C176;--c:#fff;" isBack text="种苗管理">
			<text v-if="intoPage=='addFarming'" class="plant-caigou" slot="right" @click=""/>
		</d-navbar>

		<scroll-view scroll-y @scrolltolower="">
			<view class="card">
				<view class="content">
					<u-image width="170rpx" data-attr="药材" height="140rpx" radius="12rpx" src="https://ts1.cn.mm.bing.net/th/id/R-C.d501f93a5f934a60940b47a1c241101d?rik=KBXjWV%2fVGKQ86Q&riu=http%3a%2f%2fwww.maisanqi.com%2fuploadfile%2f2015%2f1112%2f20151112023237448.png&ehk=qOz5xilHBTtcCB4Yd%2bVpFBY%2fB1sw0kDUIpGg%2fzkF1sM%3d&risl=&pid=ImgRaw&r=0">
						<text slot="error" class="plant-xiaopangchetupianjiazaishibai"/>
					</u-image>
					<view class="info">
						<view class="title">
							<text class="name over">三七</text>
							<text class="tab">外采</text>
						</view>
						<view class="batch">种苗批次号：A00001</view>
						<template v-if="intoPage=='addFarming'">
							<view style="display:flex;align-items:center;">
								<view class="num zhu" style="margin-right:20rpx;">145</view>
								<view class="residue zhu">剩余：123</view>
							</view>
							<view class="company">云南xxxx农业有限公司</view>
						</template>
						<template v-else>
							<view class="num zhu">145</view>
							<view class="residue zhu">剩余：123</view>
						</template>
					</view>
				</view>
				<view class="foot">
					<text class="date">采购日期：2023-09-09</text>
					<template v-if="intoPage=='addFarming'">
						<button class="cu-btn plant-fuzhi" @click="select={...v}">选择</button>
					</template>
					<text class="company" v-else>云南xxxx农业有限公司</text>
				</view>
			</view>
		</scroll-view>
		
		<u-modal
			:show="!!select"
			closeOnClickOverlay
			style="flex:0;"
			title="提示"
			@close="select=null"
			@confirm="addSeedWeight">
			<input placeholder="请输入重量" v-model="weight" type="digit"/>
		</u-modal>
	</view>
</template>
<script>
export default {
	data(){
		return{
			intoPage:"",
			select:null,
		}
	},
	onLoad(options){
		this.intoPage=options.into
	},
	methods:{
		addSeedWeight(){

		},
	}
}
</script>