shenze-sysMan/src/views/device/jam/index.vue

<template>
    <div class="payment-settings">
      <s-header :name="$t('remote.C30')" :noback="false" />
  
      <!-- 设备名称标题 -->
      <div class="device-header">
        <div class="vertical-indicator"></div>
        <h3 class="device-name">
          {{ $t("device.equipmentName") }}：{{ deviceName }}
        </h3>
      </div>
  
      <!-- 果酱抽取卡片 -->
      <div class="settings-card">
        <div v-for="jam in jams" :key="jam.id" class="jam-item">
          <!-- 图片和名称行 -->
          <div class="jam-main-row">
            <van-image
              :src="showSugerPhoto(jam)"
              width="70"
              height="70"
              radius="8"
              fit="cover"
              class="jam-image"
            />
            <h3 class="jam-title">{{ jam.name }}</h3>
          </div>
          <!-- 操作按钮组 -->
          <div class="jam-actions">
            <van-button
              type="primary"
              size="small"
              class="action-btn"
              @click="handleExtract(jam.no, 1)"
            >
              {{ $t("jam.forward") }}
            </van-button>
            <van-button
              type="warning"
              size="small"
              class="action-btn"
              @click="handleExtract(jam.no, 2)"
            >
              {{ $t("jam.reverse") }}
            </van-button>
            <van-button
              type="danger"
              size="small"
              class="action-btn"
              @click="handleExtract(jam.no, 0)"
            >
              {{ $t("jam.stop") }}
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import sHeader from "@/components/SimpleHeader";
  import { selectProducts, smokeJam } from "@/service/device/index";
  import { useRoute } from "vue-router";
  import { ref } from "vue";
  import { useI18n } from "vue-i18n";
  import { onMounted } from "vue";
  import { showConfirmDialog, showFailToast, showSuccessToast } from "vant";
  
  export default {
    components: { sHeader },
    setup() {
      const { t } = useI18n();
      const route = useRoute();
      const deviceId = ref(route.query.deviceId);
      const deviceName = ref(route.query.name);
      const jams = ref([]);
  
      // 获取商品列表
      const getList = () => {
        selectProducts({
          equipmentId: deviceId.value,
        }).then((res) => {
          const { data } = res.data;
          if (data) {
            data.forEach((item) => {
              if (item.no.includes("J")) {
                jams.value.push(item);
              }
            });
          }
        });
      };
  
      // 商品图片路径处理
      const showSugerPhoto = (row) => {
        let imgId = row.no;
        if (imgId) {
          return require(`../../../assets/order/spunSugar/goods/${imgId}.png`);
        }
        return imgId;
      };
  
      // 果酱抽取
      const handleExtract = (no, status) => {
        showConfirmDialog({
          title: t("device.operationConfirmation"),
          message: t("device.pleaseConfirmAgainWhetherToOperate"),
        })
          .then(async () => {
            const { data } = await smokeJam({
              equipmentId: deviceId.value,
              productNo: no,
              status: status,
            });
            if (data.code === "00000") {
              showSuccessToast(t("device.Succeed"));
            } else {
              showFailToast(t("device.Failed"));
            }
          })
          .catch(() => {
            // on cancel
            showFailToast(t("device.Failed"));
          });
      };
  
      onMounted(async () => {
        getList();
      });
  
      return {
        deviceName,
        showSugerPhoto,
        handleExtract,
        jams,
      };
    },
  };
  </script>
  
  <style lang="less" scoped>
  @primary-color: #4dc294;
  @warning-color: #ff976a;
  @danger-color: #ee0a24;
  .payment-settings {
    --payment-bg: #ffffff;
    --border-color: #ebedf0;
    --active-color: #2c87c8;
    --text-primary: #323233;
    --text-secondary: #969799;
  
    background: #f7f8fa;
    min-height: 100vh;
  
    .device-header {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      background: #fff;
      margin: 12px 16px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
      .vertical-indicator {
        width: 4px;
        height: 15px;
        background: var(--active-color, #2c87c8);
        border-radius: 2px;
        margin-right: 10px;
      }
  
      .device-name {
        margin: 0;
        font-size: 15px;
        color: #404d74;
        font-weight: 550;
  
        // 长名称处理
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 70vw;
      }
    }
  
    .settings-card {
      padding: 16px;
      margin: 12px 16px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }
  
    .jam-item {
      padding: 16px 0;
      border-bottom: 1px solid #f5f5f5;
  
      &:last-child {
        border-bottom: none;
      }
    }
  
    .jam-main-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }
  
    .jam-image {
      border: 1px solid #eee;
      flex-shrink: 0;
    }
  
    .jam-title {
      font-size: 16px;
      color: #333;
      word-break: break-word;
      line-height: 1.4;
    }
  
    .jam-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
  
      .action-btn {
        min-width: 80px;
        border-radius: 20px;
        font-size: 13px;
        padding: 8px 16px;
  
        &--primary {
          background: @primary-color;
          border-color: @primary-color;
        }
  
        &--warning {
          background: @warning-color;
          border-color: @warning-color;
        }
  
        &--danger {
          background: @danger-color;
          border-color: @danger-color;
        }
      }
    }
  
    @media (max-width: 480px) {
      .jam-main-row {
        gap: 12px;
      }
  
      .jam-image {
        width: 50px;
        height: 50px;
      }
  
      .jam-title {
        font-size: 14px;
      }
  
      .jam-actions {
        gap: 8px;
  
        .action-btn {
          min-width: 70px;
          font-size: 12px;
          padding: 6px 12px;
        }
      }
    }
  }
  </style>