aiot-app/pages/production/order/detail.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="title"
      @clickLeft="back"
    >
    </uni-nav-bar>
	
	<progressBox :list="tabList"/>
    <view class="view-container">
      <DetailView
        :baseInfo="baseInfo.conventionalStockTransferReq"
        :list="baseInfo.detailReqList"
		:showTab="showTab"
      />
    </view>
    <view
      class="footer"
      v-if="baseInfo.conventionalStockTransferReq.auditStatus === 1"
    >
      <div class="footer-content">
		  <div class="content-top" @click="changeTab">
			  <image :style="showTab?'transform: rotate(180deg)':''" src="~@/static/product/upp.svg"></image>
		  </div>
		  <div class="content-list" v-if="showTab">
			  <div class="list-item" v-for="(item,index) in footerList" :key="index" @click="toNav(item.link_url)">
				  <image :src="`../../../static/product/${item.icon}`"></image>
				  <div class="name">{{item.name}}</div>
			  </div>
		  </div>
	  </div>
    </view>
  </view>
</template>

<script>
import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
import DetailView from './components/DetailView.vue'
import progressBox from './components/progressBox.vue'
import { post, postJ, get, getJ } from '@/utils/api.js'
export default {
  components: { DetailView, baTreePicker , progressBox },
  data () {
    return {
      activeName: 1,
      baseInfo: {
        conventionalStockTransferReq: {}
      },
      deptList: [],
      userList: [],
      loading: false,
	  title:'挤压成型',
	  tabList:[
		  {name:'挤压成型'},
		  {name:'自然干燥'},
		  {name:'升温干燥'},
		  {name:'半加定长'}
	  ],
	  footerList:[
		  {icon:'icon0.png',name:'准备',link_url: '/pages/production/order/prepare/preparation'},
		  {icon:'icon1.png',name:'投料'},
		  {icon:'icon2.png',name:'报工'},
	  ],
	  showTab:false
    }
  },
  onLoad ({ id }) {
    if (id) {
      this._getDetail(id)
    }
  },
  methods: {
	changeTab(){
		this.showTab = !this.showTab
	},
	toNav (url) {
		if(url){
			uni.navigateTo({
			  url: url
			})
		}
	},  
	  
	  
    async handleDraft () {
      const params = {
        handleResult: 3,
        handleStatus: 0,
        bizId: this.baseInfo.conventionalStockTransferReq.id
      }
      const res = await postJ(
        this.apiUrl + `/conventionalStockTransfer/changeStatus`,
        params
      )
      if (res?.success) {
        uni.showToast({
          title: '撤回成功!',
          icon: 'none'
        })

        uni.navigateBack({
          delta: 1
        })
      }
    },
    handleReCommit () {
      uni.navigateTo({
        url:
          '/pages/warehouse/inventoryAllocation/edit?id=' +
          this.baseInfo.conventionalStockTransferReq.id
      })
    },
    async _getDetail (id) {
      const res = await get(
        this.apiUrl +
          `/conventionalStockTransfer/details/conventionalStockTransfer/${id}`
      )
      if (res?.success) {
        res.data.stockTransferInfoList.forEach(item => {
          item.batchNum = item.batchNo
        })
        this.baseInfo.conventionalStockTransferReq =
          res.data.conventionalStockTransfer
        this.baseInfo.detailReqList = res.data.stockTransferInfoList

        console.log(this.baseInfo, '222')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  position: fixed;
  width: 100vw;
  background-color: rgba(242, 242, 242, 0.792156862745098);
  padding-top: 20rpx;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20rpx;

  .tab-item {
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &.active {
      background: linear-gradient(
        180deg,
        rgba(75, 121, 2, 1) 0%,
        rgba(255, 255, 255, 1) 12%
      );
    }
  }
}
.view-container {
  // padding-bottom: 200rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  left: 0;
  background: #fff;
  .footer-content{
	  width: 100%;
	  .content-top{
		  width: 100%;
		  height: 40rpx;
		  background: #157a2c;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  image{
			  width: 20rpx;
			  height: 20rpx;
		  }
	  }
	  .content-list{
		  display: flex;
		  align-items: center;
		  justify-content: flex-start;
		  // flex-wrap: wrap;
		  margin: 20px 0;
		  .list-item{
			  width: 200rpx;
			  height: 160rpx;
			  border: 1rpx solid #157a2c;
			  border-radius: 10rpx;
			  margin: 0 24rpx;
			  image{
				  width: 90rpx;
				  height: 90rpx;
				  display: block;
				  margin: 15rpx auto;
			  }
			  .name{
				  width: 100%;
				  text-align: center;
				  color: #157a2c;
			  }
		  }
	  }
  }
}
</style>