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 { 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;
};
</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>