<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; } } } .company{ text{ font-size:24rpx; &:first-child{ color:#FBA83C; margin-right:16rpx; } &:nth-child(2){ color:#999; } } } } .u-form{ &>.u-form-item{ &/deep/ { .u-form-item__body__left{ .u-form-item__body__left__content{ .u-form-item__body__left__content__required{ position:initial; margin-right:4rpx; } } } .u-form-item__body__right__message{ margin-left:0!important; } } } .plant-youbian{ padding:18rpx 18rpx; border-radius: 24rpx; width:100%; display:flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; background:#F7F7F7; margin-top:14rpx; color:rgb(48,49,51); &.noData{ color:rgb(192, 196, 204); } &:before{ transform: rotate(90deg); color:rgb(48,49,51); } } } } .agr-picker{ padding:0 30rpx; display:flex; flex-direction: column; justify-content: space-evenly; .name{ display:flex; align-items: center; text{ &:first-child{ flex-shrink: 0; color:#fff; font-size:20rpx; border-radius: 0px 20rpx 0px 20rpx; background:#10C176; width:80rpx; height:40rpx; text-align: center; line-height: 40rpx; margin-right:10rpx; } &:nth-child(2){ flex-grow: 1; display:flex; align-items: center; font-weight: bold; margin-right:20rpx; } } } .company{ text{ font-size:24rpx; &:first-child{ color:#FBA83C; margin-right:16rpx; } &:nth-child(2){ color:#999; } } } } } </style> <template> <view class="container"> <d-navbar style="--bg:#10C176;--c:#fff;" isBack text="农资规格"> <button slot="right" class="cu-btn round" @click="submit">确定</button> </d-navbar> <view class="card info"> <view class="name"> <text>{{agrDetail.goodsType}}</text> <text>{{agrDetail.substanceName}}</text> <text @click="$u.route({type:'navigateBack'})" class="plant-jiantou_zuoyouqiehuan"/> </view> <view class="company"> <text>{{agrDetail.goodsDetailType}}</text> <text>{{agrDetail.supplier}}</text> </view> </view> <view class="card"> <u-form class="inline" labelWidth="auto"> <u-form-item label="规格" prop="specificationId" :required="true"> <view class="plant-youbian" :class="{noData: !formData.specDescribe}" @click="$refs.Dpicker.show=true">{{formData.specDescribe||"请选择规格"}}</view> </u-form-item> <d-form v-bind="inputQuantity" :value="formData.inputQuantity" @input="formData.inputQuantity=$event"/> </u-form> </view> <d-picker ref="Dpicker" :list="specs.list" @select="select"/> </view> </template> <script> import request from '@/common/request.js' export default { data(){ return{ specs:{ tip:"", list:[] }, inputQuantity:{ label:"投入数量", required:true, type:"digit", field:"inputQuantity", suffix:"", tip:"", }, formData:{ specificationId:"", number:'',//规格数量 specDescribe:"",//规格名称 inputQuantity:"", inventoryId:"", }, agrDetail:{}, eventChannel:null, } }, computed:{ specsVal(){ return{ specs:(this.formData.specDescribe.match(/(\d+)(.+?)\/(.+?)/)||[]).slice(1,4), num:this.formData.inputQuantity } }, }, watch:{ specsVal(n){ this.inputQuantity.suffix=n.specs[2] if(n.num>0 && n.specs[0]>0){ this.$set(this.inputQuantity, "tip", `共${parseFloat(n.num)*parseFloat(n.specs[0])}${n.specs[1]}`) }else{ this.$set(this.inputQuantity, "tip", "") } } }, async onLoad(options){ this.eventChannel=this.getOpenerEventChannel() this.eventChannel.on("detail", e=>{ this.agrDetail=e this.init() }) }, methods:{ async init(){ var res=await request("/api/plantFarming/getSpecification",{ params:{ goodsId: this.agrDetail.goodsId, baseId: this.$store.state.baseInfo.id, } }) if(res.statu){ this.$provise.emit("forming_agr", list=>{ this.specs.list=res.data.map(v=>{ v.number-=list.reduce((a,b)=>a+(b.inventoryId==v.id?b.inputQuantity:0),0) return v }).filter(v=>v.number>0) }) this.specs.tip=res.data.inventory }else{ uni.showModal({ title:"提示", content:res.msg||"获取规格选项失败!", showCancel:false, }) } }, select(e){ this.formData.specificationId=e.specId this.formData.inventoryId=e.id this.formData.number=e.number this.formData.specDescribe=e.specDescribe }, check(){ if(!this.formData.specificationId){ uni.showToast({title:"规格必选!",icon:"none"}) return false }else if(!(this.formData.inputQuantity>0)){ uni.showToast({title:"投入数量必填!",icon:"none"}) return false }else if(this.formData.inputQuantity>this.formData.number){ uni.showToast({title:`投入数量不能大于剩余数量${this.formData.number}!`,icon:"none"}) return false } return true }, submit(){ if(this.check()){ this.eventChannel.emit("update", { ...this.formData, specs:this.specsVal.specs, goodsType: this.agrDetail.goodsType, substanceName: this.agrDetail.substanceName, }) uni.navigateBack() } }, } } </script>