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

<template>
  <view class="content">
    <navBar> 入库 </navBar>
    <view class="container-box">
      <span style="font-weight: bold"> 已扫画筒号：{{ state.pid }} </span>
      <span style="margin-top: 40rpx"> 请放入： </span>
      <view class="painting-box">
        <span style="font-weight: bold; text-align: center"
          >{{ state.containerName }}货架</span
        >
        <up-line style="margin-top: 20rpx"></up-line>
        <span
          style="
            color: #cf3050;
            font-size: 24px;
            text-align: center;
            margin-top: 20rpx;
          "
        >
          {{state.boxName}}
        </span>
        <span style="text-align: center; margin-top: 20rpx"> A列1行 </span>
      </view>
    </view>
  </view>
  <view class="button-container">
    <up-button
      style="width: 326rpx; margin: auto; height: 80rpx"
      color="#BCBCBC"
      throttleTime="5"
      :loading="loading"
      >取消</up-button
    >
    <up-button
      style="width: 326rpx; margin: auto; height: 80rpx"
      color="#EFC54E"
      throttleTime="5"
      :loading="loading"
      >确认</up-button
    >
  </view>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import useToast from "@/hooks/toast/useToast.js";
import { onLoad } from "@dcloudio/uni-app";
import { freebox } from "@/api/login.js";
const { showMessage } = useToast();
const loading = ref(false);
const state = reactive({
  id: "",
  pid: "",
  containerName: "",
  boxName:"",
});
onLoad((options) => {

  state.id = options.id;
  state.pid = options.pid;
  bindShelfHole();
});


const bindShelfHole = async () => {
  loading.value = true;
  
  const res = await freebox();
  if (res.status === 0) {
    state.containerName = res.data.containerName;
    state.boxName = res.data.boxName;
  }
  
  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: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(219, 218, 218, 0.5);
  }
}
.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  bottom: 20rpx;
  left: 0;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  height: 8%;
}
</style>