store-management-app/src/pages/detail/index.vue

<template>
    <view class="content">
      <navBar v-if="state.boxRelBucketStatus == 1"> 出库 </navBar>
      <navBar v-if="state.boxRelBucketStatus == 2||state.boxRelBucketStatus ==4"> 画筒详情 </navBar>
      <view class="container-box" >
        <span style="font-weight: bold;text-align: center;" v-if="state.boxRelBucketStatus == 1">
            确定要出库{{state.locateAddress}}的 
        </span>
        <span style="font-weight: bold;text-align: center;margin-top: 20rpx;" v-if="state.boxRelBucketStatus == 1"> {{state.pid}}画筒吗？</span>
        <span style="font-weight: bold;text-align: center;" v-if="state.boxRelBucketStatus == 2||state.boxRelBucketStatus ==4">画筒号：{{state.pid}}</span>
        <span style="font-weight: bold;text-align: center;margin-top: 20rpx;" v-if="state.boxRelBucketStatus == 2||state.boxRelBucketStatus ==4">所在位置：{{ state.locateAddress }}</span>
        <view class="painting-box" >
          <span>画作名称：{{ state.drawName }}</span>
          <span style="margin-top: 20rpx;">画家：{{ state.drawerName }}</span>
          <span style="margin-top: 20rpx;">预览图：</span>
          <view class="image-container">
          <up-image
            :src=state.drawThumbnail
          ></up-image>
        </view>
        </view>
      
      </view>
    </view>
    <view class="button-container">
      <up-button
      style="width: 336rpx; margin: auto; height: 80rpx"
      color="#BABABA"
      throttleTime="5"
      v-if="state.boxRelBucketStatus == 1"
      >取消</up-button
    >
        <up-button
          style="width: 336rpx; margin: auto; height: 80rpx;"
          color="#EFC54E"
          throttleTime="5"
          @click="doneSet"
          v-if="state.boxRelBucketStatus == 1"
          :disabled="isButtonDisabled"
          > {{ buttonText }}</up-button
        >
        <up-button
        style="width: 426rpx; margin: auto; height: 86rpx;"
        color="#EFC54E"
        throttleTime="5"
        @click="login"
        v-if="state.boxRelBucketStatus == 2||state.boxRelBucketStatus ==4"
        >返回继续扫码</up-button
      >
      </view>
  </template>
  
  
  <script setup>
  import { ref,reactive,onBeforeMount } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import useToast from "@/hooks/toast/useToast.js";
  import { pbDetail,outbound } from "@/api/login.js";
  const { showMessage } = useToast();
  const isDetail = ref(false);
  const loading = ref(false);
  const isButtonDisabled = ref(false);
  const buttonText = ref("确认");
  const state = reactive({
  id: "",
  pid: "",
  containerName:"",
  boxRelBucketStatus:"",
  drawName:"",
  drawerName:"",
  drawThumbnail:"",
  locateAddress:"",
  boxUid:"",
});
  onLoad((options) =>{
    state.id = options.id;
    state.pid = options.pid;
    state.boxRelBucketStatus = options.boxRelBucketStatus;
    paintingDetail()
  });
  const paintingDetail = async () => {
  loading.value = true;
  const res = await pbDetail({
    id: state.id,
    pid: state.pid,
  });
  if (res.status === 0) {
    state.drawName = res.data.drawName;
    state.drawerName = res.data.drawerName;
    state.drawThumbnail = res.data.drawThumbnail;
    state.locateAddress = res.data.locateAddress;
    state.boxUid = res.data.boxUid;
    }

};
const doneSet = async () => {
  loading.value = true;
  const res = await outbound({
    id: state.id,
    pid: state.pid,
    boxUid:state.boxUid,
  });
  if (res.status === 0) {
    showMessage({ type: "sucess", message: "出库成功" });
    isButtonDisabled.value = true; 
    buttonText.value = "已出库";
    }else{
    showMessage({ type: "error", message: res.msg });
    }
    loading.value = false;
};
  </script>
  
  <style lang="scss" scoped>
  page {
    background: url("@/static/bgp.png") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    height: 100vh;
    box-sizing: border-box;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    .container-box {
      height: 100%;
      width: 98%;
      display: flex;
      flex-direction: column;
      margin-top: 60rpx;
      padding: 40rpx;
      box-sizing: border-box;

    }
  
  
    .painting-box {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 60rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 0 0 6px rgba(219, 218, 218, 0.5);
    }
    .image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      height:auto;
    }
  }
  .button-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: fixed;
      bottom: 1rpx;
      left: 0;
      padding: 0 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      height: 8%;
    }
  </style>