manage_mobile/pages/purchase/specs.vue

<style lang="scss">
	.container{
		min-height: 100%;
		background:#F6F6F6;
		padding:30rpx 0;
		.card{
			margin-top:0;
		}
		&>.fertilizer{
			&>.name{
				display:flex;
				align-items: center;
				margin-bottom:14rpx;
				text{
					&:first-child{
						font-size:20rpx;
						color:#fff;
						background:#10C176;
						border-radius: 4rpx;
						padding: 0 4rpx;
						min-width:80rpx;
						text-align: center;
						height:40rpx;
						line-height: 40rpx;
						margin-right:16rpx;
					}
					&:nth-child(3){
						border-radius: 50%;
						background:#10C176;
						color:#fff;
						margin-left:auto;
						width:35rpx;
						height:35rpx;
						text-align: center;
						line-height: 35rpx;
					}
				}
			}
			&>.company{
				display:flex;
				align-items: center;
				text{
					&:first-child{
						flex-shrink: 0;
						font-size:20rpx;
						color:#707070;
					}
					&:nth-child(2){
						margin:auto;
						font-size:20rpx;
						color:#FBA83C;
					}
				}
			}
		}
		&>.specs{
			.select{
				flex-grow: 1;
				height:80rpx;
				line-height: 80rpx;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:0 28rpx;
				display:flex;
				text{
					color:#999;
					&:first-child{
						flex-grow: 1;
					}
					&:nth-child(2){
						flex-shrink: 0;
						transform: rotate(90deg);
					}
				}
			}
			.plant-xinjian{
				color:#10C176;
				border-radius: 24rpx;
				margin-left:24rpx;
				background:#E7FCF3;
				height:80rpx;
				line-height: 80rpx;
				width:120rpx;
				text-align: center;
				box-shadow: 6rpx 6rpx 8rpx rgba(16,193,118,0.1);
			}
			.tip{
				color:#FBA83C;
				font-size:24rpx;
				margin-top:12rpx;
			}
		}
		&>.purchase{
			.input{
				display:flex;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:20rpx;
				input{
					flex-grow: 1;
				}
				text{
					color:#999;
					line-height: 40rpx;
					margin-left:20rpx;
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<view class="card fertilizer">
			<view class="name">
				<text>{{purchase.goodsName}}</text>
				<text>{{purchase.detailedType}}</text>
				<text class="plant-jiantou_zuoyouqiehuan"/>
			</view>
			<view class="company">
				<text>{{purchase.detailedParentName}}</text>
				<text>{{purchase.supplier}}</text>
			</view>
		</view>

		<view class="card specs">
			<view class="title_mast">规格</view>
			<view class="select" style="margin-bottom:20rpx;">
				<text>请添加规格</text>
				<text class="plant-youbian"/>
			</view>
			<view style="display:flex;">
				<view class="select">
					<text>请添加规格</text>
					<text class="plant-youbian"/>
				</view>
				<text class="plant-xinjian" @click="$u.route({url:'pages/purchase/newSpecs'})">新建</text>
			</view>
			<view class="tip">库存：2袋(200kg)</view>
		</view>

		<view class="card purchase">
			<view class="title_mast">采购数量</view>
			<view class="input">
				<input placeholder="请输入采购数量"/>
				<text>kg</text>
			</view>
		</view>

		<button class="cu-btn round bg-green shadow submit">确定</button>
	</view>
</template>
<script>
import request from '@/common/request'
export default{
	data(){
		return{
			purchase:null,
		}
	},
	onLoad(options){
		this.init(options.id)
	},
	methods:{
		async init(id){
			var res=await request("/api/goods/goodsList",{
				params:{id}
			})
			if(res.statu && res.data.records[0]){
				this.purchase=res.data.records[0]
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取农资详情失败！",
					showCancel:false,
				})
			}
		},
	}
}
</script>