jonhon-mes-PDA/pages/logistics/delivery.vue

<template>
  <ifrm>
    <uni-forms ref="wrForm" class="formBox" label-position="top">
      <uni-forms-item label="物料箱条码：" label-width="100px">
        <view class="bottom-input-row">
          <view class="weight-input-wrapper">
            <view class="input-box">
              <input
                type="text"
                v-model="boxCode"
                @confirm="handleBoxConfirm"
                placeholder="物料箱条码"
                class="uni-input-border"
                confirm-type="done"
                :focus="boxInputFocus"
              />
            </view>
          </view>
          <button
            @click="handleSubmit"
            :disabled="!boxData || !startData || !endCenter"
            class="submit-btn"
            :class="{ 'btn-disabled': !boxData || !startData || !endCenter }"
          >
            配送
          </button>
        </view>
        <view v-if="boxData" class="box-info">
          <view class="info-section">
            <text class="info-text">
              包含订单:
              <text class="info-value">{{ boxData.quantity }}</text> 单
            </text>
            <text class="info-text">
              对应中心:
              <text class="info-value-center">{{ boxData.wcName }}</text>
            </text>
          </view>
          <button @click="detailsFn()" class="details-btn">
            明细 <text class="arrow">›</text>
          </button>
        </view>
      </uni-forms-item>
      <uni-forms-item label="配送起点：" label-width="100px">
        <input
          type="text"
          v-model="startCode"
          @confirm="handleStartConfirm"
          placeholder="站点码"
          class="uni-input-border"
          confirm-type="done"
          :focus="startInputFocus"
        />
        <view v-if="startData" class="start-confirm">
          <text class="check-icon">✓</text>
          <text class="confirm-text">已确认: {{ startData.stationName }}</text>
        </view>
      </uni-forms-item>
      <uni-forms-item label="终点(作业中心)：" label-width="150px">
        <picker
          mode="selector"
          :range="workCenters"
          range-key="name"
          :value="endCenterIndex"
          @change="handleEndChange"
          :disabled="!boxData"
          class="uni-input-border"
        >
          <view class="picker-input" :class="{ 'picker-disabled': !boxData }">
            <text :class="endCenter ? 'picker-value' : 'picker-placeholder'">
              {{ endCenter || "请选择终点" }}
            </text>
          </view>
        </picker>
      </uni-forms-item>
    </uni-forms>

    <view v-if="showDetails" class="popup-overlay" @click="showDetails = false">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <text class="popup-title"
            >箱 {{ boxData.boxBarcode }} 明细</text
          >
        </view>
        <scroll-view class="popup-scroll" scroll-y>
          <view class="popup-orders">
            <view
              v-for="(order,index) in yieldOrderList"
              :key="index"
              class="popup-order-item"
            >
              <view class="popup-order-header">
                <text class="popup-order-no">{{ order.partCode }}</text>
                <text class="popup-order-qty">{{ order.actualWeighing }}g</text>
              </view>
              <text class="popup-order-name">{{ order.partName }}</text>
            </view>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <button @click="showDetails = false" class="popup-close-btn">
            关闭
          </button>
        </view>
      </view>
    </view>
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";

