aiot-app/pages/production/order/prepare/comfirm.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="领料清单确认"
      @clickLeft="back"
    >
    </uni-nav-bar>
	<uni-forms class="list">
		<div class="list-wrap" v-for="(item,index) in pageData" :key="index">
			<div class="list-title">{{item.name}}</div>
			<div class="list-item" v-for="(ite,ind) in item.list" :key="ind">
				<div class="item-title">
					<div>W3004536  <span>混炼料-A</span></div>
				</div>
				<div class="item-content" v-if="ind==0">
					<div class="content-line">
						<span>牌号</span><p>YL10.2</p>
					</div>
					<div class="content-line">
						<span>数量</span><p>500KG</p>
					</div>
				</div>
				<div class="item-content" v-else>
					<div class="content-line">
						<span>规格</span><p>8层*3格</p>
					</div>
					<div class="content-line">
						<span>型号</span><p>KT22-3</p>
					</div>
					<div class="content-line">
						<span>长宽高</span><p>200*300*15</p>
					</div>
					<div class="content-line">
						<span>数量</span><p>5台</p>
					</div>
				</div>
			</div>
		</div>
	</uni-forms>
	<div class="footer" @click="submit">
		一键报工
	</div>
	



  </view>
</template>

<script>
import { post, postJ, get, getJ } from '@/utils/api.js'
export default {
  data () {
    return {
		title:'挤压成型',
		pageData:[
			{id:0, name:'原料1仓',list:[{id:3}]},
			{id:1, name:'周转车1仓',list:[{id:4},{id:6}]},
			{id:2, name:'周转车2仓',list:[{id:5},{id:7}]},
		],
    }
  },
  onLoad ({ id }) {
    if (id) {
      // this._getDetail(id)
    }
  },
  methods: {	  
	  submit(){
		  uni.showModal({
		  		title: '提醒',
		  		content: '是否确定要报工?',
		  		success: function(res) {
		  		if (res.confirm) {
					uni.navigateTo({
						url:'/pages/production/order/detail'
					})
		  		} 
		  		else {
		  		}
		  	}
		  })
	  }
	  
	  
  }
}
</script>

<style lang="scss" scoped>
  .list{
	  width: 100%;
	  margin: 0 auto;
	  padding: 0 0 100rpx;
	  .list-wrap{
		  width: 100%;
		  margin: 20rpx auto;
		  .list-title{
			  width: 100%;
			  line-height: 80rpx;
			  text-align: center;
			  border-bottom: 2rpx solid #ccc;
			  font-weight: bold;
		  }
		  .list-item{
			  width: 92%;
			  margin: 20rpx auto;
			  .item-title{
				  padding: 0 12rpx;
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  font-size: 30rpx;
				  color: #000;
				  height: 80rpx;
				  line-height: 80rpx;
				  span{
					  margin-left: 15rpx;
				  }
			  }
			  .item-content{
				  border: 1rpx solid #ccc;
				  .content-line{
					  padding: 0 12rpx;
					  border-bottom: 1rpx solid #ccc;
					  display: flex;
					  align-items: center;
					  justify-content: flex-start;
					  height: 80rpx;
					  line-height: 80rpx;
					  span{
						 width: 120rpx;
						 text-align: right;
						 color: rgb(127, 127, 127);
						  margin-right: 20rpx;
					  }
					  p{
						 color: #333333; 
						 display: flex;
						 align-items: center;
						 justify-content: flex-start;
					  }
				  }
				  .content-line:last-child{
					  border-bottom: none;
				  }
			  }
		  }
	  }
  }
  .footer{
	  width: 100%;
	  height: 90rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  font-size: 34rpx;
	  color: #fff;
	  background: #4B7902;
  }
</style>