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">
          {{ state.column }}列{{ state.row }}行
        </span>
      </view>
    </view>
  </view>
  <view class="button-container">
    <up-button
      style="width: 336rpx; margin: auto; height: 80rpx"
      color="#BABABA"
      throttleTime="5"
      :disabled="closeButton"
      @click="closeFn"
      :loading="loading"
      >取消</up-button
    >
    <up-button
      style="width: 336rpx; margin: auto; height: 80rpx"
      color="#EFC54E"
      throttleTime="5"
      @click="doneSet"
      :disabled="isButtonDisabled"
      :loading="loading"
      >{{ buttonText }}</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, bind, check_freebox, cancel } from "@/api/login.js";
import { closeWebview, runTimeEnv } from "../../../utils/index";
const { showMessage } = useToast();
const loading = ref(false);
const isButtonDisabled = ref(false);
const closeButton = ref(false);
const buttonText = ref("确认");
const state = reactive({
  id: "",
  pid: "",
  containerName: "",
  boxName: "",
  boxUid: "",
  containerUid: "",
});
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;
    state.containerUid = res.data.containerUid;
    state.boxUid = res.data.boxUid;
    check();
    if (state.boxName) {
      const parts = state.boxName.split(/(\d+)/);
      state.column = parts[0]; // 字母部分
      state.row = parts[1]; // 数字部分
    }
  }
  loading.value = false;
};
//入库
const doneSet = async () => {
  loading.value = true;
  const res = await bind({
    paintingBucketId: state.id,
    paintingBucketUid: state.pid,
    boxUid: state.boxUid,
    containerUid: state.containerUid,
    containerName: state.containerName,
    boxName: state.boxName,
  });
  if (res.status === 0) {
    showMessage({ type: "sucess", message: "入库成功" });
    isButtonDisabled.value = true;
    buttonText.value = "已入库";
    closeWebview();
  } else {
    showMessage({ type: "error", message: res.msg });
  }
  loading.value = false;
};
//入库取消
const closeFn = async () => {
  loading.value = true;
  const res = await cancel({
    boxUid: state.boxUid,
  });
  if (res.status === 0) {
    showMessage({ type: "error", message: "取消入库" });
    closeButton.value = true;
    isButtonDisabled.value = true;
    closeWebview();
  } else {
    showMessage({ type: "error", message: res.msg });
  }
  loading.value = false;
};
//查孔洞是否能用
const check = async () => {
  const res = await check_freebox({
    boxUid: state.boxUid,
  });
  if (res.status === 0) {
  } else {
    showMessage({ type: "error", message: res.msg });
  }
};
</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: 1rpx;
  left: 0;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  height: 8%;
}
</style>