export default {
  components: {
    ifrm,
  },
  data() {
    return {
      boxCode: "",
      startCode: "",
      boxData: null,
      startData: null,
      endCenter: "",
      showDetails: false,
      boxInputFocus: true,
      startInputFocus: false,
      mockBoxes: {},
      mockStarts: {
        ST001: { stationCode: "ST001", stationName: "镀前总仓区" },
        ST002: { stationCode: "ST002", stationName: "A区暂存点" },
      },
      workCenters: [],
      yieldOrderList:[],//订单明细
    };
  },
  computed: {
    endCenterIndex() {
      if (!this.endCenter) return 0;

      const index = this.workCenters.find((c) => c.name === this.endCenter);
      console.log(9999, this.endCenter, index.id);
      return index.id;
    },
  },
  mounted() {
    this.getWorkCenterList();
  },
  methods: {
    // 获取订单明细
    detailsFn(){
      this.showDetails = true;
      this.$u.api.boxbarcodeDetails({boxBarcode:this.boxData.boxBarcode}).then(res=>{
        console.log(9999,res.data)
        this.yieldOrderList = res.data.yieldOrderList

      })
    },
    handleBoxConfirm() {
      const code = this.boxCode.trim();
      if (!code) return;
      this.$u.api
        .getQuantityLocation({ boxBarcode: this.boxCode })
        .then((res) => {
          this.boxData = res.data;
          this.boxInputFocus = false;
          this.startInputFocus = true;
          // this.endCenter = "";
          // this.boxCode = "";
        });
      // const data = this.mockBoxes[code];
      // if (data) {
      //   this.boxData = data;
      //   this.endCenter = data.targetWorkCenter;
      //   uni.showToast({
      //     title: `已识别物料箱 ${code}`,
      //     icon: "success",
      //   });
      // this.boxInputFocus = false;
      // this.startInputFocus = true;
      // } else {
      //   uni.showToast({
      //     title: "未查询到该物料箱信息",
      //     icon: "none",
      //   });
      // this.boxData = null;
      // this.endCenter = "";
      // this.boxCode = "";
      // }
    },

    handleStartConfirm() {
      const code = this.startCode.trim();
      if (!code) return;
      this.$u.api
        .getStationName({ stationCode: this.startCode })
        .then((res) => {
          console.log("起点站点", res.data);
          this.startData = res.data;
          this.startInputFocus = false;
        });
    },

    handleEndChange(e) {
      const index = e.detail.value;
      this.endCenter = this.workCenters[index].name;
    },

    // 获取作业中心列表
    getWorkCenterList() {
      this.$u.api.getWorkCenter().then((res) => {
        console.log(res.data);
        this.workCenters = res.data.map((c) => ({
          id: c.id,
          name: c.wcName,
        }));
      });
    },

    handleSubmit() {
      let query_ = {
        boxBarcode: this.boxData.boxBarcode, //箱条码
        startStationCode: this.startData.stationCode, //开始站点
        endWcId: this.endCenterIndex, //终点作业中心
      };
      this.$u.api.boxBindingTesk(query_).then((res) => {
        console.log(89898989898, res.data);
        uni.showToast({
          title: `成功配送至 ${this.endCenter}!`,
          icon: "success",
        });

        this.boxCode = "";
        this.boxData = null;
        this.startCode = "";
        this.startData = null;
        this.endCenter = "";
        this.boxInputFocus = true;
        this.startInputFocus = false;
      });
      
    },
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
  user-select: none;
  font-size: 26rpx;
  position: relative;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rpx 16rpx;
  background-color: #1d4ed8;
  color: #ffffff;
  flex-shrink: 0;
  z-index: 20;
}

.header-title {
  font-weight: bold;
  font-size: 28rpx;
  letter-spacing: 1rpx;
}

.content-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.module {
  padding: 16rpx;
  border-bottom: 4rpx solid #e2e8f0;
}

.module-header {
  display: flex;
  align-items: center;
  color: #1e293b;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.module-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.module-title {
  font-size: 26rpx;
}

.scan-input {
  width: 100%;
  padding: 16rpx;
  background-color: #ffffff;
  border: 4rpx solid #94a3b8;
  border-radius: 4rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #0f172a;
}

.scan-input::placeholder {
  color: #94a3b8;
  font-weight: normal;
}

.box-info {
  margin-top: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8fafc;
  padding: 12rpx;
  border-radius: 4rpx;
  border: 2rpx solid #e2e8f0;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  flex: 1;
}

.info-text {
  color: #475569;
  font-size: 26rpx;
}

.info-value {
  font-weight: bold;
  color: #0f172a;
  margin-left: 4rpx;
}

.info-value-center {
  font-weight: bold;
  color: #1d4ed8;
  margin-left: 4rpx;
}

.details-btn {
  color: #1d4ed8;
  background-color: #dbeafe;
  font-weight: bold;
  border: 2rpx solid #bfdbfe;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

.details-btn:active {
  background-color: #bfdbfe;
}

.arrow {
  margin-left: 4rpx;
  font-size: 24rpx;
}

.start-confirm {
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #059669;
}

.check-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}

.confirm-text {
  font-size: 26rpx;
}

.picker-input {
  width: 100%;
  padding: 16rpx;
}

.picker-disabled {
  opacity: 0.5;
}

.picker-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #0f172a;
}

.picker-placeholder {
  font-size: 28rpx;
  color: #94a3b8;
}

.footer {
  padding: 16rpx;
  background-color: #f1f5f9;
  border-top: 2rpx solid #cbd5e1;
  flex-shrink: 0;
}

.submit-btn {
  width: 100%;
  background-color: #1d4ed8;
  color: #ffffff;
  padding: 20rpx;
  border-radius: 4rpx;
  font-weight: bold;
  font-size: 30rpx;
  border: none;
}

.submit-btn:active {
  background-color: #1e40af;
}

.btn-disabled {
  opacity: 0.5;
  background-color: rgba(29, 78, 216, 0.5);
}

/* Popup Styles */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
}

.popup-content {
  background-color: #ffffff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 70vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 4rpx solid #94a3b8;
}

.popup-header {
  padding: 24rpx;
  background-color: #ffffff;
  border-bottom: 4rpx solid #e2e8f0;
  flex-shrink: 0;
  text-align: center;
}

.popup-title {
  font-weight: bold;
  font-size: 30rpx;
  color: #0f172a;
  text-align: center;
}

.popup-scroll {
  flex: 1;
  padding: 24rpx;
  overflow-y: auto;
  width: auto;
}

.popup-orders {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.popup-order-item {
  background-color: #f8fafc;
  padding: 16rpx;
  border: 2rpx solid #cbd5e1;
  border-radius: 4rpx;
}

.popup-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.popup-order-no {
  font-weight: bold;
  color: #0f172a;
  font-size: 26rpx;
}

.popup-order-qty {
  color: #1d4ed8;
  font-weight: bold;
  font-size: 26rpx;
}

.popup-order-name {
  color: #475569;
  font-size: 24rpx;
}

.popup-footer {
  padding: 16rpx;
  background-color: #f1f5f9;
  border-top: 2rpx solid #cbd5e1;
  flex-shrink: 0;
}

.popup-close-btn {
  width: 100%;
  background-color: #ffffff;
  border: 4rpx solid #94a3b8;
  color: #1e293b;
  padding: 16rpx;
  border-radius: 4rpx;
  font-weight: bold;
  font-size: 28rpx;
}

.popup-close-btn:active {
  background-color: #e2e8f0;
}

.help-tip {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0.5;
  z-index: 10;
}

.tip-content {
  background-color: #1e293b;
  color: #ffffff;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
}

.tip-icon {
  margin-right: 8rpx;
  font-size: 24rpx;
}

.tip-text {
  font-size: 20rpx;
}

.bottom-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.weight-input-wrapper {
  flex: 1;
}

.submit-btn {
  width: 88px;
  height: 50px;
  background-color: #155dfc;
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 0;
  line-height: 50px;
}

.submit-btn.disabled {
  opacity: 0.5;
}
</style>