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"
      @click="backScan"
      >取消</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="backScan"
      v-if="state.boxRelBucketStatus == 2 || state.boxRelBucketStatus == 4"
      >返回继续扫码</up-button
    >
  </view>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import { closeWebview, runTimeEnv } from "../../../utils/index.js";

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;
};
const backScan = () => {
  closeWebview();
};
</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>